Leaflet Interactive Map Patterns

Quick Guide: Use Leaflet (v1.9.4) for lightweight interactive maps. L.map for initialization, L.tileLayer for base maps, L.marker/L.popup for points of interest, L.geoJSON for vector data with onEachFeature/pointToLayer/style/filter callbacks. Always include tile layer attribution. Always clean up maps with map.remove() on teardown. Use L.markerClusterGroup for 100+ markers. Use @types/leaflet for TypeScript support.

<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 call map.remove() when tearing down a map instance -- prevents memory leaks and orphaned event listeners)

(You MUST include attribution on tile layers -- most tile providers require it legally)

(You MUST use L.markerClusterGroup or canvas rendering for 100+ markers -- DOM markers do not scale)

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