Markers & Annotations@knitui/map
Marker
Marker renders a single React element as an overlay pinned to a geographic coordinate. On web your children become a DOM overlay positioned by maplibre-gl; on native the same element renders through the RN bridge. anchor and offset control which point of the element aligns with the coordinate.
WebiOSAndroidnative split9 own props4 examples
import { Marker } from "@knitui/map";Playground
Loading playground…
<Marker
lngLat={AMSTERDAM}
>
<Pin />
</Marker>Examples
Single
A single custom HTML pin anchored at a coordinate.
Loading example…
Many Cities
Many markers mapped from EUROPEAN_CITIES, one styled pin per city.
Loading example…
Selectable
A marker whose onPress toggles its own selected state (and color).
Loading example…
Anchor And Offset
The same coordinate with different anchor / offset values to show alignment.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children required | ReactElement<unknown, string | JSXElementConstructor<any>> | — | |
lngLat required | [longitude: number, latitude: number] | — | |
anchor | Anchor | undefined | — | |
id | string | undefined | — | |
offset | PixelPoint | undefined | — | |
onPress | ((event: MarkerEvent) => void) | undefined | — | |
selected | boolean | undefined | — | |
style | unknown | — | |
testID | string | undefined | — |