mapbox-web-integration-patterns

SKILL.md

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