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 getDirections getDirectionsMultiDestination Images Labels Markers Models Navigation off on Outdoor Paths Shapes Style Text3D update

Accessors

currentFloor currentFloorStack StackedMaps

Methods

clear createCoordinate createCoordinateFromScreenCoordinate destroy enableDebug expand getDimensions getDistance getGlobalState getHoverColor getMapData getState isInView setFloor setFloorStack setHoverColor takeScreenshot updateGlobalState updateState

Properties

ExperimentalBlueDot

BlueDot: BlueDot

Controls for BlueDot positioning.

Camera

Camera: Camera

Controls for the map's camera.

getDirections

getDirections: (
    from: TNavigationTarget | TNavigationTarget[],
    to: TNavigationTarget | TNavigationTarget[],
    options?: TGetDirectionsOptions,
) => undefined | Directions

Retrieves directions (Directions) from one navigable point (TNavigationTarget) to another on the map.

Type declaration

Example

const directions = await map.getDirections(space1, space2);

getDirectionsMultiDestination

getDirectionsMultiDestination: (
    from: TNavigationTarget,
    to: (TNavigationTarget | TNavigationTarget[])[],
    options?: TGetDirectionsOptions,
) => undefined | Directions[]

Retrieves directions (Directions) from one navigable point (TNavigationTarget) to multiple destination points on the map.

Type declaration

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: default.Navigation

Controls for the map's navigation.

off

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

Unsubscribe a function previously subscribed with on

Type declaration

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

    • Type Parameters

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

Subscribe a function to an event.

Type declaration

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

    • Type Parameters

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

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.

update

update: () => void

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

createCoordinateFromScreenCoordinate

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

  • 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

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

getDistance

getGlobalState

  • getGlobalState(): GlobalState

  • Get global state of the MapView

    Returns GlobalState

getHoverColor

  • getHoverColor(): undefined | string

  • Returns undefined | string

getMapData

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

  • Retrieves the map data for the current map.

    Returns { [x: string]: MapData }

    The MapData for the current map.

getState

isInView

  • isInView(
        target: string | default.Marker | Space | MapObject | default.Label,
    ): 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

    Returns boolean

    A boolean indicating whether the target is within the viewport.

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

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