agentscript
Version:
AgentScript Model in Model/View architecture
68 lines (51 loc) • 1.95 kB
HTML
<html>
<head>
<title>Model0 Hello</title>
</head>
<body>
<script type="module">
import * as gis from '../src/gis.js'
import * as mltools from './mltools.js'
import Animator from '../src/Animator.js'
import Model from '../models/HelloModel.js'
import MapDraw from '../src/MapDraw.js'
const bbox = gis.santaFeBBox
const worldOptions = { bbox: bbox, patchesWidth: 100 }
const model = new Model(worldOptions)
await model.startup()
model.setup()
const view = new MapDraw(model, {
// div: util.createCanvas(0, 0), // default & the view will resize
patchSize: 5,
drawOptions: {
// patchesColor: 'transparent', // default in MapDraw
turtlesSize: 4,
linksWidth: 0.2,
},
})
// ===== Start of map & layers
// terrain sources: osm topo topo1 smooth usgs
// elevation sources: mapzen maptiler redfishUSA redfishWorld mapbox
const terrain = gis.template('usgs')
const elevation = gis.elevationTemplate('mapzen')
const map = await mltools.newMap(bbox, 10)
mltools.addRasterLayer(map, 'terrain', terrain)
mltools.addRasterLayer(map, 'elevation', elevation, 0.2)
// Equivalent to:
// mltools.addGeojsonFillLayer(map, 'bbox', bbox, 'rgba(255, 0, 0, 0.2)')
// mltools.addGeojsonLineLayer(map, 'bboxLines', bbox, 'red', 3)
mltools.addGeojsonLayer(map, 'santaFe', bbox, 'rgba(255, 0, 0, 0.2)', 'red', 3)
mltools.addCanvasLayer(map, 'model', view.canvas, bbox)
// ===== End of map & layers
const anim = new Animator(
() => {
model.step()
view.draw()
},
500, // run 500 steps
30 // 30 fps
)
</script>
<div id="map"></div>
</body>
</html>