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 Suhaib Janjua

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 drawnItems = L.featureGroup();
 
  var map = new L.Map('map', { center: new L.LatLng(51.505, -0.04), zoom: 13 });
 
  osm.addTo(map);
  drawnItems.addTo(map);

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

  function cutPolygon(polygon, line, direction, id) {
    var i = -1;
    var j;
    var polyCoords = [];
    var retVal = null;
    
    if ((polygon.type != 'Polygon') || (line.type != 'LineString')) return retVal;
    if (line.coordinates.length != 2) 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'});
    var thickLineCorners = turf.featureCollection([line, offsetLine]);
    var thickLinePolygon = turf.convex(turf.explode(thickLineCorners));
    
    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) {
        polyCoords[++i] = turf.coordAll(polyg);
      };
    };
    
    if (i == 0)
      retVal = turf.polygon(polyCoords, {id: id});
    else if (i > 0) {
      retVal = turf.multiPolygon([polyCoords], {id: id});
    }
    console.log(retVal);
    return retVal;
  };
  
  var polygons = [];
  var layers = [];
  
 ...