Dynamic Focus

Mappedin SDK version 6 is currently in a beta state while Mappedin perfects new features and APIs. Open the v6 release notes to view the latest changes.

Using Mappedin JS with your own map requires a Pro license. Try a demo map for free or refer to the Pricing page for more information.

A single venue may include multiple nearby buildings, each contained within a FloorStack. Dynamic Focus enables seamless exploration across these buildings by revealing indoor content as the camera pans over each structure.

Mappedin Dynamic Focus with Auto Focus Enabled

Installation

Dynamic focus is provided as a separate package that works in conjunction with Mappedin JS. To install the @mappedin/dynamic-focus package from npm, run the following command:

With NPM:

npm install @mappedin/dynamic-focus

With Yarn:

yarn add @mappedin/dynamic-focus

Usage

The Dynamic Focus controller is instantiated with a reference to the MapView instance. The following example demonstrates how to create a new Dynamic Focus controller and enables auto focus to automatically transition the currently visible map from one building to the next as the camera pans over it.

const mapView = await show3dMap(...);

/**
 * Create a new Dynamic Focus controller that automatically updates the MapView.
 */
const df = new DynamicFocus(mapView, { autoFocus: true, setFloorOnFocus: true });

Dynamic Focus has a number of options that can be enabled either at instantiation or at any time via updateState().

dynamicFocus.updateState({
    autoFocus: true, // whether to automatically focus on camera move
    indoorZoomThreshold: 18, // the zoom level at which the indoors is revealed
    outdoorZoomThreshold: 17, // the zoom level at which the indoors are hidden
    setFloorOnFocus: true, // whether to automatically call setFloor during focus
    indoorAnimationOptions: {
        // options for the animation to fade out the facades
        duration: 150,
    },
    outdoorAnimationOptions: {
        // options for the animation to fade in the facades
        duration: 150,
    },
});

Auto Focus

Dynamic Focus' auto focus provides default behavior to transition the currently visible map from one building to the next as the camera pans over it. The default behavior can be overridden by setting the autoFocus option to false, allowing the developer to control the focus manually.

const mapView = await show3dMap(...);

/**
 * Create a new Dynamic Focus controller that automatically updates the MapView.
 */
const dynamicFocus = new DynamicFocus(mapView, { autoFocus: true, setFloorOnFocus: true });

/**
 * Disable automatic updates - now the app needs to manually call `focus()` to update the view.
 */
dynamicFocus.updateState({ autoFocus: false });

/**
 * Manually trigger a focus update to show/hide facades and update floor visibility.
 * This shows the default Floor in the FloorStack that is currently centered on the map.
 */
dynamicFocus.focus();

/**
 * Clean up the controller and restore default floor visibility behavior
 */
dynamicFocus.destroy();

Setting FloorStack Default Floor

The default floor is the Floor that is visible when focus is transitioned to a new FloorStack (building). The default Floor for a FloorStack can be set by calling setDefaultFloorForStack() with the floor stack and floor ID. The default floor can be reset by calling resetDefaultFloorForStack() with the floor stack.

const dynamicFocus = new DynamicFocus(mapView);
dynamicFocus.setDefaultFloorForStack(floorStack, floor);
dynamicFocus.resetDefaultFloorForStack(floorStack);

Interactive Example

The following CodeSandbox demonstrates how to use Dynamic Focus to transition between floors and buildings of a map with multiple buildings (FloorStacks). Zoom in and move the map around to observe Dynamic Focus auto focus behavior.