Areas & Shapes

Mappedin SDK for React Native version 6 is currently in an alpha state while Mappedin perfects new features and APIs. Open the v6 release notes to view the latest changes.

Using Mappedin SDK for React Native 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 Mappedin.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 Mappedin.Feature, which can be accessed using Mappedin.Area.geoJSON. The Mappedin.Feature can be passed to other methods in Mappedin JS.

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

The following image shows how a path has been routed around areas that are set to not be navigable.

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.

Mappedin.TDirectionZone is the type of the Mappedin.TGetDirectionsOptions.zones property that is passed to MapViewControl.getDirections, MapViewControl.getDirectionsMultiDestination() and MapViewControl.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.

//Get all areas.
const areas = mapData.getByType('area');

// Get the maintenance area.
const maintenanceArea = areas.find((area: any) => area.name === 'Maintenance Area');
const maintenanceGeoJSON = maintenanceArea.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 1');

if (origin && destination && shapeFeatureCollection) {
    const zoneFeature = {
        type: maintenanceGeoJSON.type,
        properties: maintenanceGeoJSON.properties,
        geometry: maintenanceGeoJSON.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',
        });
    }
}

Shapes

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

The following image shows a map with a shape drawn on top of it.

A complete example demonstrating shapes can be found in the Mappedin React Native Github repo: shapes.tsx

Access the Shapes interface through MapViewControl using MapViewControl.Shapes. Shapes are added by calling Mappedin.Shapes.add() and removed individually by calling Mappedin.Shapes.remove() and passing in the Mappedin.Shape object to be removed. All shapes can be removed at once by calling Mappedin.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,
    });
  }
});

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.