agentscript
Version:
AgentScript Model in Model/View architecture
149 lines (131 loc) • 4.81 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>CountyWalker0</title>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css">
<link rel="stylesheet" href="./fullScreen.css">
</head>
<body>
<div id="map"></div>
<script type="module">
import MapDraw from '../src/MapDraw.js'
import Animator from '../src/Animator.js'
import Model from '../models/CountiesModel.js'
import maplibregl from 'https://cdn.skypack.dev/maplibre-gl'
// Use default model options: { bbox: nmcounties.json, patchesWidth: 100 }
// where nmcounties.json is fetched in CountiesModel.js
const model = new Model()
await model.startup()
model.setup()
// MapDraw has default patchesColor & div as commented out below
const view = new MapDraw(model, {
// div: util.createCanvas(0, 0), // default & the view will resize
drawOptions: {
// patchesColor: 'transparent', // default in MapDraw
linksColor: 'gray',
linksWidth: 4,
turtlesSize: 6,
turtlesColor: t => view.drawOptions.turtlesMap.atIndex(t.county + 1),
},
})
// ===== Start of map & layers
const map = new maplibregl.Map({
container: 'map', // container id
center: model.world.bboxCenter(), // [-105.941109, 35.68222],
zoom: 5,
style: {
"version": 8,
sources: {},
layers: []
},
})
map.on('load', function () {
map.addSource('osm', {
type: 'raster',
tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
tileSize: 256,
maxzoom: 19,
attribution: '© OpenStreetMap Contributors',
})
map.addLayer({
id: 'osm',
type: 'raster',
source: 'osm',
})
map.addSource('elevation', {
type: 'raster',
tiles: ['https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'],
tileSize: 256,
})
map.addLayer({
id: 'elevation',
type: 'raster',
source: 'elevation',
paint: { 'raster-opacity': 0.15 },
})
map.addSource('counties', {
type: 'geojson',
data: model.world.geojson,
})
map.addLayer({
id: 'counties',
type: 'fill',
source: 'counties',
paint: { 'fill-color': 'red', 'fill-opacity': 0.2 },
})
map.addLayer({
id: 'countiesLines',
type: 'line',
source: 'counties',
paint: { 'line-color': 'red', 'line-width': 3 },
})
map.addSource('countiesBBox', {
type: 'geojson',
data: model.world.bboxFeature(),
})
map.addLayer({
id: 'countiesBBox',
type: 'line',
source: 'countiesBBox',
paint: { 'line-color': 'blue' },
})
map.addSource('model', {
type: 'canvas',
canvas: view.canvas,
coordinates: model.world.bboxCoords(),
})
map.addLayer({
id: 'model',
type: 'raster',
source: 'model',
})
map.on('click', 'counties', function (e) {
const props = e.features[0].properties
const msg = props.NAME + ', pop: ' + props.population.toLocaleString()
new maplibregl.Popup({ maxWidth: 'none' })
.setLngLat(e.lngLat)
.setHTML(msg)
.addTo(map);
});
})
// ===== End of map & layers
new Animator(
() => {
model.step()
view.draw()
},
-1, // run forever
20 // 30 // 30 fps
)
// setTimeout(() => {
// alert(
// 'The same as countryWaleer.html but without the mapLibre helpers.' +
// '\nThis is useful for modelers wanting to use mapLibre directly.' +
// '\nThe 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'
// )
// }, 1000);
</script>
</body>
</html>