Official integration patterns for Mapbox GL JS across popular web frameworks (React, Vue, Svelte, Angular). Covers setup, lifecycle management, token handling,…
Production-ready integration patterns for Mapbox GL JS across React, Vue, Svelte, Angular, and vanilla JavaScript. Covers framework-specific lifecycle management (useEffect/useRef in React, mounted/unmounted in Vue, onMount/onDestroy in Svelte, ngOnInit/ngOnDestroy in Angular) with proper cleanup to prevent memory leaks Includes Web Components pattern for framework-agnostic reusable map elements and cross-framework compatibility Provides token management via environment variables, Search JS integration, and SSR handling for Next.js and Angular Universal Documents seven common mistakes (missing map.remove(), initializing in render, wrong dependency arrays, hardcoded tokens) with corrected examples Mapbox Integration Patterns Skill This skill provides official patterns for integrating Mapbox GL JS into web applications using React, Vue, Svelte, Angular, and vanilla JavaScript. These patterns are based on Mapbox's create-web-app scaffolding tool and represent production-ready best practices. Version Requirements Mapbox GL JS Recommended: v3.x (latest) Minimum: v3.0.0 Why v3.x: Modern API, improved performance, active development v2.x: Legacy; no longer actively developed (see migration notes below) Installing via npm (recommended for production): npm install mapbox-gl@^3.0.0 # Installs latest v3.x
don't have the plugin yet? install it then click "run inline in claude" again.