react-map-gl (MapLibre)

Conventions for react-map-gl/maplibre in FixMyBerlin / FMC projects. Import from react-map-gl/maplibre (not react-map-gl alone). Always import maplibre-gl/dist/maplibre-gl.css.

When to apply

• Adding or changing <Map>, <Source>, <Layer>, controls, markers
• Click/hover/feature inspection wired to map events
• Syncing viewport to URL (map=zoom/lat/lng)
• Child components that need the map instance (feature state, fitBounds, queryRenderedFeatures)
• Debugging “map half loaded” errors, missing style images, or wrong click targets
• Highlighting selected/hovered features (setFeatureState vs layer filter)
• Reviewing code that uses useEffect to sync map camera, clicks, or hover
• Code calling map.addSource, map.addLayer, or effect-driven layer lifecycle
• Agent or E2E inspection of layer order, zoom, or rendered features (window.__mainMap)

Reference reading order