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

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

• javascript
• leaflet
• leaflet-routing-machine

• Do you want to change the marker's icon? can you explain the term 'custom marker' ? – kboul Commented Dec 28, 2018 at 20:00
• Yes, I would like to add a different color marker for each point and be able to update the marker named start – larry chambers Commented Dec 28, 2018 at 20:04
• Update the marker named start? What does that mean? – kboul Commented Dec 28, 2018 at 20:10
• define marker as start so I can update start markers coords – larry chambers Commented Dec 28, 2018 at 20:20
• I am not sure I fully understand this. You can store a marker to a variable and then update the coordinates accordingly. I can help you regarding the marker different icon though – kboul Commented Dec 28, 2018 at 20:22

2 Answers 2

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./pointhi/leaflet-color-markers
var greenIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit./pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
  shadowUrl: 'https://cdnjs.cloudflare./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();

createMarker: function(i, waypoints, n) {
                    var startIcon = L.icon({
                        iconUrl: '/maps/green.png',
                        iconSize: [30, 48]
                    });
                    var sampahIcon = L.icon({
                        iconUrl: '/maps/yellow.png',
                        iconSize: [30, 48]
                    });
                    var destinationIcon = L.icon({
                        iconUrl: '/maps/red.png',
                        iconSize: [30, 48]
                    });
                    if (i == 0) {
                        marker_icon = startIcon
                    } else if (i > 0 && i < n - 1) {
                        marker_icon = sampahIcon
                    } else if (i == n - 1) {
                        marker_icon = destinationIcon
                    }
                    var marker = L.marker(waypoints.latLng, {
                        draggable: false,
                        bounceOnAdd: false,
                        bounceOnAddOptions: {
                            duration: 1000,
                            height: 800,
                            function() {
                                (bindPopup(myPopup).openOn(mymap))
                            }
                        },
                        icon: marker_icon
                    }).bindPopup('<h4>' + mylocs[i].nama_tps + '</h4><br>' +
                        mylocs[i].mylat + '<br>' + mylocs[i].mylong)
                    return marker
                }