CODEWITHSUNDEEP
angularleaflet
GDC
GDC

Reputation: 53

How to create a button to clear all drawn polygons in Leaflet and Geoman?

I'm using Geoman-free along with Leaflet to set up a map n which I can draw polygons; I'm interested to create a custom button in my Angular UI that clears all the drawn polygons. How can i do that?

Update:

I will explain better my situation: my goal is to achive and manipulate coordinates from a custom polygon defined by a user; so the scenario is this: a user can draw a polygon afterthat he can decide to confirm his selection (saving the coordinates of his polygon) or to delete the previous polygon in order to draw another one. Now, with the solution of @Rahul Mahadik, I cannot delete the polygon without problems because of these two reasons:

1) The function that provides to clear the polygon erases even my position marker on the map (so I would delete only the polygon leaving the other things on the map)

2) I need a system to track the coordinates of the drawn polygon and with the expected solution, when I draw and delete a sequence of polygons, I obtain, from the console.log, ALL the polygons coordinates even if they are been deleted previously with this function:

map.eachLayer(function(layer){
     if (layer._path != null) {
    layer.remove()
  }
});

The console.log code I'm using for testing polygon coordinates is this:

map.on('pm:create', e => {
          console.log(e);
        });

I know that this console.log does not provide coordinates in readable format, so I would ask you even a solution for that.

Thanks for your help!

Upvotes: 0

Views: 2632

Answers (2)

Alberto Chiusole
Alberto Chiusole

Reputation: 2784

I wanted to clean all polygons that the user loads into leaflet, but not remove the "base" layer containing the OSM tiles, so I ended up writing this snippet:

for(; Object.keys(mymap._layers).length > 1;) {
  mymap.removeLayer(mymap._layers[Object.keys(mymap._layers)[1]]);
}

which basically iterates over the layers and always removes the second, until only one layer (the first) is left.

The for(;condition;) loop can be replaced with a while(condition) loop.

Upvotes: 0

Rahul Mahadik
Rahul Mahadik

Reputation: 12271

Below code will delete polygons:

map.eachLayer(function(layer){
     if (layer._path != null) {
    layer.remove()
  }
});

Example:

var map = L.map('mapid').setView([39.74739, -105], 13);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,id: 'mapbox.light'
	}).addTo(map);
  var draw_options = {
        position: 'topleft',
        drawMarker: true,
        drawPolygon: true,
        drawPolyline: false,
        drawCircle: false,
        editPolygon: true,
        deleteLayer: true,
        draggable: true
};
  map.on({
			   'pm:remove': function(e) {
                console.log('remove');
        },
        'pm:drawstart': function(e) {
                console.log('drawstart');
        },
        'pm:drawend': function(e) {
                console.log('drawend');
        }
});
map.pm.addControls(draw_options);
$('#deleteShapes').click(del);

function del(){

map.eachLayer(function(layer){

     if (layer._path != null) {
	layer.remove()
  }
});
}
#mapid { 
height: 240px; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.pm.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.pm.css" rel="stylesheet"/>



<div id="mapid"></div>
<button id="deleteShapes">Delete</button>

Hope this will helps you.

Upvotes: 2

Related Questions