Skip to main content

Frame Locations

Animate the camera to fit a bounding box that includes multiple locations.

Frame Locations

Sample code

import { useRef } from "react";
import { Camera, Map, TrimbleMaps } from "@trimblemaps/maps-react-native";

const cameraRef = useRef<React.ComponentRef<typeof Camera>>(null);

cameraRef.current?.fitBounds(
  [-77.436, 37.5407, -74.6672, 40.3573],
  {
    padding: { top: 64, right: 64, bottom: 64, left: 64 },
    duration: 800,
  },
);

<Map
  mapStyle={TrimbleMaps.StyleURL.MobileDay}
  style={{ flex: 1 }}
  onDidFinishLoadingMap={() => { /* call fitBounds */ }}
>
  <Camera ref={cameraRef} initialViewState={{ center: [-74.6672, 40.3573], zoom: 8 }} />
</Map>

Bounds are [west, south, east, north].

Last updated November 5, 2026.