diff --git a/org/gpx/20260314_london_italy/index.html b/org/gpx/20260314_london_italy/index.html index 4f4ad21..3d03e17 100644 --- a/org/gpx/20260314_london_italy/index.html +++ b/org/gpx/20260314_london_italy/index.html @@ -7,6 +7,6 @@

- + diff --git a/org/gpx/20260314_london_italy/js/gpx.js b/org/gpx/20260314_london_italy/js/gpx.js index 1cde0e8..f616099 100644 --- a/org/gpx/20260314_london_italy/js/gpx.js +++ b/org/gpx/20260314_london_italy/js/gpx.js @@ -1,10 +1,22 @@ var map = L.map('map'); +// L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm-lite/{z}/{x}/{y}.png', { // not working, cyclosm should be self-hosted L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + minZoom: 6, // avoid zooming outside track range, roughly, to prevent extra tile requests + maxZoom: 12, attribution: 'Map data © OpenStreetMap' }).addTo(map); -function addGPX(map, gpx, lineColor) { +function download(url) { + const a = document.createElement('a') + a.href = url + a.download = url.split('/').pop() + document.body.appendChild(a) + a.click() + document.body.removeChild(a) +} + +function addGPX(map, gpx, lineColor, desc) { new L.GPX(gpx, { async: true, marker_options: { @@ -20,6 +32,17 @@ } }).on('loaded', function(e) { map.fitBounds(e.target.getBounds()); + }).on('mouseover', function(e) { + this.bindTooltip( + "Click to download: " + gpx.split("/")[3], + { sticky: true } + ) + this.openPopup(e.latlng); + }).on('mouseout', function(e) { + setTimeout(this.closePopup(), 500); + }).on('click', function(e) { + setTimeout(this.closePopup(), 500); + download(gpx); }).addTo(map); // setTimeout(function(){ map.invalidateSize()}, 500);