Class MapView

The MapView class is the main class for rendering and interacting with the map.

It provides a set of controls for manipulating the map's elements and state.

For help getting started, refer to the Getting Started Guide.

Hierarchy (View Summary, Expand)

Properties

BlueDot Camera Images Labels Markers Models Navigation Outdoor Paths Shapes Style Text3D

Accessors

currentFloor currentFloorStack StackedMaps

Methods

clear createCoordinate createCoordinateFromScreenCoordinate destroy enableDebug expand getDimensions getDirections getDirectionsMultiDestination getDistance getGlobalState getHoverColor getMapData getScreenCoordinateFromCoordinate getState isInView off on setFloor setFloorStack setHoverColor takeScreenshot update updateGlobalState updateState

Properties

ExperimentalBlueDot

BlueDot: BlueDot

Controls for BlueDot positioning.

Camera

Camera: Camera

Controls for the map's camera.

Images

Images: Images

Controls for the map's markers.

Labels

Labels: Labels

Controls for the map's labels.

Markers

Markers: Markers

Controls for the map's markers.

Models

Models: Models

Controls for the map's models.

Navigation

Navigation: Navigation

Controls for the map's navigation.

Outdoor

Outdoor: Outdoor

Controls for the outdoor map.

Paths

Paths: Paths

Controls for the map's paths.

Shapes

Shapes: Shapes

Controls custom GeoJSON geometry on the map

Style

Style: Style

Controls for the indoor map's style.

ExperimentalText3D

Text3D: Text3DApi

Controls for the map's 3D texts.

Accessors

currentFloor

  • get currentFloor(): Floor

  • The current floor (Floor) of the map.

    Returns Floor

currentFloorStack

StackedMaps

Methods

clear

  • clear(): void

  • Clears all added elements from the map.

    Returns void

createCoordinate

  • createCoordinate(latitude: number, longitude: number, floor?: Floor): Coordinate

  • Creates a Coordinate on the map.

    Parameters

    • latitude: number

      The latitude of the coordinate.

    • longitude: number

      The longitude of the coordinate.

    • Optionalfloor: Floor

      Optional floor information if applicable.

    Returns Coordinate

    The created Coordinate object.

    Example

    // Create a coordinate at the CN Tower.
    const coord = map.createCoordinate(43.642567, -79.387054);

    // Alternatively, you can directly use the Coordinate constructor:
    import { Coordinate } from '@mappedin/mappedin-js';
    const coord = new Coordinate(43.642567, -79.387054, floor?.id);
  • createCoordinate(params: TCoordinateParams): Coordinate

  • Creates a Coordinate on the map using a params object.

    Parameters

    • params: TCoordinateParams

      An object containing the coordinate parameters.

      • latitude

        The latitude of the coordinate in decimal degrees.

      • longitude

        The longitude of the coordinate in decimal degrees.

      • floorId

        Optional ID of the floor this coordinate is on.

      • verticalOffset

        Optional vertical offset from the floor in meters.

    Returns Coordinate

    The created Coordinate object.

    Example

    // Create a coordinate at the CN Tower using params object.
    const coord = map.createCoordinate({
      latitude: 43.642567,
      longitude: -79.387054
    });

    // Alternatively, you can directly use the Coordinate constructor:
    import { Coordinate } from '@mappedin/mappedin-js';
    const coord = new Coordinate({
      latitude: 43.642567,
      longitude: -79.387054,
      floorId: 'floor1',
      verticalOffset: 10
    });

createCoordinateFromScreenCoordinate

  • createCoordinateFromScreenCoordinate(
        x: number,
        y: number,
        floor?: Floor,
    ): undefined | Coordinate
  • Experimental

    Create a Coordinate from an X and Y position measured in pixels from the top left corner of the map canvas.

    Parameters

    • x: number
    • y: number
    • Optionalfloor: Floor

    Returns undefined | Coordinate

destroy

  • destroy(): void

  • Destroys the MapView.

    Returns void

enableDebug

  • enableDebug(opitons?: Partial<InspectorState>): Promise<void>
  • Experimental

    Enable debug interface. Learn more about the debug interface in the Debug Mode Guide.

    Parameters

    • opitons: Partial<InspectorState> = {}

    Returns Promise<void>

expand

getDimensions

  • getDimensions(): { height: number; width: number }

  • Retrieves the dimensions of the map's canvas.

    Returns { height: number; width: number }

    An object containing the width and height of the canvas.

getDirections

getDirectionsMultiDestination

getDistance

getGlobalState

  • getGlobalState(): GlobalState

  • Get global state of the MapView

    Returns GlobalState

getHoverColor

  • getHoverColor(): undefined | string

  • Returns undefined | string

getMapData

  • getMapData(): { [key: string]: MapData }

  • Retrieves the map data for the current map.

    Returns { [key: string]: MapData }

    The MapData for the current map.

getScreenCoordinateFromCoordinate

  • getScreenCoordinateFromCoordinate(
        coordinate: Coordinate,
    ): { x: number; y: number }
  • Experimental

    Get the X and Y of a Coordinate measured from the top left corner of the map canvas.

    Parameters

    Returns { x: number; y: number }

getState

isInView

  • isInView(target: string | Label | Space | MapObject | Marker): boolean

  • Determines if a given target is within the viewport.

    This method checks if the specified target, such as a Space, MapObject, Label, Marker, or string identifier, is currently within the visible area of the map viewport. Note that this method returns true even if the target is not visible (e.g., its visibility is set to false).

    Parameters

    • target: string | Label | Space | MapObject | Marker

      The target to check for viewport inclusion. This can be a Space, MapObject, Label, Marker, or string identifier.

    Returns boolean

    A boolean indicating whether the target is within the viewport.

off

  • off<
        EventName extends
            | "floor-change"
            | "floor-change-start"
            | "navigation-connection-click"
            | "navigation-active-path-change"
            | "hover"
            | "click"
            | "camera-change"
            | "outdoor-view-loaded"
            | "outdoor-style-loaded"
            | "user-interaction-start"
            | "user-interaction-end"
            | "pre-render"
            | "post-render"
            | "stacked-maps-state-change"
            | "dynamic-focus-change"
            | "blue-dot-position-update"
            | "blue-dot-state-change"
            | "blue-dot-error"
            | "blue-dot-follow-change",
    >(
        eventName: EventName,
        fn: (payload: TEventPayload<EventName>) => void,
    ): void

  • Unsubscribe a function previously subscribed with on

    Type Parameters

    • EventName extends
          | "floor-change"
          | "floor-change-start"
          | "navigation-connection-click"
          | "navigation-active-path-change"
          | "hover"
          | "click"
          | "camera-change"
          | "outdoor-view-loaded"
          | "outdoor-style-loaded"
          | "user-interaction-start"
          | "user-interaction-end"
          | "pre-render"
          | "post-render"
          | "stacked-maps-state-change"
          | "dynamic-focus-change"
          | "blue-dot-position-update"
          | "blue-dot-state-change"
          | "blue-dot-error"
          | "blue-dot-follow-change"

    Parameters

    • eventName: EventName

      An event name to which the provided function was previously subscribed.

    • fn: (payload: TEventPayload<EventName>) => void

      A function that was previously passed to on. The function must have the same reference as the function that was subscribed.

    Returns void

    Example

    // Unsubscribe from the 'click' event
    const handler = (event) => {
     const { coordinate } = event;
     const { latitude, longitude } = coordinate;
    	console.log(`Map was clicked at ${latitude}, ${longitude}`);
    };
    mapView.off('click', handler);

on

  • on<
        EventName extends
            | "floor-change"
            | "floor-change-start"
            | "navigation-connection-click"
            | "navigation-active-path-change"
            | "hover"
            | "click"
            | "camera-change"
            | "outdoor-view-loaded"
            | "outdoor-style-loaded"
            | "user-interaction-start"
            | "user-interaction-end"
            | "pre-render"
            | "post-render"
            | "stacked-maps-state-change"
            | "dynamic-focus-change"
            | "blue-dot-position-update"
            | "blue-dot-state-change"
            | "blue-dot-error"
            | "blue-dot-follow-change",
    >(
        eventName: EventName,
        fn: (payload: TEventPayload<EventName>) => void,
    ): void

  • Subscribe a function to an event.

    Type Parameters

    • EventName extends
          | "floor-change"
          | "floor-change-start"
          | "navigation-connection-click"
          | "navigation-active-path-change"
          | "hover"
          | "click"
          | "camera-change"
          | "outdoor-view-loaded"
          | "outdoor-style-loaded"
          | "user-interaction-start"
          | "user-interaction-end"
          | "pre-render"
          | "post-render"
          | "stacked-maps-state-change"
          | "dynamic-focus-change"
          | "blue-dot-position-update"
          | "blue-dot-state-change"
          | "blue-dot-error"
          | "blue-dot-follow-change"

    Parameters

    • eventName: EventName

      An event name which, when fired, will call the provided function.

    • fn: (payload: TEventPayload<EventName>) => void

      A callback that gets called when the corresponding event is fired. The callback will get passed an argument with a type that's one of event payloads.

    Returns void

    Example

    // Subscribe to the 'click' event
    const handler = (event) => {
     const { coordinate } = event;
     const { latitude, longitude } = coordinate;
    	console.log(`Map was clicked at ${latitude}, ${longitude}`);
    };
    mapView.on('click', handler);

setFloor

  • setFloor(floor: string | Floor): void

  • Sets the current floor (Floor) of the map.

    Parameters

    • floor: string | Floor

      The floor or floor ID to set.

    Returns void

setFloorStack

  • setFloorStack(floorStack: string | FloorStack): void

  • Sets the current floor stack (FloorStack) of the map. The default floor of the stack will be set as the current floor.

    Parameters

    • floorStack: string | FloorStack

      The floor stack or floor stack ID to set.

    Returns void

setHoverColor

  • setHoverColor(c: string): void

  • Parameters

    • c: string

    Returns void

takeScreenshot

  • takeScreenshot(): Promise<string>
  • Experimental

    Takes a screenshot of the current scene and returns it as a data URL.

    NOTE: This only captures the 3D scene, not the UI elements like labels, markers, etc. Also, this does not cause the screenshot to be saved to the user's device, it only returns the data.

    Returns Promise<string>

    A Promise that resolves with the screenshot as a base64-encoded data URL string

update

  • update(): void

  • Returns void

updateGlobalState

  • updateGlobalState(
        update: Partial<
            {
                backgroundAlpha: number;
                backgroundColor: string;
                environment: Partial<EnvMapOptions>;
                geometry: Partial<{ hoverColor: string }>;
                text3d: Partial<{ hoverColor: string }>;
            },
        >,
    ): void

  • Update global state of the MapView

    Parameters

    • update: Partial<
          {
              backgroundAlpha: number;
              backgroundColor: string;
              environment: Partial<EnvMapOptions>;
              geometry: Partial<{ hoverColor: string }>;
              text3d: Partial<{ hoverColor: string }>;
          },
      >

    Returns void

updateState

Settings

Member Visibility

On This Page

Properties
Accessors
Methods
MMNEPVFCICPMFPCPTTAAATR