Routing control name and add custom markers

user_10668730 0
Viewed 4007

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

leaflet-routing-machine leaflet javascript
2 Answers

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();
user_49295310 
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
                }
user_95501260
Related