I created a function that draws a bounding rectangle on the map. When I use create a new rectangle function that comes with leaflet the manually drawn rectangle is not cleared. How to clear the manually drawn rectangle when someone uses the create new rectangle?
function drawRectangle()
{
var north = document.getElementById("north").value;
var west = document.getElementById("west").value;
var east = document.getElementById("east").value;
var south = document.getElementById("south").value;
var lat_lon = [[north,east],[south,west]];
var rectangle = L.rectangle(lat_lon, { draggable: true ,redraw:true});
rectangle.addTo(map);
map.fitBounds(rectangle.getBounds());
}
If you declare rectangle outside of the drawRectangle function you can remove it from the map before you draw the next rectangle:
var rectangle;
function drawRectangle()
{
if(rectangle)
rectangle.remove(map)
var north = document.getElementById("north").value;
var west = document.getElementById("west").value;
var east = document.getElementById("east").value;
var south = document.getElementById("south").value;
var lat_lon = [[north,east],[south,west]];
rectangle = L.rectangle(lat_lon, { draggable: true ,redraw:true});
rectangle.addTo(map);
map.fitBounds(rectangle.getBounds());
}
Or if you want it to be removed when you click the rectangle button put that logic in the event handler:
map.on('editable:drawing:move', function (e) {
if(rectangle)
rectangle.remove(map)
});