-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap.html
80 lines (72 loc) · 2.47 KB
/
map.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Technica 2020</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
Addresses are anonymized and randomized slightly by +/- 1000m to protect hacker privacy.
<div id='map' style='width: 100vw; height: 100vh;'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZ290ZWNobmljYSIsImEiOiJja2k2eTlwdWYxMGxhMndud3lqYzl0cWNwIn0.Ng2eUUpoOJC5WjSDdUeAqA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/gotechnica/cki6ywdfu439g1apc3wj1wo41',
zoom: 2,
center: [-122.447303, 37.753574]
});
map.addControl(new mapboxgl.NavigationControl());
map.on('load', function () {
/* Sample feature from the `examples.8fgz4egr` tileset:
{
"type": "Feature",
"properties": {
"ethnicity": "White"
},
"geometry": {
"type": "Point",
"coordinates": [ -122.447303, 37.753574 ]
}
}
*/
// map.addSource('level', {
// type: 'vector',
// url: 'mapbox://gotechnica.1i4oyd9c'
// });
// map.addLayer({
// 'id': 'population',
// 'type': 'circle',
// 'source': 'level',
// 'source-layer': 'sf2010',
// 'paint': {
// // make circles larger as the user zooms from z12 to z22
// 'circle-radius': {
// 'base': 1.75,
// 'stops': [
// [12, 2],
// [22, 180]
// ]
// },
// // color circles by ethnicity, using a match expression
// // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
// 'circle-color': [
// 'match',
// ['get', 'ethnicity'],
// 'White',
// '#fbb03b',
// 'Black',
// '#223b53',
// 'Hispanic',
// '#e55e5e',
// 'Asian',
// '#3bb2d0',
// /* other */ '#ccc'
// ]
// }
// });
});
</script>
</body>
</html>