-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (109 loc) · 3.7 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>GRASS Animate Simulation</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.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>
<!-- Loads data from data_file.js -->
<script src="./images/data_file.js"></script>
<script>
//Sets up the map
mapboxgl.accessToken = 'pk.eyJ1IjoidGhvbXdvcm0iLCJhIjoiY2s2bDY1ZXJyMDhrbTNqbjB6YWV4ZG91dyJ9.RRKk7tlQbdvJBLWnXwG9QA';
var map = new mapboxgl.Map({
container: 'map',
zoom: 12,
center: [-78.6319,35.7099],
pitch: 45,
style: 'mapbox://styles/mapbox/satellite-v9'
});
//Add Navigation Controls
map.addControl(new mapboxgl.NavigationControl());
//The total numbers of images found in data_file.js
var frameCount = layerInfos.length;
//Default used to start animation with first image
var currentImage = 0;
//Gets the current image
function getPath() {
return "images/" + layerInfos[currentImage].file;
}
//Convert Bounds to match mapbox gl source specs
function grassBbox(bounds) {
return [
[bounds[1][1], bounds[1][0]],
[bounds[0][1], bounds[1][0]],
[bounds[0][1], bounds[0][0]],
[bounds[1][1], bounds[0][0]]
];
}
//We need to wait for the map to load before we add the raster layer
map.on('load', function() {
//Create a new map source with the bounding box and url to your raster data.
map.addSource("grass", {
type: "image",
//Replace static file with function
url: getPath(),
//Gets the bounds of the first image listed in images/data_file.js
coordinates: grassBbox(layerInfos[0].bounds)
});
//Now add a new layer to the map from the source you created
map.addLayer({
id: "grass-layer",
"type": "raster",
"source": "grass",
"paint": {
"raster-fade-duration": 0
}
});
//Will update image every 200ms
setInterval(function() {
currentImage = (currentImage + 1) % frameCount;
map.getSource("grass").updateImage({ url: getPath() });
}, 200);
//Optional Add 3d Buildings so that they are visible above flooding
if (! map.getSource('composite')) {map.addSource('composite', { type: 'vector', url: 'mapbox://mapbox.mapbox-streets-v7'});}
var layers = map.getStyle().layers;
var labelLayerId;
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
labelLayerId = layers[i].id;
break;
}
}
//Add 3d Buildings layer
map.addLayer({
'id': '3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 14,
'paint': {
'fill-extrusion-color': '#aaa',
// use an 'interpolate' expression to add a smooth transition effect to the
// buildings as the user zooms in
'fill-extrusion-height': [
"interpolate", ["linear"], ["zoom"],
14, 0,
14.05, ["get", "height"]
],
'fill-extrusion-base': [
"interpolate", ["linear"], ["zoom"],
14, 0,
14.05, ["get", "min_height"]
],
'fill-extrusion-opacity': 0.8
}
}, labelLayerId);
});
</script>
</body>
</html>