-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (94 loc) · 2.95 KB
/
index.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Heatmap</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidHJ2cmIiLCJhIjoiY2pyM3p4aTlmMWMwbjRibzlia3MyMjZhYiJ9.JCLCk3g-GiVOcKiNWGjOXA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v10',
center: [-122.333642, 47.627410],
zoom: 9
});
let samples_geojson = "samples.geojson"
if(window.location.hash) {
samples_geojson = "samples_" + window.location.hash.replace("#", "") + ".geojson"
}
console.log(samples_geojson)
map.on('load', function() {
// Add a geojson point source.
// Heatmap layers also work with a vector tile source.
map.addSource('samples', {
"type": "geojson",
"data": samples_geojson
});
map.addLayer({
'id': 'city-limits',
'type': 'fill',
'source': {
'type': 'geojson',
"data": "city_limits.geojson"
},
'layout': {},
'paint': {
'fill-color': '#0aa',
'fill-opacity': 0.95
}
});
map.addLayer({
"id": "samples-heat",
"type": "heatmap",
"source": "samples",
"maxzoom": 15,
"paint": {
// Increase the heatmap weight based on frequency and property magnitude
"heatmap-weight": 0.008,
// Increase the heatmap color weight by zoom level
// heatmap-intensity is a multiplier on top of heatmap-weight
"heatmap-intensity": [
"interpolate",
["linear"],
["zoom"],
0, 1,
10, 3
],
// Color ramp for heatmap. Domain is 0 (low) to 1 (high).
// Begin color ramp at 0-stop with a 0-transparancy color
// to create a blur-like effect.
"heatmap-color": [
"interpolate",
["linear"],
["heatmap-density"],
0, "rgba(33,102,172,0)",
0.2, "rgb(103,169,207)",
0.4, "rgb(209,229,240)",
0.6, "rgb(253,219,199)",
0.8, "rgb(239,138,98)",
1, "rgb(178,24,43)"
],
// Adjust the heatmap radius by zoom level
"heatmap-radius": [
"interpolate",
["linear"],
["zoom"],
0, 2,
10, 20
]
}
});
});
map.addControl(new mapboxgl.NavigationControl());
</script>
</body>
</html>