forked from InterruptorPt/ate-onde-chega-cultura
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmapa.html
89 lines (69 loc) · 2.81 KB
/
mapa.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
<html>
<head>
<link rel="stylesheet" href="dist/leaflet/leaflet.css?v=1.7.1"/>
<script src="dist/leaflet/leaflet.js?v=1.7.1"></script>
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
}
</script>
</head>
<body>
<style>
#mapid { height: 100vh; }
</style>
<div id="mapid"></div>
<script>
var filterCategories = getQueryVariable("categories");
if (filterCategories != undefined){
filterCategories = filterCategories.split(',');
}
console.log(filterCategories);
var categories = [
{ name: "Rádios", icon: "radio", url: "static-data/radios.json" },
{ name: "Transmissores", icon: "transmitter", url: "static-data/transmitter.json" },
];
var mymap = L.map('mapid').setView([39.69414563558375, -8.13013162129961], 8);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
subdomains: ['a', 'b', 'c'],
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
}).addTo(mymap);
async function loadCategoryLayer(category) {
var url = category.url;
// Make it work on file://
if ( window.location.href.startsWith('file://') ) {
url = 'https://opedromandrade.github.io/radios-pt/'+category.url;
}
const points = await fetch(url).then(r => r.json());
var icon = L.icon({
iconUrl: `images/${category.icon}24px.svg`,
iconSize: [24, 24],
iconAnchor: [12, 12],
popupAnchor: [0, -12],
});
const layer = L.layerGroup([]);
points.results.bindings.forEach(point => {
const geo = point.geo.value;
const label = point.itemLabel.value;
const coords = /Point\((.*) (.*)\)/.exec(geo).slice(1, 3).map(a => parseFloat(a)).reverse();
layer.addLayer(L.marker(coords, { icon }).bindPopup(label));
});
if ( filterCategories == undefined || filterCategories.indexOf(category.name.toLowerCase()) >= 0 ){
layer.addTo(mymap);
}
return { ...category, layer };
}
Promise.all(categories.map(loadCategoryLayer)).then(cats => {
const config = Object.fromEntries(cats.map(c => [`<img src="images/${c.icon}24px.svg"> ${c.name}`, c.layer]));
L.control.layers({}, config).addTo(mymap);
});
</script>
</body>
</html>