Mappedin JS - v6.14.0
    Preparing search index...

    Interface Shapes

    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.

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

    // 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();
    • Polygons/MultiPolygons: Use PaintStyle with color, opacity, height
    • LineStrings: Use LineStyle with color, width, opacity
    • Interactive: Set interactive: true for click/hover events
    • 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.

    This class is accessed using MapView.Shapes.

    interface Shapes {
        add<
            T extends FeatureCollection<Polygon | MultiPolygon | LineString, any>,
        >(
            geometry: T,
            style: T extends FeatureCollection<LineString, any>
                ? LineStyle
                : PaintStyle,
            floor?: Floor,
        ): Shape;
        remove(shape: Shape): void;
        removeAll(): string[];
    }
    Index

    Methods

    add remove removeAll

    Methods

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

      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);

      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 });

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

      Shapes Guide

    • Removes a specific shape (Shape) from the map.

      Parameters

      • shape: Shape

        The shape to be removed.

      Returns void

      mapView.Shapes.remove(shape);

    • Removes all Shapes (Shape) from the map.

      Returns string[]

      An array of all removed shape IDs.

      const removedShapeIds = mapView.Shapes.removeAll();

    Settings

    Member Visibility

    On This Page

    Shapes in Mappedin JS
    Methods