Leaflet.js add/remove control from Map

Question

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
 }).addTo(map);
 L.easyButton('fa-compass',
 function (){route.removeFrom(map)},
 'Routing'
);

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

• toms: is the full source available somewhere? Can you make a fiddle?
• dave_does_not_understand: I am trying to get a gitpage up but in the meantime it can be downloaded from here. github.com/davemetzler/mystruggle/tree/master/leaflet

Answer 1

change the easy button function to:

L.easyButton('fa-compass',
 function (){
 $('.leaflet-routing-container').is(':visible') ? route.removeFrom(map) : route.addTo(map)
 },
 'Routing'
);

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

• dave_does_not_understand: than you Toms. works like a charm.