How to replace default marker to custom icon in waypoint (Leaflet Routing)

Question

Here, I am drawing route and assigning stop to route using Leaflet Routing Machine Leaflet Routing Machine

var control = L.Routing.control(L.extend(window.lrmConfig, {
    waypoints: [array object of stops],
    geocoder: L.Control.Geocoder.nominatim(),
    routeWhileDragging: true,
    reverseWaypoints: true,
    showAlternatives: true,
    altLineOptions: {
        styles: [
            {color: 'black', opacity: 0.15, weight: 9},
            {color: 'white', opacity: 0.8, weight: 6},
            {color: 'blue', opacity: 0.5, weight: 2}
        ]
    }
})).addTo(map);

In waypoints object array I have bind custom marker like:

L.marker([item.latLng.lat, item.latLng.lng], {icon: stopIcon}).addTo(map).bindPopup(item.name);

But I am getting 2 markers 1 is default and second is my custom icon. You can see in my screen-shot one is default(blue marker) and custom icon(stop image)

So I want to replace default (blue marker) with my custom and remove the default marker. Thanks.

It appears that [waypoint marker creation function](https://github.com/perliedman/leaflet-routing-machine/blob/master/src/plan.js#L26) doesn't support any options for waypoint markers. So either you should use Leaflet's [`Map.eachLayer`](http://leafletjs.com/reference.html#map-eachlayer) to replace waypoint markers with yours one by one, or you should file an issue to [`leaflet-routing-machine`](https://github.com/perliedman/leaflet-routing-machine/issues) with a feature request. — lonelyelk, Dec 23 '16 at 11:43

score 7 · Answer 1 · answered Jul 02 '19 at 23:05

you can use this code :

   L.Routing.control({
          waypoints: [
            L.latLng(36.3603179, 59.5041424),
            L.latLng(36.3279067, 59.5248145)
          ],
          routeWhileDragging: true,
          lineOptions: {
            styles: [{ color: 'green', opacity: 1, weight: 5 }]
          },
          createMarker: function (i: number, waypoint: any, n: number) {
            const marker = L.marker(waypoint.latLng, {
              draggable: true,
              bounceOnAdd: false,
              bounceOnAddOptions: {
                duration: 1000,
                height: 800,
                function() {
                  (bindPopup(myPopup).openOn(map))
                }
              },
              icon: L.icon({
                iconUrl: './assets/global/img/mapmarker-red.png',
                iconSize: [38, 95],
                iconAnchor: [22, 94],
                popupAnchor: [-3, -76],
                shadowUrl: './assets/global/img/marker-shadow.png',
                shadowSize: [68, 95],
                shadowAnchor: [22, 94]
              })
            });
            return marker;
          }
        }).addTo(map);

score 6 · Accepted Answer · edited Dec 24 '16 at 09:17

6

Finally, I found a solution. Added property

createMarker: function() { return null; },

edited Dec 24 '16 at 09:17

Guillaume Jacquenot

11,217
6
43
49

answered Dec 23 '16 at 12:06

Bhavesh Chauhan

1,023
1
11
30

5

This also means that you can return your marker rather than `null`. – lonelyelk Dec 24 '16 at 08:31

How to replace default marker to custom icon in waypoint (Leaflet Routing)

2 Answers2

Linked