agentscript
Version:
AgentScript Model in Model/View architecture
67 lines (53 loc) • 2.34 kB
HTML
<html>
<head>
<title>Droplets</title>
</head>
<body>
<script type="module">
// import * as util from '../src/utils.js'
import * as gis from '../src/gis.js'
import * as mltools from './mltools.js'
import Model from '../models/DropletsModel.js'
import MapDraw from '../src/MapDraw.js'
import RunModelView from '../src/RunModelView.js'
const bbox = gis.santaFeBBox
let zoom = 10 // int for computing usages, maplibre uses fractional zooms
const viewOptions = {
// div: util.createCanvas(0, 0), // default & the view will resize
patchSize: 2,
drawOptions: {
// patchesColor: 'transparent', // default in MapDraw
turtlesShape: 'square',
turtlesRotate: false,
turtlesSize: 0.8,
turtlesColor: 'blue',
},
}
const modelView = new RunModelView(Model, MapDraw, viewOptions)
const patchesWidth = 250
await modelView.setWorld({ bbox, patchesWidth }, zoom)
// ===== 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, zoom)
mltools.addRasterLayer(map, 'terrain', terrain)
mltools.addGeojsonLayer(map, 'bbox', bbox, 'transparent', 'red', 3)
mltools.addCanvasLayer(map, 'model', modelView.canvas, bbox)
// fcn args: fcn(bbox) where bbox is dragged rectangle in geo coords
// const fcn = bbox => console.log(bbox)
const dragFcn = async bbox => {
await modelView.setWorld({ bbox, patchesWidth }, mltools.getZoom(map))
// modelView.run() // not needed, initial run steps were -1, forever
mltools.updateGeojson(map, 'bbox', bbox)
mltools.updateCanvas(map, 'model', modelView.canvas, bbox)
// map.panTo(gis.bboxCenter(bbox))
}
mltools.addDragRect(map, dragFcn)
// ===== End of map & layers
modelView.run(-1, 10) // steps, fps. steps of -1 goes forever
</script>
<div id="map"></div>
</body>
</html>