title: How to add leaflet draw for non-geographical map (e.g. floor plan)?
body: <p>I try to make an interactive floor plan like this example <a href="https://tech.xing.com/xing-locator-an-interactive-floor-plan-using-rails-and-leaflet-js-8795e7a79f36" rel="nofollow noreferrer">here</a> but I'm using php. The images are non-geographical. As for now, I can add the floor plan image as the background in the map like this.</p>
  <p><a href="https://i.stack.imgur.com/GLfcQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GLfcQ.png" alt="(here)" /></a></p>
  <p>But now I'm looking for ways on how to draw polygon, line, etc and edit it (currently it shows error, L.Control.Draw is not a constructor). Here is my code</p>
  <p>map-configure.js and mapConfigure.php</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
        //get image width and height 
        var size = document.getElementById("floorplan_size").value.split(',');
  
        //get floorplan image  (width X height)
        var width = size[0];
        var height = size[1];
  
        //floorplan image as background in the map
        var imageUrl = "data:image/jpeg;base64," + $("#floorplan_data").val();
        var mymap = L.map("mapL", {
          crs: L.CRS.Simple,
          minZoom: -4
        }); //CRS simple referring to normal coordinate value
        var bounds = [
          [0, 0],
          [height, width]
        ]; // height and width of image is set
        mymap.fitBounds(bounds);
        var image = L.imageOverlay(imageUrl, bounds).addTo(mymap);
  
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
        }).addTo(mymap);
  
        var drawnItems = new L.FeatureGroup(); // FeatureGroup is to store editable layers
        mymap.addLayer(drawnItems);
  
        var drawControl = new L.Control.Draw({
          draw: {
            polygon: {
              shapeOptions: {
                color: 'purple' //Color for polygon
              },
              allowIntersection: false,
              drawError: {
                color: 'orange',
                timeout: 1000
              },
              showArea: true,
              metric: true //Can set the measurement units to not be metric (to show acres instead) by setting the metric option to false
            },
            polyline: {
              shapeOptions: {
                color: 'red' //Color for polyline
              },
            },
            rect: {
              shapeOptions: {
                color: 'green' //Color for rectangle
              },
            },
            circle: {
              shapeOptions: {
                color: 'steelblue' //Color for circle
              },
            },
          },
  
          edit: {
            featureGroup: drawnItems
          }
        });
        mymap.addControl(drawControl);
  
        mymap.on('draw:created', function(event) {
          var layer = event.layer,
            feature = layer.feature = layer.feature || {}; // Intialize layer.feature
  
          feature.type = feature.type || "Feature"; // Intialize feature.type
          var props = feature.properties = feature.properties || {}; // Intialize feature.properties
          drawnItems.addLayer(layer);
        });
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" data-textdirection="ltr" class="loading"&gt;
  
  &lt;head&gt;
    &lt;!-- Leaflet and Leaflet Draw --&gt;
  
    &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" /&gt;
    &lt;script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"&gt;&lt;/script&gt;
  
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" /&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="card-block card-dashboard "&gt;
      &lt;input type="hidden" id="floorplan_data" name="floorplan_data" value=&lt; ?php echo $_POST[ 'floorplan_data']?&gt; &gt;
      &lt;input type="hidden" id="floorplan_size" name="floorplan_size" value= &lt;?php  echo $_POST['floorplan_size']?&gt; &gt;
    &lt;/div&gt;
  
    &lt;div id="mapL"&gt; &lt;/div&gt;
  
    &lt;script type="text/javascript" src="leaflet/leaflet.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="assets/js/map-configure.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any tips would be appreciated.</p>