Add 'map.js'

2023-06-01 15:32:51 +00:00 · 2023-06-01 15:32:51 +00:00 · e79b4321d3
parent e8f0313863
commit e79b4321d3
1 changed files with 50 additions and 0 deletions
--- a/map.js
+++ b/map.js
@ -0,0 +1,50 @@
+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: '&copy; <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);
+        });
+    });
+}