Make adding listeners (for example click) to L.Routing.Line easier

[dominikbruckner]

I'm trying to get the latlng of a click event on a leaflet routing machine created route but it seems that no click event is supported. My code:

  route = L.Routing.control({ 
        waypoints:myWaypoints,
        router:myRouter,

        routeWhileDragging: false,
        autoRoute:true,
        useZoomParameter:false,
        draggableWaypoints:false,
        show:false,
        addWaypoints:false
  });

Then I tried to call route.on('click',function(e) { console.log(e); } ); Any idea how a click event can be added to the route after defined route. Something like route = ...; route.clickable = true;

[perliedman]

Adding a click listener for the control doesn't make sense, in my opinion: the control consists of a lot of different parts (itinerary, geocoders, various buttons, etc.) that are clickable, what does it mean to click the control?

If you want to add a click listener to the line shown in the map, you can do so by using the control's routeLine option: it is responsible for creating the line in the map. For example, you can do this:

var routingControl = L.Routing.control({
    routeLine: function(route) {
        var line = L.Routing.line(route);
        line.on('click', function(e) { console.log(e); });
        return line;
    }
    [...]
});

This way, the control will call the routeLine function each time a new line is displayed on the map, and your click listener will be hooked on to it. You can also use this method to customize the line exactly the way you like.

[dominikbruckner]

unfortunately then all options are gone. I tried to fix that by line.options.addWaypoints = false etc. but it seemed that this doesn't have any effect. And the on-click function don't work, too. New code:

  routingControl= L.Routing.control({
        waypoints:[
            markers[mk+2]._latlng,
            markers[mk+3]._latlng
        ], 
        routeLine: function(route) {
            var line = L.Routing.line(route);
            line.on('click',function(e) {
                console.log(e);
            });
            line.options.addWaypoints = false;
            line.options.extendToWaypoints = false;
            line.options.routeWhileDragging = false;
            line.options.autoRoute = true;
            line.options.useZoomParameter = false;
            line.options.draggableWaypoints = false;
            line.options.addWaypoints = false;
            console.log(line);
            return line;
        },
        router: myRouter,
        routeWhileDragging: false,
        autoRoute: true,
        useZoomParameter: false,
        draggableWaypoints: false,
        show:false,
        addWaypoints:false
    });

Of course the code is overloaded and options are duplicated.

[perliedman]

Pass the line options directly to the line constructor, avoid setting options explicitly, since some things might be initialized by options when the object is created.

  routingControl= L.Routing.control({
        waypoints:[
            markers[mk+2]._latlng,
            markers[mk+3]._latlng
        ], 
        routeLine: function(route) {
            var line = L.Routing.line(route, {
                addWaypoints: false,
                extendToWaypoints: false,
                routeWhileDragging: false,
                autoRoute: true,
                useZoomParameter: false,
                draggableWaypoints: false,
                addWaypoints: false
            });
            line.on('click',function(e) {
                console.log(e);
            });
            console.log(line);
            return line;
        },
        router: myRouter,
        routeWhileDragging: false,
        autoRoute: true,
        useZoomParameter: false,
        draggableWaypoints: false,
        show:false,
        addWaypoints:false
    });

[dominikbruckner]

tried that. but there's no output while clicking at the route anyway.

 routingControl= L.Routing.control({
           waypoints:waypoints, 
           routeLine: function(route) {
                 var line = L.Routing.line(route, {
                       addWaypoints: false,
                       routeWhileDragging: false,
                       autoRoute: true,
                       useZoomParameter: false,
                       draggableWaypoints: false,
                       addWaypoints: false
                 });
                 line.on('click',function(e) { console.log(e); });
                 return line;
           },
           router: myRouter,
           show:false
  });

[dominikbruckner]

I tried changing the styles by line.options.styles, too. No effect

[perliedman]

Sorry, I had forgotten exactly how this was implemented. Since L.Routing.Line is an L.LayerGroup, you will have to add the listener to each sublayer.

This will work:

        line.eachLayer(function(l) {
            l.on('click', function(e) {
                console.log(e);
            });
        });

I'm reopening this issue to see if I can find a way to make this easier without knowing the insides of LRM and Leaflet.

[dominikbruckner]

Thanks a lot. with that change it does the job.

[perliedman]

Possibly fire an event after creating the line, to make it possible to hook on listeners etc?

[hudaniel]

I'm going to note in this thread that it's currently

var routingControl = L.Routing.control({
    routeLine: function(route, options) {
        var line = L.Routing.line(route, options);
        line.on('click', function(e) { console.log(e); });
        return line;
    }
    [...]
});

Now. I had trouble until I looked in the source code.

[vcebotari]

is there a way to do this now? temporary? (route click event) , all that i need is to turn off 'route selection'