Hi,
I recently added the map-marker-leaflet plugin and embedding it and adding markers worked out of the box. Now I'd like to add a GPX track. Therefore I tried to go the way described in https://github.com/mpetazzoni/leaflet-gpx, but without success. I used the shortcode-assets plugin to add the js file to the header and this also seemed to work. But now I'm struggling with adding the GPX track itself.
Currently my page looks like this:
JS
---
title: Maps
cache_enable: false
---
# San Fransisco Transport
[assets=js]
https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/2.1.2/gpx.min.js
[/assets]
[map-leaflet lat=37.7749 lng=-122.4194 zoom=13 mapname=transd variant=transport-dark]
[a-markers markerColor="lightblue" iconColor="white"]
[{"lat": 37.7749, "lng": -122.4194, "icon": "home", "title": "Home Position"}]
[/a-markers]
[a-markers icon=""]
[
{"lat": 37.775, "lng": -122.48 , "text": 1, "draggable": true},
{"lat": 37.77, "lng": -122.414 , "text": 2, "markerColor": "pink"},
{"lat": 37.765, "lng": -122.409, "text": 3, "spin": true},
{"lat": 37.76, "lng": -122.3995, "text": 4, "spin": false},
{"lat": 37.755, "lng": -122.499, "icon": "coffee", "markerColor": "lightred", "title": "Lovely bistro"}
]
[/a-markers]
[/map-leaflet]
[assets=inlineJs loading="async defer" group="bottom"]
// URL to your GPX file or the GPX itself as a XML string.
const url = 'https://mpetazzoni.github.io/leaflet-gpx/demo.gpx';
const options = {
async: true,
polyline_options: { color: 'red' },
};
const gpx = new L.GPX(url, options).on('loaded', (e) => {
map.fitBounds(e.target.getBounds());
}).addTo(map);
[/assets]
Was anyone already successful in combining this? Or could give me some hints anyhow?
last edited 04/17/25 by p