Mappedin JS - v6.14.0
    Preparing search index...

    Interface Camera

    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.

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

    // 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 });
    • Use getFocusOnTransform to calculate the camera transform before applying it.
    • Use interactions.set to enable/disable pan, zoom, or rotation.

    This class is accessed using MapView.Camera.

    interface Camera {
        interactions: {
            disable: () => void;
            enable: () => void;
            set: (options: TCameraInteractionsSetOptions) => void;
        };
        get autoMinZoomLevel(): boolean;
        get bearing(): number;
        get bounds(): CameraBounds;
        get center(): Coordinate;
        get elevation(): number;
        get isAnimating(): boolean;
        get maxPitch(): number;
        get maxZoomLevel(): number;
        get minPitch(): number;
        get minZoomLevel(): number;
        get panMode(): "default" | "elevation";
        get pitch(): number;
        get screenOffsets(): InsetPadding;
        get zoomLevel(): number;
        animateElevation(
            elevation: number,
            options?: TCameraAnimationOptions,
        ): Promise<void>;
        animateTo(
            target: TCameraTarget,
            options?: TCameraAnimationOptions,
        ): Promise<void>;
        cancelAnimation(): void;
        focusOn(
            target: IFocusable | IFocusable[],
            options?: TFocusOnOptions,
        ): Promise<void>;
        getFocusOnTransform(
            target: IFocusable | IFocusable[],
            options?: TFocusOnOptions,
        ): TCameraTarget;
        set(target: TCameraTarget): void;
        setAutoMinZoomLevel(value: boolean): void;
        setElevation(elevation: number): void;
        setMaxPitch(maxPitch: number): void;
        setMaxZoomLevel(zoomLevel: number): void;
        setMinPitch(minPitch: number): void;
        setMinZoomLevel(zoomLevel: number): void;
        setPanMode(panMode: "default" | "elevation"): void;
        setScreenOffsets(padding: Partial<InsetPadding>): void;
    }
    Index

    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: {
        disable: () => void;
        enable: () => void;
        set: (options: TCameraInteractionsSetOptions) => void;
    } = ...

    Controls which camera interactions are enabled/disabled.

    // 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

    • get autoMinZoomLevel(): boolean

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

      Returns boolean

    • 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

    • get elevation(): number

      The current elevation of the camera in meters.

      Returns number

    • get isAnimating(): boolean

      Returns boolean

    • get maxPitch(): number

      The maximum pitch of the camera in degrees.

      Returns number

    • get minPitch(): number

      The minimum pitch of the camera in degrees.

      Returns number

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

      The camera's current pan mode.

      Returns "default" | "elevation"

    • get pitch(): number

      The current pitch of the camera in degrees.

      Returns number

    Methods

    • 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>

    • Returns 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.

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

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

      Camera Guide

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

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

    • Instantly sets the camera to a specific target.

      Parameters

      Returns void

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

    • 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

    • Experimental

      Set the camera's elevation in meters.

      Parameters

      • elevation: number

        The new elevation in meters.

      Returns void

    • Update the maximum pitch of the camera in degrees.

      Parameters

      • maxPitch: number

        The new maximum pitch.

      Returns void

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

      Parameters

      • zoomLevel: number

        The new maximum zoom level.

      Returns void

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

      22

      24

      0

    • Update the minimum pitch of the camera in degrees.

      Parameters

      • minPitch: number

        The new minimum pitch.

      Returns 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

    • 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

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

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

      // 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