JSFiddle - React, Tailwind, and code Playground

by Rolf Friedrich

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.draw.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-src.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.draw.min.js"></script>
<script src="https://npmcdn.com/@turf/[email protected]/turf.min.js"></script>
<div id="mymap"></div>

CSS

#mymap { height: 55rem; }
.leaflet-fade-anim .leaflet-tile,.leaflet-zoom-anim .leaflet-zoom-animated { will-change:auto !important; }

JavaScript

var mymap = L.map('mymap').setView([46.0499803, 14.5068602], 9);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 15,
    minZoom: 6,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoicnJhamFwcGFuIiwiYSI6ImNpb2Jta3prcDA0NGp2emx6M21jbWJkam4ifQ.w2R3ZlYBiKBezxUduz7vTg'
}).addTo(mymap);

var drawnItems = new L.FeatureGroup();
mymap.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
    draw: {
      polygon: {
        allowIntersection: false
      },
      marker: false,
      circlemarker: false,
      circle: false,
      polyline: false
    },
    edit: {
        featureGroup: drawnItems
    }
});
mymap.addControl(drawControl);
mymap.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);
});