UNPKG

4.84 kBHTMLView Raw
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 // Use default model options: { bbox: nmcounties.json, patchesWidth: 100 }
20 // where nmcounties.json is fetched in CountiesModel.js
21 const model = new Model()
22 await model.startup()
23 model.setup()
24
25 // MapDraw has default patchesColor & div as commented out below
26 const view = new MapDraw(model, {
27 // div: util.createCanvas(0, 0), // default & the view will resize
28 drawOptions: {
29 // patchesColor: 'transparent', // default in MapDraw
30 linksColor: 'gray',
31 linksWidth: 4,
32 turtlesSize: 6,
33 turtlesColor: t => view.drawOptions.turtlesMap.atIndex(t.county + 1),
34 },
35 })
36
37 // ===== Start of map & layers
38
39 const map = new maplibregl.Map({
40 container: 'map', // container id
41 center: model.world.bboxCenter(), // [-105.941109, 35.68222],
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: '&copy; 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 // ===== End of map & layers
127
128 new Animator(
129 () => {
130 model.step()
131 view.draw()
132 },
133 -1, // 500, // run this many steps, -1 for forever
134 20 // 30 // 30 fps
135 )
136
137 // setTimeout(() => {
138 // alert(
139 // 'The same as countryWaleer.html but without the mapLibre helpers.' +
140 // '\nThis is useful for modelers wanting to use mapLibre directly.' +
141 // '\nThe random walkers change colors as they enter a new county' +
142 // '\nClick on a county polygon to get it\'s name and population.' +
143 // '\nYou can use the return key to remove this'
144 // )
145 // }, 1000);
146 </script>
147</body>
148
149</html>
\No newline at end of file