@mappedin/dynamic-focus

An extension for Mappedin JS that manages the visibility of floors and facades on camera change.

Usage

Installation

Core Package

With NPM:

npm install @mappedin/dynamic-focus

With Yarn:

yarn add @mappedin/dynamic-focus

React Integration (Optional)

If you want to use the React hooks with automatic context integration:

npm install @mappedin/react-sdk @mappedin/dynamic-focus

Getting Started

Vanilla JavaScript/TypeScript

import { show3dMap } from '@mappedin/mappedin-js';
import { DynamicFocus } from '@mappedin/dynamic-focus';

const mapView = await show3dMap(...);

/**
 * Create a new Dynamic Focus controller that automatically updates the MapView scene.
 */
const df = new DynamicFocus(mapView);


// Enable dynamic-focus extension with options
df.enable({ autoFocus: true, setFloorOnFocus: true });

/**
 * Disable automatic updates - now you'll need to manually call `focus()` to update the view.
 */
df.updateState({ autoFocus: false });

/**
 * Manually trigger a focus update to show/hide facades and update floor visibility.
 */
df.focus();

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

React

import React, { useEffect } from 'react';
import { MapView, useMapData } from '@mappedin/react-sdk';
import { useDynamicFocus } from '@mappedin/dynamic-focus/react';

function MyComponent() {
	const { mapData } = useMapData({
		key: 'your-api-key',
		secret: 'your-api-secret',
		mapId: 'your-map-id',
	});

	return (
		<MapView mapData={mapData}>
			<DynamicFocusDisplay />
		</MapView>
	);
}

function DynamicFocusDisplay() {
	// No need to pass mapView - automatically fetched from context
	const { enable, isEnabled, isIndoor, isOutdoor } = useDynamicFocus();

	useEffect(() => {
		if (!isEnabled) {
			enable();
		}
	}, [enable, isEnabled]);

	return (
		<div>
			<p>Is Indoor: {isIndoor ? 'Yes' : 'No'}</p>
			<p>Is Outdoor: {isOutdoor ? 'Yes' : 'No'}</p>
		</div>
	);
}

React Native

import React, { useEffect, useCallback } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { MapView, useMapData } from '@mappedin/react-native-sdk';
import { useDynamicFocus, useDynamicFocusEvent } from '@mappedin/dynamic-focus/rn';

function MyComponent() {
	const { mapData } = useMapData({
		key: 'your-api-key',
		secret: 'your-api-secret',
		mapId: 'your-map-id',
	});

	return (
		<MapView mapData={mapData}>
			<DynamicFocusDisplay />
		</MapView>
	);
}

function DynamicFocusDisplay() {
	// All methods are async and return Promises
	const { isReady, isEnabled, focusedFacades, enable, updateState, getState, focus, disable } = useDynamicFocus();

	// Listen for focus events - similar to React but with separate hook
	useDynamicFocusEvent(
		'focus',
		useCallback(event => {
			console.log('Focused facades:', event.facades);
		}, []),
	);

	useEffect(() => {
		if (isReady && !isEnabled) {
			// All methods are async - use await or .then()
			enable({
				autoFocus: true,
				mode: 'lock-elevation',
				indoorZoomThreshold: 18,
				outdoorZoomThreshold: 17,
			});
		}
	}, [isReady, isEnabled, enable]);

	const handleUpdateSettings = useCallback(async () => {
		try {
			// All state operations are async
			await updateState({
				indoorZoomThreshold: 19,
				outdoorZoomThreshold: 16,
			});

			// Get current state
			const currentState = await getState();
			console.log('Current state:', currentState);

			// Manual focus trigger
			await focus(true); // setFloor = true
		} catch (error) {
			console.error('Failed to update settings:', error);
		}
	}, [updateState, getState, focus]);

	return (
		<View>
			<Text>Is Ready: {isReady ? 'Yes' : 'No'}</Text>
			<Text>Is Enabled: {isEnabled ? 'Yes' : 'No'}</Text>
			<Text>Focused Facades: {focusedFacades.length}</Text>
			<TouchableOpacity onPress={handleUpdateSettings}>
				<Text>Update Settings</Text>
			</TouchableOpacity>
		</View>
	);
}

Key Differences from React:

• All methods are async: enable(), updateState(), getState(), focus(), and disable() return Promises
• Additional state: Hook returns isReady, focusedFacades for real-time updates