agentscript
Version:
AgentScript Model in Model/View architecture
73 lines (61 loc) • 2.29 kB
HTML
<html>
<head>
<title>CountyWalker</title>
</head>
<body>
<div id="map"></div>
<script type="module">
import * as util from '../src/utils.js'
// import GeoWorld from '../src/GeoWorld.js'
import Animator from '../src/Animator.js'
import CountiesModel from '../models/CountiesModel.js'
import MapDraw from '../src/MapDraw.js'
import leafletInit from './leafletInit.js'
// If not using the default model options:
// const counties = await fetch('../models/data/nmcounties.json').then(resp => resp.json())
// const world = new GeoWorld({ bbox: counties, patchesWidth: 100 })
// const model = new CountiesModel(world)
const model = new CountiesModel() // default: { bbox: nmcounties.json, patchesWidth: 100 }
await model.startup()
model.setup()
const drawOptions = {
// patchesColor: 'transparent', // default in MapDraw
linksColor: 'gray',
linksWidth: 4,
turtlesSize: 6,
turtlesColor: t =>
view.drawOptions.turtlesMap.atIndex(t.county + 1),
}
const view = new MapDraw(model, {
// div: util.createCanvas(0, 0), // default & the view will resize
drawOptions,
})
// const params = await view.leafletInit({
const params = await leafletInit(model, view.canvas, {
Z: 7,
terrain: 'osm',
bboxBorder: { color: 'black', weight: 1, fill: false },
tilesBorder: 'solid green 2px',
json: model.world.geojson,
// default style parameters https://leafletjs.com/reference.html#path-option
jsonStyle: feature => ({
color: 'red',
}),
jsonPopup: layer =>
layer.feature.properties.NAME +
', pop: ' +
layer.feature.properties.population.toLocaleString(),
})
const anim = new Animator(
() => {
model.step()
view.draw()
},
-1, // 500, // run 500 steps
20 // 30 // 30 fps
)
util.toWindow({ model, view, params, util })
</script>
</body>
</html>