Areas & 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.

Areas

An Area represents a logical region on the map. They do not represent a physical attribute like a wall or desk, but rather a region that can be used to trigger events, display information, or affect wayfinding. An area is made up of a polygon stored as a GeoJSON Feature, which can be accessed using Area.geoJSON. The Feature can be passed to other methods in Mappedin JS.

Shapes.add() accepts an FeatureCollection and can be used to display one or more areas on the map. The code snippet below demonstrates how to use an Area to create a Shape and add it to the map.

  // Get the first area.
  const areas = mapData.getByType("area");
  const areaGeoJSON = areas[0].geoJSON;

  // Create a FeatureCollection containing the Feature of the Area.
  const shapeFeatureCollection = {
    type: "FeatureCollection",
    features: [
      {
        type: areaGeoJSON.type,
        properties: areaGeoJSON.properties,
        geometry: areaGeoJSON.geometry,
      },
    ],
  };

  // Draw a shape of the area.
  mapView.Shapes.add(shapeFeatureCollection, {
    color: "orange",
    altitude: 0.2,
    height: 0.1,
    opacity: 0.7,
  });

Within the Mappedin Editor, it is possible to create an area and set it to be off limits for wayfinding. This means that the area will be excluded from the route calculation and directions will be rerouted around the area. This is useful for creating areas that are permanently off limits.

At runtime, it is also possible to use an area as an exclusion zone for wayfinding. This is useful for creating areas that are temporarily off limits. Below is a code snippet that demonstrates how to use an Area to define a region that a wayfinding route should avoid at runtime. Refer to the Dynamic Routing section of the Wayfinding Guide for an interactive example that demonstrates clicking to set an exclusion zone.

TDirectionZone is the type of the TGetDirectionsOptions.zones property that is passed to MapData.getDirections, MapData.getDirectionsMultiDestination() and MapData.getDistance(). These zones can be used to affect the route calculation by excluding a polygon from the route.

The following code snippet demonstrates how to use an Area to define a region that a wayfinding route should avoid.

const areas = mapData.getByType("area");
const areaGeoJSON = areas[0].geoJSON;

// Create directions that route around the area.
const origin = mapData.getByType("object").find((obj) => obj.name === "I3");
const destination = mapData
  .getByType("door")
  .find((obj) => obj.name === "Outbound Shipments 2");

if (origin && destination && shapeFeatureCollection) {
  const zoneFeature = {
    type: areaGeoJSON.type,
    properties: areaGeoJSON.properties,
    geometry: areaGeoJSON.geometry,
  };
  let zones = [];
  zones.push({
    geometry: zoneFeature as Feature<Polygon>,
    cost: Infinity,
    floor: mapView.currentFloor,
  });
  const directions = mapView.getDirections(origin, destination, { zones });

  if (directions) {
    await mapView.Paths.add(directions.coordinates, {
      color: "cornflowerblue",
    });
  }
}

Example

The CodeSandbox below demonstrates the use of areas to adjust the route calculation. This map contains two areas. The first area is labelled Forklift Zone and has been marked as off limits within the Mappedin Editor. The second area is labelled Maintenance Zone and is passed into the getDirections function as an exclusion zone.

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.

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.