Markers & Annotations@knitui/map
View Annotation
ViewAnnotation anchors arbitrary React content at a coordinate. Unlike Marker it carries title/snippet metadata and selection callbacks (onSelect/onDeselect). On web the children render as a DOM overlay positioned by the map engine.
WebiOSAndroidnative split17 own props3 examples
import { ViewAnnotation } from "@knitui/map";Playground
Loading playground…
<ViewAnnotation
lngLat={AMSTERDAM}
>
<Card title="Amsterdam" />
</ViewAnnotation>Examples
Single
Custom React content anchored at a single coordinate.
Loading example…
Multiple
Several annotations at once, one per landmark city.
Loading example…
Title And Snippet
Using title / snippet metadata alongside the rendered content.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children required | ReactElement<unknown, string | JSXElementConstructor<any>> | [ReactElement<unknown, string | JSXElementConstructor<any>>, ReactElement<unknown, string | JSXElementConstructor<any>>] | — | — |
lngLat required | [longitude: number, latitude: number] | — | — |
anchor | Anchor | undefined | — | — |
draggable | boolean | undefined | — | — |
id | string | undefined | — | — |
offset | PixelPoint | undefined | — | — |
onDeselect | ((event: ViewAnnotationEvent) => void) | undefined | — | — |
onDrag | ((event: ViewAnnotationEvent) => void) | undefined | — | — |
onDragEnd | ((event: ViewAnnotationEvent) => void) | undefined | — | — |
onDragStart | ((event: ViewAnnotationEvent) => void) | undefined | — | — |
onPress | ((event: ViewAnnotationEvent) => void) | undefined | — | — |
onSelect | ((event: ViewAnnotationEvent) => void) | undefined | — | — |
selected | boolean | undefined | — | — |
snippet | string | undefined | — | — |
style | unknown | — | — |
testID | string | undefined | — | — |
title | string | undefined | — | — |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<ViewAnnotationRef> | undefined |