50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
window.onload = function() {
|
|
const map = L.map('map').setView([54.26, -4.55], 10);
|
|
|
|
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(map);
|
|
|
|
body = {
|
|
"id": "1234",
|
|
"polygon": [
|
|
{
|
|
"lat": 54.216940,
|
|
"lng": -4.687783
|
|
},
|
|
{
|
|
"lat": 54.217609,
|
|
"lng": -4.686989
|
|
},
|
|
{
|
|
"lat": 54.217266,
|
|
"lng": -4.686147
|
|
},
|
|
{
|
|
"lat": 54.216598,
|
|
"lng": -4.686930
|
|
}
|
|
],
|
|
"tags" : [
|
|
{"key": "name", "value": "Peel Football Club"},
|
|
{"key": "type", "value": "Camping"},
|
|
]
|
|
}
|
|
|
|
// Create a new polygon with the coordinates from body.polygon
|
|
const polygon = L.polygon(body.polygon, {color: 'red'}).addTo(map);
|
|
|
|
// Add an on click event to the polygon to display the each tag in a popup with the key and value
|
|
polygon.on('click', function(e) {
|
|
popupBody = '';
|
|
body.tags.forEach(tag => {
|
|
popupBody += tag.key.charAt(0).toUpperCase() + tag.key.slice(1) + ": " + tag.value + "<br>";
|
|
|
|
L.popup()
|
|
.setLatLng(e.latlng)
|
|
.setContent(popupBody)
|
|
.openOn(map);
|
|
});
|
|
});
|
|
} |