A labeled geographic marker with optional drag interactions.
import { MapMarker } from '@vrum/ui';
import { MapView } from '@vrum/ui';
<MapView center={[2.3522, 48.8566]} zoom={4} styleUrl="https://demotiles.maplibre.org/style.json" showControls={false}>
<MapMarker
longitude={2.3522}
latitude={48.8566}
tonal={"blue"}
label={"Paris"}
draggable={false}
/>
</MapView>Copy code| Prop | Type | Default | Description |
|---|---|---|---|
longitude* | number | none | longitude configuration. |
latitude* | number | none | latitude configuration. |
tonal | "purple" | "blue" | "green" | "amber" | "red" | "blue" | tonal configuration. |
label | string | "Map location" | Visible or accessible label. |
onClick | (() => void) | none | Called when the control is activated. |
children | React.ReactNode | none | Content rendered inside the component. |
draggable | boolean | false | draggable configuration. |
onDragEnd | ((coordinates: [number, number]) => void) | none | on drag end configuration. |