Cut holes in polygon with leaflet geoman

1.5k Views Asked by At

I'm using the fantastic "leaflet geoman" to draw and edit geometries, but having troubles understanding how the cutting tool works. How do I get the geometry of the layer that has been cut?

This is my code:

mymap.on('pm:create', function(e) {        
                e.poly;
                var type = e.layerType,
                    layer = e.layer;
                $(document).ready(function() {
                        layer.on('pm:cut', ({ layer }) => {
                             console.log(layer.toGeoJSON());
                        });
                    var jsnPolygon = e.layer.toGeoJSON().geometry;
                    jsnPolygon = {
                        type: "MultiPolygon",
                        coordinates: [jsnPolygon.coordinates]
                    };
                    console.log(layer.toGeoJSON());
                })
            });

The console.log gives me the same result before and after cutting, i.e. the rectangle coordinates.

enter image description here

---- UPDATE ---

Adding console.log(JSON.stringify(e)); as suggested returns this error:

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'e'
    |     property 'pm' -> object with constructor 'e'
    --- property '_layer' closes the circle

The behavior after finishing the cut is that it still has the drawing/cutting-tool enabled, although I can't "finish" it.

2

There are 2 best solutions below

3
On BEST ANSWER

Try:

map.on("pm:cut",function(e){
   console.log(e.layer.getLayers()[0].getLatLngs()); //or loop through with e.layer.eachLayer(func)
});
1
On

You need to use the right event. Geoman Docs

// This fires when cutting event is completed
mymap.on('pm:cut', e => {
  // This is the full event object
  console.log(e)

  // This holds the new geometry
  console.log(e.layer.toGeoJSON())
})