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 |
|
21 | drawOptions: {
|
22 |
|
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()
|
32 |
|
33 |
|
34 |
|
35 | const world = modelView.world
|
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 |
|
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 |
|
59 |
|
60 | modelView.run(-1, 30)
|
61 | </script>
|
62 | </body>
|
63 |
|
64 | </html> |
\ | No newline at end of file |