Draw Shapes

Draw geospatial data like polygons or any GeoJSON data.

  1. Introduction
  2. Add the Drawing Lib
  3. Load GeoJSON data
  4. Get GeoJSON data
  5. Handling Events

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.

HTML
        <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:

JavaScript
        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:

JavaScript
        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:

JavaScript
        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.

JavaScript
        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.

Was this article helpful?
Have more questions? Submit a request