Map Pins
A drawn, stylised map with clustered pins that split as you zoom, a selected-place card and a synced list, with drag and keyboard panning.
Preview
Pebble notes Books
Bookshop · 31 Long Road
Open until 19:00
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| pins | MapPin[] | — | Places: { id, title, subtitle?, meta?, x, y } in the 1000 × 700 map space. |
| map | ReactNode | <TownMap /> | SVG content drawn in a 1000 × 700 viewBox. |
| label | string | "Map" | Accessible name for the map and its list. |
| selected | string | null | — | Selected pin id (controlled). |
| defaultSelected | string | null | null | Initially selected pin id. |
| onSelectedChange | (id: string | null) => void | — | Called when a pin is selected or cleared. |
| clusterRadius | number | 44 | Pins closer than this many screen pixels merge into a cluster. |
| maxZoom | number | 4 | Largest zoom level. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.