title: How to restrict shapes to simple polygons in leaflet.draw?
body: <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>