forked from rainviewer/rainviewer-api-example
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrainviewer-mapbox-example.html
89 lines (85 loc) · 2.75 KB
/
rainviewer-mapbox-example.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>RainViewer API Example for Mapbox</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js"></script>
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css"
rel="stylesheet"
/>
</head>
<body style="margin: 0px; padding: 0px;">
<div
id="map"
style="position: absolute; top: 0px; bottom: 0px; width: 100%;"
></div>
<script>
mapboxgl.accessToken = "YOUR_API_KEY_HERE";
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/dark-v10",
zoom: 6,
center: [-100, 47]
});
window.map = map;
map.on("load", () => {
fetch("https://api.rainviewer.com/public/weather-maps.json")
.then(res => res.json())
.then(apiData => {
apiData.radar.past.forEach(frame => {
map.addLayer({
id: `rainviewer_${frame.path}`,
type: "raster",
source: {
type: "raster",
tiles: [
apiData.host + frame.path + '/256/{z}/{x}/{y}/2/1_1.png'
],
tileSize: 256
},
layout: { visibility: "none" },
minzoom: 0,
maxzoom: 12
});
});
let i = 0;
const interval = setInterval(() => {
if (i > apiData.radar.past.length - 1) {
clearInterval(interval);
return;
} else {
apiData.radar.past.forEach((frame, index) => {
map.setLayoutProperty(
`rainviewer_${frame.path}`,
"visibility",
index === i || index === i - 1 ? "visible" : "none"
);
});
if (i - 1 >= 0) {
const frame = apiData.radar.past[i - 1];
let opacity = 1;
setTimeout(() => {
const i2 = setInterval(() => {
if (opacity <= 0) {
return clearInterval(i2);
}
map.setPaintProperty(
`rainviewer_${frame.path}`,
"raster-opacity",
opacity
);
opacity -= 0.1;
}, 50);
}, 400);
}
i += 1;
}
}, 2000);
})
.catch(console.error);
});
</script>
</body>
</html>