Leaflet routing control change marker icon

Question

I am 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.

How do I change the function to solve the problem?

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

Answer 1

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.

Answer 2

The openPopup should make it to where the popup comes up right away, and you don't have to click on the marker at all.

These quotes below explain how this type of popup should function.

Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this:

marker.bindPopup("Hello world!
I am a popup.").openPopup(); circle.bindPopup("I am a circle."); polygon.bindPopup("I am a polygon.");

Try clicking on our objects. The bindPopup method attaches a popup with the specified HTML content to your marker so the popup appears when you click on the object, and the openPopup method (for markers only) immediately opens the attached popup.

Answer 3

To delete all icons.

createMarker: function() { return null; },

From Bhavesh Chauhan at https://stackoverflow.com/a/41301216/1413235.