mapbox-web-integration-patterns
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
More from mapbox/mapbox-agent-skills
mapbox-style-patterns
Common style patterns, layer configurations, and recipes for typical mapping scenarios including restaurant finders, real estate, data visualization, navigation, delivery/logistics, and more. Use when implementing specific map use cases or looking for proven style patterns.
996mapbox-web-performance-patterns
Performance optimization patterns for Mapbox GL JS web applications. Covers initialization waterfalls, bundle size, rendering performance, memory management, and web optimization. Prioritized by impact on user experience.
951mapbox-cartography
Expert guidance on map design principles, color theory, visual hierarchy, typography, and cartographic best practices for creating effective and beautiful maps with Mapbox. Use when designing map styles, choosing colors, or making cartographic decisions.
839mapbox-geospatial-operations
Expert guidance on choosing the right geospatial tool based on problem type, accuracy requirements, and performance needs
810mapbox-style-quality
Expert guidance on validating, optimizing, and ensuring quality of Mapbox styles through validation, accessibility checks, and optimization. Use when preparing styles for production, debugging issues, or ensuring map quality standards.
782mapbox-data-visualization-patterns
Patterns for visualizing data on maps including choropleth maps, heat maps, 3D visualizations, data-driven styling, and animated data. Covers layer types, color scales, and performance optimization.
752