Class Shapes

Shapes in Mappedin JS

The Shapes class allows you to draw custom 3D geometry on the map using GeoJSON. You can create polygons, multi-polygons, and line strings to highlight areas, create custom boundaries, or add visual overlays to your indoor map.

Features

  • Support for GeoJSON geometry (Polygon, MultiPolygon, LineString)
  • Customizable styling with colors, opacity, and materials
  • 3D rendering with height and altitude control
  • Interactive shapes with click/hover events
  • Floor-specific placement

Best Practice: Use shapes to highlight areas of interest, create custom zones, or add visual overlays. Keep shapes simple for better performance, especially on mobile devices.

Example Usage

// Create a simple polygon shape
const polygon = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Polygon',
      coordinates: [[[lng1, lat1], [lng2, lat2], [lng3, lat3], [lng1, lat1]]]
    }
  }]
};

const shape = mapView.Shapes.add(polygon, { color: 'red' }, mapView.currentFloor);

// Create a line string
const lineString = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: [[lng1, lat1], [lng2, lat2]]
    }
  }]
};

const line = mapView.Shapes.add(lineString, { color: 'blue', width: 2 });

// Remove a shape
mapView.Shapes.remove(shape);

// Remove all shapes
mapView.Shapes.removeAll();

Styling Options

  • Polygons/MultiPolygons: Use PaintStyle with color, opacity, height
  • LineStrings: Use LineStyle with color, width, opacity
  • Interactive: Set interactive: true for click/hover events

Advanced

  • Use altitude to position shapes at specific heights.
  • Use height to create 3D extruded shapes.
  • Use interactive: true to make shapes clickable.
  • Use floor parameter to place shapes on specific floors.

More Information

This class is accessed using MapView.Shapes.

Methods

add remove removeAll

Methods

add

  • add<T extends FeatureCollection<Polygon | MultiPolygon | LineString, any>>(
        geometry: T,
        style: T extends FeatureCollection<LineString, any>
            ? LineStyle
            : PaintStyle,
        floor?: Floor,
    ): Shape

    Adds a custom GeoJSON geometry (Shape) to the map.

    Type Parameters

    Parameters

    • geometry: T

      A valid GeoJSON feature collection containing Polygon, MultiPolygon, or LineString features.

    • style: T extends FeatureCollection<LineString, any> ? LineStyle : PaintStyle

      Styling options for the geometry (see PaintStyle for polygons, LineStyle for lines).

    • Optionalfloor: Floor

      Optional floor to add the geometry to. If not specified, uses the current floor.

    Returns Shape

    The created shape, or undefined if creation failed.

    Example: Add a red polygon shape

    const polygon = {
      type: 'FeatureCollection',
      features: [{
        type: 'Feature',
        geometry: {
          type: 'Polygon',
          coordinates: [[[lng1, lat1], [lng2, lat2], [lng3, lat3], [lng1, lat1]]]
        }
      }]
    };

    const shape = mapView.Shapes.add(polygon, { color: 'red' }, mapView.currentFloor);

    Example: Add a blue line string

    const lineString = {
      type: 'FeatureCollection',
      features: [{
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: [[lng1, lat1], [lng2, lat2]]
        }
      }]
    };

    const line = mapView.Shapes.add(lineString, { color: 'blue', width: 2 });

    Example: Add an interactive shape with custom styling

    const shape = mapView.Shapes.add(geometry, {
      color: 'green',
      opacity: 0.7,
      height: 2,
      interactive: true
    }, mapView.currentFloor);

    See

    Shapes Guide

remove

  • remove(shape: Shape): void

    Removes a specific shape (Shape) from the map.

    Parameters

    • shape: Shape

      The shape to be removed.

    Returns void

    Example

    mapView.Shapes.remove(shape);

removeAll

  • removeAll(): string[]

    Removes all Shapes (Shape) from the map.

    Returns string[]

    An array of all removed shape IDs.

    Example

    const removedShapeIds = mapView.Shapes.removeAll();

Settings

Member Visibility

On This Page

Shapes in Mappedin JS
Methods