[GIS] Leaflet routing control change marker icon

iconleafletmarkersrouting

Im looking for a way to show different markers for the two waypoint that are initialized by leaflet.routing.control.

This is what i tried:

var controlWalk = L.Routing.control({
        lineOptions: {
           styles: [
               {color: 'white', opacity: 0.9, weight: 9},
               {color: '#FC8428', opacity: 1, weight: 3}
           ]
        },
        waypoints: [
            start,
            goal
        ],
        createMarker: function (i, start, n){ 
            //for (i = 0; waypoint.length; i++){
            return L.marker (start.latLng, {
                    draggable: true,
                    bounceOnAdd: false,
                    bounceOnAddOptions: {
                        duration: 1000,
                        height: 800, 
                        function(){
                            (bindPopup(myPopup).openOn(map))
                        }
                    },
                    icon: WalkMarker
            }).bindPopup(myPopup).openPopup();

The result of this are two markers with the same icon.
Any idead how to change the function to solve the problem?

Theres also another behavior that i dont understand: when the icon appear, the popups don't. Only by clicking the marker they appear.

Best Answer

The issue is that the createMarker function is called for every waypoint, so obviously the resulting markers will look the same.

To work around it, you simply use the arguments that you already have. Someone had a similar issue just a month ago: https://github.com/perliedman/leaflet-routing-machine/issues/13

I'm quoting perliedman, the creater of the routing plugin, here, and will create an (untested) code example from this:

You can make that function return any marker you want, or no marker. But you have to implement the logic.

The function is passed three arguments:

i - the index of the waypoint to create marker for (0 = start)

waypoint - the actual waypoint to create the waypoint for; contains name and latLng

n - the total number of waypoints in this route; mostly to be able to tell if i is the last waypoint

Practically, that means your createMarker could look something like this:

createMarker: function (i, start, n){
    var marker_icon = null
    if (i == 0) {
        // This is the first marker, indicating start
        marker_icon = startIcon
    } else if (i == n -1) {
        //This is the last marker indicating destination
        marker_icon =destinationIcon
    }
    var marker = L.marker (start.latLng, {
                draggable: true,
                bounceOnAdd: false,
                bounceOnAddOptions: {
                    duration: 1000,
                    height: 800, 
                    function(){
                        (bindPopup(myPopup).openOn(map))
                    }
                },
                icon: marker_icon
    })
    return marker

Note: I did not test this, but it should work.

You also have to create the L.Icon named startIcon and destinationIcon beforehand: Do that somewhere outside the routing in a setup/init block.

Using my code, it doesn't matter how many routing waypoints you have, the if/else block will always handle the first and last of them. You can easily expand it with additional ifelse checks if you want to handle in-between waypoints as well.

Related Question