Migrate fdm-app maps from Mapbox to MapLibre

[SvenVw]

Context & Motivation

Currently, fdm-app uses react-map-gl with mapbox-gl and Mapbox services. However, Mapbox does not support Cloud Optimized GeoTIFFs (COG), a critical feature for our roadmap. Furthermore, we have observed that MapLibre offers more innovation relevant to our needs, particularly in the open-source domain, compared to the current direction of Mapbox. To align with these requirements, open-source principles, and improve maintainability, we are migrating to maplibre-gl.

We are replacing Mapbox services with a flexible configuration that supports:

1. MapTiler (Preferred for performance/reliability).
2. Pure Open Source / Free Tier (OSM + Esri World Imagery + Nominatim).

Scope

• Rendering Engine: mapbox-gl -> maplibre-gl.
• Basemaps:
  • Option A (MapTiler): Satellite Hybrid.
  • Option B (Open): OpenStreetMap (Standard) & Esri World Imagery (Satellite).
• Geocoding:
  • Option A (MapTiler): MapTiler Geocoding.
  • Option B (Open): Nominatim (OSM).

Technical Requirements

1. Dependencies

• Remove: mapbox-gl, @types/mapbox-gl, @mapbox/mapbox-gl-geocoder, @types/mapbox__mapbox-gl-geocoder.
• Install:
  • maplibre-gl, @types/maplibre-gl.
  • @maplibre/maplibre-gl-geocoder (Community fork, supports Nominatim & MapTiler via adapter).

2. Environment Configuration

• New Variable: MAP_PROVIDER (maptiler | osm).
• New Variable: MAPTILER_API_KEY (Required if provider is maptiler).
• Update: fdm-app/app/integrations/mapbox.ts -> integrations/map.ts.
  • Export getMapStyle(provider): Returns style JSON.
    • MapTiler: URL to standard MapTiler style.
    • OSM/Esri: A locally constructed MapLibre Style JSON object defining raster sources for OSM or Esri.

3. Component Refactoring

• atlas-controls.tsx:
  • Switch to generic react-map-gl controls.
• atlas-geocoder.tsx:
  • Implement @maplibre/maplibre-gl-geocoder.
  • Configure the geocodingApi based on MAP_PROVIDER.
    • If maptiler: Use MapTiler API.
    • If osm: Use Nominatim API.
• atlas-sources.tsx & atlas-styles.tsx:
  • Update types to maplibre-gl.

4. Route Updates

• Map Instances:
  • Update <Map> components to use mapLib={import('maplibre-gl')}.

Acceptance Criteria

1. Basemap:
   • Configured provider loads (MapTiler Hybrid OR Esri Satellite).
2. Search:
   • Geocoding returns results from the configured provider.
3. Field Selection: Existing FlatGeobuf functionality remains operational.
4. Clean Code: No mapbox imports remain.

Task List

• Uninstall Mapbox dependencies.
• Install MapLibre dependencies.
• Create integrations/map.ts with configurable style generator (MapTiler/Esri/OSM).
• Refactor atlas-geocoder.tsx to use @maplibre/maplibre-gl-geocoder with provider switch.
• Update map instances to maplibre-gl.
• Verify "New Field" flow with both configurations (if possible) or primary choice.