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]/dist/leaflet.draw.min.js"></script>
<script src="https://npmcdn.com/@turf/[email protected]/turf.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="mymap"><div id="solar_map"></div></div>

CSS

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

JavaScript

var coordinates = { lat:50.302879 , lon : 8.568438 };
var mymap = L.map('solar_map').setView(new L.LatLng( coordinates.lat, coordinates.lon ), 21);
    L.tileLayer( 'https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
        maxZoom     : 21,
        subdomains  : ['mt0', 'mt1', 'mt2', 'mt3'],
        attribution : "Map data &copy; <a href='www.google.com'>Google</a>"

    }).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 newLayer = e.layer;
        var newGeom = turf.getGeom(newLayer.toGeoJSON());


        // drawnItems.addLayer(newLayer);
        drawnItems.eachLayer(function (layer) {

            geojson = layer.toGeoJSON();

            if (geojson.type == 'FeatureCollection') {

                geojson = geojson.features[0];

            }

            console.log ( geojson, 'geojson' );

            geom = turf.getGeom(geojson);

            console.log ( geom, 'geom' );
            console.log ( newGeom, 'newGeom' );

            if (turf.booleanContains(geom, newGeom)) {

                console.log( turf.difference( geom, newGeom ), 'difference' );
                 newGeom = turf.difference(geom, newGeom);

                 if ( newGeom != null ) {
                     newLayer = L.geoJSON(newGeom);
                     drawnItems.removeLayer(layer);
								 }
            }

        });

        drawnItems.addLayer(newLayer);
    });