Map-marker-leaflet and GPX tracks

Support
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