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.
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: '© <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/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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.