Class MapView

MapView in Mappedin JS

MapView is the main rendering and interaction class for Mappedin maps. It provides comprehensive controls for manipulating map elements, camera, styling, and user interactions.

Features

Rendering Control: Camera, labels, markers, models, paths, and more
Interactive Elements: Hover effects, click handling, and state management
Animation System: Smooth transitions and state animations
Multi-floor Support: Floor switching and stacked maps
Navigation: Built-in wayfinding and directions
Styling: Dynamic theme and style customization
Event System: Comprehensive event handling for user interactions

Best Practice: Use the specialized API classes (Camera, Markers, Labels, etc.) for specific functionality.

Example Usage

// Initialize MapView
const mapData = await getMapData({key: 'your-key', secret: 'your-secret', mapId: 'your-map-id'});
const mapView = await show3dMap(container, mapData);
mapView.on('click', (event) => {
  console.log('Clicked:', event.coordinate);
});

Core Components

Camera: View control, zoom, pan, and rotation
Markers: Point-based visual elements
Labels: Text overlays on the map
Paths: Route visualization and navigation
Models: 3D model rendering
Style: Theme and appearance customization
Navigation: Wayfinding and directions

State Management

updateState(): Immediate state changes
animateState(): Smooth animated transitions
getState(): Retrieve current element states
updateGlobalState(): Apply global styling changes

Event Handling

// Listen for user interactions
mapView.on('click', (event) => {
  console.log('Clicked:', event.coordinate);
});

mapView.on('hover', (event) => {
  console.log('Hovered:', event.coordinate);
});

mapView.on('floorChanged', (event) => {
  console.log('Floor changed to:', event.floor);
});

More Information

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.

Properties

Camera

Camera: Camera

Controls for the map's camera.

Provides methods for camera positioning, zooming, panning, and view control.

Example

// Set camera position
mapView.Camera.setPosition(coordinate, { duration: 1000 });

// Zoom to fit all spaces
mapView.Camera.fitToElements(spaces);

// Animate camera movement
mapView.Camera.animateTo(coordinate, { duration: 2000 });

See

Camera Guide

Image3D

Image3D: Image3D

Controls for the map's 3D images.

Manages image overlays and custom image elements on the map.

Example

// Add an image
const image = mapView.Image3D.add(coordinate, 'path/to/image.png', {
  width: 100,
  height: 100
});

Labels

Labels: Labels

Controls for the map's labels.

Manages text overlays, tooltips, and label visibility on the map.

Example

// Add a label
const label = mapView.Labels.add(coordinate, 'Welcome!');

// Update label style
mapView.Labels.update(label, { color: 'red', fontSize: 16 });

// Remove label
mapView.Labels.remove(label);

See

Labels Guide

Markers

Markers: Markers

Controls for the map's markers.

Manages point-based visual elements like pins, icons, and custom markers.

Example

// Add a marker
const marker = mapView.Markers.add(coordinate, {
  color: 'red',
  size: 20,
  label: 'Important Location'
});

// Update marker
mapView.Markers.update(marker, { color: 'blue' });

// Remove marker
mapView.Markers.remove(marker);

See

Markers Guide

Models

Models: Models

Controls for the map's models.

Manages 3D model rendering and positioning on the map.

Example

// Add a 3D model
const model = mapView.Models.add(coordinate, 'path/to/model.glb', {
  scale: 1.0,
  rotation: { x: 0, y: 0, z: 0 }
});

Navigation: Navigation

Controls for the map's navigation.

Outdoor

Outdoor: Outdoor

Controls for the outdoor map.

Manages outdoor map integration and outdoor tile rendering.

Example

// Enable outdoor map
mapView.Outdoor.enable();

// Set outdoor style
mapView.Outdoor.setStyle('satellite');

Paths

Paths: Paths

Controls for the map's paths.

Manages route visualization, navigation paths, and custom path rendering.

Example

// Add a path
const path = mapView.Paths.add(coordinates, {
  color: 'blue',
  width: 3,
  animated: true
});

// Show navigation route
const directions = mapData.getDirections(space1, space2);
if (directions) {
  mapView.Paths.show(directions);
}

See

Paths Guide

Shapes

Shapes: Shapes

Controls custom GeoJSON geometry on the map.

Allows adding custom geometric shapes and overlays to the map.

Example

// Add custom shape
const shape = mapView.Shapes.add(geoJSON, {
  color: 'red',
  opacity: 0.5
});

Style

Style: Style

Controls for the indoor map's style.

`Experimental`Text3D

Text3D: Text3D

Controls for the map's 3D texts.

Provides 3D text rendering capabilities for enhanced visual effects.

Example

// Add 3D text
const text3d = mapView.Text3D.add(coordinate, '3D Text', {
  height: 10,
  color: 'blue'
});

Accessors

container

get container(): HTMLElement
The container element of the map.

Returns HTMLElement

currentFloor

get currentFloor(): Floor

Gets the current (Floor) of the map.

Returns Floor

The current Floor, or undefined if no floor is set.

Example

const currentFloor = mapView.currentFloor;
if (currentFloor) {
  console.log('Current floor:', currentFloor.name);
  console.log('Floor level:', currentFloor.level);
}

currentFloorStack

get currentFloorStack(): FloorStack
Gets the current (FloorStack).

Returns FloorStack
The current FloorStack, or undefined if no floor stack is set.
Example
```
const currentStack = mapView.currentFloorStack;
if (currentStack) {
  console.log('Current floor stack:', currentStack.name);
}
```

options

get options(): ReadonlyDeep<TShow3DMapOptions>
The options passed in to the show3dMap method during initialization.

Returns ReadonlyDeep<TShow3DMapOptions>

tweenGroup

get tweenGroup(): Group
The group which manages all tweens created with tween or animateState.

Returns Group

Methods

EXPERIMENTALauto

__EXPERIMENTAL__auto(mapElements?: MapDataElements[]): Promise<AutoElements>
Experimental
This is an experimental feature that may undergo significant changes, including breaking changes, renaming, or complete removal in future versions. Do not rely on this API in production environments.

Automatically creates labels, markers, and updates state of map elements provided with default settings.
Parameters
- OptionalmapElements: MapDataElements[]
  A custom array of map elements to automatically create labels, markers, and update state of. If not provided, all map elements will be used.
Returns Promise<AutoElements>
An object containing auto-created labels and markers.

EXPERIMENTALgetRenderedState

__EXPERIMENTAL__getRenderedState<T extends Label>(
target: T,
): TGetRenderedState<T> | undefined
Gets the rendered state of a map element.

Retrieves runtime rendering state that changes frequently, such as text visibility for labels.
Type Parameters
- T extends Label
Parameters
- target: T
  The map element to get the rendered state for.
Returns TGetRenderedState<T> | undefined
An object containing the requested rendered state keys, or undefined if not found.
Example: Get label text visibility
```
const label = mapView.Labels.add(space, 'Hello');
const renderedState = mapView.__EXPERIMENTAL__getRenderedState(label);
console.log('Text visible:', renderedState?.textVisible);
```

animateState

animateState<T extends MapElementsWithState>(
    target: T,
    state: PartialDeep<
        {
            [K in string
            | number
            | symbol as TGetState<T>[K] extends string | number | undefined
                ? K
                : TGetState<T>[K] extends object | undefined
                    ? {
                        [K in string
                        | number
                        | symbol as NonNullable<any[any]>[K] extends
                            | string
                            | number
                            | undefined
                            ? K
                            : NonNullable<any[any]>[K] extends object | undefined
                                ? {
                                    [K in (...)
                                    | (...)
                                    | (...) as (...) extends (...) ? (...) : (...)]: (...) extends (
                                        ...
                                    )
                                        ? (...)
                                        : (...)
                                } extends never
                                    ? never
                                    : K
                                : never]: NonNullable<any[any]>[K] extends object | undefined
                            ? undefined extends any[any]
                                ? | {
                                    [K in (...)
                                    | (...)
                                    | (...) as (...) extends (...) ? (...) : (...)]: (...) extends (
                                        ...
                                    )
                                        ? (...)
                                        : (...)
                                }
                                | any[any] & undefined
                                : {
                                    [K in string
                                    | number
                                    | symbol as (...)[(...)] extends (...) | (...) | (...)
                                        ? K
                                        : (...) extends (...) ? (...) : (...)]: (...)[(...)] extends
                                        | (...)
                                        | (...)
                                        ? (...) extends (...) ? (...) : (...)
                                        : (...) extends (...) ? (...) : (...)
                                }
                            : NonNullable<any[any]>[K] extends string | number | undefined
                                ? any[any]
                                : never
                    } extends never
                        ? never
                        : K
                    : never]: TGetState<T>[K] extends object | undefined
                ? undefined extends any[any]
                    ? | {
                        [K in string
                        | number
                        | symbol as NonNullable<any[any]>[K] extends
                            | string
                            | number
                            | undefined
                            ? K
                            : NonNullable<any[any]>[K] extends object | undefined
                                ? {
                                    [K in (...)
                                    | (...)
                                    | (...) as (...) extends (...) ? (...) : (...)]: (...) extends (
                                        ...
                                    )
                                        ? (...)
                                        : (...)
                                } extends never
                                    ? never
                                    : K
                                : never]: NonNullable<any[any]>[K] extends object | undefined
                            ? undefined extends any[any]
                                ? | {
                                    [K in (...)
                                    | (...)
                                    | (...) as (...) extends (...) ? (...) : (...)]: (...) extends (
                                        ...
                                    )
                                        ? (...)
                                        : (...)
                                }
                                | any[any] & undefined
                                : {
                                    [K in string
                                    | number
                                    | symbol as (...)[(...)] extends (...) | (...) | (...)
                                        ? K
                                        : (...) extends (...) ? (...) : (...)]: (...)[(...)] extends
                                        | (...)
                                        | (...)
                                        ? (...) extends (...) ? (...) : (...)
                                        : (...) extends (...) ? (...) : (...)
                                }
                            : NonNullable<any[any]>[K] extends string | number | undefined
                                ? any[any]
                                : never
                    }
                    | any[any] & undefined
                    : {
                        [K in string
                        | number
                        | symbol as NonNullable<any[any]>[K] extends
                            | string
                            | number
                            | undefined
                            ? K
                            : NonNullable<any[any]>[K] extends object | undefined
                                ? {
                                    [K in string
                                    | number
                                    | symbol as (...)[(...)] extends (...) | (...) | (...)
                                        ? K
                                        : (...) extends (...) ? (...) : (...)]: (...)[(...)] extends
                                        | (...)
                                        | (...)
                                        ? (...) extends (...) ? (...) : (...)
                                        : (...) extends (...) ? (...) : (...)
                                } extends never
                                    ? never
                                    : K
                                : never]: NonNullable<any[any]>[K] extends object | undefined
                            ? undefined extends any[any]
                                ? | {
                                    [K in string
                                    | number
                                    | symbol as (...)[(...)] extends (...) | (...) | (...)
                                        ? K
                                        : (...) extends (...) ? (...) : (...)]: (...)[(...)] extends
                                        | (...)
                                        | (...)
                                        ? (...) extends (...) ? (...) : (...)
                                        : (...) extends (...) ? (...) : (...)
                                }
                                | any[any] & undefined
                                : {
                                    [K in string
                                    | number
                                    | symbol as NonNullable<(...)>[K] extends
                                        | string
                                        | number
                                        | undefined
                                        ? K
                                        : (...)[(...)] extends (...) | (...) ? K : never]: NonNullable<
                                        (...),
                                    >[K] extends object | undefined
                                        ? undefined extends any[any] ? any : any
                                        : (...)[(...)] extends (...) | (...) | (...) ? any[any] : never
                                }
                            : NonNullable<any[any]>[K] extends string | number | undefined
                                ? any[any]
                                : never
                    }
                : TGetState<T>[K] extends string | number | undefined ? any[any] : never
        },
    >,
    options?: {
        duration?: number;
        easing?:
            | "ease-in"
            | "ease-out"
            | "ease-in-out"
            | "linear"
            | "ease-out-cubic";
    },
): TCancellablePromise<TAnimateStateResult>

Animate the state of a given target on the map from the current state to a new state. Only numeric properties and colors can be animated.

Use updateState() for immediate updates.

The following table maps targets to their available states:

Target	State Type	Description
Door	TDoorsUpdateState	Open/closed state, color
Floor	TFloorUpdateState	Color, opacity, visibility
Label	TLabelUpdateState	Text, color, visibility
Marker	TMarkerUpdateState	Color, size, icon
Model	TModelUpdateState	Scale, rotation, visibility
Path	TPathUpdateState	Color, width, visibility
Shape	TShapeUpdateState	Color, opacity, geometry
Space	TGeometryUpdateState	Color, opacity, visibility
Text3DView	TText3DUpdateState	Text, color, height
DOORS	TDoorsUpdateState	Global door settings
WALLS	TWallsUpdateState	Global wall settings

Type Parameters

T extends MapElementsWithState

Parameters

target: T
The map element to animate.
state: PartialDeep<
    {
        [K in string
        | number
        | symbol as TGetState<T>[K] extends string | number | undefined
            ? K
            : TGetState<T>[K] extends object | undefined
                ? {
                    [K in string
                    | number
                    | symbol as NonNullable<any[any]>[K] extends
                        | string
                        | number
                        | undefined
                        ? K
                        : NonNullable<any[any]>[K] extends object | undefined
                            ? {
                                [K in (...)
                                | (...)
                                | (...) as (...) extends (...) ? (...) : (...)]: (...) extends (...)
                                    ? (...)
                                    : (...)
                            } extends never
                                ? never
                                : K
                            : never]: NonNullable<any[any]>[K] extends object | undefined
                        ? undefined extends any[any]
                            ? | {
                                [K in (...)
                                | (...)
                                | (...) as (...) extends (...) ? (...) : (...)]: (...) extends (...)
                                    ? (...)
                                    : (...)
                            }
                            | any[any] & undefined
                            : {
                                [K in string
                                | number
                                | symbol as (...)[(...)] extends (...) | (...) | (...)
                                    ? K
                                    : (...) extends (...) ? (...) : (...)]: (...)[(...)] extends
                                    | (...)
                                    | (...)
                                    ? (...) extends (...) ? (...) : (...)
                                    : (...) extends (...) ? (...) : (...)
                            }
                        : NonNullable<any[any]>[K] extends string | number | undefined
                            ? any[any]
                            : never
                } extends never
                    ? never
                    : K
                : never]: TGetState<T>[K] extends object | undefined
            ? undefined extends any[any]
                ? | {
                    [K in string
                    | number
                    | symbol as NonNullable<any[any]>[K] extends
                        | string
                        | number
                        | undefined
                        ? K
                        : NonNullable<any[any]>[K] extends object | undefined
                            ? {
                                [K in (...)
                                | (...)
                                | (...) as (...) extends (...) ? (...) : (...)]: (...) extends (...)
                                    ? (...)
                                    : (...)
                            } extends never
                                ? never
                                : K
                            : never]: NonNullable<any[any]>[K] extends object | undefined
                        ? undefined extends any[any]
                            ? | {
                                [K in (...)
                                | (...)
                                | (...) as (...) extends (...) ? (...) : (...)]: (...) extends (...)
                                    ? (...)
                                    : (...)
                            }
                            | any[any] & undefined
                            : {
                                [K in string
                                | number
                                | symbol as (...)[(...)] extends (...) | (...) | (...)
                                    ? K
                                    : (...) extends (...) ? (...) : (...)]: (...)[(...)] extends
                                    | (...)
                                    | (...)
                                    ? (...) extends (...) ? (...) : (...)
                                    : (...) extends (...) ? (...) : (...)
                            }
                        : NonNullable<any[any]>[K] extends string | number | undefined
                            ? any[any]
                            : never
                }
                | any[any] & undefined
                : {
                    [K in string
                    | number
                    | symbol as NonNullable<any[any]>[K] extends
                        | string
                        | number
                        | undefined
                        ? K
                        : NonNullable<any[any]>[K] extends object | undefined
                            ? {
                                [K in string
                                | number
                                | symbol as (...)[(...)] extends (...) | (...) | (...)
                                    ? K
                                    : (...) extends (...) ? (...) : (...)]: (...)[(...)] extends
                                    | (...)
                                    | (...)
                                    ? (...) extends (...) ? (...) : (...)
                                    : (...) extends (...) ? (...) : (...)
                            } extends never
                                ? never
                                : K
                            : never]: NonNullable<any[any]>[K] extends object | undefined
                        ? undefined extends any[any]
                            ? | {
                                [K in string
                                | number
                                | symbol as (...)[(...)] extends (...) | (...) | (...)
                                    ? K
                                    : (...) extends (...) ? (...) : (...)]: (...)[(...)] extends
                                    | (...)
                                    | (...)
                                    ? (...) extends (...) ? (...) : (...)
                                    : (...) extends (...) ? (...) : (...)
                            }
                            | any[any] & undefined
                            : {
                                [K in string
                                | number
                                | symbol as NonNullable<(...)>[K] extends
                                    | string
                                    | number
                                    | undefined
                                    ? K
                                    : (...)[(...)] extends (...) | (...) ? K : never]: NonNullable<
                                    (...),
                                >[K] extends object | undefined
                                    ? undefined extends any[any] ? any : any
                                    : (...)[(...)] extends (...) | (...) | (...) ? any[any] : never
                            }
                        : NonNullable<any[any]>[K] extends string | number | undefined
                            ? any[any]
                            : never
                }
            : TGetState<T>[K] extends string | number | undefined ? any[any] : never
    },
>
The target state to animate to.
Optionaloptions: {
    duration?: number;
    easing?:
        | "ease-in"
        | "ease-out"
        | "ease-in-out"
        | "linear"
        | "ease-out-cubic";
}
Animation configuration options.
- Optionalduration?: number
  The duration of the animation in milliseconds (default: 1000).
- Optionaleasing?: "ease-in" | "ease-out" | "ease-in-out" | "linear" | "ease-out-cubic"
  The easing function to use for the animation.

Returns TCancellablePromise<TAnimateStateResult>

A cancellable promise that resolves when the animation completes.

Example: Animate label text size and color

mapView.animateState(label, {
  appearance: {
    textSize: state.appearance.textSize! + 1,
    textColor: state.appearance.textColor! === '#000000' ? 'purple' : '#000000',
  },
});

Example: When a space is clicked it sets it to non-interactive and animates its height and color and then sets it back

to interactive when the animation completes.

mapView.on('click', ({ spaces }) => {
  if (!spaces) return;
  spaces.forEach(space => {
    const state = mapView.getState(space)!;
    mapView.updateState(space, {
      interactive: false,
    });
    currentAnimation = mapView.animateState(space, {
      height: state.height + 1,
      color: state.color === 'rgb(255, 0, 0)' ? 'blue' : 'rgb(255, 0, 0)',
    });
    currentAnimation.finally(() => {
      mapView.updateState(space, {
        interactive: true,
      });
    });
  });
});

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.
  
  Parameters for creating a Coordinate.
  
  Used with the Coordinate constructor or MapView.createCoordinate method to create a coordinate on the map.
  - OptionalfloorId?: string
    Optional ID of the Floor this Coordinate is on.
  - latitude: number
    The latitude of the Coordinate.
  - longitude: number
    The longitude of the Coordinate.
  - OptionalverticalOffset?: number
    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,
): Coordinate | undefined
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 Coordinate | undefined

destroy

destroy(): void
Destroys the MapView.

Returns void

enableDebug

enableDebug(opitons?: InspectorOption): Promise<void>
Experimental
Enable debug interface. Learn more about the debug interface in the Debug Mode Guide.
Parameters
- opitons: InspectorOption = {}
Returns Promise<void>

getDimensions

getDimensions(): { height: number; width: number }
Gets the current dimensions of the map container.

Returns { height: number; width: number }
An object containing the width and height of the map container.
Example
```
const dimensions = mapView.getDimensions();
console.log(`Map size: ${dimensions.width}x${dimensions.height}`);
```

getDirections

getDirections(
    from: TNavigationTarget | TNavigationTarget[],
    to: TNavigationTarget | TNavigationTarget[],
    options?: TGetDirectionsOptions,
): Promise<Directions | undefined>
Calculates (Directions) from one navigable point (TNavigationTarget) to another on the map.

Provides turn-by-turn navigation instructions and route visualization. This method delegates to the MapData instance.
Parameters
- from: TNavigationTarget | TNavigationTarget[]
  The starting location(s).
- to: TNavigationTarget | TNavigationTarget[]
  The destination location(s).
- Optionaloptions: TGetDirectionsOptions
  Optional configuration for the directions calculation.
Returns Promise<Directions | undefined>
A Promise resolving to a Directions object containing the route, or undefined if no route is found.
Remarks
In enterprise mode, path smoothing is disabled by default. Use the smoothing option to explicitly enable it if needed.
Example: Get directions between spaces
```
const space1 = mapData.getById('space', 'space-123');
const space2 = mapData.getById('space', 'space-456');

if (space1 && space2) {
  const directions = await mapView.getDirections(space1, space2);
  if (directions) {
    // Show the route on the map
    mapView.Paths.show(directions);
    console.log(`Distance: ${directions.distance}m`);
  }
}
```
See
Wayfinding Guide

getDirectionsMultiDestination

getDirectionsMultiDestination(
    from: TNavigationTarget,
    to: (TNavigationTarget | TNavigationTarget[])[],
    options?: TGetDirectionsOptions,
): Promise<Directions[] | undefined>
Calculates directions (Directions) from one navigable point (TNavigationTarget) to multiple destination points on the map.

Provides routes from a single starting point to multiple destinations. This method delegates to the MapData instance.
Parameters
- from: TNavigationTarget
  The starting location.
- to: (TNavigationTarget | TNavigationTarget[])[]
  An array of destination locations or arrays of destinations.
- Optionaloptions: TGetDirectionsOptions
  Optional configuration for the directions calculation.
Returns Promise<Directions[] | undefined>
A Promise resolving to an array of Directions objects, one for each destination.
Remarks
In enterprise mode, path smoothing is disabled by default. Use the smoothing option to explicitly enable it if needed.
Example: Get directions to multiple destinations
```
const start = mapData.getById('space', 'entrance');
const destinations = [
  mapData.getById('space', 'store-1'),
  mapData.getById('space', 'store-2'),
  mapData.getById('space', 'restaurant')
].filter(Boolean);

const allDirections = await mapView.getDirectionsMultiDestination(start, destinations);
allDirections.forEach((directions, index) => {
  console.log(`Route ${index + 1}: ${directions.distance}m`);
});
```

getDistance

getDistance(
    from:
        | Coordinate
        | Space
        | MapObject
        | Annotation
        | Door
        | PointOfInterest
        | EnterpriseLocation
        | Node,
    to:
        | Coordinate
        | Space
        | MapObject
        | Annotation
        | Door
        | PointOfInterest
        | EnterpriseLocation
        | Node,
): number
| undefined
Calculates the walking distance between two navigable points (TNavigationTarget) on the map.

Returns the walking distance between two points. This method delegates to the MapData instance.
Parameters
- from:
      | Coordinate
      | Space
      | MapObject
      | Annotation
      | Door
      | PointOfInterest
      | EnterpriseLocation
      | Node
  The starting location.
- to:
      | Coordinate
      | Space
      | MapObject
      | Annotation
      | Door
      | PointOfInterest
      | EnterpriseLocation
      | Node
  The destination location.
Returns number | undefined
The distance in meters.
Example: Calculate distance between spaces
```
const space1 = mapData.getById('space', 'space-123');
const space2 = mapData.getById('space', 'space-456');

if (space1 && space2) {
  const distance = mapView.getDistance(space1, space2);
  console.log(`Direct distance: ${distance}m`);
}
```
Example: Calculate distance from coordinate
```
const coordinate = mapData.mapCenter;
const space = mapData.getByType('space')[0];
const distance = mapView.getDistance(coordinate, space);
console.log(`Distance from center: ${distance}m`);
```

getGlobalState

getGlobalState(): ReadonlyDeep<GlobalState>
Get global state of the MapView

Returns ReadonlyDeep<GlobalState>

getHoverColor

getHoverColor(): string | undefined
Gets the current hover color.

Returns string | undefined
The current hover color.
Example
```
const hoverColor = mapView.getHoverColor();
console.log('Hover color:', hoverColor);
```

getInView

getInView<T extends string>(
    type: T,
    options?: Partial<
        { fullyContains: boolean; screenOffsets: Partial<InsetPadding> },
    >,
): MapFeatureOfType<T>[]
Gets the map elements that are currently in view.
Type Parameters
- T extends string
Parameters
- type: T
  The type of map element to get.
- Optionaloptions: Partial<{ fullyContains: boolean; screenOffsets: Partial<InsetPadding> }>
  Optional configuration for the in view check.
Returns MapFeatureOfType<T>[]
An array of map elements that are currently in view.

getMapData

getMapData(): MapData

Gets the current map data associated with this view.

Returns MapData

The current MapData instance, or undefined if no map is loaded.

Example

const mapData = mapView.getMapData();
if (mapData) {
  console.log('Map name:', mapData.mapName);
  const spaces = mapData.getByType('space');
  console.log('Number of spaces:', spaces.length);
}

getMetersPerPixel

getMetersPerPixel(): number

Returns the current scale of the map in meters per pixel.

Returns number

Example

const metersPerPixel = mapView.getMetersPerPixel();
console.log('Meters per pixel:', metersPerPixel);

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
- coordinate: Coordinate
Returns { x: number; y: number }

getState

getState<T extends MapElementsWithState>(target: T): TGetState<T>

Gets the current state of a map element.

Retrieves the current visual properties and state of a map element.

Type Parameters

T extends MapElementsWithState

Parameters

target: T
The map element to get the state for.

Returns TGetState<T>

The current state of the element.

Example: Get space state

const space = mapData.getById('space', 'space-123');
if (space) {
  const state = mapView.getState(space);
  console.log('Space color:', state.color);
  console.log('Space opacity:', state.opacity);
}

Example: Get marker state

const marker = mapView.Markers.add(coordinate);
const state = mapView.getState(marker);
console.log('Marker rank:', state.rank);
console.log('Marker placement:', state.placement);

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 keyof TEvents>(
eventName: EventName,
fn: (payload: TEventPayload<EventName>) => void,
): void
Unsubscribe a function previously subscribed with on
Type Parameters
- EventName extends keyof TEvents
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 keyof TEvents>(
eventName: EventName,
fn: (payload: TEventPayload<EventName>) => void,
): void
Subscribe a function to an event.
Type Parameters
- EventName extends keyof TEvents
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);
```

preloadFloors

preloadFloors(floors: Floor[]): void
Preload floor geometry and outlines for the map at runtime. Can be used when anticipating a large number of floors will be visible at once to keep the map responsive.
Parameters
- floors: Floor[]
  The floors to preload.
Returns void

removeTween

removeTween(tween: Tween<any>): void
Remove a tween created with tween.
Parameters
- tween: Tween<any>
  The tween to remove.
Returns void

setFloor

setFloor(floor: string | Floor, options?: TSetFloorOptions): void
Sets the current floor of the map.

Changes the visible floor and updates the camera to focus on the new floor.
Parameters
- floor: string | Floor
  The floor to set, either as a Floor object or floor ID string.
- Optionaloptions: TSetFloorOptions
  Optional configuration for the floor change.
Returns void
A promise that resolves when the floor change is complete.
Example: Set floor by object
```
const floors = mapData.getByType('floor');
const groundFloor = floors.find(f => f.elevation === 0);
if (groundFloor) {
  await mapView.setFloor(groundFloor);
}
```
Example: Set floor by ID
```
await mapView.setFloor('floor-1');
```

setFloorStack

setFloorStack(floorStack: string | FloorStack, options?: TSetFloorOptions): void
Sets the current (FloorStack) of the map.

Changes to a specific floor stack, which may contain multiple floors for complex buildings.
Parameters
- floorStack: string | FloorStack
  The floor stack to set, either as a (FloorStack) object or ID string.
- Optionaloptions: TSetFloorOptions
  Optional configuration for the floor stack change defined in (TSetFloorOptions).
Returns void
A promise that resolves when the floor stack change is complete.
Example: Set floor stack
```
const floorStacks = mapData.getByType('floor-stack');
const mainBuilding = floorStacks.find(fs => fs.name === 'Main Building');
if (mainBuilding) {
  await mapView.setFloorStack(mainBuilding);
}
```

setHoverColor

setHoverColor(c: string): void
Sets the hover color for map elements.
Parameters
- c: string
  The color to use for hover effects.
Returns void
Example
```
mapView.setHoverColor('#ff0000');
```

takeScreenshot

takeScreenshot(options?: TTakeScreenshotOptions): Promise<string>
Experimental
Takes a screenshot of the current scene and returns it as a data URL.

This captures the 3D scene and can optionally include outdoor tiles, labels, and HTML markers. This does not cause the screenshot to be saved to the user's device, it only returns the data.
Parameters
- Optionaloptions: TTakeScreenshotOptions
  Options for taking a screenshot.
  
  Options for taking a screenshot.
  - OptionalcaptureMarkers?: (element: HTMLElement) => Promise<HTMLCanvasElement>
    Optional. Function to capture HTML marker elements as canvas. When provided with withLabels, also includes markers in the screenshot.
    
    If the returned canvas is tainted (contains cross-origin images without CORS), the marker layer will be skipped and the screenshot will still succeed.
    
    To include all content, ensure:
    
    Use useCORS: true in html2canvas options
    
    Images have proper CORS headers (Access-Control-Allow-Origin)
    
    Use scale: window.devicePixelRatio for crisp output
    
    Set backgroundColor: null for transparency
    
    Example: html2canvas
    captureMarkers: (el) => html2canvas(el, { backgroundColor: null, scale: window.devicePixelRatio, useCORS: true, })
  - OptionalwithLabels?: boolean
    Whether to include map labels in the screenshot.
    
    Default
    false
  - OptionalwithOutdoorContext?: boolean
    Whether to include the outdoor context in the screenshot.
    
    Default
    false
Returns Promise<string>
A Promise that resolves with the screenshot as a base64-encoded data URL string
Default
```
false
```
Default
```
false
```
Example: Basic indoor screenshot
```
const screenshot = await mapView.takeScreenshot();
```
Example: Screenshot with outdoor tiles
```
const screenshot = await mapView.takeScreenshot({
  withOutdoorContext: true
});
```
Example: Screenshot with labels and markers using html2canvas
```
import html2canvas from "html2canvas";

const screenshot = await mapView.takeScreenshot({
  withOutdoorContext: true,
  withLabels: true,
  captureMarkers: (el) => html2canvas(el, { backgroundColor: null })
});
```
Example: Screenshot with labels and markers using modern-screenshot
```
import { domToCanvas } from "modern-screenshot";

const screenshot = await mapView.takeScreenshot({
  withLabels: true,
  captureMarkers: (el) => domToCanvas(el)
});
```

tween

tween<T extends Record<string, unknown>>(object: T): Tween<T>
Create a tween object that will be updated on every render frame. See https://tweenjs.github.io/tween.js/docs/user_guide.html for more information.

When creating a large number of tween objects, it may be important to call removeTween to prevent memory leaks.
Type Parameters
- T extends Record<string, unknown>
Parameters
- object: T
  The data to be tweened.
Returns Tween<T>
The tween object.

update

update(): void
Triggers a manual update of the map view.

Forces the map to re-render. This is typically not needed as the map updates automatically, but can be useful in certain edge cases.

Returns void
Example
```
// Force map update after external changes
mapView.update();
```

updateGlobalState

updateGlobalState(update: UpdateGlobalState): void
Update global state of the MapView
Parameters
- update: UpdateGlobalState
Returns void

updateState

updateState<T extends MapElementsWithState>(
target: T,
state: TUpdateState<T>,
): void

Updates the state of a map element immediately.

This method provides direct control over the visual properties of map elements. Use animateState() for smooth transitions.

The following table maps targets to their available states:

Target	State Type	Description
Door	TDoorsUpdateState	Open/closed state, color
Floor	TFloorUpdateState	Color, opacity, visibility
Label	TLabelUpdateState	Text, color, visibility
Marker	TMarkerUpdateState	Color, size, icon
Model	TModelUpdateState	Scale, rotation, visibility
Path	TPathUpdateState	Color, width, visibility
Shape	TShapeUpdateState	Color, opacity, geometry
Space	TGeometryUpdateState	Color, opacity, visibility
Text3DView	TText3DUpdateState	Text, color, height
DOORS	TDoorsUpdateState	Global door settings
WALLS	TWallsUpdateState	Global wall settings

Type Parameters

T extends MapElementsWithState

Parameters

target: T
The map element to update.
state: TUpdateState<T>
The new state to apply.

Returns void

Example: Update space color

const space = mapData.getById('space', 'space-123');
if (space) {
  mapView.updateState(space, { color: 'red' });
}

Example: Update marker properties

const marker = mapView.Markers.add(coordinate);
mapView.updateState(marker, {
  contentHTML: 'Updated Content'
});

Example: Update global door settings

mapView.updateState('DOORS', {
  color: 'green',
  opacity: 0.8
});

Example: Update path appearance

const path = mapView.Paths.add(coordinates);
mapView.updateState(path, {
  color: 'yellow',
});

Class MapView

MapView in Mappedin JS

Features

Example Usage

Core Components

State Management

Event Handling

More Information

Index

Properties

Accessors

Methods

Properties

Camera

Example

See

Image3D

Example

Labels

Example

See

Markers

Example

See

Models

Example

Navigation

Outdoor

Example

Paths

Example

See

Shapes

Example

Style

ExperimentalText3D

Example

Accessors

container

Returns HTMLElement

currentFloor

Returns Floor

Example

currentFloorStack

Returns FloorStack

Example

options

Returns ReadonlyDeep<TShow3DMapOptions>

tweenGroup

Returns Group

Methods

__EXPERIMENTAL__auto

Parameters

Returns Promise<AutoElements>

__EXPERIMENTAL__getRenderedState

Type Parameters

Parameters

Returns TGetRenderedState<T> | undefined

Example: Get label text visibility

animateState

Type Parameters

Parameters

Optionalduration?: number

Optionaleasing?: "ease-in" | "ease-out" | "ease-in-out" | "linear" | "ease-out-cubic"

Returns TCancellablePromise<TAnimateStateResult>

Example: Animate label text size and color

Example: When a space is clicked it sets it to non-interactive and animates its height and color and then sets it back

clear

Returns void

createCoordinate

Parameters

Returns Coordinate

Example

Parameters

OptionalfloorId?: string

latitude: number

longitude: number

OptionalverticalOffset?: number

Returns Coordinate

Example

`Experimental`Text3D

EXPERIMENTALauto

EXPERIMENTALgetRenderedState

`Optional`duration?: number

`Optional`easing?: "ease-in" | "ease-out" | "ease-in-out" | "linear" | "ease-out-cubic"

`Optional`floorId?: string

`Optional`verticalOffset?: number