1 | <!DOCTYPE html>
|
2 | <html>
|
3 |
|
4 | <head>
|
5 | <title>CountyWalker0</title>
|
6 | <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css">
|
7 | <link rel="stylesheet" href="./fullScreen.css">
|
8 | </head>
|
9 |
|
10 | <body>
|
11 | <div id="map"></div>
|
12 |
|
13 | <script type="module">
|
14 | import MapDraw from '../src/MapDraw.js'
|
15 | import Animator from '../src/Animator.js'
|
16 | import Model from '../models/CountiesModel.js'
|
17 | import maplibregl from 'https://cdn.skypack.dev/maplibre-gl'
|
18 |
|
19 |
|
20 |
|
21 | const model = new Model()
|
22 | await model.startup()
|
23 | model.setup()
|
24 |
|
25 |
|
26 | const view = new MapDraw(model, {
|
27 |
|
28 | drawOptions: {
|
29 |
|
30 | linksColor: 'gray',
|
31 | linksWidth: 4,
|
32 | turtlesSize: 6,
|
33 | turtlesColor: t => view.drawOptions.turtlesMap.atIndex(t.county + 1),
|
34 | },
|
35 | })
|
36 |
|
37 |
|
38 |
|
39 | const map = new maplibregl.Map({
|
40 | container: 'map',
|
41 | center: model.world.bboxCenter(),
|
42 | zoom: 5,
|
43 | style: {
|
44 | "version": 8,
|
45 | sources: {},
|
46 | layers: []
|
47 | },
|
48 | })
|
49 |
|
50 | map.on('load', function () {
|
51 | map.addSource('osm', {
|
52 | type: 'raster',
|
53 | tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
|
54 | tileSize: 256,
|
55 | maxzoom: 19,
|
56 | attribution: '© OpenStreetMap Contributors',
|
57 |
|
58 | })
|
59 | map.addLayer({
|
60 | id: 'osm',
|
61 | type: 'raster',
|
62 | source: 'osm',
|
63 | })
|
64 |
|
65 | map.addSource('elevation', {
|
66 | type: 'raster',
|
67 | tiles: ['https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'],
|
68 | tileSize: 256,
|
69 | })
|
70 | map.addLayer({
|
71 | id: 'elevation',
|
72 | type: 'raster',
|
73 | source: 'elevation',
|
74 | paint: { 'raster-opacity': 0.15 },
|
75 | })
|
76 |
|
77 | map.addSource('counties', {
|
78 | type: 'geojson',
|
79 | data: model.world.geojson,
|
80 | })
|
81 | map.addLayer({
|
82 | id: 'counties',
|
83 | type: 'fill',
|
84 | source: 'counties',
|
85 | paint: { 'fill-color': 'red', 'fill-opacity': 0.2 },
|
86 | })
|
87 | map.addLayer({
|
88 | id: 'countiesLines',
|
89 | type: 'line',
|
90 | source: 'counties',
|
91 | paint: { 'line-color': 'red', 'line-width': 3 },
|
92 | })
|
93 |
|
94 | map.addSource('countiesBBox', {
|
95 | type: 'geojson',
|
96 | data: model.world.bboxFeature(),
|
97 | })
|
98 | map.addLayer({
|
99 | id: 'countiesBBox',
|
100 | type: 'line',
|
101 | source: 'countiesBBox',
|
102 | paint: { 'line-color': 'blue' },
|
103 | })
|
104 |
|
105 | map.addSource('model', {
|
106 | type: 'canvas',
|
107 | canvas: view.canvas,
|
108 | coordinates: model.world.bboxCoords(),
|
109 |
|
110 | })
|
111 | map.addLayer({
|
112 | id: 'model',
|
113 | type: 'raster',
|
114 | source: 'model',
|
115 | })
|
116 |
|
117 | map.on('click', 'counties', function (e) {
|
118 | const props = e.features[0].properties
|
119 | const msg = props.NAME + ', pop: ' + props.population.toLocaleString()
|
120 | new maplibregl.Popup({ maxWidth: 'none' })
|
121 | .setLngLat(e.lngLat)
|
122 | .setHTML(msg)
|
123 | .addTo(map);
|
124 | });
|
125 | })
|
126 |
|
127 |
|
128 | new Animator(
|
129 | () => {
|
130 | model.step()
|
131 | view.draw()
|
132 | },
|
133 | -1,
|
134 | 20
|
135 | )
|
136 |
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 |
|
145 |
|
146 | </script>
|
147 | </body>
|
148 |
|
149 | </html> |
\ | No newline at end of file |