Map-marker-leaflet and GPX tracks

Support
1

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 GitHub - mpetazzoni/leaflet-gpx: A GPX track plugin for Leaflet.js, 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:

---
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?

2

I was able to get it working with the other assets plugin. In the end it looks similar to this.

---
title: Maps
cache_enable: false
---
# San Fransisco Transport
{assets:css order:5}
http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css
{/assets}

{assets:js order:5}
http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js
https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/2.1.2/gpx.min.js
{/assets}

{assets:inline_css}
div#map {width: 100%; height: 600px;}
{/assets}

{assets:inline_js}
$(document).ready(function() {
    var map = L.map('map').setView([37.7749, -122.4194], 13);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors', maxZoom: 19
    }).addTo(map);
  
    L.marker([37.775, -122.48], {
        icon: L.ExtraMarkers.icon({markerColor: 'red', iconColor: 'white', icon: 'home'}), title: "1"
    }).addTo(map);

    L.marker([37.77, -122.414], {
        icon: L.ExtraMarkers.icon({markerColor: 'red', iconColor: 'white', icon: 'home'}), title: "2"
    }).addTo(map);
    
    // 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).addTo(map);

});
{/assets}

<div id="map"></div>
1 Like
3

Thanks for sharing your solution here.

Which other assets plugin, @pikim?