Draw Shapes
Draw geospatial data like polygons or any GeoJSON data.
Introduction
The Drawing library enables you to create polygons, lines, and points on a map. In this example, polygons represent the business area of each asset, which is represented by a single point. You have the flexibility to update existing zones, create new ones, or change the location of assets. To access the updated data, simply click on the “Export” button.
Add the Drawing Lib
Drawing capabilities are not enabled by default with Map JS. In order to activate it you must explicitely load it by specifying it in the libraries parameter of Map JS’s URL.
<script
async
src="https://sdk.woosmap.com/map/map.js?key=YOUR_API_KEY&libraries=drawing&callback=initMap"
></script>
Discover the reference documentaton of the Drawing class.
Create a Draw control and add it to the map
The drawing tool is based on a tool bar with 6 items:
- Create a new Point
- Create a new Line
- Create a new Polygon
- Delete a feature
- Combine (or Group) multiple features together
- Uncombine (or Ungroup) multiple grouped features
var draw = new woosmap.map.Drawing(drawOptions);
draw.addControl(map);
Load GeoJSON data
Edit existing data by loading them once the map’s loading is done:
const data = {
type: "FeatureCollection",
features: [
{
id: "5d43feae8cda15450011a09b28b3789c",
type: "Feature",
properties: {},
geometry: {
coordinates: [
[
[2.3392309502109185, 48.85831402091878],
[2.346028040420606, 48.85697241366742],
[2.3515142632325308, 48.855055769504474],
[2.3533591877181266, 48.851190313892204],
[2.350737452922573, 48.85170146564175],
[2.3484555726373344, 48.85256402238562],
[2.344183115935067, 48.854225203154016],
[2.341658482427647, 48.85585438015704],
[2.3388910956993243, 48.85761127874753],
[2.3392309502109185, 48.85831402091878],
],
],
type: "Polygon",
},
},
],
};
woosmap.map.event.addListenerOnce(myMap, "idle", () => {
draw.add(data);
});
Get GeoJSON data
Once your work is done, retrieve GeoJSON data of what you created:
const data = draw.getAll();
Handling Events
To register for event listeners, call the addListener() event handler on drawn features. It takes an event string
name parameter to listen for, and a function to call when the specified event is triggered.
map.data.addListener("draw.update", function (feature) {
console.log(feature);
});
The below sample will show you what events are triggered by the woosmap.map.Drawing as you interact with features.
