Skip to content

feat: add map layer with multi-provider support#113

Merged
liamwalder merged 8 commits intodevelopfrom
feat/map-layer
Mar 30, 2026
Merged

feat: add map layer with multi-provider support#113
liamwalder merged 8 commits intodevelopfrom
feat/map-layer

Conversation

@tristan-mouchet
Copy link
Copy Markdown
Collaborator

@tristan-mouchet tristan-mouchet commented Mar 30, 2026

Summary

Add a Map layer element supporting both Google Embedded Map and Mapbox providers, with address search, configurable zoom/style/marker, and a unified integrations page for API key management.

Changes

  • Add Map element to the element library with default 400px height
  • Add MapSettings panel with provider selector, address search, zoom, style, and marker color
  • Add map-utils.ts for iframe embed generation (Mapbox GL JS via srcDoc, Google Maps Embed API via src)
  • Add map-server.ts for server-side token resolution from env vars or app_settings
  • Add geocoding API route with provider-aware backends (Mapbox Geocoding, Google Places API)
  • Add Mapbox and Google Map apps to integrations page with token management
  • Support env-var-based API keys with "Connected" status and hidden disconnect button
  • Inject resolved map tokens into editor init settings for client-side rendering
  • Add map rendering to LayerRenderer (editor) and page-fetcher (published pages)
  • Add server-side map token resolution to PageRenderer for SSR
  • Debounce canvas height measurement to prevent scroll jumps on map setting changes
  • Use google-maps-embed app ID to allow future Google Maps JS API integration

Test plan

  • Add a Map element from the element library
  • Switch between Google Map and Mapbox providers
  • Search for an address and verify the map updates coordinates
  • Adjust zoom, style, and marker color (Mapbox only for marker)
  • Configure API keys via the integrations page for both providers
  • Verify map renders on published pages
  • Set API key via env var and confirm "Connected" badge without disconnect button
  • Change map settings and verify canvas scroll position stays stable

- Added caching headers to the geocoding API response for improved performance.
- Updated MapSettings component to include new address search functionality with popover support.
- Introduced new map settings options: scrollZoom, showNavControl, and showScaleBar.
- Adjusted default map settings for better initial user experience.
- Integrated server-side settings for Mapbox token retrieval in LayerRenderer and PageRenderer components.
- Updated MapSettings to include a ColorPicker for marker color selection.
- Introduced debounced updates for latitude, longitude, and zoom changes to improve performance.
- Adjusted default map settings to use markerColor instead of showMarker.
- Integrated color variable resolution for marker colors in map rendering.
- Rename app ID to google-maps-embed for future JS API coexistence
- Rename setting key to google_maps_embed_api_key
- Rename env var to GOOGLE_MAPS_EMBED_API_KEY
- Add Google Maps Embed API key resolution to editor init
- Add Places API geocoding for Google provider
- Debounce canvas height measurement to prevent scroll jumps
@tristan-mouchet tristan-mouchet added the Feature request A new feature request label Mar 30, 2026
@tristan-mouchet tristan-mouchet self-assigned this Mar 30, 2026
@tristan-mouchet tristan-mouchet added the Feature request A new feature request label Mar 30, 2026
@tristan-mouchet tristan-mouchet linked an issue Mar 30, 2026 that may be closed by this pull request
@liamwalder liamwalder self-assigned this Mar 30, 2026
@liamwalder liamwalder merged commit 5910f60 into develop Mar 30, 2026
2 checks passed
@liamwalder liamwalder deleted the feat/map-layer branch March 30, 2026 13:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature request A new feature request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add back map layers

2 participants