Shapes

The Shapes class draws 3 dimensional shapes on top of a map. The shapes are created using GeoJSON geometry, which could be a Polygon, MultiPolygon (array of polygons) or a LineString.

Access the Shapes class through the MapView class using MapView.Shapes. Shapes are added by calling Shapes.add() and removed individually by calling Shapes.remove() and passing in the Shape object to be removed. All shapes can be removed at once by calling Shapes.removeAll().

The following code example adds a shape after the map is first loaded. Clicking on the map removes a shape if one is present and if not, adds the shape back to the map.

Copy
let shape: =
  mapView.Shapes.add(shapeGeometry as any, {
    color: "red",
    altitude: 0.2,
    height: 2,
    opacity: 0.7,
  });

mapView.on("click", async (event) => {
  if (shape) {
    mapView.Shapes.remove(shape);
    shape = undefined;
  } else {
    shape = mapView.Shapes.add(shapeGeometry as any, {
      color: "red",
      altitude: 0.2,
      height: 2,
      opacity: 0.7,
    });
  }
});

The code snippet above is implemented in the CodeSanbox below.

Refer to the Security Camera Placement example in the Developer Showcase for a more advanced example that uses shapes to draw the field of view of security cameras.