Class MapView

ExperimentalBlueDot

Camera

Images

Labels

Markers

Models

Navigation

Outdoor

Paths

Shapes

Style

currentFloor

• get currentFloor(): Floor

• The current floor (Floor) of the map.

  Returns Floor

clear

• clear(): void

• Clears all added elements from the map.

  Returns void

createCoordinate

• createCoordinate(latitude, longitude, 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);
  Copy

createCoordinateFromScreenCoordinate

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

• Parameters

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

  Returns undefined | Coordinate

destroy

• destroy(): void

• Destroys the MapView.

  Returns void

enableDebug

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

  Enable debug interface

  Parameters

  • opitons: Partial<InspectorState> = {}

  Returns Promise<void>

expand

• expand(opts?): undefined | Promise<void>
• Experimental

  Parameters

  • Optionalopts: {
        excludeFloors: Floor[];
    }

    • excludeFloors: Floor[]

  Returns undefined | Promise<void>

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.

  • height: number

  • width: number

getDirections

• getDirections(from, to, options?): undefined | Directions

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

  Parameters

  • from: TNavigationTarget | TNavigationTarget[]

    The starting point for navigation.
  • to: TNavigationTarget | TNavigationTarget[]

    The destination point.
  • Optionaloptions: TGetDirectionsOptions

    Optional parameters for getting directions.

  Returns undefined | Directions

  Directions from the start to the destination point.

  Example

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

getDirectionsMultiDestination

• getDirectionsMultiDestination(from, to, options?): undefined | Directions[]

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

  Parameters

  • from: TNavigationTarget

    The starting point for navigation.
  • to: (TNavigationTarget | TNavigationTarget[])[]

    The destination points.
  • Optionaloptions: TGetDirectionsOptions

    Optional parameters for getting directions.

  Returns undefined | Directions[]

  Directions from the start to the destination points.

getDistance

• getDistance(from, to): undefined | number

• Retrieves the distance between two navigable points (TNavigationTarget) on the map.

  Parameters

  • from:
        | Coordinate
        | Space
        | MapObject
        | Door
        | Annotation
        | PointOfInterest
        | Node
        | EnterpriseLocation

    The starting point.
  • to:
        | Coordinate
        | Space
        | MapObject
        | Door
        | Annotation
        | PointOfInterest
        | Node
        | EnterpriseLocation

    The destination point.

  Returns undefined | number

  The distance between the start and destination points in meters.

getHoverColor

• getHoverColor(): undefined | string

• Returns undefined | string

getMapData

• getMapData(): {}

• Returns {}

getState

• getState<T>(target): TGetState<T>

• Type Parameters

  • T extends
        | string
        | Space
        | MapObject
        | Label
        | Marker
        | Image
        | Shape

  Parameters

  • target: T

  Returns TGetState<T>

isInView

• isInView(target): 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
        | Space
        | MapObject
        | Label
        | 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>(eventName, fn): void

• Unsubscribe a function previously subscribed with on

  Type Parameters

  • EventName extends
        | "floor-change"
        | "floor-change-start"
        | "hover"
        | "click"
        | "camera-change"
        | "outdoor-view-loaded"
        | "outdoor-style-loaded"
        | "user-interaction-start"
        | "user-interaction-end"
        | (keyof TStackedMapsEvents)
        | "blue-dot-position-update"
        | "blue-dot-state-change"
        | "blue-dot-error"

  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.

    • • (payload): void

      • Parameters

        • payload: TEventPayload<EventName>

        Returns void

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

on

• on<EventName>(eventName, fn): void

• Subscribe a function to an event.

  Type Parameters

  • EventName extends
        | "floor-change"
        | "floor-change-start"
        | "hover"
        | "click"
        | "camera-change"
        | "outdoor-view-loaded"
        | "outdoor-style-loaded"
        | "user-interaction-start"
        | "user-interaction-end"
        | (keyof TStackedMapsEvents)
        | "blue-dot-position-update"
        | "blue-dot-state-change"
        | "blue-dot-error"

  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.

    • • (payload): void

      • Parameters

        • payload: TEventPayload<EventName>

        Returns void

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

setFloor

• setFloor(floor): undefined | Promise<void>

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

  Parameters

  • floor: string | Floor

    The floor or floor ID to set.

  Returns undefined | Promise<void>

setHoverColor

• setHoverColor(c): void

• Parameters

  • c: string

  Returns void

showStack

• showStack(opts?): undefined | Promise<void>

• Parameters

  • Optionalopts: TShowStackOptions

  Returns undefined | Promise<void>

update

• update(): void

• Returns void

updateState

• updateState<T>(target, state): any

• Updates the state (TUpdateState) of a given target on the map.

  The following table maps targets to states.

  target	state
  Label	TLabelState
  MapObject	TGeometryState
  Space	TGeometryState

  Type Parameters

  • T extends
        | Space
        | MapObject
        | Door
        | Label
        | Marker
        | Shape
        | WALLS
        | DOORS

  Parameters

  • target: T

    The target to update.
  • state: TUpdateState<T>

    The new state to apply to the target.

  Returns any

  Example

  // Update the color of a space to red.
  map.updateState(space, { color: 'red' });
  Copy

• updateState<T>(target, state): any

• Type Parameters

  • T extends string & {}

  Parameters

  • target: T
  • state: TUpdateStates

  Returns any