Skip to main content
Version: 5.0

Camera Controls

Using Mappedin SDK for React Native with your own map requires an Enterprise license. Try a demo map for free or refer to the Pricing page for more information.

To create rich experiences on top of the Mappedin React Native SDK, it's useful to be able to control the map view programmatically. This guide shows how to focus the map view on targets, how to listen to camera events and how to control the camera.

Focus the Camera on Targets​

To focus on a polygon after it has been clicked, we add an onClick callback to the <MiMapView/>. Then, we call Camera.focusOn() using the MapViewStore ref and provide our targets. In this case, we are targeting only the clicked polygon. However, we can also give coordinates or nodes as TFocusOnTargets.

const mapView = useRef<MapViewStore>(null);

return (
	<MiMapView
		ref={mapView}
		options={/* venue options */}
		onClick={({ polygons }) => {
			if (polygons?.length > 0) {
				mapView.current?.Camera.focusOn({
					polygons,
				});
			}
		}}
	/>
);

Listening to Camera Events​

The onCameraChanged callback is used to monitor changes to the camera position, rotation, tilt, and zoom.

onCameraChanged={({ position, rotation, tilt, zoom }) => {
  console.log("Position", position);
  console.log("Rotation", rotation);
  console.log("Tilt", tilt);
  console.log("Zoom", zoom);
}}

Controlling the Camera​

Controlling the camera to set it to a specific tilt, rotation or zoom can be done with the Camera.set() method of the MapViewStore. Tilt and rotation are set as radians, where as zoom is in the camera distance in meters from the target.

const mapView = useRef<MapViewStore>(null);

mapView.current?.Camera.set({
	rotation: 1.5,
	tilt: 0.3,
	zoom: 1234,
});

It is possible to limit the tilting of the camera by watching the tilt in the onCameraChanged callback and setting it to the desired value.

const mapView = useRef<MapViewStore>(null);

return (
	<MiMapView
		ref={mapView}
		options={/* venue options */}
		onCameraChanged={({ position, rotation, tilt, zoom }) => {
			if (tilt) {
				mapView.current?.Camera.set({
					tilt: 0.0,
				});
			}
		}}
	/>
);

If you want to be able to zoom in closer than the default limit, use the setter Camera.setMinZoom(200).

Animation​

The camera can also be animated to perform a combination of the transforms explained above. It takes TCameraTransform and TCameraAnimationOptions.

const mapView = useRef<MapViewStore>(null);

mapView.current?.Camera.animate(
	{
		tilt: 0,
		rotation: 1,
		zoom: 2000,
	},
	{
		duration: 3000,
		easing: CAMERA_EASING_MODE.EASE_OUT,
	},
);

Reset Camera​

To reset the camera to its original position, save the camera's position, rotation, tilt, and zoom attributes during the onFirstMapLoaded callback.

In the following code snippet, we focus on a polygon on tap. After subsequently tapping the map, the camera will use the stored values to reset to its original state.

const mapView = useRef<MapViewStore>(null);
const [isFocused, setIsFocused] = useState<boolean>(false);
const [defaultCameraPosition, setDefaultCameraPosition] = useState<TCameraTransform>();

return (
	<MiMapView
		ref={mapView}
		options={/* venue options */}
		onFirstMapLoaded={() => {
			setDefaultCameraPosition({
				tilt: mapView.current!.Camera.tilt,
				zoom: mapView.current!.Camera.zoom,
				rotation: mapView.current!.Camera.rotation,
				position: mapView.current!.Camera.position,
			});
		}}
		onClick={({ polygons }) => {
			if (isFocused) {
				mapView.current?.Camera.animate(defaultCameraPosition!, {
					duration: 1000,
					easing: CAMERA_EASING_MODE.EASE_IN_OUT,
				});
				mapView.current?.clearAllPolygonColors();
			} else {
				if (polygons.length === 0) return;
				mapView.current?.Camera.focusOn(
					{
						polygons,
					},
					{
						duration: 1000,
						easing: CAMERA_EASING_MODE.EASE_IN_OUT,
					},
				);
				mapView.current?.setPolygonColor(polygons[0], 'red');
			}
			setIsFocused(!isFocused);
		}}
	/>
);

Additional Reading​