Standalone repo that builds embeddable JAMstack map bundles (web components), composes them into a lazy-loaded SPA via layouts/, and optionally wraps a Capacitor Android/iOS app — one build, choose your output/CDN. Diátaxis docs. History reset to a single clean commit; no PII, IPs, or internal terms. |
||
|---|---|---|
| .. | ||
| FullscreenButton.vue | ||
| GeocoderComponent.vue | ||
| HamburgerButton.vue | ||
| HelpButton.vue | ||
| index.js | ||
| LocationButton.vue | ||
| MapControlButton.vue | ||
| MapToolbar.vue | ||
| README.md | ||
| ShareButton.vue | ||
| ThemeToggleButton.vue | ||
| ZoomInButton.vue | ||
| ZoomOutButton.vue | ||
library/components/map-controls/
Per-button toolbar controls. Each file is a single, focused button or input that mounts inside the map's control area. Replaces the older monolithic
../MapControlsComponent.vue.
| File | Role |
|---|---|
MapToolbar.vue |
Container that lays out the buttons below |
MapControlButton.vue |
Base button primitive used by the others (icon + tooltip + accessibility) |
ZoomInButton.vue |
+ button — map.zoomIn() |
ZoomOutButton.vue |
- button — map.zoomOut() |
LocationButton.vue |
Geolocation button — fly to user's position |
FullscreenButton.vue |
Toggle fullscreen on the map container |
HamburgerButton.vue |
Open/close side menu |
ThemeToggleButton.vue |
Light/dark theme toggle (delegates to uiStore.theme) |
GeocoderComponent.vue |
Mapbox Geocoder wrapper — Carmen-format aware, shadow-DOM-safe (LL-004, LL-015) |
Conventions
- Every button accepts a
sizeprop ('sm' | 'md' | 'lg') and follows theMapControlButtonshape. - Click handlers go through
inject('mapStore')or callgetMap()— never via a captured Mapbox instance. - Geocoder z-index sits above the legend and below popups.
Cross-references
- Catalog spec →
/docs/components/map-controls.md - Geocoder pattern →
/docs/mapbox/geocoder.md - Shadow-DOM z-index →
/docs/shadow-dom/z-index-and-layers.md
Next
If you need to add a new toolbar button, copy ZoomInButton.vue and add it to MapToolbar.vue.