How to remove L.rectangle(boxes[i])

Question

I few days ago I implement a routingControl = L.Routing.control({...}) which works perfect for my needs. However I need for one of my customer also the RouteBoxer which I was also able to implement it. Now following my code I wants to remove the boxes from my map in order to draw new ones. However after 2 days trying to find a solution I've given up. wideroad is a param that comes from a dropdown list 10,20,30 km etc.

function routeBoxer(wideroad) {
  this.route = [];
  this.waypoints = []; //Array for drawBoxes
  this.wideroad = parseInt(wideroad); //Distance in km
  this.routeArray = routingControl.getWaypoints();
  for (var i=0; i<routeArray.length; i++) {
    waypoints.push(routeArray[i].latLng.lng + ',' + routeArray[i].latLng.lat);
  }
  this.route = loadRoute(waypoints, this.drawRoute);
}; //End routeBoxer()

drawroute = function (route) {
  route = new L.Polyline(L.PolylineUtil.decode(route)); // OSRM polyline decoding
  boxes = L.RouteBoxer.box(route, this.wideroad);
  var bounds = new L.LatLngBounds([]);
  for (var i = 0; i < boxes.length; i++) {
    **L.rectangle(boxes[i], {color: "#ff7800", weight: 1}).addTo(this.map);**
    bounds.extend(boxes[i]);
  }
  console.log('drawRoute:',boxes);
  this.map.fitBounds(bounds);
  return route;
}; //End drawRoute()

loadRoute = function (waypoints) {
  var url = '//router.project-osrm.org/route/v1/driving/';
  var _this = this;
  url += waypoints.join(';');
  var jqxhr = $.ajax({
    url: url,
    data: {
      overview: 'full',
      steps: false,
      //compression: false,
      alternatives: false
    },
    dataType: 'json'
   })
  .done(function(data) {
    _this.drawRoute(data.routes[0].geometry);
    //console.log("loadRoute.done:",data);
  })
  .fail(function(data) {
    //console.log("loadRoute.fail:",data);
  });
}; //End loadRoute()

Well, my problem is now how to remove previously drawn boxes in order to draw new ones because of changing the wideroad using a dropdown list. Most of this code I got from the leaflet-routeboxer application. Thanks in advance for your help...

Answer 1

You have to keep a reference to the rectangles so you can manipulate them (remove them) later. Note that neither Leaflet nor Leaflet-routeboxer will do this for you.

e.g.:

if (this._currentlyDisplayedRectangles) {
    for (var i = 0; i < this._currentlyDisplayedRectangles.length; i++) {
        this._currentlyDisplayedRectangles[i].remove();
    }
} else {
    this._currentlyDisplayedRectangles = [];
}

for (var i = 0; i < boxes.length; i++) {
    var displayedRectangle = L.rectangle(boxes[i], {color: "#ff7800", weight: 1}).addTo(this.map);
    bounds.extend(boxes[i]);
    this._currentlyDisplayedRectangles.push(displayedRectangle);
}

If you don't store a reference to the L.rectangle() instance, you obviously won't be able to manipulate it later. This applies to other Leaflet layers as well - not storing explicit references to Leaflet layers is a usual pattern in Leaflet examples.