Component
MapMarker
The loidolt pin on a map: a real button with a name, and an optional popup.
import { MapMarker } from '@loidolt/theme-maps';
Example
Focus the map to move it: arrow keys pan, plus and minus zoom, Shift with the arrows rotates and tilts.
Tab to a stop and press Enter to open it.
Notes
- The pin points from its bottom-left corner, so it is anchored there. A marker with nothing to do is a named image rather than a dead tab stop.
- With a
popup, pressing the marker opens it and moves focus in; Escape or the close button closes it and focus returns to the marker.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
label required | string | — | Names the marker — its button's accessible name. |
lngLat required | LngLat | — | Where the marker stands. |
active | boolean | false | Draws the marker in its selected state. |
children | Snippet | — | Custom marker content in place of the loidolt pin. |
class | string | — | |
draggable | boolean | false | Let the marker be dragged to a new spot (pointer only). |
number | number | — | A number printed in the marker, e.g. a stop's order. |
onDragEnd | (lngLat: LngLat) => void | — | A drag ended, at this spot. |
onSelect | () => void | — | The marker was pressed — by pointer, Enter or Space. |
popup | Snippet | — | Content for a popup the marker opens when pressed. Focus moves in, and back on close. |
popupLabel | string | — | Names the popup. Defaults to label. |
popupOpen bindable | boolean | false | Whether the popup is showing. Bindable. |
shape | 'pin' | 'dot' | 'pin' | pin points at its spot from above; dot sits centred on it. |