Completely remove Leaflet route

Question

How does one go about completely removing a route drawn previously using Leaflet Routing Machine? Either the docs here do not explain how this is done or I have somehow managed to miss it.

Reading through the conversation here I am currently doing something along the lines of the following

 if (routing)
 {
  routing.spliceWayPoints(0,2);
  removeControl(routing);
  routing = null;
 }

Whilst this works it is not clear to me that it is in fact the legitimate way to do things and it does not lead to memory leaks. I am hoping that someone here has the definitive solution.

Answer 1

According the Leaflet API documentation, to remove a control we can call the method "remove" available in the base class L.Control http://leafletjs.com/reference-1.2.0.html#control

Another option is to use the "removeControl" method available in the L.map class http://leafletjs.com/reference-1.2.0.html

To illustrate this, I prepared a little helper script to manage the map in a more object oriented way. You can call addRoutingControl and removeRoutingControl to add and completely remove the control from the map.

In this example I used the "removeControl" method from the Leaflet map object.

MapHelper = (function ($) {
    'use strict';

    var settings = {
        center: [0, 0],
        zoom: null,
    };

    var mapId = '';
    var map = null;
    var baseMaps = {};
    var overlayMaps = {};
    var routingControl = null;


    var init = function (mapLayerId, options) {
        settings = $.extend(settings, options);
        mapId = mapLayerId;
        initMap();
    };

    var getMap = function () {
        return map;
    };

    var addRoutingControl = function (waypoints) { 
        if (routingControl != null)
            removeRoutingControl();

        routingControl = L.Routing.control({
            waypoints: waypoints
        }).addTo(map);
    };

    var removeRoutingControl = function () {
        if (routingControl != null) {
            map.removeControl(routingControl);
            routingControl = null;
        }
    };

    var panMap = function (lat, lng) {
        map.panTo(new L.LatLng(lat, lng));
    }

    var centerMap = function (e) {
        panMap(e.latlng.lat, e.latlng.lng);
    }

    var zoomIn = function (e) {
        map.zoomIn();
    }

    var zoomOut = function (e) {
        map.zoomOut();
    }

    var initMap = function () {
        var $this = this;

        map = L.map(mapId, {
            center: settings.center,
            zoom: settings.zoom,
            crs: L.CRS.EPSG3857,
            attributionControl: true,
            contextmenu: true,
            contextmenuWidth: 140
        });

        baseMaps["OSM"] = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright" target="_blank">OpenStreetMap</a> contributors'
        }).addTo(map);
    };

    var invalidateMapSize = function () {
        map.invalidateSize();
    }

    return {
        init: init, addRoutingControl: addRoutingControl, removeRoutingControl: removeRoutingControl, 
        panMap: panMap, invalidateMapSize: invalidateMapSize, getMap: getMap
    }
}(jQuery));

Then you can use it in your page like this:

<button id="addRoute">Add Route</button>
<button id="remoteRoute">Remove Route</button>
<div id="map" style="width: 400px; height: 400px;"></div>
<script>
    MapHelper.init('map', {
        zoom: 10,
        center: L.latLng(51.509865, -0.118092),
    });

    $('#addRoute').on('click', function() {
        MapHelper.addRoutingControl( [
            L.latLng(50.509865, -1.118092),
            L.latLng(51.509865, -0.118092)
        ]);
    });

    $('#remoteRoute').on('click', function() {
        MapHelper.removeRoutingControl();
    });
</script>

Can be tested here: https://codepen.io/anon/pen/GMXWMm

We can expect Leaflet to manage this properly and in fact if you debug the page using your browser you can see that the control is completely removed from the DOM tree.