agentscript/maplibre/hello.html at master · backspaces/agentscript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<html>

<head>
    <title>Model Hello</title>
</head>

<body>
    <script type="module">
        import * as mltools from './mltools.js'

        import Model from '../models/HelloModel.js'
        import TwoDraw from '../src/TwoDraw.js'
        import Animator from '../src/Animator.js'

        const bbox = mltools.santaFeBBox
        const worldOptions = { bbox, patchesWidth: 100 }

        const model = new Model(worldOptions)
        model.setup()

        const view = new TwoDraw(model, {
            div: mltools.newCanvas(),
            patchSize: 20,
            drawOptions: {
                patchesColor: 'transparent',
                turtlesSize: 4,
                linksWidth: 0.2,
            },
        })

        // ===== Start of map & layers

        const terrain = mltools.terrain('osm')

        const map = await mltools.newMap(bbox, 10)

        mltools.addRasterLayer(map, 'terrain', terrain)

        mltools.addGeojsonLayer(map, 'rectangle', bbox, 'rgba(255, 0, 0, 0.2)', 'red', 3)

        mltools.addCanvasLayer(map, 'model', view.canvas, bbox)

        mltools.addLayerCursor(map, 'rectangle')

        // fcn args: fcn(bbox) where bbox is dragged rectangle in geo coords
        // const fcn = bbox => console.log(bbox)
        // const fcn = async bbox => {
        //     await modelView.setWorld({ bbox: bbox, patchesWidth: 100 })
        //     // modelView.run() // not needed, initial run steps is -1, forever
        //     mltools.updateGeojson(map, 'rectangle', bbox)
        //     mltools.updateCanvas(map, 'model', modelView.canvas, bbox)
        //     map.panTo(mltools.bboxCenter(bbox))
        // }
        // mltools.addDragRect(map, fcn)

        // ===== End of map & layers

        new Animator(
            () => {
                model.step()
                view.draw()
            },
            -1, // run forever
            30 // fps
        )

    </script>
    <div id="map"></div>
</body>

</html>