1

I would like to be able to create holes in polygons made with Leaflet.Draw plugin. For example, I currently have code like this: https://jsfiddle.net/4gkrfu5b/

If you draw a polygon on top of another polygon, there will be two polygons overlapping each other. I would like to get an effect, similar to this example: https://jsfiddle.net/bnue5tjg/5/

The second example nicely implements the cutout possibility with polygon drawn on top of another polygon. The only downside it has, it is made with one existing polygon pre-rendered on the map. I prefer to start with a clean workspace and then be able to create polygons and holes in them. I have tried to implement the second example into my code, but for now I have been unsuccessful with this. Any help with cutouts implementation will be welcome. Hope that the stackexchange community can help me with implementation of cutouts / holes on polygons we make on the map.

1

One possibility of doing this would be with the help of turf.js library.

When adding newly drawn polygon, algorithm for detecting and creating possible holes goes like this:

  1. Convert newly created layer/polygon to GeoJSON and then to turf geometry.
  2. Iterate through all existing layers/polygons.
  3. Convert each layer/polygon to turf geometry and check if it contains newly created polygon.
  4. If it contains newly created polygon, drill hole in it with with turf.difference method
  5. Remove old polygon without one hole.
  6. Add new polygon.

Here is the code:

map.on('draw:created', function (e) {
  var geojson;
  var geom;
  var newGeom;
  var newLayer;

  var newLayer = e.layer;
  var newGeom = turf.getGeom(newLayer.toGeoJSON());

  drawnItems.eachLayer(function (layer) {
    geojson = layer.toGeoJSON();
    if (geojson.type == 'FeatureCollection') {
      geojson = geojson.features[0];
    }
    geom = turf.getGeom(geojson);
    if (turf.booleanContains(geom, newGeom)) {
      newGeom = turf.difference(geom, newGeom);
      newLayer = L.geoJSON(newGeom);
      drawnItems.removeLayer(layer);
    }
  });
  drawnItems.addLayer(newLayer);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.