agentscript
Version:
AgentScript Model in Model/View architecture
168 lines (148 loc) • 5.05 kB
HTML
<!--
This is the same as countryWalker.html but without the
mltools.js helper library.
This is useful for modelers wanting to use mapLibre directly.
Maplibre docs: https://maplibre.org/maplibre-gl-js/docs/
-->
<html>
<head>
<title>CountyWalker0</title>
<link rel="stylesheet" href="https://esm.sh/maplibre-gl@3.4.0/dist/maplibre-gl.css">
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<!-- apparently maplibre requires "map" -->
<div id="map"></div>
<script type="module">
import * as util from '../src/utils.js'
import maplibregl from 'https://esm.sh/maplibre-gl@5.2.0'
import Model from '../models/CountiesModel.js'
import TwoDraw from '../src/MapDraw.js'
import Animator from '../src/Animator.js'
const model = new Model()
model.setup()
// The div "map" above is for the map, while the div in
// TwoDraw is for the model which runs on top of the map
const view = new TwoDraw(model, {
div: util.createCanvas(0, 0),
drawOptions: {
patchesColor: 'transparent',
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',
'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
'https://c.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('mouseenter', 'counties', () => {
map.getCanvas().style.cursor = 'pointer'
})
map.on('mouseleave', 'counties', () => {
map.getCanvas().style.cursor = ''
})
map.on('click', 'counties', function (e) {
const props = e.features[0].properties
const msg = // toLocaleString inserts commas 1234 => 1,234
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 // fps
)
</script>
</body>
</html>