0

I try to make an interactive floor plan like this example here 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.

(here)

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

map-configure.js and mapConfigure.php

$(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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 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);
      });
    }
<!DOCTYPE html>
<html lang="en" data-textdirection="ltr" class="loading">

<head>
  <!-- Leaflet and Leaflet Draw -->

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>

</head>

<body>

  <div class="card-block card-dashboard ">
    <input type="hidden" id="floorplan_data" name="floorplan_data" value=< ?php echo $_POST[ 'floorplan_data']?> >
    <input type="hidden" id="floorplan_size" name="floorplan_size" value= <?php  echo $_POST['floorplan_size']?> >
  </div>

  <div id="mapL"> </div>

  <script type="text/javascript" src="leaflet/leaflet.js"></script>
  <script type="text/javascript" src="assets/js/map-configure.js"></script>

</body>

</html>

Any tips would be appreciated.

Chxk
  • 47
  • 10
  • seems like it can't find the leaflet.draw.js - try loading it in the php after leaflet.js and before your map-configure.js. I also prefer to download the plugin and put it on my server instead of just linking it, but that's just a personal preference. – Merion Jul 16 '20 at 12:31
  • @Merion I've tried it but got the same error (L.Control.Draw is not a constructor) :c Is it because I use image instead of map? It should be no problem right even if I use image? – Chxk Jul 17 '20 at 05:49
  • I tried your code and get the same error - can't even see a map only two >>. Unfortunately I lack the time to thouroughly debug this right now, but it's certainly not because of using a flat image. I use a similar approach and it works fine (https://fictionalmaps.com) – Merion Jul 17 '20 at 08:17
  • @Merion Maybe if you have free time you can help me. Anyway, thanks! – Chxk Jul 20 '20 at 04:54
  • @Merion Is it perhaps because you're pointing to a js for the css stylesheet? – OutsideCoder Aug 27 '20 at 21:26

0 Answers0