Requirements: Using the Leaflet js maps api, when the customer clicks on a marker, a Rectangle should be drawn just below the Marker, centering according to the marker. Then clicking on another marker should remove previous rectangles and draw another rectangle below newly clicked marker.
Problem: I am using the code below to draw a polygon and I can see a rectangle. And it draws the rectangle on a marker. Then by clicking on another marker a new rectangle is being drawn. But the old rectangle also still exists.
Question: How should I implement the behavior, so that when clicking on new marker, the old rectangle will be deleted from the map?
//polygon
var latBlockSize = 0.002;
var lngBlockSize = 0.002;
var route = [
new L.LatLng(parseFloat(customer.MailingAddress.Lat) + latBlockSize, parseFloat(customer.MailingAddress.Lng) - lngBlockSize),
new L.LatLng(parseFloat(customer.MailingAddress.Lat) + latBlockSize, parseFloat(customer.MailingAddress.Lng) + lngBlockSize),
new L.LatLng(parseFloat(customer.MailingAddress.Lat) - latBlockSize, parseFloat(customer.MailingAddress.Lng) + lngBlockSize),
new L.LatLng(parseFloat(customer.MailingAddress.Lat) - latBlockSize, parseFloat(customer.MailingAddress.Lng) - lngBlockSize)
];
window.polygon = new L.Polygon(route);
window.map.addLayer(window.polygon);
Find the “Layers” menu in the bottom left corner of the screen. Hover your cursor over the box and wait until more options appear. Click “More” to open the Map Details menu. Under “Map Type,” you'll see a checked box next to “Labels.” Uncheck it to remove all labels.
Select the items in the Places panel and use the delete key on the keyboard, or right click and delete. If you have the latest version of Google Earth Pro you can multi select items in the Places panel.
I figured it out by myself.
This was the solution:
window.map.removeLayer(window.polygon);
That is working as well, tested with Leaflet 1.2.0.
window.polygon.remove()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With