MapView · ui.voila.dev

<MapView
	className="h-80 w-full overflow-hidden rounded-lg border"
	center={[2.3522, 48.8566]}
	zoom={11}
	onReady={(map) => {
		map.addSource("freelancers", { type: "geojson", data: freelancers });
		map.addLayer({ id: "pins", type: "circle", source: "freelancers" });
	}}
	onMoveEnd={(bounds, zoom) => refetch({ ...bounds, zoom })}
/>;

onReady replays after a theme-driven basemap swap, which drops custom sources and layers — write it as "make the map look like this", not "do this once".

API

Prop	Type	Default
`center`	`readonly [number, number]`	—	Initial center `[longitude, latitude]`. Read once, on mount; defaults to `[2.3522, 48.8566]`.
`onMoveEnd`	`((bounds: MapBounds, zoom: number) => void)`	—	Called after the view settles — once on load and after every pan/zoom — with the current bounds and zoom. Drives viewport-scoped data fetching.
`onReady`	`((map: Map$1) => void)`	—	Called once the basemap and its style are ready, with the live MapLibre instance — add sources, layers and markers here. A theme switch swaps the basemap style (which drops custom sources/layers) and calls this again, so the setup must tolerate re-runs. The instance is removed on unmount, so don't retain it past the component's lifetime.
`options`	`Omit<MapOptions, "center" \| "container" \| "style" \| "zoom">`	—	Extra MapLibre constructor options (`maxBounds`, `cooperativeGestures`, `attributionControl`…). Read once, on mount.
`styleUrl`	`string`	—	Vector style URL. Read once, on mount; defaults to the OpenFreeMap "liberty" basemap — or its "dark" variant while inside a `.dark` subtree, following theme switches. An explicit URL opts out of theme following.
`unavailableFallback`	`ReactNode`	—	Rendered in place of the map when the basemap can't initialize because the environment has no WebGL (sandboxed/headless browsers, disabled GPU). This package is translation-agnostic, so consumers pass their own localized node.
`zoom`	`number`	—	Initial zoom. Read once, on mount; defaults to `5`.

Plus every <div> prop. Source: map-view/components/map-view.tsx.

center and zoom are initial values, read once on mount; later changes are ignored. Pan and zoom the live instance from onReady when the camera has to follow your state. For a circle that does follow its props, see RadiusMap.