Completely remove route flyers

Question

How can I completely remove the route previously used with Machine Routing Machine? Either the docs here do not explain how this is done, or I somehow managed to skip it.

Reading through the conversation here I am currently doing something in accordance with the following

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

While this works, it is not clear to me that this is actually a legitimate way to do something, and that does not lead to memory leaks. I hope someone has a final solution.

Answer 1

API Leaflet, , "", L.Control http://leafletjs.com/reference-1.2.0.html#control

- removeControl, L.map http://leafletjs.com/reference-1.2.0.html

, script - . addRoutingControl removeRoutingControl, .

removeControl Leaflet.

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

:

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

: https://codepen.io/anon/pen/GMXWMm

, Leaflet , , , , DOM.