MapQuest/Leaflet - How to trace routes between marquers with gps coordinates?

Question

I have managed to integrate mapquest within my leaflet maps which was initially showing markers on the map. Below is an example with markers showing photographs taking during a trip in Namibia.

https://www.paulgodard.com/map?c=2108_DesolationValley&p=travel&m=images

Terms
Blog

Routes between marquers with gps coordinates 1 post / 0 new Quick reply Thu, 08/19/2021 - 06:10 #1 Paul Godard Routes between marquers with gps coordinates

I have managed to integrate mapquest within my leaflet maps which was initially showing markers on the map. Below is an example with markers showing photographs taking during a trip in Namibia.

https://www.paulgodard.com/map?c=2108_DesolationValley&p=travel&m=images

I already have an array of locations and I would like to display the routes in between each marker. What is the best way to do this?

 window.mapData = @json($mapData);
     
 window.onload = function() {
     
    L.mapquest.key = 'mykey';
     
    var map = L.mapquest.map('mapOSM', {
        center: [0,0],
        layers: L.mapquest.tileLayer('map'),
        zoom: 10
    });
     
    map.addControl(L.mapquest.control());
     
    var mainIcon = L.Icon.extend({ options: {
        iconSize: [24,24],
        iconAnchor: [12,24], // half of x | full y
        popupAnchor: [0,-12] // x = 0 | - half y
    }});
     
    var oms = new OverlappingMarkerSpiderfier(map);
     
    var bounds = new L.LatLngBounds();
    for (var i = 0; i < window.mapData.length; i ++) {
        var datum = window.mapData[i];
        var loc = new L.LatLng(datum.lat, datum.lon);
        bounds.extend(loc);
        var mapIconURL = '/public/assets/icons/' + datum.icon;
        mapIconURL = mapIconURL.replace(/\s+/g,'');
        var marker = new L.Marker(loc, { icon: new mainIcon({iconUrl: mapIconURL}) });
        marker.desc = datum.popup; //JSON.parse(datum.popup);
        //if ($i=0) { alert(datum.popup); }
        map.addLayer(marker);
        oms.addMarker(marker);
    }
    if (window.mapData.length > 0) {
        map.fitBounds(bounds);
    } else {
        map.center(window.mapData[0].lat,window.mapData[0].lon);
        map.zoom(1);
    }
     
    var popup = new L.Popup({closeButton: false, offset: new L.Point(0.5, -24)});
    oms.addListener('click', function(marker) {
        popup.setContent(marker.desc);
        popup.setLatLng(marker.getLatLng());
        map.openPopup(popup);
    });
    oms.addListener('spiderfy', function(markers) { map.closePopup(); });
    oms.addListener('unspiderfy', function(markers) { });
     
}

Answer 1

You can start with the Leaflet Routing Plugin here: https://developer.mapquest.com/documentation/leaflet-plugins/routing/

Routing in Namibia might get iffy though.