UNPKG

2.07 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>CountyWalker</title>
6</head>
7
8<body>
9 <div id="map"></div>
10
11 <script type="module">
12 import * as gis from '../src/gis.js'
13 import * as mltools from './mltools.js'
14
15 import Model from '../models/CountiesModel.js'
16 import MapDraw from '../src/MapDraw.js'
17 import RunModelView from '../src/RunModelView.js'
18
19 const viewOptions = {
20 // div: util.createCanvas(0, 0), // default & the view will resize
21 drawOptions: {
22 // patchesColor: 'transparent', // default in MapDraw
23 linksColor: 'gray',
24 linksWidth: 4,
25 turtlesSize: 6,
26 turtlesColor: t => modelView.view.drawOptions.turtlesMap.atIndex(t.county + 1),
27 },
28 }
29
30 const modelView = new RunModelView(Model, MapDraw, viewOptions)
31 await modelView.setWorld() // use CountiesModel's default
32
33 // ===== Start of map & layers
34
35 const world = modelView.world // use the model's world object below
36
37 const counties = world.geojson
38 const countiesBBox = world.bbox
39 const terrain = gis.template('osm')
40 const elevation = gis.elevationTemplate('mapzen')
41
42 const map = await mltools.newMap(world.bboxCenter(), 5)
43 // map.onLoad(...) // not needed, await above includes onload
44
45 mltools.addRasterLayer(map, 'osm', terrain)
46
47 mltools.addRasterLayer(map, 'elevation', elevation, 0.15)
48
49 mltools.addGeojsonLayer(map, 'counties', counties, 'rgba(255, 0, 0, 0.2)', 'red', 3)
50
51 mltools.addGeojsonLineLayer(map, 'countiesBBox', countiesBBox, 'blue')
52
53 mltools.addCanvasLayer(map, 'model', modelView.canvas, world.bboxCoords())
54
55 const msg = props => props.NAME + ', pop: ' + props.population.toLocaleString()
56 mltools.addLayerClickPopup(map, 'counties', msg, 'bottom-right')
57
58 // ===== End of map & layers
59
60 modelView.run(-1, 30) // steps, fps. steps of -1 goes forever
61 </script>
62</body>
63
64</html>
\No newline at end of file