1 files changed, 30 insertions, 0 deletions
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());
+        })