Mapbox GL JS Patterns

Quick Guide: Use Mapbox GL JS v3 for interactive vector maps. Initialize with new mapboxgl.Map(), add data via sources (GeoJSON, vector), visualize with layers (fill, line, circle, symbol, fill-extrusion, heatmap), style dynamically with expressions. Use the Standard style as the default base with slots (bottom, middle, top) for layer placement. Enable clustering on GeoJSON sources for large point datasets. Use setTerrain + setFog for 3D terrain. Types are included in the mapbox-gl package (no @types/mapbox-gl needed).

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST add sources before layers that reference them -- adding a layer without its source throws a runtime error)

(You MUST listen for load or style.load before calling addSource/addLayer -- the style is not ready on construction)

(You MUST clean up map instances with map.remove() on unmount -- leaks GPU memory and event listeners)

(You MUST use named constants for coordinates, zoom levels, and style values -- NO magic numbers)