-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.js
92 lines (78 loc) · 2.39 KB
/
map.js
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
mapboxgl.accessToken = 'pk.eyJ1IjoibWF0dGNlbiIsImEiOiJtQk5qQ3FrIn0.KXjMKddh4Gb0zqLqKlPo9g';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v10', // stylesheet location
center: [145.50, -36.63], // starting position [lng, lat] - centred on Victoria, Australia
zoom: 6.5 // starting zoom
});
// URL of data source from Vic Emergency
var url = 'https://emergency.vic.gov.au/public/osom-geojson.json';
//var url = 'osom-geojson.json';
fillcolours = [
'match',
['get', 'feedType'],
'incident',
'hsl(30, 100%, 50%)',
'burn-area',
'hsl(0, 100%, 50%)',
'warning',
'hsl(50, 100%, 50%)',
/* other */ '#000'
]
map.on('load', function() {
map.addSource('vicemergency', { type: 'geojson', data: url });
map.getSource('vicemergency').setData(url);
map.addLayer({
'id': 'vicemergency-poly',
'type': 'fill',
'source': 'vicemergency',
'paint': {
'fill-color': fillcolours,
'fill-opacity': 0.4
},
'filter': ['==', '$type', 'Polygon']
});
map.addLayer({
'id': 'vicemergency-point',
'type': 'circle',
'source': 'vicemergency',
'paint': {
'circle-radius': 6,
'circle-color':fillcolours
},
'filter': ['==', '$type', 'Point']
});
/*
"feedType": "incident",
"feedType": "burn-area",
"feedType": "incident",
"feedType": "warning",
*/
// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
map.on('mouseenter', 'vicemergency-point', function(e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
// Populate the popup and set its coordinates
// based on the feature found.
popup
.setLngLat(coordinates)
.setHTML(webBody)
.addTo(map);
});
map.on('mouseleave', 'vicemergency', function() {
map.getCanvas().style.cursor = '';
popup.remove();
});
});