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); }} />);