How to restrict shapes to simple polygons in leaflet.draw?
<p>I'm using <code>leaflet.draw</code> to draw polygons on a map. Even though in the options for <code>polygon</code> I set</p>

<pre><code>allowIntersection: false, // Restricts shapes to simple polygons
</code></pre>

<p>I'm still able to draw self-intersecting polygons (as shown in the demo). How to fix that?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// center of the map
var center = [-33.8650, 151.2094];

// Create the map
var map = L.map('map').setView(center, 6);

// Set up the OSM layer
L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Data © &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt;',
    maxZoom: 18
  }).addTo(map);

// add a marker in the given location
L.marker(center).addTo(map);

// Initialise the FeatureGroup to store editable layers
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

var drawPluginOptions = {
  position: 'topleft',
  draw: {
    polygon: {
      allowIntersection: false, // Restricts shapes to simple polygons
      drawError: {
        color: '#e1e100', // Color the shape will turn when intersects
        message: '&lt;strong&gt;Oh snap!&lt;strong&gt; you can\'t draw that!' // Message that will show when intersect
      },
      shapeOptions: {
        color: '#97009c'
      }
    },
    // disable toolbar item by setting it to false
    polyline: false,
    circle: false, // Turns off this drawing tool
    rectangle: false,
    marker: false,
  },
  edit: {
    featureGroup: editableLayers, //REQUIRED!!
    remove: false
  }
};

// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw(drawPluginOptions);
map.addControl(drawControl);

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;

  if (type === 'marker') {
    layer.bindPopup('A popup!');
  }

  editableLayers.addLayer(layer);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>html,
body {
  height: 100%;
}
#map {
  height: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"&gt;&lt;/script&gt;
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css" rel="stylesheet" /&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"&gt;&lt;/script&gt;
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css" rel="stylesheet" /&gt;
&lt;div id="map"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>