Class Camera

Camera in Mappedin JS

The Camera class controls the map's viewpoint, including position, pitch, bearing, and zoom. It can instantly reposition or animate to a new location, and can focus on one or more map elements.

Features

  • Focus on any map element (space, coordinate, marker, etc.)
  • Smooth animation and custom easing
  • Control pan, zoom, bearing, and pitch
  • Set safe screen areas (insets) for UI overlays

Best Practice: Use focusOn for user-driven navigation (e.g., "Show this store"), and animateTo for smooth transitions between known camera states.

Example Usage

// Focus on a single space
mapView.Camera.focusOn(space, { minZoomLevel: 5 });

// Animate to a specific camera target
mapView.Camera.animateTo({ center: coordinate, zoomLevel: 6, bearing: 45 });

// Set the camera instantly
mapView.Camera.set({ center: coordinate, zoomLevel: 7 });

// Set safe screen insets (e.g., for a sidebar)
mapView.Camera.setScreenOffsets({ left: 300, top: 0, right: 0, bottom: 0 });

Advanced

  • Use getFocusOnTransform to calculate the camera transform before applying it.
  • Use interactions.set to enable/disable pan, zoom, or rotation.

More Information

This class is accessed using MapView.Camera.

Properties

interactions

Accessors

autoMinZoomLevel bearing bounds center elevation isAnimating maxPitch maxZoomLevel minPitch minZoomLevel panMode pitch screenOffsets zoomLevel

Methods

animateElevation animateTo cancelAnimation focusOn getFocusOnTransform set setAutoMinZoomLevel setElevation setMaxPitch setMaxZoomLevel setMinPitch setMinZoomLevel setPanMode setScreenOffsets

Properties

interactions

interactions: {
    disable: () => void;
    enable: () => void;
    set: (options: TCameraInteractionsSetOptions) => void;
} = ...

Controls which camera interactions are enabled/disabled.

Example

// Disable zoom and rotation
mapView.Camera.interactions.set({ zoom: false, bearingAndPitch: false });

// Enable all interactions
mapView.Camera.interactions.enable();

// Disable all interactions
mapView.Camera.interactions.disable();

Accessors

autoMinZoomLevel

  • get autoMinZoomLevel(): boolean

    The mode of the camera to automatically set the minimum zoom level based on the size of the scene.

    Returns boolean

bearing

  • get bearing(): number

    The current bearing of the camera in degrees clockwise from North. 0 degrees is North, 90 degrees is East, 180 degrees is South, and 270 degrees is West.

    Returns number

bounds

center

elevation

  • get elevation(): number

    The current elevation of the camera in meters.

    Returns number

isAnimating

  • get isAnimating(): boolean

    Returns boolean

maxPitch

  • get maxPitch(): number

    The maximum pitch of the camera in degrees.

    Returns number

maxZoomLevel

minPitch

  • get minPitch(): number

    The minimum pitch of the camera in degrees.

    Returns number

minZoomLevel

panMode

  • get panMode(): "default" | "elevation"

    The camera's current pan mode.

    Returns "default" | "elevation"

pitch

  • get pitch(): number

    The current pitch of the camera in degrees.

    Returns number

screenOffsets

zoomLevel

Methods

animateElevation

  • animateElevation(
        elevation: number,
        options?: TCameraAnimationOptions,
    ): Promise<void>
    Experimental

    Animate the camera's elevation to a specified elevation.

    Parameters

    • elevation: number

      The target elevation in meters.

    • Optionaloptions: TCameraAnimationOptions

      Optional settings for the camera animation.

    Returns Promise<void>

animateTo

cancelAnimation

  • cancelAnimation(): void

    Returns void

focusOn

  • focusOn(
        target: IFocusable | IFocusable[],
        options?: TFocusOnOptions,
    ): Promise<void>

    Focuses the camera on a specific target or array of targets.

    Parameters

    Returns Promise<void>

    A promise that resolves when the camera animation is complete.

    Example: Focus on a single space

    mapView.Camera.focusOn(space, { minZoomLevel: 5 });

    Example: Focus on multiple elements

    mapView.Camera.focusOn([space1, space2], { pitch: 45 });

    See

    Camera Guide

getFocusOnTransform

  • getFocusOnTransform(
        target: IFocusable | IFocusable[],
        options?: TFocusOnOptions,
    ): TCameraTarget

    Get the camera transform that can be used to focus on a target or array of targets. Similar to Camera.focusOn but returns the transform directly.

    Parameters

    Returns TCameraTarget

    The camera transform which can then be passed to Camera.set or Camera.animateTo.

    Example

    // Focus on a single space
    const transform = mapView.Camera.getFocusOnTransform(space, { minZoomLevel: 5 });
    mapView.Camera.animateTo(transform);

set

  • set(target: TCameraTarget): void

    Instantly sets the camera to a specific target.

    Parameters

    Returns void

    Example

    mapView.Camera.set({ center: coordinate, zoomLevel: 7 });

setAutoMinZoomLevel

  • setAutoMinZoomLevel(value: boolean): void

    Toggle the mode of the camera to automatically set the minimum zoom level based on the size of the scene. It will be automatically disabled when the minimum zoom level is set manually.

    Parameters

    • value: boolean

      The new value for the auto min zoom level mode.

    Returns void

setElevation

  • setElevation(elevation: number): void
    Experimental

    Set the camera's elevation in meters.

    Parameters

    • elevation: number

      The new elevation in meters.

    Returns void

setMaxPitch

  • setMaxPitch(maxPitch: number): void

    Update the maximum pitch of the camera in degrees.

    Parameters

    • maxPitch: number

      The new maximum pitch.

    Returns void

setMaxZoomLevel

  • setMaxZoomLevel(zoomLevel: number): void

    Update the maximum zoom level of the camera in mercator zoom levels.

    Parameters

    • zoomLevel: number

      The new maximum zoom level.

    Returns void

    See

    https://wiki.openstreetmap.org/wiki/Zoom_levels

    Default

    22

    Max

    24

    Min

    0

setMinPitch

  • setMinPitch(minPitch: number): void

    Update the minimum pitch of the camera in degrees.

    Parameters

    • minPitch: number

      The new minimum pitch.

    Returns void

setMinZoomLevel

setPanMode

  • setPanMode(panMode: "default" | "elevation"): void
    Experimental

    Set the camera's pan mode. 'elevation' moves the camera up and down, while 'default' allows the camera to pan in all directions.

    Parameters

    • panMode: "default" | "elevation"

      The new pan mode.

    Returns void

setScreenOffsets

  • setScreenOffsets(padding: Partial<InsetPadding>): void

    Define an area of the screen that is safe for the camera. Anything outside the safe area is assumed to be covered in some way. The camera will not place any map elements there when calling Camera.focusOn.

    Parameters

    • padding: Partial<InsetPadding>

      The padding to apply. Can specify individual sides and optionally the type.

      • type: 'pixel' (absolute pixels) or 'portion' (fraction of canvas, 0-1). Defaults to 'pixel'.
      • When updating without specifying type, the existing type is preserved.

    Returns void

    Example

    // Reserve 300px on the left for a sidebar
    mapView.Camera.setScreenOffsets({ left: 300, top: 0, right: 0, bottom: 0 });

    Example

    // Reserve 20% of the screen height at the top using portion type
    mapView.Camera.setScreenOffsets({ top: 0.2, type: 'portion' });

    Example

    // Update only the bottom padding, preserving existing type and other values
    mapView.Camera.setScreenOffsets({ bottom: 50 });

Settings

Member Visibility

On This Page

Camera in Mappedin JS
Properties
Accessors
Methods