doxa-maps/library/components/map-controls
doxa-maps d5ba21fa76 doxa-maps — portable bundler for embeddable JAMstack maps
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.
2026-09-10 01:53:07 +00:00
..
FullscreenButton.vue doxa-maps — portable bundler for embeddable JAMstack maps 2026-09-10 01:53:07 +00:00
GeocoderComponent.vue doxa-maps — portable bundler for embeddable JAMstack maps 2026-09-10 01:53:07 +00:00
HamburgerButton.vue doxa-maps — portable bundler for embeddable JAMstack maps 2026-09-10 01:53:07 +00:00
HelpButton.vue doxa-maps — portable bundler for embeddable JAMstack maps 2026-09-10 01:53:07 +00:00
index.js doxa-maps — portable bundler for embeddable JAMstack maps 2026-09-10 01:53:07 +00:00
LocationButton.vue doxa-maps — portable bundler for embeddable JAMstack maps 2026-09-10 01:53:07 +00:00
MapControlButton.vue doxa-maps — portable bundler for embeddable JAMstack maps 2026-09-10 01:53:07 +00:00
MapToolbar.vue doxa-maps — portable bundler for embeddable JAMstack maps 2026-09-10 01:53:07 +00:00
README.md doxa-maps — portable bundler for embeddable JAMstack maps 2026-09-10 01:53:07 +00:00
ShareButton.vue doxa-maps — portable bundler for embeddable JAMstack maps 2026-09-10 01:53:07 +00:00
ThemeToggleButton.vue doxa-maps — portable bundler for embeddable JAMstack maps 2026-09-10 01:53:07 +00:00
ZoomInButton.vue doxa-maps — portable bundler for embeddable JAMstack maps 2026-09-10 01:53:07 +00:00
ZoomOutButton.vue doxa-maps — portable bundler for embeddable JAMstack maps 2026-09-10 01:53:07 +00:00

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 size prop ('sm' | 'md' | 'lg') and follows the MapControlButton shape.
  • Click handlers go through inject('mapStore') or call getMap() — never via a captured Mapbox instance.
  • Geocoder z-index sits above the legend and below popups.

Cross-references

Next

If you need to add a new toolbar button, copy ZoomInButton.vue and add it to MapToolbar.vue.