Adding the Polygon Editor to a map
Add the Polygon Editor overlay to a WRLD Map. Click on the Draw Polygon button to begin drawing. Click on the Edit Polygon button to modify an existing polygon.
This is an optional component with a few dependencies. To use it, you will have to include polygon_editor.css and polygon_editor.js, as shown in the code sample below.
It is also recommended when using the Indoor Control that you hide it while drawing/editing. This is to avoid accidentally changing floor while drawing.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://unpkg.com/wrld.js@1.x.x"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" rel="stylesheet" />
<link href="https://cdn-webgl.wrld3d.com/wrldjs/addons/resources/v1/latest/css/wrld.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link href="https://cdn-webgl.wrld3d.com/wrldjs/addons/polygon_editor/latest/polygon_editor.css" rel="stylesheet" />
<script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/polygon_editor/latest/polygon_editor.js"></script>
<script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/indoor_control/latest/indoor_control.js"></script>
</head>
<body>
<div style="position: relative">
<div id="widget-container" class="wrld-widget-container" style="left: inherit;"></div>
<div id="map" style="height: 400px"></div>
<script>
function setIndoorControlVisbility(indoorControl, visibility) {
if (indoorControl._indoorControl) {
indoorControl._indoorControl.style.visibility = visibility ? "inherit" : "hidden";
}
}
var map = Wrld.map("map", "your_api_key_here", {
center: [37.782276519634706, -122.40476157895424],
zoom: 17,
indoorsEnabled: true
});
const options = {
draw: {
polygon: {
allowIntersection: false,
allowOverlap: false,
showArea: true,
shapeOptions: {
color: '#3375CC',
weight: 5
}
}
},
edit: {
poly: {
allowIntersection: false,
allowOverlap: false
}
}
};
var polygonEditor = new WrldIndoorPolygonEditor(map, options);
var indoorControl = new WrldIndoorControl("widget-container", map);
var counter = 0;
map.on(L.Draw.Event.CREATED, function (e) {
var layer = e.layer;
if (layer instanceof Wrld.Polygon) {
layer.setUserData(counter++);
console.log("Created Polygon with userdata: " + layer.getUserData());
layer.on("click", function(e) {
console.log("Polygon data: " + e.target.getUserData() + " Points: " + e.target.getLatLngs());
});
}
});
map.on(L.Draw.Event.DELETED, function (e) {
var layers = e.layers;
layers.eachLayer(layer => {
if (layer instanceof Wrld.Polygon) {
console.log("Deleted Polygon with userdata: " + layer.getUserData());
}
})
});
//We need to hide indoor control so that while we are creating vertexes,
//we dont create some on one floor and change floor then create some
//on different floors.
map.on(L.Draw.Event.EDITSTART, function (e) {
setIndoorControlVisbility(indoorControl, false);
});
map.on(L.Draw.Event.EDITSTOP, function (e) {
setIndoorControlVisbility(indoorControl, true);
});
map.on(L.Draw.Event.DRAWSTART, function (e) {
setIndoorControlVisbility(indoorControl, false);
});
map.on(L.Draw.Event.DRAWSTOP, function (e) {
setIndoorControlVisbility(indoorControl, true);
});
</script>
</div>
</body>
</html>