agentscript
Version:
AgentScript Model in Model/View architecture
84 lines (63 loc) • 2.5 kB
HTML
<!--
This uses a helper library, mltools, to make models simpler
than the maplibre core API.
See countryWalker0.html for a version with the
core maplibre library without mltools.
Maplibre docs: https://maplibre.org/maplibre-gl-js/docs/
-->
<html>
<head>
<title>CountyWalker</title>
</head>
<body>
<!-- apparently maplibre requires "map" -->
<div id="map"></div>
<script type="module">
import * as mltools from './mltools.js'
import Model from '../models/CountiesModel.js'
import TwoDraw from '../src/TwoDraw.js'
import Animator from '../src/Animator.js'
const model = new Model()
model.setup()
// The div "map" above is for the map, while the div in
// TwoDraw is for the model which runs on top of the map
const view = new TwoDraw(model, {
div: mltools.newCanvas(),
drawOptions: {
patchesColor: 'transparent',
linksColor: 'gray',
linksWidth: 4,
turtlesSize: 6,
turtlesColor: t => view.drawOptions.turtlesMap.atIndex(t.county + 1),
},
})
// ===== Start of map & layers
const world = model.world // use the model's world object below
const counties = world.geojson
const countiesBBox = world.bbox
const terrain = mltools.terrain('osm')
const elevation = mltools.elevation('mapzen')
const map = await mltools.newMap(world.bboxCenter(), 5)
// map.onLoad(...) // not needed, await above includes onload
mltools.addRasterLayer(map, 'osm', terrain)
mltools.addRasterLayer(map, 'elevation', elevation, 0.15)
mltools.addGeojsonLayer(map, 'counties', counties, 'rgba(255, 0, 0, 0.2)', 'red', 3)
mltools.addGeojsonLineLayer(map, 'countiesBBox', countiesBBox, 'blue')
mltools.addCanvasLayer(map, 'model', view.canvas, world.bboxCoords())
mltools.addLayerCursor(map, 'counties')
const msg = props => // toLocaleString inserts commas 1234 => 1,234
props.NAME + ', pop: ' + props.population.toLocaleString()
mltools.addLayerClickPopup(map, 'counties', msg)
// ===== End of map & layers
new Animator(
() => {
model.step()
view.draw()
},
-1, // run forever
20 // fps
)
</script>
</body>
</html>