<RadiusMap
className="h-80 w-full overflow-hidden rounded-lg border"
center={{ latitude: 47.2184, longitude: -1.5536 }}
radiusKm={radiusKm}
/>;API
| Prop | Type | Default | |
|---|---|---|---|
center | GeoPoint | required | The place the circle is drawn around. Unlike MapView's center this is
live: moving it redraws the circle and re-frames the viewport. |
radiusKm | number | required | Circle radius in kilometres, measured geodesically. Live, like center. |
color | string | "#1e3a8a" | Circle fill/stroke colour. Defaults to the kit's deep blue. |
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. |
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. |
Plus the DOM props of the element it renders. Source: radius-map/components/radius-map.tsx.
center and radiusKm are live, which is the whole difference from
MapView: drag the radius slider and the circle redraws and
the viewport re-frames to keep it whole. center and zoom are taken over for
that, so they are not yours to set here.