An interactive map with configurable styles and extent callbacks.
import { MapView } from '@vrum/ui';
import { MapMarker, MapControls } from '@vrum/ui';
<MapView
center={[2.3522,48.8566]}
zoom={4}
height={340}
styleUrl={"https://demotiles.maplibre.org/style.json"}
showControls={false}
interactive={true}
bordered={true}
theme={"light"}
bearing={0}
pitch={0}
>
<MapMarker longitude={2.3522} latitude={48.8566} label="Paris" /><MapControls showFullscreen={false} />
</MapView>| Prop | Type | Default | Description |
|---|---|---|---|
center | [number, number] | [0, 0] | center configuration. |
zoom | number | 2 | zoom configuration. |
bearing | number | 0 | bearing configuration. |
pitch | number | 0 | pitch configuration. |
theme | "auto" | "light" | "dark" | "light" | theme configuration. |
styleUrl | string | maplibregl.StyleSpecification | { light: string; dark: string; } | defaultStyle | style url configuration. |
interactive | boolean | true | interactive configuration. |
showControls | boolean | true | show controls configuration. |
preserveExtentOnResize | boolean | true | preserve extent on resize configuration. |
bordered | boolean | true | bordered configuration. |
onLoad | ((map: MapInstance) => void) | none | Called when the map is ready. |
onMove | ((extent: MapExtent) => void) | none | Called when the map extent changes. |
onError | ((error: Error) => void) | none | on error configuration. |
height | string | number | 360 | Height of the component in pixels. |
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLDivElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLDivElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLDivElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLDivElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLDivElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLDivElement> | none | on select configuration. |