I am attempting to combine two fine plugins Leaflet Easy Button and Leaflet Routing Machineand i can't quite get it to work. what I want seems simple enough, I would like to have a button that when clicked adds and removes the routing control to the map. currently I can add the button and control and have the button remove it but I dont know how to get some sweet toggle like functionality.

I am currently stuck with this:

var route = L.Routing.control({
    waypoints: [

    units: 'imperial',
    geocoder: L.Control.Geocoder.google(),
    routeWhileDragging: true

  function (){route.removeFrom(map)},


Also, I have tried manipulating the DOM elements using this post but I havent had any luck.


change the easy button function to:

  function (){
    $('.leaflet-routing-container').is(':visible') ? route.removeFrom(map) : route.addTo(map)

This just applies a simple ternary operator to determine whether to add or remove the route control (and uses jQuery to detect the visibility of the routing container).


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.