Add support for displaying GPX routes/markers?

[j-greig]

Similar to https://skirridsystems.co.uk/os-datahub-maps/adding-gpx-and-kml-files/, just wondering how much work this might require?

Conceivably https://github.com/mpetazzoni/leaflet-gpx might provide a readymade solution that hooks into Leaflet but I haven't tried this yet.

Am happy to assist although I have fairly basic dev skills.

Cheers :)

[j-greig]

Got GPX route added quite easily thanks to https://github.com/mapbox/leaflet-omnivore :)

{% do view.registerAssetBundle("Burnthebook\\OSMaps\\assetbundles\\OSMaps\\OSMapsAsset") %}

{% set tileUrl = craft.osMaps.getApiUrl() %}
{% set maxZoomLevel = craft.osMaps.getMaxZoomLevel() %}
{% set zoomLevel = 3 %}
{% set lat = 57.881199 %}
{% set long = -4.3652 %}

{% block content %}
<h3>{{ entry.title}}</h3>

<div id="map" style="height: 500px; width: 1000px;"></div>

{% js %}
    {# OS Maps #}
    var map = createOSMap('map', '{{ tileUrl }}', { maxZoom: {{ maxZoomLevel }} });
    var latlng = [{{ lat }}, {{ long }}];
    map.setView(latlng, {{ zoomLevel }});
    {# Start Marker #}
    var marker = L.marker(latlng).addTo(map);
    marker.bindPopup("Started here");
    {# Comment Marker #}
    var latlng2 = [57.93528699848493,-5.127172775697645];
    var marker = L.marker(latlng2).addTo(map);
    marker.bindPopup("Camped here");
    {# Leaflet Omnivore GPX #}
    var gpxFile = '/maps/track1.gpx';
    var customLayer = L.geoJson();
    var gpxLayer = omnivore.gpx(gpxFile, null, customLayer).on('ready', function() {
        map.fitBounds(gpxLayer.getBounds());
    });
    map.addLayer(gpxLayer);
{% endjs %}

{% endblock content %}