Draw on map with Leaflet.js and leaflet.draw

Leaflet is an an open-source JavaScript library for mobile-friendly interactive maps http://leafletjs.com/ Leaflet.draw is a leaflet plugin for drawing on a map. Leaflet.draw code is from: https://github.com/Leaflet/Leaflet.draw https://github.com/Leaflet/Leaflet.draw Here data is provided by OpenStreetMap

by Mitja Tomažič

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js"></script>
<div id="map"></div>

CSS

html, body {
			  height: 100%;
			  padding: 0;
			  margin: 0;
			  background-color: white;
			}
			#map {
			  width: 100%;
			  height: 100%;
			}

JavaScript

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors';
  var osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib });
  var drawnPolygons = L.featureGroup();
  var drawnLines = L.featureGroup();

  var map = new L.Map('map', { center: new L.LatLng(51.505, -0.04), zoom: 13 });
 
  osm.addTo(map);
  drawnPolygons.addTo(map);
  drawnLines.addTo(map);

  map.addControl(new L.Control.Draw({
    draw: {
      marker: false,
      circle: false,
      circlemarker: false,
      rectangle: false,
      polygon: {
        allowIntersection: false,
        showArea: true
      }
    }
  }));

  function cutPolygon(polygon, line, direction, id) {
    var j;
    var polyCoords = [];
    var cutPolyGeoms = [];
    var retVal = null;
    
    if ((polygon.type != 'Polygon') || (line.type != 'LineString')) return retVal;
    
    var intersectPoints = turf.lineIntersect(polygon, line);
    var nPoints = intersectPoints.features.length;
    if ((nPoints == 0) || ((nPoints % 2) != 0)) return retVal;
      
    var offsetLine = turf.lineOffset(line, (0.01 * direction), {units: 'kilometers'});

    for (j = 0; j < line.coordinates.length; j++) {
      polyCoords.push(line.coordinates[j]);
    }
     for (j = (offsetLine.geometry.coordinates.length - 1); j >= 0; j--) {
      polyCoords.push(offsetLine.geometry.coordinates[j]);
    }
    polyCoords.push(line.coordinates[0]);
    var thickLineString = turf.lineString(polyCoords);
    var thickLinePolygon = turf.lineToPolygon(thickLineString);   

    var clipped = turf.difference(polygon, thickLinePolygon);  
    for (j = 0; j < clipped.geometry.coordinates.length; j++) {
      var polyg = turf.polygon(clipped.geometry.coordinates[j]);
      var overlap = turf.lineOverlap(polyg, line, {tolerance: 0.005});
      if (overlap.features.length > 0) {
        cutPolyGeoms.push(polyg.geometry.coordinates);
      }
   ...