Cut holes in polygon with leaflet geoman

Question

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.

---- 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.

score 2 · Accepted Answer · answered Mar 05 '20 at 16:18

2

Try:

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

answered Mar 05 '20 at 16:18

Falke Design

10,635
3
15
30

When adding that inside the `pm:create` I get an error `Uncaught TypeError: layer.getLayers is not a function`. When adding it outside I get `Uncaught TypeError: Cannot read property 'getLayers' of undefined`. Any suggestions how I can implement it in my code above? – agh Mar 06 '20 at 04:26
call `console.log(JSON.stringify(e)` and then add the output to your question – Falke Design Mar 06 '20 at 05:53
1

You were right all along. I just happened to be working on an old version of leaflet.pm. When installing a fresh update it worked perfectly. Thank you! – agh Mar 09 '20 at 05:22

score 0 · Answer 2 · answered Mar 05 '20 at 16:46

0

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())
})

answered Mar 05 '20 at 16:46

pk.

956
7
13

I'm not sure I understand. When I add that code outside the pm:create event, I get `Uncaught TypeError: Cannot read property 'toGeoJSON' of undefined`. When I add it inside (instead of my `layer.on(pm:cut...`) I get same result as for the first console.log (when the rectangle was created). I'm still not getting the new geometry. – agh Mar 06 '20 at 04:15

Cut holes in polygon with leaflet geoman

2 Answers2