JSFiddle - React, Tailwind, and code Playground

Leaflet.Draw bug does not detect self-intersections in Leaflet 1.0

by nathansnider

HTML

<script src="//cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css">
<script src="//rawgit.com/Leaflet/Leaflet.draw/leaflet-master/dist/leaflet.draw.js"></script>
<link rel="stylesheet" href="//rawgit.com/Leaflet/Leaflet.draw/leaflet-master/dist/leaflet.draw.css">
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.dotLegend {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  display: inline-block;
}

.bdotColor {
  background: #20a0ff;
}

.gdotColor {
  background: #40b060;
}

.rdotColor {
  background: #b04040;
}

JavaScript

////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
////////////////////////////////////////////////////////////////////////////////////////////
var map = L.map('map').setView([34.05, -118.25], 10);
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
  '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
  '&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
L.tileLayer(CDB_URL, {
  attribution: ATTR
}).addTo(map);

////////////////////////////////////////////////////////////////////////////////////////////
//adding draw controls//
////////////////////////////////////////////////////////////////////////////////////////////
var featureGroup = L.geoJson().addTo(map);
var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: featureGroup
  },
  draw: {
    polygon: {
      allowIntersection: false,
      drawError: {
        color: '#e1e100',
        message: '<strong>Oh snap!<strong> you can\'t draw that!'
      }
    },
    polyline: {
      allowIntersection: false,
      drawError: {
        color: '#e1e100', 
        message: '<strong>Oh snap!<strong> you can\'t draw that!'
      }
    },
    circle: false,
    rectangle: false,
    marker: false
  }
}).addTo(map);

map.on('draw:created', function(e) {
  featureGroup.addLayer(e.layer);
});