Custom markers

[dima12qw]

Yes ,I know,this questions was answered once,but mine is a little different..
So I want to custom markers to the first and last waypoint just,the viapoints markers to be by default..
How can I do this?
Thank you

[perliedman]

Hi,
the createMarker option function is provided with the waypoint's index as well as the total number of waypoints, so something like this would work:

createMarker: function(i, wp, nWps) {
    if (i === 0 || i === nWps - 1) {
        return L.marker(wp.latLng, {icon: myStartOrEndIcon });
    } else {
        return L.marker(wp.latLng, {icon: myViaIcon });
    }
}

[dima12qw]

Thank you!

[Khorda]

Can you please show me where are you using this custom option? Can't find it here http://www.liedman.net/leaflet-routing-machine/api/

I'm trying this way
const wpts = []; waypoints.forEach(wpt => { wpts.push( L.routing.waypoint({ latLng: wpt, options: { createMarker: this.__createMarker } })); });
creating an array of waypoints, and then I'm passing it to the setWaypoints() function, but my icons are not considered (it is still trying to load defaults).

Thanks

[perliedman]

@Khorda it's an Itinerary option, but unless you're instantiating your own Itinerary, any options you pass to Routing.Control will also be passed along when the Itinerary is created. In other words, normally you pass createMarker when you create your routing control.

From the code you pasted, it looks like you're passing it to the waypoint constructor, and that will not work.

[tenznhok]

Can i start the waypoint at i = 1?

[SravanisupriyaBoda]

Hi,
I am trying to get the route between my custom marker and the other marker but it is not working when i kept the custom marker, but it is working when i remove the custom marker and left it with the default one
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: '/resource/leaflet/leaflet/leaf-shadow.png',
iconSize: [38, 55],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});

            var greenIcon = new LeafIcon({iconUrl: '/resource/leaflet/images/top-down_car-uber.png'});
            var carIcon =  L.marker([llat,llon], {icon: greenIcon}).bindPopup("driver1 location").addTo(map)

if(!layer){debugger;
if(component.get("v.liveLongitude") && component.get("v.liveLattitude")){
var llat =component.get("v.liveLattitude");
var llon =component.get("v.liveLongitude");
if(component.get("v.status") === 'accepted' || component.get("v.status") === 'arriving'){
alert('livelocay@@@@@@'+llat+''+llon);

                        var route = new L.Routing.control({
                       
                            waypoints: [
                                L.latLng(carIcon),
                                //L.latLng(slat,slon)
                                L.latLng(dlat,dlon)
                            ],
                            draggableWaypoints: false,
                            show: false
                            createMarker:function(i, wp, nWps){
                            if (i === 0 || i === nWps - 1) {
                            return L.marker(wp.latLng, {icon: carIcon });
                            }else{
                            return L.marker(wp.latLng, {icon: carIcon });
                           }
                          }

                        }) .addTo(map).on('routesfound', function(e){
                        }); 
                        
                        component.set("v.routeLayer",route);
                        component.set("v.map2", map);  
                        
                    }