title: drawing and editing on simple image using leaflet.draw lib
body: <p>I am using leaflet.draw lib. and trying to built drawing toolbar on the simple image, it displaying fine but its action doesn't works.</p>
  <pre><code>&lt;div id='image-map'&gt;&lt;/div&gt;
  </code></pre>
  <p>and my script is</p>
  <pre><code>&lt;script&gt;
  url = 'images/leafletTest.png';
  var bounds = [[-26.5,-25], [1021.5,1023]];
  var image = L.imageOverlay(url, bounds);
   map = new L.Map('image-map', {layers: [image], crs: L.CRS.Simple, minZoom : -5});
  map.fitBounds(bounds);
  
  
      var drawnItems = new L.FeatureGroup();
  map.addLayer(drawnItems);
  
  // Set the title to show on the polygon button
  L.drawLocal.draw.toolbar.buttons.polygon = 'Draw a sexy polygon!';
  
  var drawControl = new L.Control.Draw({
      position: 'topright',
      draw: {
          polyline: false,
          polygon: false,
          circle: false,
          marker: true
      },
      edit: {
          featureGroup: drawnItems,
          remove: true
      }
  });
  map.addControl(drawControl);
  
  map.on(L.Draw.Event.CREATED, function (e) {
      var type = e.layerType,
              layer = e.layer;
      if (type === 'marker') {
          layer.bindPopup('A popup!');
      }
  
      drawnItems.addLayer(layer);
  });
  
  map.on(L.Draw.Event.EDITED, function (e) {
      var layers = e.layers;
      var countOfEditedLayers = 0;
      layers.eachLayer(function (layer) {
          countOfEditedLayers++;
      });
      console.log(&quot;Edited &quot; + countOfEditedLayers + &quot; layers&quot;);
  });
  &lt;/script&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Xrchf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xrchf.png" alt="enter image description here" /></a></p>
  <p>when ever i draw a rectangle or marker it doesn't display.</p>