-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.js
82 lines (75 loc) · 2.47 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
let map = L.map("map", {
center: [52.35600282867075, -3.832320954338758],
minZoom: 8, // to not zoom out too much
zoom: 8,
});
document.getElementById("reset_zoom").addEventListener("click", function () {
map.setView([52.35600282867075, -3.832320954338758], 8);
});
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
let data = "wales_aqm.csv";
let pm25_icon = L.icon({
iconUrl: "Images/location_pin_6.png",
iconSize: [38, 55],
});
let others_icon = L.icon({
iconUrl: "Images/location_pin_3.png",
iconSize: [38, 55],
});
const pm25Checkbox = document.getElementById("PM2.5");
const otherPollutantsCheckbox = document.getElementById("Other Pollutants");
const pm25Markers = [];
const otherPollutantsMarkers = [];
let pm25_layer;
// let others_layer;
Papa.parse(data, {
download: true,
header: true,
complete: function (results) {
results.data.pop();
let mapMarkers = () => {
if (pm25Checkbox.checked) {
console.log("Showing PM 2.5 monitors");
for (let c of results.data) {
if (c["PM 2.5"] == "Yes") {
const marker = L.marker([c["Latitude"], c["Longitude"]], {
icon: pm25_icon,
}).bindTooltip(
`<b>${c["Place"]}</b> <br/> Monitored by: <i>${c["Monitoring Authority"]}</i> <br/> Annual mean: <span style="background: lightgray; padding: 2px 4px">${c["Annual Mean"]}</span>`
);
pm25Markers.push(marker);
}
}
pm25_layer = L.layerGroup(pm25Markers);
pm25_layer.addTo(map);
} else {
console.log("Hiding PM 2.5 monitors");
pm25_layer.removeFrom(map);
pm25Markers.length = 0;
}
};
pm25Checkbox.addEventListener("change", mapMarkers);
mapMarkers();
otherPollutantsCheckbox.addEventListener("change", () => {
if (otherPollutantsCheckbox.checked) {
for (let c of results.data) {
if (c["PM 2.5"] !== "Yes") {
const marker = L.marker([c["Latitude"], c["Longitude"]], {
icon: others_icon,
}).bindTooltip(`${c["Place"]}`);
otherPollutantsMarkers.push(marker);
}
}
others_layer = L.layerGroup(otherPollutantsMarkers);
others_layer.addTo(map);
} else {
others_layer.removeFrom(map);
otherPollutantsMarkers.length = 0;
}
});
},
});