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: [
        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, 
                    icon: WalkMarker

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.

  • 1
    If you could create a jsfiddle for this, this would allow us to fiddle with it to find a solution :) . Properly formatting (indenting) the code also makes it easier to understand. – Senshi Apr 19 '17 at 9:59

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, 
                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.

  • 1
    works! bounty will be given when possible (10 hours left) – howard.D Apr 19 '17 at 12:43
  • No problem! As a hint: You asked two question in one, I only answered the first half. In general, you should never "clump" multiple questions on Stackoverflow. If your second question is not solved, please ask it separately, and feel free to link me in it. – Senshi Apr 19 '17 at 13:30

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.

  • Thanks for this response. The function returns a L.marker. So my icon should be a marker. – howard.D Apr 15 '17 at 8:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.