agentscript
Version:
AgentScript Model in Model/View architecture
71 lines (50 loc) • 2.32 kB
HTML
<html>
<head>
<title>CountyWalker</title>
</head>
<body>
<div id="map"></div>
<script type="module">
import * as gis from '../src/gis.js'
import * as mltools from './mltools.js'
import Model from '../models/CountiesModel.js'
import MapDraw from '../src/MapDraw.js'
import RunModelView from '../src/RunModelView.js'
const viewOptions = {
// div: util.createCanvas(0, 0), // default & the view will resize
drawOptions: {
// patchesColor: 'transparent', // default in MapDraw
linksColor: 'gray',
linksWidth: 4,
turtlesSize: 6,
turtlesColor: t => modelView.view.drawOptions.turtlesMap.atIndex(t.county + 1),
},
}
const modelView = new RunModelView(Model, MapDraw, viewOptions)
await modelView.setWorld() // use CountiesModel's default
// ===== Start of map & layers
const world = modelView.world // use the model's world object below
const counties = world.geojson
const countiesBBox = world.bbox
const terrain = gis.template('osm')
const elevation = gis.elevationTemplate('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', modelView.canvas, world.bboxCoords())
const msg = props => props.NAME + ', pop: ' + props.population.toLocaleString()
mltools.addLayerClickPopup(map, 'counties', msg, 'bottom-right')
// ===== End of map & layers
modelView.run(-1, 30) // steps, fps. steps of -1 goes forever
mltools.startupMessage(
'The random walkers change colors as they enter a new county' +
'\nClick on a county polygon to get it\'s name and population.' +
'\nYou can use the return key to remove this'
)
</script>
</body>
</html>