Mapbox Web Integration Patterns

If you're integrating Mapbox GL JS into a web app, this gives you the actual patterns that prevent the common mistakes. It covers React, Vue, Svelte, Angular, and vanilla JS, with specific focus on lifecycle management and the critical map.remove() cleanup that everyone forgets. The React examples use useRef and useEffect correctly, there's a complete search integration setup, and it includes the token handling patterns for different bundlers. This is based on Mapbox's official create-web-app scaffolding, so you're getting their recommended approach rather than Stack Overflow guesswork. Particularly useful if you've ever dealt with memory leaks from unmounted map instances.

skills.sh installs: 2.7K
GitHub stars: 86
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add mapbox/mapbox-agent-skills --skill mapbox-web-integration-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

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

CDN (for prototyping only):

<!-- Replace VERSION with latest v3.x from https://docs.mapbox.com/mapbox-gl-js/ -->
<script src="https://api.mapbox.com/mapbox-gl-js/vVERSION/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/vVERSION/mapbox-gl.css" rel="stylesheet" />

Framework Requirements

SKILL.md on GitHub

Details

Repository: github.com/mapbox/mapbox-agent-skills
Categories: Frontend Development, AI & Agent Building
First seen: Apr 16, 2026

More from mapbox/mapbox-agent-skills

All 18