mapbox-web-integration-patterns

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. Recommended: v3.x (latest) Installing via npm (recommended for production): CDN (for prototyping only): ⚠️ Production apps should use npm, not CDN - ensures consistent versions and offline builds. React: Vue: Svelte: Angular: Next.js: Required for search integration: Migrating from v2.x to v3.x: Token patterns (work in v2.x and v3.x): Every Mapbox GL JS integration must: Pattern: useRef + useEffect with cleanup Note: These examples use Vite (the bundler used in create-web-app ). If using Create React App, replace import.meta.env.VITE_MAPBOX_ACCESS_TOKEN with process.env.REACT_APP_MAPBOX_TOKEN . See the Token Management Patterns section for other bundlers. Key points: React + Search JS: Pattern: mounted + unmounted lifecycle hooks Key points: Pattern: onMount + onDestroy Key points: Pattern: ngOnInit + ngOnDestroy with SSR handling Template (map.component.html): Key points: Pattern: Module imports with initialization function HTML: Key points: Pattern: Script tag with inline initialization ⚠️ Note: This pattern is for prototyping only. Production apps should use npm/bundler for version control and offline builds.