From 1b0836da7305ac26b38ed941a957f4310ec96965 Mon Sep 17 00:00:00 2001
From: Charles Cabergs <me@cacharle.xyz>
Date: Mon, 7 Dec 2020 23:08:54 +0100
Subject: Added walks

---
 walks/script.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 walks/script.js

(limited to 'walks/script.js')

diff --git a/walks/script.js b/walks/script.js
new file mode 100644
index 0000000..2df91b0
--- /dev/null
+++ b/walks/script.js
@@ -0,0 +1,30 @@
+const parser = new DOMParser()
+const mapNode = document.getElementById('map')
+
+const link = mapNode.querySelector('a')
+fetch(link.href)
+    .then(res => res.text())
+        .then(content => {
+            xml = parser.parseFromString(content, 'text/xml')
+            const points = xml.getElementsByTagName('rte')[0] || xml.getElementsByTagName('trkseg')[0]
+            const positions = Array.prototype.map.call(
+                points.children, p => [p.getAttribute('lat'), p.getAttribute('lon')])
+
+            const anchor = mapNode.getElementsByClassName('map-anchor')[0]
+
+            const map = L.map(anchor).setView([0, 0], 13)
+            L.tileLayer(
+              'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+              {
+              attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>',
+                // maxZoom: 18,
+                subdomains: ['a', 'b', 'c'],
+                id: 'test/' + link.href,
+                // tileSize: 512,
+                // zoomOffset: -1,
+                // accessToken: 'your.mapbox.access.token'
+            }).addTo(map);
+
+            const polyline = L.polyline(positions, {color: 'red'}).addTo(map);
+            map.fitBounds(polyline.getBounds());
+        })
-- 
cgit