Map@knitui/map

MapView

Map is the cross-platform container. The same JSX renders via maplibre-gl on web and @maplibre/maplibre-react-native on native — the public props are RN-first and never leak engine types. Children (Camera, sources, layers, markers) configure the map through context.

WebiOSAndroidnative split41 own props4 examples

Stories Source Native source Open in Storybook

import { Map } from "@knitui/map";

Playground

Loading playground…

Playground

<Map
  mapStyle={DEMO_STYLE}
  compass
  attribution
  logo={false}
  scaleBar={false}
  dragPan
  touchZoom
  touchRotate
  touchPitch
/>

Examples

Basic

The simplest possible map — a style and an initial camera position.

Loading example…

BasicSource Storybook

Streets Basemap

A vector basemap with streets and labels (Carto Positron).

Loading example…

Streets BasemapSource Storybook

Minimal

Ornaments toggled off for an embedded / minimal look.

Loading example…

MinimalSource Storybook

Static

Gestures disabled — a static, non-interactive map.

Loading example…

StaticSource Storybook

Props

Prop	Type	Default	Description
`mapStyle` required	`string \| maplibregl.StyleSpecification` demo · streets	—	MapLibre style URL or JSON style object.
`androidView`	`"surface" \| "texture" \| undefined`	—	Android rendering mode.
`attribution`	`boolean \| AttributionControlOptions \| undefined`	`true`	Show the attribution control.
`attributionPosition`	`OrnamentViewPosition \| undefined`	—
`children`	`ReactNode`	—
`className`	`string \| undefined`	—
`compass`	`boolean \| undefined`	`true`	Show the compass ornament.
`compassHiddenFacingNorth`	`boolean \| undefined`	—
`compassPosition`	`OrnamentViewPosition \| undefined`	—
`contentInset`	`ViewPadding \| undefined`	—	Distance from view edges to logical viewport.
`doubleTapHoldZoom`	`boolean \| undefined`	—
`doubleTapZoom`	`boolean \| undefined`	—
`dragPan`	`boolean \| undefined`	`true`
`light`	`maplibregl.LightSpecification \| undefined`	—	Light properties for extruded geometries.
`logo`	`boolean \| undefined`	`false`
`logoPosition`	`OrnamentViewPosition \| undefined`	—
`onDidFailLoadingMap`	`(() => void) \| undefined`	—
`onDidFinishLoadingMap`	`(() => void) \| undefined`	—
`onDidFinishLoadingStyle`	`(() => void) \| undefined`	—
`onDidFinishRenderingFrame`	`(() => void) \| undefined`	—
`onDidFinishRenderingFrameFully`	`(() => void) \| undefined`	—
`onDidFinishRenderingMap`	`(() => void) \| undefined`	—
`onDidFinishRenderingMapFully`	`(() => void) \| undefined`	—
`onLongPress`	`((event: PressEvent) => void) \| undefined`	—
`onPress`	`((event: PressEvent \| PressEventWithFeatures) => void) \| undefined`	—
`onRegionDidChange`	`((event: ViewStateChangeEvent) => void) \| undefined`	—	Fires once, after the viewport settles. The right place for `setState`.
`onRegionIsChanging`	`((event: ViewStateChangeEvent) => void) \| undefined`	—	Fires continuously while the viewport changes, throttled to ~32 ms (≈30×/s). Do not `setState` from this handler unthrottled. Every state update re-renders the whole map subtree, and a re-render is the amplifier for the expensive work in the children: `GeoJSONSource` re-serializes its FeatureCollection on native, and layers re-resolve their paint/layout. Those paths are memoized on their inputs, so a re-render is cheap only as long as the props you hand them keep their value — pass stable `data`/`style`/`filter` objects (`useMemo`) if you re-render during a gesture at all. Prefer keeping live viewport values in a ref, or debouncing to `onRegionDidChange`.
`onRegionWillChange`	`((event: ViewStateChangeEvent) => void) \| undefined`	—	Fires once per gesture, when the viewport starts changing.
`onWillStartLoadingMap`	`(() => void) \| undefined`	—
`onWillStartRenderingFrame`	`(() => void) \| undefined`	—
`onWillStartRenderingMap`	`(() => void) \| undefined`	—
`platformProps`	`PlatformProps \| undefined`	—
`preferredFramesPerSecond`	`number \| undefined`	—	iOS: adaptive FPS. Android: max FPS.
`scaleBar`	`boolean \| undefined`	`false`
`scaleBarPosition`	`OrnamentViewPosition \| undefined`	—
`style`	`unknown`	—
`testID`	`string \| undefined`	—
`tintColor`	`string \| undefined`	—
`touchPitch`	`boolean \| undefined`	`true`
`touchRotate`	`boolean \| undefined`	`true`
`touchZoom`	`boolean \| undefined`	`true`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<MapRef> \| undefined`