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.

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