javascriptleafletleaflet-routing-machine

Routing control name and add custom markers


Hi I am trying to add custom markers using leaflet and drawing the route using Routing.control. I need to add a variable to markers to, as I need to update one of the marker positions from time to time. I will only ever have 3 marker or waypoints, a start, a 2nd and 3rd. I will probably need to move only the start marker.

The code to add the route which draws the route and adds the default markers is

var route = L.Routing.control({
     waypoints: [
    L.latLng(my_lat, my_lng),
    L.latLng(job_p_lat, job_p_lng),
    L.latLng(job_d_lat, job_d_lng)
 ],show: false, units: 'imperial',
 router: L.Routing.mapbox('API KEY HERE')
}).addTo(map);

I have tried q few things not worth showing as did totally nothing. Any advice would be great, thanks


Solution

  • If you look at this issue you will see that you question regarding the different marker icons has already been answered.

    The createMarker option function for L.Routing.control can be used like:

    // source: https://github.com/pointhi/leaflet-color-markers
    var greenIcon = new L.Icon({
      iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
      shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/marker-shadow.png',
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      shadowSize: [41, 41]
    });
    L.Routing.control({
      waypoints: [
        L.latLng(57.74, 11.94),    // startmarker
        L.latLng(57.6792, 11.949) // endmarker
      ],
      createMarker: function(i, wp, nWps) {
        if (i === 0 || i === nWps - 1) {
          // here change the starting and ending icons
          return L.marker(wp.latLng, {
            icon: greenIcon // here pass the custom marker icon instance
          });
        } else {
          // here change all the others
          return L.marker(wp.latLng, {
            icon: yourOtherCustomIconInstance
          });
        }
      }
    }).addTo(map);
    

    Demo - open it in a incognito window as there is a request limitation to the API.

    You should see something like this:

    Update: to change the route dynamically you have to do sth like this:

    store your routing control instance to a variable: var control = L.Routing.control({...})

    and then change the marker position like this:

    // this is the starting marker latitude
    control.getRouter().options.waypoints[0].lat = L.latLng(59.74, 11.94);
    
    // similarly for longitude and for ending marker to change the position dynamically
    

    and then refresh the route graph:

    control.route();