Shapes

Mappedin SDK version 6 is currently in a beta state while Mappedin perfects new features and APIs. Open the v6 release notes to view the latest changes.

Using Mappedin JS with your own map requires a Pro license. Try a demo map for free or refer to the Pricing page for more information.

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.

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.