Mapbox Google Maps Migration

If you're moving from Google Maps to Mapbox GL JS, this handles the translation work. It maps API equivalents (like how coordinate order flips from lat,lng to lng,lat), explains the philosophy shift from imperative objects to declarative data layers, and shows migration patterns for markers, popups, and events. The most useful bit is understanding when to use DOM-based markers versus WebGL layers. Google renders everything as DOM elements which chokes around 500+ points, while Mapbox's data-driven layers can handle thousands. Includes a seven-step migration strategy that starts with auditing your current implementation and ends with optimizations you can only do in Mapbox. Honest take: the hardest part isn't the API differences, it's rewiring your brain from objects to data sources.

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

View on GitHub

Install

$ npx -y skills add mapbox/mapbox-agent-skills --skill mapbox-google-maps-migration --agent claude-code

Installs into .claude/skills of the current project.

Files

Mapbox Google Maps Migration Skill

Comprehensive guidance for migrating from Google Maps Platform to Mapbox GL JS. Provides API equivalents, pattern translations, and strategies for successful migration.

Core Philosophy Differences

Google Maps: Imperative & Object-Oriented

Create objects (Marker, Polygon, etc.)
Add to map with .setMap(map)
Update properties with setters
Heavy reliance on object instances

Mapbox GL JS: Declarative & Data-Driven

Add data sources
Define layers (visual representation)
Style with JSON
Update data, not object properties

Key Insight: Mapbox treats everything as data + styling, not individual objects.

Map Initialization

Google Maps

const map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: 37.7749, lng: -122.4194 },
  zoom: 12,
  mapTypeId: 'roadmap' // or 'satellite', 'hybrid', 'terrain'
});