Camera@knitui/map
Camera
Camera controls the map viewport — both declaratively (via props such as center, zoom, bearing, pitch, padding, and initialViewState) and imperatively (via a CameraRef exposing flyTo, easeTo, jumpTo, fitBounds, and zoomTo). Coordinates are [longitude, latitude]; bounds are [west, south, east, north].
import { Camera } from "@knitui/map";Playground
Loading playground…
<Camera />Examples
Declarative
Set the starting viewport once, declaratively, via initialViewState.
Loading example…
Center And Zoom
Drive center + zoom directly as controlled props.
Loading example…
Bearing And Pitch
A tilted, rotated 3D-style view via bearing + pitch.
Loading example…
Padding
padding insets the focal point so the center sits off to one side — handy when a sidebar or panel overlaps part of the map.
Loading example…
Fit Bounds On Mount
Fit a bounding box on mount by passing bounds to initialViewState.
Loading example…
Constraints
Constrain interaction with minZoom / maxZoom / maxBounds.
Loading example…
Imperative Controls
Imperative control via a CameraRef. The on-screen buttons call flyTo, easeTo, jumpTo, fitBounds, and zoomTo to move the camera between cities.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
bearing | number | undefined | — | |
duration | number | undefined | — | |
easing | "linear" | "ease" | "fly" | undefined | — | |
initialViewState | InitialViewState | undefined | — | |
maxBounds | LngLatBounds | undefined | — | |
maxZoom | number | undefined | — | |
minZoom | number | undefined | — | |
onTrackUserLocationChange | ((event: TrackUserLocationChangeEvent) => void) | undefined | — | |
padding | ViewPadding | undefined | — | |
pitch | number | undefined | — | |
testID | string | undefined | — | |
trackUserLocation | TrackUserLocation | undefined | — | |
zoom | number | undefined | — |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<CameraRef> | undefined |