[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-mapbox-mapbox-maplibre-migration":3,"mdc--1xywkb-key":33,"related-repo-mapbox-mapbox-maplibre-migration":5381,"related-org-mapbox-mapbox-maplibre-migration":5485},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":29,"sourceUrl":31,"mdContent":32},"mapbox-maplibre-migration","migrate from MapLibre to Mapbox","Guide for migrating from MapLibre GL JS to Mapbox GL JS, covering API compatibility, token setup, style configuration, and the benefits of Mapbox's official support and ecosystem",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"mapbox","Mapbox","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmapbox.png",[12,16,17,20],{"name":13,"slug":14,"type":15},"Migration","migration","tag",{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},"Web Development","web-development",{"name":21,"slug":22,"type":15},"Engineering","engineering",69,"https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-agent-skills","2026-04-06T18:28:51.531856",null,10,[],{"repoUrl":24,"stars":23,"forks":27,"topics":30,"description":26},[],"https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-agent-skills\u002Ftree\u002FHEAD\u002Fskills\u002Fmapbox-maplibre-migration","---\nname: mapbox-maplibre-migration\ndescription: Guide for migrating from MapLibre GL JS to Mapbox GL JS, covering API compatibility, token setup, style configuration, and the benefits of Mapbox's official support and ecosystem\n---\n\n# MapLibre to Mapbox Migration Skill\n\nExpert guidance for migrating from MapLibre GL JS to Mapbox GL JS. Covers the shared history, API compatibility, migration steps, and the advantages of Mapbox's platform.\n\n## Understanding the Fork\n\n### History\n\n**MapLibre GL JS** is an open-source fork of **Mapbox GL JS v1.13.0**, created in December 2020 when Mapbox changed their license starting with v2.0.\n\n**Timeline:**\n\n- **Pre-2020:** Mapbox GL JS was open source (BSD license)\n- **Dec 2020:** Mapbox GL JS v2.0 introduced proprietary license\n- **Dec 2020:** Community forked v1.13 as MapLibre GL JS\n- **Present:** Both libraries continue active development\n\n**Key Insight:** The APIs are ~95% identical because MapLibre started as a Mapbox fork. Most code works in both with minimal changes, making migration straightforward.\n\n## Why Migrate to Mapbox?\n\n**Compelling reasons to choose Mapbox GL JS:**\n\n- **Official Support & SLAs**: Enterprise-grade support with guaranteed response times\n- **Superior Tile Quality**: Best-in-class vector tiles with global coverage and frequent updates\n- **Better Satellite Imagery**: High-resolution, up-to-date satellite and aerial imagery\n- **Rich Ecosystem**: Seamless integration with Mapbox Studio, APIs, and services\n- **Advanced Features**: Traffic-aware routing, turn-by-turn directions, premium datasets\n- **Geocoding & Search**: World-class address search and place lookup\n- **Navigation SDK**: Mobile navigation with real-time traffic\n- **No Tile Infrastructure**: No need to host or maintain your own tile servers\n- **Regular Updates**: Continuous improvements and new features\n- **Professional Services**: Access to Mapbox solutions team for complex projects\n\n**Mapbox offers a generous free tier:** 50,000 map loads\u002Fmonth, making it suitable for many applications without cost.\n\n## Quick Comparison\n\n| Aspect                | Mapbox GL JS                  | MapLibre GL JS                    |\n| --------------------- | ----------------------------- | --------------------------------- |\n| **License**           | Proprietary (v2+)             | BSD 3-Clause (Open Source)        |\n| **Support**           | Official commercial support   | Community support                 |\n| **Tiles**             | Premium Mapbox vector tiles   | OSM or custom tile sources        |\n| **Satellite**         | High-quality global imagery   | Requires custom source            |\n| **Token**             | Required (access token)       | Optional (depends on tile source) |\n| **APIs**              | Full Mapbox ecosystem         | Requires third-party services     |\n| **Studio**            | Full integration              | No native integration             |\n| **3D Terrain**        | Built-in with premium data    | Available (requires data source)  |\n| **Globe View**        | v2.9+                         | v3.0+                             |\n| **API Compatibility** | ~95% compatible with MapLibre | ~95% compatible with Mapbox       |\n| **Bundle Size**       | ~500KB                        | ~450KB                            |\n| **Setup Complexity**  | Easy (just add token)         | Requires tile source setup        |\n\n## Step-by-Step Migration\n\n### 1. Create Mapbox Account\n\n1. Sign up at [mapbox.com](https:\u002F\u002Fmapbox.com)\n2. Get your access token from the account dashboard\n3. Review pricing: Free tier includes 50,000 map loads\u002Fmonth\n4. Note your token (starts with `pk.` for public tokens)\n\n### 2. Update Package\n\n```bash\n# Remove MapLibre\nnpm uninstall maplibre-gl\n\n# Install Mapbox\nnpm install mapbox-gl\n```\n\n### 3. Update Imports\n\n```javascript\n\u002F\u002F Before (MapLibre)\nimport maplibregl from 'maplibre-gl';\nimport 'maplibre-gl\u002Fdist\u002Fmaplibre-gl.css';\n\n\u002F\u002F After (Mapbox)\nimport mapboxgl from 'mapbox-gl';\nimport 'mapbox-gl\u002Fdist\u002Fmapbox-gl.css';\n```\n\nOr with CDN:\n\n```html\n\u003C!-- Before (MapLibre) -->\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fmaplibre-gl@3.0.0\u002Fdist\u002Fmaplibre-gl.js\">\u003C\u002Fscript>\n\u003Clink href=\"https:\u002F\u002Funpkg.com\u002Fmaplibre-gl@3.0.0\u002Fdist\u002Fmaplibre-gl.css\" rel=\"stylesheet\" \u002F>\n\n\u003C!-- After (Mapbox) -->\n\u003Cscript src=\"https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.0.0\u002Fmapbox-gl.js\">\u003C\u002Fscript>\n\u003Clink href=\"https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.0.0\u002Fmapbox-gl.css\" rel=\"stylesheet\" \u002F>\n```\n\n### 4. Add Access Token\n\n```javascript\n\u002F\u002F Add this before map initialization\nmapboxgl.accessToken = 'pk.your_mapbox_access_token';\n```\n\n**Token best practices:**\n\n- Use environment variables: `process.env.VITE_MAPBOX_TOKEN` or `process.env.NEXT_PUBLIC_MAPBOX_TOKEN`\n- Add URL restrictions in Mapbox dashboard for security\n- Use public tokens (`pk.*`) for client-side code\n- Never commit tokens to git (add to `.env` and `.gitignore`)\n- Rotate tokens if compromised\n\nSee `mapbox-token-security` skill for comprehensive token security guidance.\n\n### 5. Update Map Initialization\n\n```javascript\n\u002F\u002F Before (MapLibre)\nconst map = new maplibregl.Map({\n  container: 'map',\n  style: 'https:\u002F\u002Fdemotiles.maplibre.org\u002Fstyle.json', \u002F\u002F or your custom style\n  center: [-122.4194, 37.7749],\n  zoom: 12\n});\n\n\u002F\u002F After (Mapbox)\nmapboxgl.accessToken = 'pk.your_mapbox_access_token';\n\nconst map = new mapboxgl.Map({\n  container: 'map',\n  style: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstandard', \u002F\u002F Mapbox style\n  center: [-122.4194, 37.7749],\n  zoom: 12\n});\n```\n\n### 6. Update Style URL\n\nMapbox provides professionally designed, maintained styles:\n\n```javascript\n\u002F\u002F Mapbox built-in styles\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstandard'; \u002F\u002F Mapbox Standard (default)\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstandard-satellite'; \u002F\u002F Mapbox Standard Satellite\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstreets-v12'; \u002F\u002F Streets v12\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fsatellite-v9'; \u002F\u002F Satellite imagery\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fsatellite-streets-v12'; \u002F\u002F Hybrid\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Foutdoors-v12'; \u002F\u002F Outdoor\u002Frecreation\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Flight-v11'; \u002F\u002F Light theme\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fdark-v11'; \u002F\u002F Dark theme\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fnavigation-day-v1'; \u002F\u002F Navigation (day)\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fnavigation-night-v1'; \u002F\u002F Navigation (night)\n```\n\n**Custom styles:**\nYou can also create and use custom styles from Mapbox Studio:\n\n```javascript\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fyour-username\u002Fyour-style-id';\n```\n\n### 7. Update All References\n\nReplace all `maplibregl` references with `mapboxgl`:\n\n```javascript\n\u002F\u002F Markers\nconst marker = new mapboxgl.Marker() \u002F\u002F was: maplibregl.Marker()\n  .setLngLat([-122.4194, 37.7749])\n  .setPopup(new mapboxgl.Popup().setText('San Francisco'))\n  .addTo(map);\n\n\u002F\u002F Controls\nmap.addControl(new mapboxgl.NavigationControl(), 'top-right');\nmap.addControl(new mapboxgl.GeolocateControl());\nmap.addControl(new mapboxgl.FullscreenControl());\nmap.addControl(new mapboxgl.ScaleControl());\n```\n\n### 8. Update Plugins (If Used)\n\nSome MapLibre plugins should be replaced with Mapbox versions:\n\n| MapLibre Plugin                  | Mapbox Alternative           |\n| -------------------------------- | ---------------------------- |\n| `@maplibre\u002Fmaplibre-gl-geocoder` | `@mapbox\u002Fmapbox-gl-geocoder` |\n| `@maplibre\u002Fmaplibre-gl-draw`     | `@mapbox\u002Fmapbox-gl-draw`     |\n| `maplibre-gl-compare`            | `mapbox-gl-compare`          |\n\nExample:\n\n```javascript\n\u002F\u002F Before (MapLibre)\nimport MaplibreGeocoder from '@maplibre\u002Fmaplibre-gl-geocoder';\n\n\u002F\u002F After (Mapbox)\nimport MapboxGeocoder from '@mapbox\u002Fmapbox-gl-geocoder';\n\nmap.addControl(\n  new MapboxGeocoder({\n    accessToken: mapboxgl.accessToken,\n    mapboxgl: mapboxgl\n  })\n);\n```\n\n### 9. Everything Else Stays the Same\n\nAll your map code, events, layers, and sources work identically:\n\n```javascript\n\u002F\u002F This code works EXACTLY THE SAME in both libraries\nmap.on('load', () => {\n  map.addSource('points', {\n    type: 'geojson',\n    data: geojsonData\n  });\n\n  map.addLayer({\n    id: 'points-layer',\n    type: 'circle',\n    source: 'points',\n    paint: {\n      'circle-radius': 8,\n      'circle-color': '#ff0000'\n    }\n  });\n});\n\n\u002F\u002F Events work identically\nmap.on('click', 'points-layer', (e) => {\n  console.log(e.features[0].properties);\n});\n\n\u002F\u002F All map methods work the same\nmap.setCenter([lng, lat]);\nmap.setZoom(12);\nmap.fitBounds(bounds);\nmap.flyTo({ center: [lng, lat], zoom: 14 });\n```\n\n## What Changes: Summary\n\n**Must change:**\n\n- Package name (`maplibre-gl` -> `mapbox-gl`)\n- Import statements\n- Add `mapboxgl.accessToken` configuration\n- Style URL (switch to `mapbox:\u002F\u002F` styles)\n- Plugin packages (if used)\n\n**Stays exactly the same:**\n\n- All map methods (`setCenter`, `setZoom`, `fitBounds`, `flyTo`, etc.)\n- All event handling (`map.on('click')`, `map.on('load')`, etc.)\n- Marker\u002FPopup APIs (100% compatible)\n- Layer\u002Fsource APIs (100% compatible)\n- GeoJSON handling\n- Custom styling and expressions\n- Controls (Navigation, Geolocate, Scale, etc.)\n\n## Common Migration Issues\n\n### Issue 1: Token Not Set\n\n**Problem:**\n\n```javascript\n\u002F\u002F Error: \"A valid Mapbox access token is required to use Mapbox GL\"\nconst map = new mapboxgl.Map({...});\n```\n\n**Solution:**\n\n```javascript\n\u002F\u002F Set token BEFORE creating map\nmapboxgl.accessToken = 'pk.your_token';\nconst map = new mapboxgl.Map({...});\n```\n\n### Issue 2: Token in Git\n\n**Problem:**\n\n```javascript\n\u002F\u002F Token hardcoded in source\nmapboxgl.accessToken = 'pk.eyJ1Ijoi...';\n```\n\n**Solution:**\n\n```javascript\n\u002F\u002F Use environment variables\nmapboxgl.accessToken = process.env.VITE_MAPBOX_TOKEN;\n\n\u002F\u002F Add to .env file (not committed to git)\nVITE_MAPBOX_TOKEN=pk.your_token\n\n\u002F\u002F Add .env to .gitignore\necho \".env\" >> .gitignore\n```\n\n### Issue 3: Wrong Style URL Format\n\n**Problem:**\n\n```javascript\n\u002F\u002F MapLibre-style URL won't work optimally\nstyle: 'https:\u002F\u002Fdemotiles.maplibre.org\u002Fstyle.json';\n```\n\n**Solution:**\n\n```javascript\n\u002F\u002F Use Mapbox style URL for better performance and features\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstreets-v12';\n```\n\n### Issue 4: Plugin Compatibility\n\n**Problem:**\n\n```javascript\n\u002F\u002F MapLibre plugin won't work\nimport MaplibreGeocoder from '@maplibre\u002Fmaplibre-gl-geocoder';\n```\n\n**Solution:**\n\n```javascript\n\u002F\u002F Use Mapbox plugin\nimport MapboxGeocoder from '@mapbox\u002Fmapbox-gl-geocoder';\n```\n\n> **Important:** This applies to ALL MapLibre plugins, not just the geocoder. Any `@maplibre\u002F*` or `maplibre-gl-*` plugin must be replaced with its Mapbox equivalent. Check the Mapbox ecosystem for Mapbox-specific versions of every plugin you use (see Step 8 above for the full mapping table).\n\n### Issue 5: CDN URLs\n\n**Problem:**\n\n```javascript\n\u002F\u002F Wrong CDN\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fmaplibre-gl@3.0.0\u002Fdist\u002Fmaplibre-gl.js\">\u003C\u002Fscript>\n```\n\n**Solution:**\n\n```javascript\n\u002F\u002F Use Mapbox CDN\n\u003Cscript src='https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.0.0\u002Fmapbox-gl.js'>\u003C\u002Fscript>\n\u003Clink href='https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.0.0\u002Fmapbox-gl.css' rel='stylesheet' \u002F>\n```\n\n## Migration Checklist\n\n- [ ] **Create Mapbox account** and get access token\n- [ ] **Update package**: `npm install mapbox-gl` (remove maplibre-gl)\n- [ ] **Update imports**: `maplibre-gl` -> `mapbox-gl`\n- [ ] **Update CSS imports**: `maplibre-gl.css` -> `mapbox-gl.css`\n- [ ] **Add token**: Set `mapboxgl.accessToken = 'pk.xxx'`\n- [ ] **Use environment variables**: Store token in `.env`\n- [ ] **Update style URL**: Change to `mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstreets-v12`\n- [ ] **Update all references**: Replace `maplibregl.` with `mapboxgl.`\n- [ ] **Update plugins**: Install Mapbox versions of plugins (if used)\n- [ ] **Configure token security**: Add URL restrictions in dashboard\n- [ ] **Test all functionality**: Verify map loads, interactions work\n- [ ] **Set up billing alerts**: Monitor usage in Mapbox dashboard\n- [ ] **Update documentation**: Document token setup for team\n- [ ] **Add .env to .gitignore**: Ensure tokens not committed\n\n## Quick Reference\n\n### Key Differences Summary\n\n| What    | MapLibre                               | Mapbox                                      |\n| ------- | -------------------------------------- | ------------------------------------------- |\n| Package | `maplibre-gl`                          | `mapbox-gl`                                 |\n| Import  | `import maplibregl from 'maplibre-gl'` | `import mapboxgl from 'mapbox-gl'`          |\n| Token   | Optional (depends on tiles)            | Required: `mapboxgl.accessToken = 'pk.xxx'` |\n| Style   | Custom URL or OSM tiles                | `mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstreets-v12`        |\n| License | BSD (Open Source)                      | Proprietary (v2+)                           |\n| Support | Community                              | Official commercial support                 |\n| Tiles   | Requires tile source                   | Premium Mapbox tiles included               |\n| APIs    | Third-party                            | Full Mapbox API ecosystem                   |\n| API     | ~95% compatible                        | ~95% compatible                             |\n\n**Bottom line:** Migration is easy because APIs are nearly identical. Main changes are packaging, token setup, and style URLs. The result is access to Mapbox's premium tiles, ecosystem, and support.\n\n## Integration with Other Skills\n\n**Related skills:**\n\n- **mapbox-web-integration-patterns**: Framework-specific patterns (React, Vue, Svelte, Angular)\n- **mapbox-web-performance-patterns**: Performance optimization techniques\n- **mapbox-token-security**: Comprehensive token security best practices\n- **mapbox-google-maps-migration**: Migrate from Google Maps to Mapbox\n\n## Resources\n\n**Mapbox GL JS:**\n\n- [Official Documentation](https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002F)\n- [Example Gallery](https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fexamples\u002F)\n- [API Reference](https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fapi\u002F)\n- [GitHub Repository](https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-gl-js)\n- [Mapbox Studio](https:\u002F\u002Fstudio.mapbox.com\u002F)\n- [Pricing Information](https:\u002F\u002Fwww.mapbox.com\u002Fpricing\u002F)\n\n**Migration Support:**\n\n- [Get Started Guide](https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fguides\u002Finstall\u002F)\n- [Style Specification](https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fstyle-spec\u002F)\n- [Mapbox Community Support](https:\u002F\u002Fsupport.mapbox.com\u002Fhc\u002Fen-us\u002Fcommunity\u002Ftopics)\n\n## Reference Files\n\nFor detailed information on specific topics, load these reference files:\n\n- **`references\u002Fapi-compatibility.md`** -- Full list of 100% compatible APIs + side-by-side migration example\n- **`references\u002Fexclusive-features.md`** -- Mapbox-exclusive features (APIs, Studio, Advanced) + React\u002FVue framework examples\n- **`references\u002Fwhy-mapbox.md`** -- Why Choose Mapbox (Production, Dev Teams, Business) + Performance Comparison\n",{"data":34,"body":35},{"name":4,"description":6},{"type":36,"children":37},"root",[38,47,53,60,67,85,93,137,147,153,161,264,274,280,564,570,576,618,624,705,711,867,872,1118,1124,1178,1186,1252,1265,1271,1711,1717,1722,2068,2078,2113,2119,2138,2540,2546,2551,2636,2641,2851,2857,2862,3633,3639,3647,3704,3712,3790,3796,3802,3810,3873,3881,3979,3985,3992,4043,4050,4201,4207,4214,4256,4263,4305,4311,4318,4364,4371,4417,4446,4452,4459,4517,4524,4637,4643,4922,4928,4934,5136,5146,5152,5160,5202,5208,5216,5279,5287,5320,5326,5331,5376],{"type":39,"tag":40,"props":41,"children":43},"element","h1",{"id":42},"maplibre-to-mapbox-migration-skill",[44],{"type":45,"value":46},"text","MapLibre to Mapbox Migration Skill",{"type":39,"tag":48,"props":49,"children":50},"p",{},[51],{"type":45,"value":52},"Expert guidance for migrating from MapLibre GL JS to Mapbox GL JS. Covers the shared history, API compatibility, migration steps, and the advantages of Mapbox's platform.",{"type":39,"tag":54,"props":55,"children":57},"h2",{"id":56},"understanding-the-fork",[58],{"type":45,"value":59},"Understanding the Fork",{"type":39,"tag":61,"props":62,"children":64},"h3",{"id":63},"history",[65],{"type":45,"value":66},"History",{"type":39,"tag":48,"props":68,"children":69},{},[70,76,78,83],{"type":39,"tag":71,"props":72,"children":73},"strong",{},[74],{"type":45,"value":75},"MapLibre GL JS",{"type":45,"value":77}," is an open-source fork of ",{"type":39,"tag":71,"props":79,"children":80},{},[81],{"type":45,"value":82},"Mapbox GL JS v1.13.0",{"type":45,"value":84},", created in December 2020 when Mapbox changed their license starting with v2.0.",{"type":39,"tag":48,"props":86,"children":87},{},[88],{"type":39,"tag":71,"props":89,"children":90},{},[91],{"type":45,"value":92},"Timeline:",{"type":39,"tag":94,"props":95,"children":96},"ul",{},[97,108,118,127],{"type":39,"tag":98,"props":99,"children":100},"li",{},[101,106],{"type":39,"tag":71,"props":102,"children":103},{},[104],{"type":45,"value":105},"Pre-2020:",{"type":45,"value":107}," Mapbox GL JS was open source (BSD license)",{"type":39,"tag":98,"props":109,"children":110},{},[111,116],{"type":39,"tag":71,"props":112,"children":113},{},[114],{"type":45,"value":115},"Dec 2020:",{"type":45,"value":117}," Mapbox GL JS v2.0 introduced proprietary license",{"type":39,"tag":98,"props":119,"children":120},{},[121,125],{"type":39,"tag":71,"props":122,"children":123},{},[124],{"type":45,"value":115},{"type":45,"value":126}," Community forked v1.13 as MapLibre GL JS",{"type":39,"tag":98,"props":128,"children":129},{},[130,135],{"type":39,"tag":71,"props":131,"children":132},{},[133],{"type":45,"value":134},"Present:",{"type":45,"value":136}," Both libraries continue active development",{"type":39,"tag":48,"props":138,"children":139},{},[140,145],{"type":39,"tag":71,"props":141,"children":142},{},[143],{"type":45,"value":144},"Key Insight:",{"type":45,"value":146}," The APIs are ~95% identical because MapLibre started as a Mapbox fork. Most code works in both with minimal changes, making migration straightforward.",{"type":39,"tag":54,"props":148,"children":150},{"id":149},"why-migrate-to-mapbox",[151],{"type":45,"value":152},"Why Migrate to Mapbox?",{"type":39,"tag":48,"props":154,"children":155},{},[156],{"type":39,"tag":71,"props":157,"children":158},{},[159],{"type":45,"value":160},"Compelling reasons to choose Mapbox GL JS:",{"type":39,"tag":94,"props":162,"children":163},{},[164,174,184,194,204,214,224,234,244,254],{"type":39,"tag":98,"props":165,"children":166},{},[167,172],{"type":39,"tag":71,"props":168,"children":169},{},[170],{"type":45,"value":171},"Official Support & SLAs",{"type":45,"value":173},": Enterprise-grade support with guaranteed response times",{"type":39,"tag":98,"props":175,"children":176},{},[177,182],{"type":39,"tag":71,"props":178,"children":179},{},[180],{"type":45,"value":181},"Superior Tile Quality",{"type":45,"value":183},": Best-in-class vector tiles with global coverage and frequent updates",{"type":39,"tag":98,"props":185,"children":186},{},[187,192],{"type":39,"tag":71,"props":188,"children":189},{},[190],{"type":45,"value":191},"Better Satellite Imagery",{"type":45,"value":193},": High-resolution, up-to-date satellite and aerial imagery",{"type":39,"tag":98,"props":195,"children":196},{},[197,202],{"type":39,"tag":71,"props":198,"children":199},{},[200],{"type":45,"value":201},"Rich Ecosystem",{"type":45,"value":203},": Seamless integration with Mapbox Studio, APIs, and services",{"type":39,"tag":98,"props":205,"children":206},{},[207,212],{"type":39,"tag":71,"props":208,"children":209},{},[210],{"type":45,"value":211},"Advanced Features",{"type":45,"value":213},": Traffic-aware routing, turn-by-turn directions, premium datasets",{"type":39,"tag":98,"props":215,"children":216},{},[217,222],{"type":39,"tag":71,"props":218,"children":219},{},[220],{"type":45,"value":221},"Geocoding & Search",{"type":45,"value":223},": World-class address search and place lookup",{"type":39,"tag":98,"props":225,"children":226},{},[227,232],{"type":39,"tag":71,"props":228,"children":229},{},[230],{"type":45,"value":231},"Navigation SDK",{"type":45,"value":233},": Mobile navigation with real-time traffic",{"type":39,"tag":98,"props":235,"children":236},{},[237,242],{"type":39,"tag":71,"props":238,"children":239},{},[240],{"type":45,"value":241},"No Tile Infrastructure",{"type":45,"value":243},": No need to host or maintain your own tile servers",{"type":39,"tag":98,"props":245,"children":246},{},[247,252],{"type":39,"tag":71,"props":248,"children":249},{},[250],{"type":45,"value":251},"Regular Updates",{"type":45,"value":253},": Continuous improvements and new features",{"type":39,"tag":98,"props":255,"children":256},{},[257,262],{"type":39,"tag":71,"props":258,"children":259},{},[260],{"type":45,"value":261},"Professional Services",{"type":45,"value":263},": Access to Mapbox solutions team for complex projects",{"type":39,"tag":48,"props":265,"children":266},{},[267,272],{"type":39,"tag":71,"props":268,"children":269},{},[270],{"type":45,"value":271},"Mapbox offers a generous free tier:",{"type":45,"value":273}," 50,000 map loads\u002Fmonth, making it suitable for many applications without cost.",{"type":39,"tag":54,"props":275,"children":277},{"id":276},"quick-comparison",[278],{"type":45,"value":279},"Quick Comparison",{"type":39,"tag":281,"props":282,"children":283},"table",{},[284,307],{"type":39,"tag":285,"props":286,"children":287},"thead",{},[288],{"type":39,"tag":289,"props":290,"children":291},"tr",{},[292,298,303],{"type":39,"tag":293,"props":294,"children":295},"th",{},[296],{"type":45,"value":297},"Aspect",{"type":39,"tag":293,"props":299,"children":300},{},[301],{"type":45,"value":302},"Mapbox GL JS",{"type":39,"tag":293,"props":304,"children":305},{},[306],{"type":45,"value":75},{"type":39,"tag":308,"props":309,"children":310},"tbody",{},[311,333,354,375,396,417,438,459,480,501,522,543],{"type":39,"tag":289,"props":312,"children":313},{},[314,323,328],{"type":39,"tag":315,"props":316,"children":317},"td",{},[318],{"type":39,"tag":71,"props":319,"children":320},{},[321],{"type":45,"value":322},"License",{"type":39,"tag":315,"props":324,"children":325},{},[326],{"type":45,"value":327},"Proprietary (v2+)",{"type":39,"tag":315,"props":329,"children":330},{},[331],{"type":45,"value":332},"BSD 3-Clause (Open Source)",{"type":39,"tag":289,"props":334,"children":335},{},[336,344,349],{"type":39,"tag":315,"props":337,"children":338},{},[339],{"type":39,"tag":71,"props":340,"children":341},{},[342],{"type":45,"value":343},"Support",{"type":39,"tag":315,"props":345,"children":346},{},[347],{"type":45,"value":348},"Official commercial support",{"type":39,"tag":315,"props":350,"children":351},{},[352],{"type":45,"value":353},"Community support",{"type":39,"tag":289,"props":355,"children":356},{},[357,365,370],{"type":39,"tag":315,"props":358,"children":359},{},[360],{"type":39,"tag":71,"props":361,"children":362},{},[363],{"type":45,"value":364},"Tiles",{"type":39,"tag":315,"props":366,"children":367},{},[368],{"type":45,"value":369},"Premium Mapbox vector tiles",{"type":39,"tag":315,"props":371,"children":372},{},[373],{"type":45,"value":374},"OSM or custom tile sources",{"type":39,"tag":289,"props":376,"children":377},{},[378,386,391],{"type":39,"tag":315,"props":379,"children":380},{},[381],{"type":39,"tag":71,"props":382,"children":383},{},[384],{"type":45,"value":385},"Satellite",{"type":39,"tag":315,"props":387,"children":388},{},[389],{"type":45,"value":390},"High-quality global imagery",{"type":39,"tag":315,"props":392,"children":393},{},[394],{"type":45,"value":395},"Requires custom source",{"type":39,"tag":289,"props":397,"children":398},{},[399,407,412],{"type":39,"tag":315,"props":400,"children":401},{},[402],{"type":39,"tag":71,"props":403,"children":404},{},[405],{"type":45,"value":406},"Token",{"type":39,"tag":315,"props":408,"children":409},{},[410],{"type":45,"value":411},"Required (access token)",{"type":39,"tag":315,"props":413,"children":414},{},[415],{"type":45,"value":416},"Optional (depends on tile source)",{"type":39,"tag":289,"props":418,"children":419},{},[420,428,433],{"type":39,"tag":315,"props":421,"children":422},{},[423],{"type":39,"tag":71,"props":424,"children":425},{},[426],{"type":45,"value":427},"APIs",{"type":39,"tag":315,"props":429,"children":430},{},[431],{"type":45,"value":432},"Full Mapbox ecosystem",{"type":39,"tag":315,"props":434,"children":435},{},[436],{"type":45,"value":437},"Requires third-party services",{"type":39,"tag":289,"props":439,"children":440},{},[441,449,454],{"type":39,"tag":315,"props":442,"children":443},{},[444],{"type":39,"tag":71,"props":445,"children":446},{},[447],{"type":45,"value":448},"Studio",{"type":39,"tag":315,"props":450,"children":451},{},[452],{"type":45,"value":453},"Full integration",{"type":39,"tag":315,"props":455,"children":456},{},[457],{"type":45,"value":458},"No native integration",{"type":39,"tag":289,"props":460,"children":461},{},[462,470,475],{"type":39,"tag":315,"props":463,"children":464},{},[465],{"type":39,"tag":71,"props":466,"children":467},{},[468],{"type":45,"value":469},"3D Terrain",{"type":39,"tag":315,"props":471,"children":472},{},[473],{"type":45,"value":474},"Built-in with premium data",{"type":39,"tag":315,"props":476,"children":477},{},[478],{"type":45,"value":479},"Available (requires data source)",{"type":39,"tag":289,"props":481,"children":482},{},[483,491,496],{"type":39,"tag":315,"props":484,"children":485},{},[486],{"type":39,"tag":71,"props":487,"children":488},{},[489],{"type":45,"value":490},"Globe View",{"type":39,"tag":315,"props":492,"children":493},{},[494],{"type":45,"value":495},"v2.9+",{"type":39,"tag":315,"props":497,"children":498},{},[499],{"type":45,"value":500},"v3.0+",{"type":39,"tag":289,"props":502,"children":503},{},[504,512,517],{"type":39,"tag":315,"props":505,"children":506},{},[507],{"type":39,"tag":71,"props":508,"children":509},{},[510],{"type":45,"value":511},"API Compatibility",{"type":39,"tag":315,"props":513,"children":514},{},[515],{"type":45,"value":516},"~95% compatible with MapLibre",{"type":39,"tag":315,"props":518,"children":519},{},[520],{"type":45,"value":521},"~95% compatible with Mapbox",{"type":39,"tag":289,"props":523,"children":524},{},[525,533,538],{"type":39,"tag":315,"props":526,"children":527},{},[528],{"type":39,"tag":71,"props":529,"children":530},{},[531],{"type":45,"value":532},"Bundle Size",{"type":39,"tag":315,"props":534,"children":535},{},[536],{"type":45,"value":537},"~500KB",{"type":39,"tag":315,"props":539,"children":540},{},[541],{"type":45,"value":542},"~450KB",{"type":39,"tag":289,"props":544,"children":545},{},[546,554,559],{"type":39,"tag":315,"props":547,"children":548},{},[549],{"type":39,"tag":71,"props":550,"children":551},{},[552],{"type":45,"value":553},"Setup Complexity",{"type":39,"tag":315,"props":555,"children":556},{},[557],{"type":45,"value":558},"Easy (just add token)",{"type":39,"tag":315,"props":560,"children":561},{},[562],{"type":45,"value":563},"Requires tile source setup",{"type":39,"tag":54,"props":565,"children":567},{"id":566},"step-by-step-migration",[568],{"type":45,"value":569},"Step-by-Step Migration",{"type":39,"tag":61,"props":571,"children":573},{"id":572},"_1-create-mapbox-account",[574],{"type":45,"value":575},"1. Create Mapbox Account",{"type":39,"tag":577,"props":578,"children":579},"ol",{},[580,594,599,604],{"type":39,"tag":98,"props":581,"children":582},{},[583,585],{"type":45,"value":584},"Sign up at ",{"type":39,"tag":586,"props":587,"children":591},"a",{"href":588,"rel":589},"https:\u002F\u002Fmapbox.com",[590],"nofollow",[592],{"type":45,"value":593},"mapbox.com",{"type":39,"tag":98,"props":595,"children":596},{},[597],{"type":45,"value":598},"Get your access token from the account dashboard",{"type":39,"tag":98,"props":600,"children":601},{},[602],{"type":45,"value":603},"Review pricing: Free tier includes 50,000 map loads\u002Fmonth",{"type":39,"tag":98,"props":605,"children":606},{},[607,609,616],{"type":45,"value":608},"Note your token (starts with ",{"type":39,"tag":610,"props":611,"children":613},"code",{"className":612},[],[614],{"type":45,"value":615},"pk.",{"type":45,"value":617}," for public tokens)",{"type":39,"tag":61,"props":619,"children":621},{"id":620},"_2-update-package",[622],{"type":45,"value":623},"2. Update Package",{"type":39,"tag":625,"props":626,"children":631},"pre",{"className":627,"code":628,"language":629,"meta":630,"style":630},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Remove MapLibre\nnpm uninstall maplibre-gl\n\n# Install Mapbox\nnpm install mapbox-gl\n","bash","",[632],{"type":39,"tag":610,"props":633,"children":634},{"__ignoreMap":630},[635,647,668,678,687],{"type":39,"tag":636,"props":637,"children":640},"span",{"class":638,"line":639},"line",1,[641],{"type":39,"tag":636,"props":642,"children":644},{"style":643},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[645],{"type":45,"value":646},"# Remove MapLibre\n",{"type":39,"tag":636,"props":648,"children":650},{"class":638,"line":649},2,[651,657,663],{"type":39,"tag":636,"props":652,"children":654},{"style":653},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[655],{"type":45,"value":656},"npm",{"type":39,"tag":636,"props":658,"children":660},{"style":659},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[661],{"type":45,"value":662}," uninstall",{"type":39,"tag":636,"props":664,"children":665},{"style":659},[666],{"type":45,"value":667}," maplibre-gl\n",{"type":39,"tag":636,"props":669,"children":671},{"class":638,"line":670},3,[672],{"type":39,"tag":636,"props":673,"children":675},{"emptyLinePlaceholder":674},true,[676],{"type":45,"value":677},"\n",{"type":39,"tag":636,"props":679,"children":681},{"class":638,"line":680},4,[682],{"type":39,"tag":636,"props":683,"children":684},{"style":643},[685],{"type":45,"value":686},"# Install Mapbox\n",{"type":39,"tag":636,"props":688,"children":690},{"class":638,"line":689},5,[691,695,700],{"type":39,"tag":636,"props":692,"children":693},{"style":653},[694],{"type":45,"value":656},{"type":39,"tag":636,"props":696,"children":697},{"style":659},[698],{"type":45,"value":699}," install",{"type":39,"tag":636,"props":701,"children":702},{"style":659},[703],{"type":45,"value":704}," mapbox-gl\n",{"type":39,"tag":61,"props":706,"children":708},{"id":707},"_3-update-imports",[709],{"type":45,"value":710},"3. Update Imports",{"type":39,"tag":625,"props":712,"children":716},{"className":713,"code":714,"language":715,"meta":630,"style":630},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Before (MapLibre)\nimport maplibregl from 'maplibre-gl';\nimport 'maplibre-gl\u002Fdist\u002Fmaplibre-gl.css';\n\n\u002F\u002F After (Mapbox)\nimport mapboxgl from 'mapbox-gl';\nimport 'mapbox-gl\u002Fdist\u002Fmapbox-gl.css';\n","javascript",[717],{"type":39,"tag":610,"props":718,"children":719},{"__ignoreMap":630},[720,728,769,793,800,808,842],{"type":39,"tag":636,"props":721,"children":722},{"class":638,"line":639},[723],{"type":39,"tag":636,"props":724,"children":725},{"style":643},[726],{"type":45,"value":727},"\u002F\u002F Before (MapLibre)\n",{"type":39,"tag":636,"props":729,"children":730},{"class":638,"line":649},[731,737,743,748,754,759,764],{"type":39,"tag":636,"props":732,"children":734},{"style":733},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[735],{"type":45,"value":736},"import",{"type":39,"tag":636,"props":738,"children":740},{"style":739},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[741],{"type":45,"value":742}," maplibregl ",{"type":39,"tag":636,"props":744,"children":745},{"style":733},[746],{"type":45,"value":747},"from",{"type":39,"tag":636,"props":749,"children":751},{"style":750},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[752],{"type":45,"value":753}," '",{"type":39,"tag":636,"props":755,"children":756},{"style":659},[757],{"type":45,"value":758},"maplibre-gl",{"type":39,"tag":636,"props":760,"children":761},{"style":750},[762],{"type":45,"value":763},"'",{"type":39,"tag":636,"props":765,"children":766},{"style":750},[767],{"type":45,"value":768},";\n",{"type":39,"tag":636,"props":770,"children":771},{"class":638,"line":670},[772,776,780,785,789],{"type":39,"tag":636,"props":773,"children":774},{"style":733},[775],{"type":45,"value":736},{"type":39,"tag":636,"props":777,"children":778},{"style":750},[779],{"type":45,"value":753},{"type":39,"tag":636,"props":781,"children":782},{"style":659},[783],{"type":45,"value":784},"maplibre-gl\u002Fdist\u002Fmaplibre-gl.css",{"type":39,"tag":636,"props":786,"children":787},{"style":750},[788],{"type":45,"value":763},{"type":39,"tag":636,"props":790,"children":791},{"style":750},[792],{"type":45,"value":768},{"type":39,"tag":636,"props":794,"children":795},{"class":638,"line":680},[796],{"type":39,"tag":636,"props":797,"children":798},{"emptyLinePlaceholder":674},[799],{"type":45,"value":677},{"type":39,"tag":636,"props":801,"children":802},{"class":638,"line":689},[803],{"type":39,"tag":636,"props":804,"children":805},{"style":643},[806],{"type":45,"value":807},"\u002F\u002F After (Mapbox)\n",{"type":39,"tag":636,"props":809,"children":811},{"class":638,"line":810},6,[812,816,821,825,829,834,838],{"type":39,"tag":636,"props":813,"children":814},{"style":733},[815],{"type":45,"value":736},{"type":39,"tag":636,"props":817,"children":818},{"style":739},[819],{"type":45,"value":820}," mapboxgl ",{"type":39,"tag":636,"props":822,"children":823},{"style":733},[824],{"type":45,"value":747},{"type":39,"tag":636,"props":826,"children":827},{"style":750},[828],{"type":45,"value":753},{"type":39,"tag":636,"props":830,"children":831},{"style":659},[832],{"type":45,"value":833},"mapbox-gl",{"type":39,"tag":636,"props":835,"children":836},{"style":750},[837],{"type":45,"value":763},{"type":39,"tag":636,"props":839,"children":840},{"style":750},[841],{"type":45,"value":768},{"type":39,"tag":636,"props":843,"children":845},{"class":638,"line":844},7,[846,850,854,859,863],{"type":39,"tag":636,"props":847,"children":848},{"style":733},[849],{"type":45,"value":736},{"type":39,"tag":636,"props":851,"children":852},{"style":750},[853],{"type":45,"value":753},{"type":39,"tag":636,"props":855,"children":856},{"style":659},[857],{"type":45,"value":858},"mapbox-gl\u002Fdist\u002Fmapbox-gl.css",{"type":39,"tag":636,"props":860,"children":861},{"style":750},[862],{"type":45,"value":763},{"type":39,"tag":636,"props":864,"children":865},{"style":750},[866],{"type":45,"value":768},{"type":39,"tag":48,"props":868,"children":869},{},[870],{"type":45,"value":871},"Or with CDN:",{"type":39,"tag":625,"props":873,"children":877},{"className":874,"code":875,"language":876,"meta":630,"style":630},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Before (MapLibre) -->\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fmaplibre-gl@3.0.0\u002Fdist\u002Fmaplibre-gl.js\">\u003C\u002Fscript>\n\u003Clink href=\"https:\u002F\u002Funpkg.com\u002Fmaplibre-gl@3.0.0\u002Fdist\u002Fmaplibre-gl.css\" rel=\"stylesheet\" \u002F>\n\n\u003C!-- After (Mapbox) -->\n\u003Cscript src=\"https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.0.0\u002Fmapbox-gl.js\">\u003C\u002Fscript>\n\u003Clink href=\"https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.0.0\u002Fmapbox-gl.css\" rel=\"stylesheet\" \u002F>\n","html",[878],{"type":39,"tag":610,"props":879,"children":880},{"__ignoreMap":630},[881,889,942,1003,1010,1018,1062],{"type":39,"tag":636,"props":882,"children":883},{"class":638,"line":639},[884],{"type":39,"tag":636,"props":885,"children":886},{"style":643},[887],{"type":45,"value":888},"\u003C!-- Before (MapLibre) -->\n",{"type":39,"tag":636,"props":890,"children":891},{"class":638,"line":649},[892,897,903,909,914,919,924,928,933,937],{"type":39,"tag":636,"props":893,"children":894},{"style":750},[895],{"type":45,"value":896},"\u003C",{"type":39,"tag":636,"props":898,"children":900},{"style":899},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[901],{"type":45,"value":902},"script",{"type":39,"tag":636,"props":904,"children":906},{"style":905},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[907],{"type":45,"value":908}," src",{"type":39,"tag":636,"props":910,"children":911},{"style":750},[912],{"type":45,"value":913},"=",{"type":39,"tag":636,"props":915,"children":916},{"style":750},[917],{"type":45,"value":918},"\"",{"type":39,"tag":636,"props":920,"children":921},{"style":659},[922],{"type":45,"value":923},"https:\u002F\u002Funpkg.com\u002Fmaplibre-gl@3.0.0\u002Fdist\u002Fmaplibre-gl.js",{"type":39,"tag":636,"props":925,"children":926},{"style":750},[927],{"type":45,"value":918},{"type":39,"tag":636,"props":929,"children":930},{"style":750},[931],{"type":45,"value":932},">\u003C\u002F",{"type":39,"tag":636,"props":934,"children":935},{"style":899},[936],{"type":45,"value":902},{"type":39,"tag":636,"props":938,"children":939},{"style":750},[940],{"type":45,"value":941},">\n",{"type":39,"tag":636,"props":943,"children":944},{"class":638,"line":670},[945,949,954,959,963,967,972,976,981,985,989,994,998],{"type":39,"tag":636,"props":946,"children":947},{"style":750},[948],{"type":45,"value":896},{"type":39,"tag":636,"props":950,"children":951},{"style":899},[952],{"type":45,"value":953},"link",{"type":39,"tag":636,"props":955,"children":956},{"style":905},[957],{"type":45,"value":958}," href",{"type":39,"tag":636,"props":960,"children":961},{"style":750},[962],{"type":45,"value":913},{"type":39,"tag":636,"props":964,"children":965},{"style":750},[966],{"type":45,"value":918},{"type":39,"tag":636,"props":968,"children":969},{"style":659},[970],{"type":45,"value":971},"https:\u002F\u002Funpkg.com\u002Fmaplibre-gl@3.0.0\u002Fdist\u002Fmaplibre-gl.css",{"type":39,"tag":636,"props":973,"children":974},{"style":750},[975],{"type":45,"value":918},{"type":39,"tag":636,"props":977,"children":978},{"style":905},[979],{"type":45,"value":980}," rel",{"type":39,"tag":636,"props":982,"children":983},{"style":750},[984],{"type":45,"value":913},{"type":39,"tag":636,"props":986,"children":987},{"style":750},[988],{"type":45,"value":918},{"type":39,"tag":636,"props":990,"children":991},{"style":659},[992],{"type":45,"value":993},"stylesheet",{"type":39,"tag":636,"props":995,"children":996},{"style":750},[997],{"type":45,"value":918},{"type":39,"tag":636,"props":999,"children":1000},{"style":750},[1001],{"type":45,"value":1002}," \u002F>\n",{"type":39,"tag":636,"props":1004,"children":1005},{"class":638,"line":680},[1006],{"type":39,"tag":636,"props":1007,"children":1008},{"emptyLinePlaceholder":674},[1009],{"type":45,"value":677},{"type":39,"tag":636,"props":1011,"children":1012},{"class":638,"line":689},[1013],{"type":39,"tag":636,"props":1014,"children":1015},{"style":643},[1016],{"type":45,"value":1017},"\u003C!-- After (Mapbox) -->\n",{"type":39,"tag":636,"props":1019,"children":1020},{"class":638,"line":810},[1021,1025,1029,1033,1037,1041,1046,1050,1054,1058],{"type":39,"tag":636,"props":1022,"children":1023},{"style":750},[1024],{"type":45,"value":896},{"type":39,"tag":636,"props":1026,"children":1027},{"style":899},[1028],{"type":45,"value":902},{"type":39,"tag":636,"props":1030,"children":1031},{"style":905},[1032],{"type":45,"value":908},{"type":39,"tag":636,"props":1034,"children":1035},{"style":750},[1036],{"type":45,"value":913},{"type":39,"tag":636,"props":1038,"children":1039},{"style":750},[1040],{"type":45,"value":918},{"type":39,"tag":636,"props":1042,"children":1043},{"style":659},[1044],{"type":45,"value":1045},"https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.0.0\u002Fmapbox-gl.js",{"type":39,"tag":636,"props":1047,"children":1048},{"style":750},[1049],{"type":45,"value":918},{"type":39,"tag":636,"props":1051,"children":1052},{"style":750},[1053],{"type":45,"value":932},{"type":39,"tag":636,"props":1055,"children":1056},{"style":899},[1057],{"type":45,"value":902},{"type":39,"tag":636,"props":1059,"children":1060},{"style":750},[1061],{"type":45,"value":941},{"type":39,"tag":636,"props":1063,"children":1064},{"class":638,"line":844},[1065,1069,1073,1077,1081,1085,1090,1094,1098,1102,1106,1110,1114],{"type":39,"tag":636,"props":1066,"children":1067},{"style":750},[1068],{"type":45,"value":896},{"type":39,"tag":636,"props":1070,"children":1071},{"style":899},[1072],{"type":45,"value":953},{"type":39,"tag":636,"props":1074,"children":1075},{"style":905},[1076],{"type":45,"value":958},{"type":39,"tag":636,"props":1078,"children":1079},{"style":750},[1080],{"type":45,"value":913},{"type":39,"tag":636,"props":1082,"children":1083},{"style":750},[1084],{"type":45,"value":918},{"type":39,"tag":636,"props":1086,"children":1087},{"style":659},[1088],{"type":45,"value":1089},"https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.0.0\u002Fmapbox-gl.css",{"type":39,"tag":636,"props":1091,"children":1092},{"style":750},[1093],{"type":45,"value":918},{"type":39,"tag":636,"props":1095,"children":1096},{"style":905},[1097],{"type":45,"value":980},{"type":39,"tag":636,"props":1099,"children":1100},{"style":750},[1101],{"type":45,"value":913},{"type":39,"tag":636,"props":1103,"children":1104},{"style":750},[1105],{"type":45,"value":918},{"type":39,"tag":636,"props":1107,"children":1108},{"style":659},[1109],{"type":45,"value":993},{"type":39,"tag":636,"props":1111,"children":1112},{"style":750},[1113],{"type":45,"value":918},{"type":39,"tag":636,"props":1115,"children":1116},{"style":750},[1117],{"type":45,"value":1002},{"type":39,"tag":61,"props":1119,"children":1121},{"id":1120},"_4-add-access-token",[1122],{"type":45,"value":1123},"4. Add Access Token",{"type":39,"tag":625,"props":1125,"children":1127},{"className":713,"code":1126,"language":715,"meta":630,"style":630},"\u002F\u002F Add this before map initialization\nmapboxgl.accessToken = 'pk.your_mapbox_access_token';\n",[1128],{"type":39,"tag":610,"props":1129,"children":1130},{"__ignoreMap":630},[1131,1139],{"type":39,"tag":636,"props":1132,"children":1133},{"class":638,"line":639},[1134],{"type":39,"tag":636,"props":1135,"children":1136},{"style":643},[1137],{"type":45,"value":1138},"\u002F\u002F Add this before map initialization\n",{"type":39,"tag":636,"props":1140,"children":1141},{"class":638,"line":649},[1142,1147,1152,1157,1161,1165,1170,1174],{"type":39,"tag":636,"props":1143,"children":1144},{"style":739},[1145],{"type":45,"value":1146},"mapboxgl",{"type":39,"tag":636,"props":1148,"children":1149},{"style":750},[1150],{"type":45,"value":1151},".",{"type":39,"tag":636,"props":1153,"children":1154},{"style":739},[1155],{"type":45,"value":1156},"accessToken ",{"type":39,"tag":636,"props":1158,"children":1159},{"style":750},[1160],{"type":45,"value":913},{"type":39,"tag":636,"props":1162,"children":1163},{"style":750},[1164],{"type":45,"value":753},{"type":39,"tag":636,"props":1166,"children":1167},{"style":659},[1168],{"type":45,"value":1169},"pk.your_mapbox_access_token",{"type":39,"tag":636,"props":1171,"children":1172},{"style":750},[1173],{"type":45,"value":763},{"type":39,"tag":636,"props":1175,"children":1176},{"style":750},[1177],{"type":45,"value":768},{"type":39,"tag":48,"props":1179,"children":1180},{},[1181],{"type":39,"tag":71,"props":1182,"children":1183},{},[1184],{"type":45,"value":1185},"Token best practices:",{"type":39,"tag":94,"props":1187,"children":1188},{},[1189,1208,1213,1226,1247],{"type":39,"tag":98,"props":1190,"children":1191},{},[1192,1194,1200,1202],{"type":45,"value":1193},"Use environment variables: ",{"type":39,"tag":610,"props":1195,"children":1197},{"className":1196},[],[1198],{"type":45,"value":1199},"process.env.VITE_MAPBOX_TOKEN",{"type":45,"value":1201}," or ",{"type":39,"tag":610,"props":1203,"children":1205},{"className":1204},[],[1206],{"type":45,"value":1207},"process.env.NEXT_PUBLIC_MAPBOX_TOKEN",{"type":39,"tag":98,"props":1209,"children":1210},{},[1211],{"type":45,"value":1212},"Add URL restrictions in Mapbox dashboard for security",{"type":39,"tag":98,"props":1214,"children":1215},{},[1216,1218,1224],{"type":45,"value":1217},"Use public tokens (",{"type":39,"tag":610,"props":1219,"children":1221},{"className":1220},[],[1222],{"type":45,"value":1223},"pk.*",{"type":45,"value":1225},") for client-side code",{"type":39,"tag":98,"props":1227,"children":1228},{},[1229,1231,1237,1239,1245],{"type":45,"value":1230},"Never commit tokens to git (add to ",{"type":39,"tag":610,"props":1232,"children":1234},{"className":1233},[],[1235],{"type":45,"value":1236},".env",{"type":45,"value":1238}," and ",{"type":39,"tag":610,"props":1240,"children":1242},{"className":1241},[],[1243],{"type":45,"value":1244},".gitignore",{"type":45,"value":1246},")",{"type":39,"tag":98,"props":1248,"children":1249},{},[1250],{"type":45,"value":1251},"Rotate tokens if compromised",{"type":39,"tag":48,"props":1253,"children":1254},{},[1255,1257,1263],{"type":45,"value":1256},"See ",{"type":39,"tag":610,"props":1258,"children":1260},{"className":1259},[],[1261],{"type":45,"value":1262},"mapbox-token-security",{"type":45,"value":1264}," skill for comprehensive token security guidance.",{"type":39,"tag":61,"props":1266,"children":1268},{"id":1267},"_5-update-map-initialization",[1269],{"type":45,"value":1270},"5. Update Map Initialization",{"type":39,"tag":625,"props":1272,"children":1274},{"className":713,"code":1273,"language":715,"meta":630,"style":630},"\u002F\u002F Before (MapLibre)\nconst map = new maplibregl.Map({\n  container: 'map',\n  style: 'https:\u002F\u002Fdemotiles.maplibre.org\u002Fstyle.json', \u002F\u002F or your custom style\n  center: [-122.4194, 37.7749],\n  zoom: 12\n});\n\n\u002F\u002F After (Mapbox)\nmapboxgl.accessToken = 'pk.your_mapbox_access_token';\n\nconst map = new mapboxgl.Map({\n  container: 'map',\n  style: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstandard', \u002F\u002F Mapbox style\n  center: [-122.4194, 37.7749],\n  zoom: 12\n});\n",[1275],{"type":39,"tag":610,"props":1276,"children":1277},{"__ignoreMap":630},[1278,1285,1332,1363,1398,1444,1461,1477,1485,1493,1528,1536,1577,1605,1639,1679,1695],{"type":39,"tag":636,"props":1279,"children":1280},{"class":638,"line":639},[1281],{"type":39,"tag":636,"props":1282,"children":1283},{"style":643},[1284],{"type":45,"value":727},{"type":39,"tag":636,"props":1286,"children":1287},{"class":638,"line":649},[1288,1293,1298,1302,1307,1312,1316,1322,1327],{"type":39,"tag":636,"props":1289,"children":1290},{"style":905},[1291],{"type":45,"value":1292},"const",{"type":39,"tag":636,"props":1294,"children":1295},{"style":739},[1296],{"type":45,"value":1297}," map ",{"type":39,"tag":636,"props":1299,"children":1300},{"style":750},[1301],{"type":45,"value":913},{"type":39,"tag":636,"props":1303,"children":1304},{"style":750},[1305],{"type":45,"value":1306}," new",{"type":39,"tag":636,"props":1308,"children":1309},{"style":739},[1310],{"type":45,"value":1311}," maplibregl",{"type":39,"tag":636,"props":1313,"children":1314},{"style":750},[1315],{"type":45,"value":1151},{"type":39,"tag":636,"props":1317,"children":1319},{"style":1318},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1320],{"type":45,"value":1321},"Map",{"type":39,"tag":636,"props":1323,"children":1324},{"style":739},[1325],{"type":45,"value":1326},"(",{"type":39,"tag":636,"props":1328,"children":1329},{"style":750},[1330],{"type":45,"value":1331},"{\n",{"type":39,"tag":636,"props":1333,"children":1334},{"class":638,"line":670},[1335,1340,1345,1349,1354,1358],{"type":39,"tag":636,"props":1336,"children":1337},{"style":899},[1338],{"type":45,"value":1339},"  container",{"type":39,"tag":636,"props":1341,"children":1342},{"style":750},[1343],{"type":45,"value":1344},":",{"type":39,"tag":636,"props":1346,"children":1347},{"style":750},[1348],{"type":45,"value":753},{"type":39,"tag":636,"props":1350,"children":1351},{"style":659},[1352],{"type":45,"value":1353},"map",{"type":39,"tag":636,"props":1355,"children":1356},{"style":750},[1357],{"type":45,"value":763},{"type":39,"tag":636,"props":1359,"children":1360},{"style":750},[1361],{"type":45,"value":1362},",\n",{"type":39,"tag":636,"props":1364,"children":1365},{"class":638,"line":680},[1366,1371,1375,1379,1384,1388,1393],{"type":39,"tag":636,"props":1367,"children":1368},{"style":899},[1369],{"type":45,"value":1370},"  style",{"type":39,"tag":636,"props":1372,"children":1373},{"style":750},[1374],{"type":45,"value":1344},{"type":39,"tag":636,"props":1376,"children":1377},{"style":750},[1378],{"type":45,"value":753},{"type":39,"tag":636,"props":1380,"children":1381},{"style":659},[1382],{"type":45,"value":1383},"https:\u002F\u002Fdemotiles.maplibre.org\u002Fstyle.json",{"type":39,"tag":636,"props":1385,"children":1386},{"style":750},[1387],{"type":45,"value":763},{"type":39,"tag":636,"props":1389,"children":1390},{"style":750},[1391],{"type":45,"value":1392},",",{"type":39,"tag":636,"props":1394,"children":1395},{"style":643},[1396],{"type":45,"value":1397}," \u002F\u002F or your custom style\n",{"type":39,"tag":636,"props":1399,"children":1400},{"class":638,"line":689},[1401,1406,1410,1415,1420,1426,1430,1435,1440],{"type":39,"tag":636,"props":1402,"children":1403},{"style":899},[1404],{"type":45,"value":1405},"  center",{"type":39,"tag":636,"props":1407,"children":1408},{"style":750},[1409],{"type":45,"value":1344},{"type":39,"tag":636,"props":1411,"children":1412},{"style":739},[1413],{"type":45,"value":1414}," [",{"type":39,"tag":636,"props":1416,"children":1417},{"style":750},[1418],{"type":45,"value":1419},"-",{"type":39,"tag":636,"props":1421,"children":1423},{"style":1422},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1424],{"type":45,"value":1425},"122.4194",{"type":39,"tag":636,"props":1427,"children":1428},{"style":750},[1429],{"type":45,"value":1392},{"type":39,"tag":636,"props":1431,"children":1432},{"style":1422},[1433],{"type":45,"value":1434}," 37.7749",{"type":39,"tag":636,"props":1436,"children":1437},{"style":739},[1438],{"type":45,"value":1439},"]",{"type":39,"tag":636,"props":1441,"children":1442},{"style":750},[1443],{"type":45,"value":1362},{"type":39,"tag":636,"props":1445,"children":1446},{"class":638,"line":810},[1447,1452,1456],{"type":39,"tag":636,"props":1448,"children":1449},{"style":899},[1450],{"type":45,"value":1451},"  zoom",{"type":39,"tag":636,"props":1453,"children":1454},{"style":750},[1455],{"type":45,"value":1344},{"type":39,"tag":636,"props":1457,"children":1458},{"style":1422},[1459],{"type":45,"value":1460}," 12\n",{"type":39,"tag":636,"props":1462,"children":1463},{"class":638,"line":844},[1464,1469,1473],{"type":39,"tag":636,"props":1465,"children":1466},{"style":750},[1467],{"type":45,"value":1468},"}",{"type":39,"tag":636,"props":1470,"children":1471},{"style":739},[1472],{"type":45,"value":1246},{"type":39,"tag":636,"props":1474,"children":1475},{"style":750},[1476],{"type":45,"value":768},{"type":39,"tag":636,"props":1478,"children":1480},{"class":638,"line":1479},8,[1481],{"type":39,"tag":636,"props":1482,"children":1483},{"emptyLinePlaceholder":674},[1484],{"type":45,"value":677},{"type":39,"tag":636,"props":1486,"children":1488},{"class":638,"line":1487},9,[1489],{"type":39,"tag":636,"props":1490,"children":1491},{"style":643},[1492],{"type":45,"value":807},{"type":39,"tag":636,"props":1494,"children":1495},{"class":638,"line":27},[1496,1500,1504,1508,1512,1516,1520,1524],{"type":39,"tag":636,"props":1497,"children":1498},{"style":739},[1499],{"type":45,"value":1146},{"type":39,"tag":636,"props":1501,"children":1502},{"style":750},[1503],{"type":45,"value":1151},{"type":39,"tag":636,"props":1505,"children":1506},{"style":739},[1507],{"type":45,"value":1156},{"type":39,"tag":636,"props":1509,"children":1510},{"style":750},[1511],{"type":45,"value":913},{"type":39,"tag":636,"props":1513,"children":1514},{"style":750},[1515],{"type":45,"value":753},{"type":39,"tag":636,"props":1517,"children":1518},{"style":659},[1519],{"type":45,"value":1169},{"type":39,"tag":636,"props":1521,"children":1522},{"style":750},[1523],{"type":45,"value":763},{"type":39,"tag":636,"props":1525,"children":1526},{"style":750},[1527],{"type":45,"value":768},{"type":39,"tag":636,"props":1529,"children":1531},{"class":638,"line":1530},11,[1532],{"type":39,"tag":636,"props":1533,"children":1534},{"emptyLinePlaceholder":674},[1535],{"type":45,"value":677},{"type":39,"tag":636,"props":1537,"children":1539},{"class":638,"line":1538},12,[1540,1544,1548,1552,1556,1561,1565,1569,1573],{"type":39,"tag":636,"props":1541,"children":1542},{"style":905},[1543],{"type":45,"value":1292},{"type":39,"tag":636,"props":1545,"children":1546},{"style":739},[1547],{"type":45,"value":1297},{"type":39,"tag":636,"props":1549,"children":1550},{"style":750},[1551],{"type":45,"value":913},{"type":39,"tag":636,"props":1553,"children":1554},{"style":750},[1555],{"type":45,"value":1306},{"type":39,"tag":636,"props":1557,"children":1558},{"style":739},[1559],{"type":45,"value":1560}," mapboxgl",{"type":39,"tag":636,"props":1562,"children":1563},{"style":750},[1564],{"type":45,"value":1151},{"type":39,"tag":636,"props":1566,"children":1567},{"style":1318},[1568],{"type":45,"value":1321},{"type":39,"tag":636,"props":1570,"children":1571},{"style":739},[1572],{"type":45,"value":1326},{"type":39,"tag":636,"props":1574,"children":1575},{"style":750},[1576],{"type":45,"value":1331},{"type":39,"tag":636,"props":1578,"children":1580},{"class":638,"line":1579},13,[1581,1585,1589,1593,1597,1601],{"type":39,"tag":636,"props":1582,"children":1583},{"style":899},[1584],{"type":45,"value":1339},{"type":39,"tag":636,"props":1586,"children":1587},{"style":750},[1588],{"type":45,"value":1344},{"type":39,"tag":636,"props":1590,"children":1591},{"style":750},[1592],{"type":45,"value":753},{"type":39,"tag":636,"props":1594,"children":1595},{"style":659},[1596],{"type":45,"value":1353},{"type":39,"tag":636,"props":1598,"children":1599},{"style":750},[1600],{"type":45,"value":763},{"type":39,"tag":636,"props":1602,"children":1603},{"style":750},[1604],{"type":45,"value":1362},{"type":39,"tag":636,"props":1606,"children":1608},{"class":638,"line":1607},14,[1609,1613,1617,1621,1626,1630,1634],{"type":39,"tag":636,"props":1610,"children":1611},{"style":899},[1612],{"type":45,"value":1370},{"type":39,"tag":636,"props":1614,"children":1615},{"style":750},[1616],{"type":45,"value":1344},{"type":39,"tag":636,"props":1618,"children":1619},{"style":750},[1620],{"type":45,"value":753},{"type":39,"tag":636,"props":1622,"children":1623},{"style":659},[1624],{"type":45,"value":1625},"mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstandard",{"type":39,"tag":636,"props":1627,"children":1628},{"style":750},[1629],{"type":45,"value":763},{"type":39,"tag":636,"props":1631,"children":1632},{"style":750},[1633],{"type":45,"value":1392},{"type":39,"tag":636,"props":1635,"children":1636},{"style":643},[1637],{"type":45,"value":1638}," \u002F\u002F Mapbox style\n",{"type":39,"tag":636,"props":1640,"children":1642},{"class":638,"line":1641},15,[1643,1647,1651,1655,1659,1663,1667,1671,1675],{"type":39,"tag":636,"props":1644,"children":1645},{"style":899},[1646],{"type":45,"value":1405},{"type":39,"tag":636,"props":1648,"children":1649},{"style":750},[1650],{"type":45,"value":1344},{"type":39,"tag":636,"props":1652,"children":1653},{"style":739},[1654],{"type":45,"value":1414},{"type":39,"tag":636,"props":1656,"children":1657},{"style":750},[1658],{"type":45,"value":1419},{"type":39,"tag":636,"props":1660,"children":1661},{"style":1422},[1662],{"type":45,"value":1425},{"type":39,"tag":636,"props":1664,"children":1665},{"style":750},[1666],{"type":45,"value":1392},{"type":39,"tag":636,"props":1668,"children":1669},{"style":1422},[1670],{"type":45,"value":1434},{"type":39,"tag":636,"props":1672,"children":1673},{"style":739},[1674],{"type":45,"value":1439},{"type":39,"tag":636,"props":1676,"children":1677},{"style":750},[1678],{"type":45,"value":1362},{"type":39,"tag":636,"props":1680,"children":1682},{"class":638,"line":1681},16,[1683,1687,1691],{"type":39,"tag":636,"props":1684,"children":1685},{"style":899},[1686],{"type":45,"value":1451},{"type":39,"tag":636,"props":1688,"children":1689},{"style":750},[1690],{"type":45,"value":1344},{"type":39,"tag":636,"props":1692,"children":1693},{"style":1422},[1694],{"type":45,"value":1460},{"type":39,"tag":636,"props":1696,"children":1698},{"class":638,"line":1697},17,[1699,1703,1707],{"type":39,"tag":636,"props":1700,"children":1701},{"style":750},[1702],{"type":45,"value":1468},{"type":39,"tag":636,"props":1704,"children":1705},{"style":739},[1706],{"type":45,"value":1246},{"type":39,"tag":636,"props":1708,"children":1709},{"style":750},[1710],{"type":45,"value":768},{"type":39,"tag":61,"props":1712,"children":1714},{"id":1713},"_6-update-style-url",[1715],{"type":45,"value":1716},"6. Update Style URL",{"type":39,"tag":48,"props":1718,"children":1719},{},[1720],{"type":45,"value":1721},"Mapbox provides professionally designed, maintained styles:",{"type":39,"tag":625,"props":1723,"children":1725},{"className":713,"code":1724,"language":715,"meta":630,"style":630},"\u002F\u002F Mapbox built-in styles\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstandard'; \u002F\u002F Mapbox Standard (default)\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstandard-satellite'; \u002F\u002F Mapbox Standard Satellite\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstreets-v12'; \u002F\u002F Streets v12\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fsatellite-v9'; \u002F\u002F Satellite imagery\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fsatellite-streets-v12'; \u002F\u002F Hybrid\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Foutdoors-v12'; \u002F\u002F Outdoor\u002Frecreation\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Flight-v11'; \u002F\u002F Light theme\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fdark-v11'; \u002F\u002F Dark theme\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fnavigation-day-v1'; \u002F\u002F Navigation (day)\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fnavigation-night-v1'; \u002F\u002F Navigation (night)\n",[1726],{"type":39,"tag":610,"props":1727,"children":1728},{"__ignoreMap":630},[1729,1737,1771,1804,1837,1870,1903,1936,1969,2002,2035],{"type":39,"tag":636,"props":1730,"children":1731},{"class":638,"line":639},[1732],{"type":39,"tag":636,"props":1733,"children":1734},{"style":643},[1735],{"type":45,"value":1736},"\u002F\u002F Mapbox built-in styles\n",{"type":39,"tag":636,"props":1738,"children":1739},{"class":638,"line":649},[1740,1745,1749,1753,1757,1761,1766],{"type":39,"tag":636,"props":1741,"children":1742},{"style":653},[1743],{"type":45,"value":1744},"style",{"type":39,"tag":636,"props":1746,"children":1747},{"style":750},[1748],{"type":45,"value":1344},{"type":39,"tag":636,"props":1750,"children":1751},{"style":750},[1752],{"type":45,"value":753},{"type":39,"tag":636,"props":1754,"children":1755},{"style":659},[1756],{"type":45,"value":1625},{"type":39,"tag":636,"props":1758,"children":1759},{"style":750},[1760],{"type":45,"value":763},{"type":39,"tag":636,"props":1762,"children":1763},{"style":750},[1764],{"type":45,"value":1765},";",{"type":39,"tag":636,"props":1767,"children":1768},{"style":643},[1769],{"type":45,"value":1770}," \u002F\u002F Mapbox Standard (default)\n",{"type":39,"tag":636,"props":1772,"children":1773},{"class":638,"line":670},[1774,1778,1782,1786,1791,1795,1799],{"type":39,"tag":636,"props":1775,"children":1776},{"style":653},[1777],{"type":45,"value":1744},{"type":39,"tag":636,"props":1779,"children":1780},{"style":750},[1781],{"type":45,"value":1344},{"type":39,"tag":636,"props":1783,"children":1784},{"style":750},[1785],{"type":45,"value":753},{"type":39,"tag":636,"props":1787,"children":1788},{"style":659},[1789],{"type":45,"value":1790},"mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstandard-satellite",{"type":39,"tag":636,"props":1792,"children":1793},{"style":750},[1794],{"type":45,"value":763},{"type":39,"tag":636,"props":1796,"children":1797},{"style":750},[1798],{"type":45,"value":1765},{"type":39,"tag":636,"props":1800,"children":1801},{"style":643},[1802],{"type":45,"value":1803}," \u002F\u002F Mapbox Standard Satellite\n",{"type":39,"tag":636,"props":1805,"children":1806},{"class":638,"line":680},[1807,1811,1815,1819,1824,1828,1832],{"type":39,"tag":636,"props":1808,"children":1809},{"style":653},[1810],{"type":45,"value":1744},{"type":39,"tag":636,"props":1812,"children":1813},{"style":750},[1814],{"type":45,"value":1344},{"type":39,"tag":636,"props":1816,"children":1817},{"style":750},[1818],{"type":45,"value":753},{"type":39,"tag":636,"props":1820,"children":1821},{"style":659},[1822],{"type":45,"value":1823},"mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstreets-v12",{"type":39,"tag":636,"props":1825,"children":1826},{"style":750},[1827],{"type":45,"value":763},{"type":39,"tag":636,"props":1829,"children":1830},{"style":750},[1831],{"type":45,"value":1765},{"type":39,"tag":636,"props":1833,"children":1834},{"style":643},[1835],{"type":45,"value":1836}," \u002F\u002F Streets v12\n",{"type":39,"tag":636,"props":1838,"children":1839},{"class":638,"line":689},[1840,1844,1848,1852,1857,1861,1865],{"type":39,"tag":636,"props":1841,"children":1842},{"style":653},[1843],{"type":45,"value":1744},{"type":39,"tag":636,"props":1845,"children":1846},{"style":750},[1847],{"type":45,"value":1344},{"type":39,"tag":636,"props":1849,"children":1850},{"style":750},[1851],{"type":45,"value":753},{"type":39,"tag":636,"props":1853,"children":1854},{"style":659},[1855],{"type":45,"value":1856},"mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fsatellite-v9",{"type":39,"tag":636,"props":1858,"children":1859},{"style":750},[1860],{"type":45,"value":763},{"type":39,"tag":636,"props":1862,"children":1863},{"style":750},[1864],{"type":45,"value":1765},{"type":39,"tag":636,"props":1866,"children":1867},{"style":643},[1868],{"type":45,"value":1869}," \u002F\u002F Satellite imagery\n",{"type":39,"tag":636,"props":1871,"children":1872},{"class":638,"line":810},[1873,1877,1881,1885,1890,1894,1898],{"type":39,"tag":636,"props":1874,"children":1875},{"style":653},[1876],{"type":45,"value":1744},{"type":39,"tag":636,"props":1878,"children":1879},{"style":750},[1880],{"type":45,"value":1344},{"type":39,"tag":636,"props":1882,"children":1883},{"style":750},[1884],{"type":45,"value":753},{"type":39,"tag":636,"props":1886,"children":1887},{"style":659},[1888],{"type":45,"value":1889},"mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fsatellite-streets-v12",{"type":39,"tag":636,"props":1891,"children":1892},{"style":750},[1893],{"type":45,"value":763},{"type":39,"tag":636,"props":1895,"children":1896},{"style":750},[1897],{"type":45,"value":1765},{"type":39,"tag":636,"props":1899,"children":1900},{"style":643},[1901],{"type":45,"value":1902}," \u002F\u002F Hybrid\n",{"type":39,"tag":636,"props":1904,"children":1905},{"class":638,"line":844},[1906,1910,1914,1918,1923,1927,1931],{"type":39,"tag":636,"props":1907,"children":1908},{"style":653},[1909],{"type":45,"value":1744},{"type":39,"tag":636,"props":1911,"children":1912},{"style":750},[1913],{"type":45,"value":1344},{"type":39,"tag":636,"props":1915,"children":1916},{"style":750},[1917],{"type":45,"value":753},{"type":39,"tag":636,"props":1919,"children":1920},{"style":659},[1921],{"type":45,"value":1922},"mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Foutdoors-v12",{"type":39,"tag":636,"props":1924,"children":1925},{"style":750},[1926],{"type":45,"value":763},{"type":39,"tag":636,"props":1928,"children":1929},{"style":750},[1930],{"type":45,"value":1765},{"type":39,"tag":636,"props":1932,"children":1933},{"style":643},[1934],{"type":45,"value":1935}," \u002F\u002F Outdoor\u002Frecreation\n",{"type":39,"tag":636,"props":1937,"children":1938},{"class":638,"line":1479},[1939,1943,1947,1951,1956,1960,1964],{"type":39,"tag":636,"props":1940,"children":1941},{"style":653},[1942],{"type":45,"value":1744},{"type":39,"tag":636,"props":1944,"children":1945},{"style":750},[1946],{"type":45,"value":1344},{"type":39,"tag":636,"props":1948,"children":1949},{"style":750},[1950],{"type":45,"value":753},{"type":39,"tag":636,"props":1952,"children":1953},{"style":659},[1954],{"type":45,"value":1955},"mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Flight-v11",{"type":39,"tag":636,"props":1957,"children":1958},{"style":750},[1959],{"type":45,"value":763},{"type":39,"tag":636,"props":1961,"children":1962},{"style":750},[1963],{"type":45,"value":1765},{"type":39,"tag":636,"props":1965,"children":1966},{"style":643},[1967],{"type":45,"value":1968}," \u002F\u002F Light theme\n",{"type":39,"tag":636,"props":1970,"children":1971},{"class":638,"line":1487},[1972,1976,1980,1984,1989,1993,1997],{"type":39,"tag":636,"props":1973,"children":1974},{"style":653},[1975],{"type":45,"value":1744},{"type":39,"tag":636,"props":1977,"children":1978},{"style":750},[1979],{"type":45,"value":1344},{"type":39,"tag":636,"props":1981,"children":1982},{"style":750},[1983],{"type":45,"value":753},{"type":39,"tag":636,"props":1985,"children":1986},{"style":659},[1987],{"type":45,"value":1988},"mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fdark-v11",{"type":39,"tag":636,"props":1990,"children":1991},{"style":750},[1992],{"type":45,"value":763},{"type":39,"tag":636,"props":1994,"children":1995},{"style":750},[1996],{"type":45,"value":1765},{"type":39,"tag":636,"props":1998,"children":1999},{"style":643},[2000],{"type":45,"value":2001}," \u002F\u002F Dark theme\n",{"type":39,"tag":636,"props":2003,"children":2004},{"class":638,"line":27},[2005,2009,2013,2017,2022,2026,2030],{"type":39,"tag":636,"props":2006,"children":2007},{"style":653},[2008],{"type":45,"value":1744},{"type":39,"tag":636,"props":2010,"children":2011},{"style":750},[2012],{"type":45,"value":1344},{"type":39,"tag":636,"props":2014,"children":2015},{"style":750},[2016],{"type":45,"value":753},{"type":39,"tag":636,"props":2018,"children":2019},{"style":659},[2020],{"type":45,"value":2021},"mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fnavigation-day-v1",{"type":39,"tag":636,"props":2023,"children":2024},{"style":750},[2025],{"type":45,"value":763},{"type":39,"tag":636,"props":2027,"children":2028},{"style":750},[2029],{"type":45,"value":1765},{"type":39,"tag":636,"props":2031,"children":2032},{"style":643},[2033],{"type":45,"value":2034}," \u002F\u002F Navigation (day)\n",{"type":39,"tag":636,"props":2036,"children":2037},{"class":638,"line":1530},[2038,2042,2046,2050,2055,2059,2063],{"type":39,"tag":636,"props":2039,"children":2040},{"style":653},[2041],{"type":45,"value":1744},{"type":39,"tag":636,"props":2043,"children":2044},{"style":750},[2045],{"type":45,"value":1344},{"type":39,"tag":636,"props":2047,"children":2048},{"style":750},[2049],{"type":45,"value":753},{"type":39,"tag":636,"props":2051,"children":2052},{"style":659},[2053],{"type":45,"value":2054},"mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fnavigation-night-v1",{"type":39,"tag":636,"props":2056,"children":2057},{"style":750},[2058],{"type":45,"value":763},{"type":39,"tag":636,"props":2060,"children":2061},{"style":750},[2062],{"type":45,"value":1765},{"type":39,"tag":636,"props":2064,"children":2065},{"style":643},[2066],{"type":45,"value":2067}," \u002F\u002F Navigation (night)\n",{"type":39,"tag":48,"props":2069,"children":2070},{},[2071,2076],{"type":39,"tag":71,"props":2072,"children":2073},{},[2074],{"type":45,"value":2075},"Custom styles:",{"type":45,"value":2077},"\nYou can also create and use custom styles from Mapbox Studio:",{"type":39,"tag":625,"props":2079,"children":2081},{"className":713,"code":2080,"language":715,"meta":630,"style":630},"style: 'mapbox:\u002F\u002Fstyles\u002Fyour-username\u002Fyour-style-id';\n",[2082],{"type":39,"tag":610,"props":2083,"children":2084},{"__ignoreMap":630},[2085],{"type":39,"tag":636,"props":2086,"children":2087},{"class":638,"line":639},[2088,2092,2096,2100,2105,2109],{"type":39,"tag":636,"props":2089,"children":2090},{"style":653},[2091],{"type":45,"value":1744},{"type":39,"tag":636,"props":2093,"children":2094},{"style":750},[2095],{"type":45,"value":1344},{"type":39,"tag":636,"props":2097,"children":2098},{"style":750},[2099],{"type":45,"value":753},{"type":39,"tag":636,"props":2101,"children":2102},{"style":659},[2103],{"type":45,"value":2104},"mapbox:\u002F\u002Fstyles\u002Fyour-username\u002Fyour-style-id",{"type":39,"tag":636,"props":2106,"children":2107},{"style":750},[2108],{"type":45,"value":763},{"type":39,"tag":636,"props":2110,"children":2111},{"style":750},[2112],{"type":45,"value":768},{"type":39,"tag":61,"props":2114,"children":2116},{"id":2115},"_7-update-all-references",[2117],{"type":45,"value":2118},"7. Update All References",{"type":39,"tag":48,"props":2120,"children":2121},{},[2122,2124,2130,2132,2137],{"type":45,"value":2123},"Replace all ",{"type":39,"tag":610,"props":2125,"children":2127},{"className":2126},[],[2128],{"type":45,"value":2129},"maplibregl",{"type":45,"value":2131}," references with ",{"type":39,"tag":610,"props":2133,"children":2135},{"className":2134},[],[2136],{"type":45,"value":1146},{"type":45,"value":1344},{"type":39,"tag":625,"props":2139,"children":2141},{"className":713,"code":2140,"language":715,"meta":630,"style":630},"\u002F\u002F Markers\nconst marker = new mapboxgl.Marker() \u002F\u002F was: maplibregl.Marker()\n  .setLngLat([-122.4194, 37.7749])\n  .setPopup(new mapboxgl.Popup().setText('San Francisco'))\n  .addTo(map);\n\n\u002F\u002F Controls\nmap.addControl(new mapboxgl.NavigationControl(), 'top-right');\nmap.addControl(new mapboxgl.GeolocateControl());\nmap.addControl(new mapboxgl.FullscreenControl());\nmap.addControl(new mapboxgl.ScaleControl());\n",[2142],{"type":39,"tag":610,"props":2143,"children":2144},{"__ignoreMap":630},[2145,2153,2196,2235,2305,2326,2333,2341,2407,2452,2496],{"type":39,"tag":636,"props":2146,"children":2147},{"class":638,"line":639},[2148],{"type":39,"tag":636,"props":2149,"children":2150},{"style":643},[2151],{"type":45,"value":2152},"\u002F\u002F Markers\n",{"type":39,"tag":636,"props":2154,"children":2155},{"class":638,"line":649},[2156,2160,2165,2169,2173,2177,2181,2186,2191],{"type":39,"tag":636,"props":2157,"children":2158},{"style":905},[2159],{"type":45,"value":1292},{"type":39,"tag":636,"props":2161,"children":2162},{"style":739},[2163],{"type":45,"value":2164}," marker ",{"type":39,"tag":636,"props":2166,"children":2167},{"style":750},[2168],{"type":45,"value":913},{"type":39,"tag":636,"props":2170,"children":2171},{"style":750},[2172],{"type":45,"value":1306},{"type":39,"tag":636,"props":2174,"children":2175},{"style":739},[2176],{"type":45,"value":1560},{"type":39,"tag":636,"props":2178,"children":2179},{"style":750},[2180],{"type":45,"value":1151},{"type":39,"tag":636,"props":2182,"children":2183},{"style":1318},[2184],{"type":45,"value":2185},"Marker",{"type":39,"tag":636,"props":2187,"children":2188},{"style":739},[2189],{"type":45,"value":2190},"() ",{"type":39,"tag":636,"props":2192,"children":2193},{"style":643},[2194],{"type":45,"value":2195},"\u002F\u002F was: maplibregl.Marker()\n",{"type":39,"tag":636,"props":2197,"children":2198},{"class":638,"line":670},[2199,2204,2209,2214,2218,2222,2226,2230],{"type":39,"tag":636,"props":2200,"children":2201},{"style":750},[2202],{"type":45,"value":2203},"  .",{"type":39,"tag":636,"props":2205,"children":2206},{"style":1318},[2207],{"type":45,"value":2208},"setLngLat",{"type":39,"tag":636,"props":2210,"children":2211},{"style":739},[2212],{"type":45,"value":2213},"([",{"type":39,"tag":636,"props":2215,"children":2216},{"style":750},[2217],{"type":45,"value":1419},{"type":39,"tag":636,"props":2219,"children":2220},{"style":1422},[2221],{"type":45,"value":1425},{"type":39,"tag":636,"props":2223,"children":2224},{"style":750},[2225],{"type":45,"value":1392},{"type":39,"tag":636,"props":2227,"children":2228},{"style":1422},[2229],{"type":45,"value":1434},{"type":39,"tag":636,"props":2231,"children":2232},{"style":739},[2233],{"type":45,"value":2234},"])\n",{"type":39,"tag":636,"props":2236,"children":2237},{"class":638,"line":680},[2238,2242,2247,2251,2256,2260,2264,2269,2274,2278,2283,2287,2291,2296,2300],{"type":39,"tag":636,"props":2239,"children":2240},{"style":750},[2241],{"type":45,"value":2203},{"type":39,"tag":636,"props":2243,"children":2244},{"style":1318},[2245],{"type":45,"value":2246},"setPopup",{"type":39,"tag":636,"props":2248,"children":2249},{"style":739},[2250],{"type":45,"value":1326},{"type":39,"tag":636,"props":2252,"children":2253},{"style":750},[2254],{"type":45,"value":2255},"new",{"type":39,"tag":636,"props":2257,"children":2258},{"style":739},[2259],{"type":45,"value":1560},{"type":39,"tag":636,"props":2261,"children":2262},{"style":750},[2263],{"type":45,"value":1151},{"type":39,"tag":636,"props":2265,"children":2266},{"style":1318},[2267],{"type":45,"value":2268},"Popup",{"type":39,"tag":636,"props":2270,"children":2271},{"style":739},[2272],{"type":45,"value":2273},"()",{"type":39,"tag":636,"props":2275,"children":2276},{"style":750},[2277],{"type":45,"value":1151},{"type":39,"tag":636,"props":2279,"children":2280},{"style":1318},[2281],{"type":45,"value":2282},"setText",{"type":39,"tag":636,"props":2284,"children":2285},{"style":739},[2286],{"type":45,"value":1326},{"type":39,"tag":636,"props":2288,"children":2289},{"style":750},[2290],{"type":45,"value":763},{"type":39,"tag":636,"props":2292,"children":2293},{"style":659},[2294],{"type":45,"value":2295},"San Francisco",{"type":39,"tag":636,"props":2297,"children":2298},{"style":750},[2299],{"type":45,"value":763},{"type":39,"tag":636,"props":2301,"children":2302},{"style":739},[2303],{"type":45,"value":2304},"))\n",{"type":39,"tag":636,"props":2306,"children":2307},{"class":638,"line":689},[2308,2312,2317,2322],{"type":39,"tag":636,"props":2309,"children":2310},{"style":750},[2311],{"type":45,"value":2203},{"type":39,"tag":636,"props":2313,"children":2314},{"style":1318},[2315],{"type":45,"value":2316},"addTo",{"type":39,"tag":636,"props":2318,"children":2319},{"style":739},[2320],{"type":45,"value":2321},"(map)",{"type":39,"tag":636,"props":2323,"children":2324},{"style":750},[2325],{"type":45,"value":768},{"type":39,"tag":636,"props":2327,"children":2328},{"class":638,"line":810},[2329],{"type":39,"tag":636,"props":2330,"children":2331},{"emptyLinePlaceholder":674},[2332],{"type":45,"value":677},{"type":39,"tag":636,"props":2334,"children":2335},{"class":638,"line":844},[2336],{"type":39,"tag":636,"props":2337,"children":2338},{"style":643},[2339],{"type":45,"value":2340},"\u002F\u002F Controls\n",{"type":39,"tag":636,"props":2342,"children":2343},{"class":638,"line":1479},[2344,2348,2352,2357,2361,2365,2369,2373,2378,2382,2386,2390,2395,2399,2403],{"type":39,"tag":636,"props":2345,"children":2346},{"style":739},[2347],{"type":45,"value":1353},{"type":39,"tag":636,"props":2349,"children":2350},{"style":750},[2351],{"type":45,"value":1151},{"type":39,"tag":636,"props":2353,"children":2354},{"style":1318},[2355],{"type":45,"value":2356},"addControl",{"type":39,"tag":636,"props":2358,"children":2359},{"style":739},[2360],{"type":45,"value":1326},{"type":39,"tag":636,"props":2362,"children":2363},{"style":750},[2364],{"type":45,"value":2255},{"type":39,"tag":636,"props":2366,"children":2367},{"style":739},[2368],{"type":45,"value":1560},{"type":39,"tag":636,"props":2370,"children":2371},{"style":750},[2372],{"type":45,"value":1151},{"type":39,"tag":636,"props":2374,"children":2375},{"style":1318},[2376],{"type":45,"value":2377},"NavigationControl",{"type":39,"tag":636,"props":2379,"children":2380},{"style":739},[2381],{"type":45,"value":2273},{"type":39,"tag":636,"props":2383,"children":2384},{"style":750},[2385],{"type":45,"value":1392},{"type":39,"tag":636,"props":2387,"children":2388},{"style":750},[2389],{"type":45,"value":753},{"type":39,"tag":636,"props":2391,"children":2392},{"style":659},[2393],{"type":45,"value":2394},"top-right",{"type":39,"tag":636,"props":2396,"children":2397},{"style":750},[2398],{"type":45,"value":763},{"type":39,"tag":636,"props":2400,"children":2401},{"style":739},[2402],{"type":45,"value":1246},{"type":39,"tag":636,"props":2404,"children":2405},{"style":750},[2406],{"type":45,"value":768},{"type":39,"tag":636,"props":2408,"children":2409},{"class":638,"line":1487},[2410,2414,2418,2422,2426,2430,2434,2438,2443,2448],{"type":39,"tag":636,"props":2411,"children":2412},{"style":739},[2413],{"type":45,"value":1353},{"type":39,"tag":636,"props":2415,"children":2416},{"style":750},[2417],{"type":45,"value":1151},{"type":39,"tag":636,"props":2419,"children":2420},{"style":1318},[2421],{"type":45,"value":2356},{"type":39,"tag":636,"props":2423,"children":2424},{"style":739},[2425],{"type":45,"value":1326},{"type":39,"tag":636,"props":2427,"children":2428},{"style":750},[2429],{"type":45,"value":2255},{"type":39,"tag":636,"props":2431,"children":2432},{"style":739},[2433],{"type":45,"value":1560},{"type":39,"tag":636,"props":2435,"children":2436},{"style":750},[2437],{"type":45,"value":1151},{"type":39,"tag":636,"props":2439,"children":2440},{"style":1318},[2441],{"type":45,"value":2442},"GeolocateControl",{"type":39,"tag":636,"props":2444,"children":2445},{"style":739},[2446],{"type":45,"value":2447},"())",{"type":39,"tag":636,"props":2449,"children":2450},{"style":750},[2451],{"type":45,"value":768},{"type":39,"tag":636,"props":2453,"children":2454},{"class":638,"line":27},[2455,2459,2463,2467,2471,2475,2479,2483,2488,2492],{"type":39,"tag":636,"props":2456,"children":2457},{"style":739},[2458],{"type":45,"value":1353},{"type":39,"tag":636,"props":2460,"children":2461},{"style":750},[2462],{"type":45,"value":1151},{"type":39,"tag":636,"props":2464,"children":2465},{"style":1318},[2466],{"type":45,"value":2356},{"type":39,"tag":636,"props":2468,"children":2469},{"style":739},[2470],{"type":45,"value":1326},{"type":39,"tag":636,"props":2472,"children":2473},{"style":750},[2474],{"type":45,"value":2255},{"type":39,"tag":636,"props":2476,"children":2477},{"style":739},[2478],{"type":45,"value":1560},{"type":39,"tag":636,"props":2480,"children":2481},{"style":750},[2482],{"type":45,"value":1151},{"type":39,"tag":636,"props":2484,"children":2485},{"style":1318},[2486],{"type":45,"value":2487},"FullscreenControl",{"type":39,"tag":636,"props":2489,"children":2490},{"style":739},[2491],{"type":45,"value":2447},{"type":39,"tag":636,"props":2493,"children":2494},{"style":750},[2495],{"type":45,"value":768},{"type":39,"tag":636,"props":2497,"children":2498},{"class":638,"line":1530},[2499,2503,2507,2511,2515,2519,2523,2527,2532,2536],{"type":39,"tag":636,"props":2500,"children":2501},{"style":739},[2502],{"type":45,"value":1353},{"type":39,"tag":636,"props":2504,"children":2505},{"style":750},[2506],{"type":45,"value":1151},{"type":39,"tag":636,"props":2508,"children":2509},{"style":1318},[2510],{"type":45,"value":2356},{"type":39,"tag":636,"props":2512,"children":2513},{"style":739},[2514],{"type":45,"value":1326},{"type":39,"tag":636,"props":2516,"children":2517},{"style":750},[2518],{"type":45,"value":2255},{"type":39,"tag":636,"props":2520,"children":2521},{"style":739},[2522],{"type":45,"value":1560},{"type":39,"tag":636,"props":2524,"children":2525},{"style":750},[2526],{"type":45,"value":1151},{"type":39,"tag":636,"props":2528,"children":2529},{"style":1318},[2530],{"type":45,"value":2531},"ScaleControl",{"type":39,"tag":636,"props":2533,"children":2534},{"style":739},[2535],{"type":45,"value":2447},{"type":39,"tag":636,"props":2537,"children":2538},{"style":750},[2539],{"type":45,"value":768},{"type":39,"tag":61,"props":2541,"children":2543},{"id":2542},"_8-update-plugins-if-used",[2544],{"type":45,"value":2545},"8. Update Plugins (If Used)",{"type":39,"tag":48,"props":2547,"children":2548},{},[2549],{"type":45,"value":2550},"Some MapLibre plugins should be replaced with Mapbox versions:",{"type":39,"tag":281,"props":2552,"children":2553},{},[2554,2570],{"type":39,"tag":285,"props":2555,"children":2556},{},[2557],{"type":39,"tag":289,"props":2558,"children":2559},{},[2560,2565],{"type":39,"tag":293,"props":2561,"children":2562},{},[2563],{"type":45,"value":2564},"MapLibre Plugin",{"type":39,"tag":293,"props":2566,"children":2567},{},[2568],{"type":45,"value":2569},"Mapbox Alternative",{"type":39,"tag":308,"props":2571,"children":2572},{},[2573,2594,2615],{"type":39,"tag":289,"props":2574,"children":2575},{},[2576,2585],{"type":39,"tag":315,"props":2577,"children":2578},{},[2579],{"type":39,"tag":610,"props":2580,"children":2582},{"className":2581},[],[2583],{"type":45,"value":2584},"@maplibre\u002Fmaplibre-gl-geocoder",{"type":39,"tag":315,"props":2586,"children":2587},{},[2588],{"type":39,"tag":610,"props":2589,"children":2591},{"className":2590},[],[2592],{"type":45,"value":2593},"@mapbox\u002Fmapbox-gl-geocoder",{"type":39,"tag":289,"props":2595,"children":2596},{},[2597,2606],{"type":39,"tag":315,"props":2598,"children":2599},{},[2600],{"type":39,"tag":610,"props":2601,"children":2603},{"className":2602},[],[2604],{"type":45,"value":2605},"@maplibre\u002Fmaplibre-gl-draw",{"type":39,"tag":315,"props":2607,"children":2608},{},[2609],{"type":39,"tag":610,"props":2610,"children":2612},{"className":2611},[],[2613],{"type":45,"value":2614},"@mapbox\u002Fmapbox-gl-draw",{"type":39,"tag":289,"props":2616,"children":2617},{},[2618,2627],{"type":39,"tag":315,"props":2619,"children":2620},{},[2621],{"type":39,"tag":610,"props":2622,"children":2624},{"className":2623},[],[2625],{"type":45,"value":2626},"maplibre-gl-compare",{"type":39,"tag":315,"props":2628,"children":2629},{},[2630],{"type":39,"tag":610,"props":2631,"children":2633},{"className":2632},[],[2634],{"type":45,"value":2635},"mapbox-gl-compare",{"type":39,"tag":48,"props":2637,"children":2638},{},[2639],{"type":45,"value":2640},"Example:",{"type":39,"tag":625,"props":2642,"children":2644},{"className":713,"code":2643,"language":715,"meta":630,"style":630},"\u002F\u002F Before (MapLibre)\nimport MaplibreGeocoder from '@maplibre\u002Fmaplibre-gl-geocoder';\n\n\u002F\u002F After (Mapbox)\nimport MapboxGeocoder from '@mapbox\u002Fmapbox-gl-geocoder';\n\nmap.addControl(\n  new MapboxGeocoder({\n    accessToken: mapboxgl.accessToken,\n    mapboxgl: mapboxgl\n  })\n);\n",[2645],{"type":39,"tag":610,"props":2646,"children":2647},{"__ignoreMap":630},[2648,2655,2687,2694,2701,2733,2740,2760,2781,2810,2827,2840],{"type":39,"tag":636,"props":2649,"children":2650},{"class":638,"line":639},[2651],{"type":39,"tag":636,"props":2652,"children":2653},{"style":643},[2654],{"type":45,"value":727},{"type":39,"tag":636,"props":2656,"children":2657},{"class":638,"line":649},[2658,2662,2667,2671,2675,2679,2683],{"type":39,"tag":636,"props":2659,"children":2660},{"style":733},[2661],{"type":45,"value":736},{"type":39,"tag":636,"props":2663,"children":2664},{"style":739},[2665],{"type":45,"value":2666}," MaplibreGeocoder ",{"type":39,"tag":636,"props":2668,"children":2669},{"style":733},[2670],{"type":45,"value":747},{"type":39,"tag":636,"props":2672,"children":2673},{"style":750},[2674],{"type":45,"value":753},{"type":39,"tag":636,"props":2676,"children":2677},{"style":659},[2678],{"type":45,"value":2584},{"type":39,"tag":636,"props":2680,"children":2681},{"style":750},[2682],{"type":45,"value":763},{"type":39,"tag":636,"props":2684,"children":2685},{"style":750},[2686],{"type":45,"value":768},{"type":39,"tag":636,"props":2688,"children":2689},{"class":638,"line":670},[2690],{"type":39,"tag":636,"props":2691,"children":2692},{"emptyLinePlaceholder":674},[2693],{"type":45,"value":677},{"type":39,"tag":636,"props":2695,"children":2696},{"class":638,"line":680},[2697],{"type":39,"tag":636,"props":2698,"children":2699},{"style":643},[2700],{"type":45,"value":807},{"type":39,"tag":636,"props":2702,"children":2703},{"class":638,"line":689},[2704,2708,2713,2717,2721,2725,2729],{"type":39,"tag":636,"props":2705,"children":2706},{"style":733},[2707],{"type":45,"value":736},{"type":39,"tag":636,"props":2709,"children":2710},{"style":739},[2711],{"type":45,"value":2712}," MapboxGeocoder ",{"type":39,"tag":636,"props":2714,"children":2715},{"style":733},[2716],{"type":45,"value":747},{"type":39,"tag":636,"props":2718,"children":2719},{"style":750},[2720],{"type":45,"value":753},{"type":39,"tag":636,"props":2722,"children":2723},{"style":659},[2724],{"type":45,"value":2593},{"type":39,"tag":636,"props":2726,"children":2727},{"style":750},[2728],{"type":45,"value":763},{"type":39,"tag":636,"props":2730,"children":2731},{"style":750},[2732],{"type":45,"value":768},{"type":39,"tag":636,"props":2734,"children":2735},{"class":638,"line":810},[2736],{"type":39,"tag":636,"props":2737,"children":2738},{"emptyLinePlaceholder":674},[2739],{"type":45,"value":677},{"type":39,"tag":636,"props":2741,"children":2742},{"class":638,"line":844},[2743,2747,2751,2755],{"type":39,"tag":636,"props":2744,"children":2745},{"style":739},[2746],{"type":45,"value":1353},{"type":39,"tag":636,"props":2748,"children":2749},{"style":750},[2750],{"type":45,"value":1151},{"type":39,"tag":636,"props":2752,"children":2753},{"style":1318},[2754],{"type":45,"value":2356},{"type":39,"tag":636,"props":2756,"children":2757},{"style":739},[2758],{"type":45,"value":2759},"(\n",{"type":39,"tag":636,"props":2761,"children":2762},{"class":638,"line":1479},[2763,2768,2773,2777],{"type":39,"tag":636,"props":2764,"children":2765},{"style":750},[2766],{"type":45,"value":2767},"  new",{"type":39,"tag":636,"props":2769,"children":2770},{"style":1318},[2771],{"type":45,"value":2772}," MapboxGeocoder",{"type":39,"tag":636,"props":2774,"children":2775},{"style":739},[2776],{"type":45,"value":1326},{"type":39,"tag":636,"props":2778,"children":2779},{"style":750},[2780],{"type":45,"value":1331},{"type":39,"tag":636,"props":2782,"children":2783},{"class":638,"line":1487},[2784,2789,2793,2797,2801,2806],{"type":39,"tag":636,"props":2785,"children":2786},{"style":899},[2787],{"type":45,"value":2788},"    accessToken",{"type":39,"tag":636,"props":2790,"children":2791},{"style":750},[2792],{"type":45,"value":1344},{"type":39,"tag":636,"props":2794,"children":2795},{"style":739},[2796],{"type":45,"value":1560},{"type":39,"tag":636,"props":2798,"children":2799},{"style":750},[2800],{"type":45,"value":1151},{"type":39,"tag":636,"props":2802,"children":2803},{"style":739},[2804],{"type":45,"value":2805},"accessToken",{"type":39,"tag":636,"props":2807,"children":2808},{"style":750},[2809],{"type":45,"value":1362},{"type":39,"tag":636,"props":2811,"children":2812},{"class":638,"line":27},[2813,2818,2822],{"type":39,"tag":636,"props":2814,"children":2815},{"style":899},[2816],{"type":45,"value":2817},"    mapboxgl",{"type":39,"tag":636,"props":2819,"children":2820},{"style":750},[2821],{"type":45,"value":1344},{"type":39,"tag":636,"props":2823,"children":2824},{"style":739},[2825],{"type":45,"value":2826}," mapboxgl\n",{"type":39,"tag":636,"props":2828,"children":2829},{"class":638,"line":1530},[2830,2835],{"type":39,"tag":636,"props":2831,"children":2832},{"style":750},[2833],{"type":45,"value":2834},"  }",{"type":39,"tag":636,"props":2836,"children":2837},{"style":739},[2838],{"type":45,"value":2839},")\n",{"type":39,"tag":636,"props":2841,"children":2842},{"class":638,"line":1538},[2843,2847],{"type":39,"tag":636,"props":2844,"children":2845},{"style":739},[2846],{"type":45,"value":1246},{"type":39,"tag":636,"props":2848,"children":2849},{"style":750},[2850],{"type":45,"value":768},{"type":39,"tag":61,"props":2852,"children":2854},{"id":2853},"_9-everything-else-stays-the-same",[2855],{"type":45,"value":2856},"9. Everything Else Stays the Same",{"type":39,"tag":48,"props":2858,"children":2859},{},[2860],{"type":45,"value":2861},"All your map code, events, layers, and sources work identically:",{"type":39,"tag":625,"props":2863,"children":2865},{"className":713,"code":2864,"language":715,"meta":630,"style":630},"\u002F\u002F This code works EXACTLY THE SAME in both libraries\nmap.on('load', () => {\n  map.addSource('points', {\n    type: 'geojson',\n    data: geojsonData\n  });\n\n  map.addLayer({\n    id: 'points-layer',\n    type: 'circle',\n    source: 'points',\n    paint: {\n      'circle-radius': 8,\n      'circle-color': '#ff0000'\n    }\n  });\n});\n\n\u002F\u002F Events work identically\nmap.on('click', 'points-layer', (e) => {\n  console.log(e.features[0].properties);\n});\n\n\u002F\u002F All map methods work the same\nmap.setCenter([lng, lat]);\nmap.setZoom(12);\nmap.fitBounds(bounds);\nmap.flyTo({ center: [lng, lat], zoom: 14 });\n",[2866],{"type":39,"tag":610,"props":2867,"children":2868},{"__ignoreMap":630},[2869,2877,2929,2971,3000,3017,3032,3039,3063,3092,3120,3148,3164,3194,3228,3236,3251,3266,3274,3283,3359,3425,3441,3449,3458,3493,3527,3553],{"type":39,"tag":636,"props":2870,"children":2871},{"class":638,"line":639},[2872],{"type":39,"tag":636,"props":2873,"children":2874},{"style":643},[2875],{"type":45,"value":2876},"\u002F\u002F This code works EXACTLY THE SAME in both libraries\n",{"type":39,"tag":636,"props":2878,"children":2879},{"class":638,"line":649},[2880,2884,2888,2893,2897,2901,2906,2910,2914,2919,2924],{"type":39,"tag":636,"props":2881,"children":2882},{"style":739},[2883],{"type":45,"value":1353},{"type":39,"tag":636,"props":2885,"children":2886},{"style":750},[2887],{"type":45,"value":1151},{"type":39,"tag":636,"props":2889,"children":2890},{"style":1318},[2891],{"type":45,"value":2892},"on",{"type":39,"tag":636,"props":2894,"children":2895},{"style":739},[2896],{"type":45,"value":1326},{"type":39,"tag":636,"props":2898,"children":2899},{"style":750},[2900],{"type":45,"value":763},{"type":39,"tag":636,"props":2902,"children":2903},{"style":659},[2904],{"type":45,"value":2905},"load",{"type":39,"tag":636,"props":2907,"children":2908},{"style":750},[2909],{"type":45,"value":763},{"type":39,"tag":636,"props":2911,"children":2912},{"style":750},[2913],{"type":45,"value":1392},{"type":39,"tag":636,"props":2915,"children":2916},{"style":750},[2917],{"type":45,"value":2918}," ()",{"type":39,"tag":636,"props":2920,"children":2921},{"style":905},[2922],{"type":45,"value":2923}," =>",{"type":39,"tag":636,"props":2925,"children":2926},{"style":750},[2927],{"type":45,"value":2928}," {\n",{"type":39,"tag":636,"props":2930,"children":2931},{"class":638,"line":670},[2932,2937,2941,2946,2950,2954,2959,2963,2967],{"type":39,"tag":636,"props":2933,"children":2934},{"style":739},[2935],{"type":45,"value":2936},"  map",{"type":39,"tag":636,"props":2938,"children":2939},{"style":750},[2940],{"type":45,"value":1151},{"type":39,"tag":636,"props":2942,"children":2943},{"style":1318},[2944],{"type":45,"value":2945},"addSource",{"type":39,"tag":636,"props":2947,"children":2948},{"style":899},[2949],{"type":45,"value":1326},{"type":39,"tag":636,"props":2951,"children":2952},{"style":750},[2953],{"type":45,"value":763},{"type":39,"tag":636,"props":2955,"children":2956},{"style":659},[2957],{"type":45,"value":2958},"points",{"type":39,"tag":636,"props":2960,"children":2961},{"style":750},[2962],{"type":45,"value":763},{"type":39,"tag":636,"props":2964,"children":2965},{"style":750},[2966],{"type":45,"value":1392},{"type":39,"tag":636,"props":2968,"children":2969},{"style":750},[2970],{"type":45,"value":2928},{"type":39,"tag":636,"props":2972,"children":2973},{"class":638,"line":680},[2974,2979,2983,2987,2992,2996],{"type":39,"tag":636,"props":2975,"children":2976},{"style":899},[2977],{"type":45,"value":2978},"    type",{"type":39,"tag":636,"props":2980,"children":2981},{"style":750},[2982],{"type":45,"value":1344},{"type":39,"tag":636,"props":2984,"children":2985},{"style":750},[2986],{"type":45,"value":753},{"type":39,"tag":636,"props":2988,"children":2989},{"style":659},[2990],{"type":45,"value":2991},"geojson",{"type":39,"tag":636,"props":2993,"children":2994},{"style":750},[2995],{"type":45,"value":763},{"type":39,"tag":636,"props":2997,"children":2998},{"style":750},[2999],{"type":45,"value":1362},{"type":39,"tag":636,"props":3001,"children":3002},{"class":638,"line":689},[3003,3008,3012],{"type":39,"tag":636,"props":3004,"children":3005},{"style":899},[3006],{"type":45,"value":3007},"    data",{"type":39,"tag":636,"props":3009,"children":3010},{"style":750},[3011],{"type":45,"value":1344},{"type":39,"tag":636,"props":3013,"children":3014},{"style":739},[3015],{"type":45,"value":3016}," geojsonData\n",{"type":39,"tag":636,"props":3018,"children":3019},{"class":638,"line":810},[3020,3024,3028],{"type":39,"tag":636,"props":3021,"children":3022},{"style":750},[3023],{"type":45,"value":2834},{"type":39,"tag":636,"props":3025,"children":3026},{"style":899},[3027],{"type":45,"value":1246},{"type":39,"tag":636,"props":3029,"children":3030},{"style":750},[3031],{"type":45,"value":768},{"type":39,"tag":636,"props":3033,"children":3034},{"class":638,"line":844},[3035],{"type":39,"tag":636,"props":3036,"children":3037},{"emptyLinePlaceholder":674},[3038],{"type":45,"value":677},{"type":39,"tag":636,"props":3040,"children":3041},{"class":638,"line":1479},[3042,3046,3050,3055,3059],{"type":39,"tag":636,"props":3043,"children":3044},{"style":739},[3045],{"type":45,"value":2936},{"type":39,"tag":636,"props":3047,"children":3048},{"style":750},[3049],{"type":45,"value":1151},{"type":39,"tag":636,"props":3051,"children":3052},{"style":1318},[3053],{"type":45,"value":3054},"addLayer",{"type":39,"tag":636,"props":3056,"children":3057},{"style":899},[3058],{"type":45,"value":1326},{"type":39,"tag":636,"props":3060,"children":3061},{"style":750},[3062],{"type":45,"value":1331},{"type":39,"tag":636,"props":3064,"children":3065},{"class":638,"line":1487},[3066,3071,3075,3079,3084,3088],{"type":39,"tag":636,"props":3067,"children":3068},{"style":899},[3069],{"type":45,"value":3070},"    id",{"type":39,"tag":636,"props":3072,"children":3073},{"style":750},[3074],{"type":45,"value":1344},{"type":39,"tag":636,"props":3076,"children":3077},{"style":750},[3078],{"type":45,"value":753},{"type":39,"tag":636,"props":3080,"children":3081},{"style":659},[3082],{"type":45,"value":3083},"points-layer",{"type":39,"tag":636,"props":3085,"children":3086},{"style":750},[3087],{"type":45,"value":763},{"type":39,"tag":636,"props":3089,"children":3090},{"style":750},[3091],{"type":45,"value":1362},{"type":39,"tag":636,"props":3093,"children":3094},{"class":638,"line":27},[3095,3099,3103,3107,3112,3116],{"type":39,"tag":636,"props":3096,"children":3097},{"style":899},[3098],{"type":45,"value":2978},{"type":39,"tag":636,"props":3100,"children":3101},{"style":750},[3102],{"type":45,"value":1344},{"type":39,"tag":636,"props":3104,"children":3105},{"style":750},[3106],{"type":45,"value":753},{"type":39,"tag":636,"props":3108,"children":3109},{"style":659},[3110],{"type":45,"value":3111},"circle",{"type":39,"tag":636,"props":3113,"children":3114},{"style":750},[3115],{"type":45,"value":763},{"type":39,"tag":636,"props":3117,"children":3118},{"style":750},[3119],{"type":45,"value":1362},{"type":39,"tag":636,"props":3121,"children":3122},{"class":638,"line":1530},[3123,3128,3132,3136,3140,3144],{"type":39,"tag":636,"props":3124,"children":3125},{"style":899},[3126],{"type":45,"value":3127},"    source",{"type":39,"tag":636,"props":3129,"children":3130},{"style":750},[3131],{"type":45,"value":1344},{"type":39,"tag":636,"props":3133,"children":3134},{"style":750},[3135],{"type":45,"value":753},{"type":39,"tag":636,"props":3137,"children":3138},{"style":659},[3139],{"type":45,"value":2958},{"type":39,"tag":636,"props":3141,"children":3142},{"style":750},[3143],{"type":45,"value":763},{"type":39,"tag":636,"props":3145,"children":3146},{"style":750},[3147],{"type":45,"value":1362},{"type":39,"tag":636,"props":3149,"children":3150},{"class":638,"line":1538},[3151,3156,3160],{"type":39,"tag":636,"props":3152,"children":3153},{"style":899},[3154],{"type":45,"value":3155},"    paint",{"type":39,"tag":636,"props":3157,"children":3158},{"style":750},[3159],{"type":45,"value":1344},{"type":39,"tag":636,"props":3161,"children":3162},{"style":750},[3163],{"type":45,"value":2928},{"type":39,"tag":636,"props":3165,"children":3166},{"class":638,"line":1579},[3167,3172,3177,3181,3185,3190],{"type":39,"tag":636,"props":3168,"children":3169},{"style":750},[3170],{"type":45,"value":3171},"      '",{"type":39,"tag":636,"props":3173,"children":3174},{"style":899},[3175],{"type":45,"value":3176},"circle-radius",{"type":39,"tag":636,"props":3178,"children":3179},{"style":750},[3180],{"type":45,"value":763},{"type":39,"tag":636,"props":3182,"children":3183},{"style":750},[3184],{"type":45,"value":1344},{"type":39,"tag":636,"props":3186,"children":3187},{"style":1422},[3188],{"type":45,"value":3189}," 8",{"type":39,"tag":636,"props":3191,"children":3192},{"style":750},[3193],{"type":45,"value":1362},{"type":39,"tag":636,"props":3195,"children":3196},{"class":638,"line":1607},[3197,3201,3206,3210,3214,3218,3223],{"type":39,"tag":636,"props":3198,"children":3199},{"style":750},[3200],{"type":45,"value":3171},{"type":39,"tag":636,"props":3202,"children":3203},{"style":899},[3204],{"type":45,"value":3205},"circle-color",{"type":39,"tag":636,"props":3207,"children":3208},{"style":750},[3209],{"type":45,"value":763},{"type":39,"tag":636,"props":3211,"children":3212},{"style":750},[3213],{"type":45,"value":1344},{"type":39,"tag":636,"props":3215,"children":3216},{"style":750},[3217],{"type":45,"value":753},{"type":39,"tag":636,"props":3219,"children":3220},{"style":659},[3221],{"type":45,"value":3222},"#ff0000",{"type":39,"tag":636,"props":3224,"children":3225},{"style":750},[3226],{"type":45,"value":3227},"'\n",{"type":39,"tag":636,"props":3229,"children":3230},{"class":638,"line":1641},[3231],{"type":39,"tag":636,"props":3232,"children":3233},{"style":750},[3234],{"type":45,"value":3235},"    }\n",{"type":39,"tag":636,"props":3237,"children":3238},{"class":638,"line":1681},[3239,3243,3247],{"type":39,"tag":636,"props":3240,"children":3241},{"style":750},[3242],{"type":45,"value":2834},{"type":39,"tag":636,"props":3244,"children":3245},{"style":899},[3246],{"type":45,"value":1246},{"type":39,"tag":636,"props":3248,"children":3249},{"style":750},[3250],{"type":45,"value":768},{"type":39,"tag":636,"props":3252,"children":3253},{"class":638,"line":1697},[3254,3258,3262],{"type":39,"tag":636,"props":3255,"children":3256},{"style":750},[3257],{"type":45,"value":1468},{"type":39,"tag":636,"props":3259,"children":3260},{"style":739},[3261],{"type":45,"value":1246},{"type":39,"tag":636,"props":3263,"children":3264},{"style":750},[3265],{"type":45,"value":768},{"type":39,"tag":636,"props":3267,"children":3269},{"class":638,"line":3268},18,[3270],{"type":39,"tag":636,"props":3271,"children":3272},{"emptyLinePlaceholder":674},[3273],{"type":45,"value":677},{"type":39,"tag":636,"props":3275,"children":3277},{"class":638,"line":3276},19,[3278],{"type":39,"tag":636,"props":3279,"children":3280},{"style":643},[3281],{"type":45,"value":3282},"\u002F\u002F Events work identically\n",{"type":39,"tag":636,"props":3284,"children":3286},{"class":638,"line":3285},20,[3287,3291,3295,3299,3303,3307,3312,3316,3320,3324,3328,3332,3336,3341,3347,3351,3355],{"type":39,"tag":636,"props":3288,"children":3289},{"style":739},[3290],{"type":45,"value":1353},{"type":39,"tag":636,"props":3292,"children":3293},{"style":750},[3294],{"type":45,"value":1151},{"type":39,"tag":636,"props":3296,"children":3297},{"style":1318},[3298],{"type":45,"value":2892},{"type":39,"tag":636,"props":3300,"children":3301},{"style":739},[3302],{"type":45,"value":1326},{"type":39,"tag":636,"props":3304,"children":3305},{"style":750},[3306],{"type":45,"value":763},{"type":39,"tag":636,"props":3308,"children":3309},{"style":659},[3310],{"type":45,"value":3311},"click",{"type":39,"tag":636,"props":3313,"children":3314},{"style":750},[3315],{"type":45,"value":763},{"type":39,"tag":636,"props":3317,"children":3318},{"style":750},[3319],{"type":45,"value":1392},{"type":39,"tag":636,"props":3321,"children":3322},{"style":750},[3323],{"type":45,"value":753},{"type":39,"tag":636,"props":3325,"children":3326},{"style":659},[3327],{"type":45,"value":3083},{"type":39,"tag":636,"props":3329,"children":3330},{"style":750},[3331],{"type":45,"value":763},{"type":39,"tag":636,"props":3333,"children":3334},{"style":750},[3335],{"type":45,"value":1392},{"type":39,"tag":636,"props":3337,"children":3338},{"style":750},[3339],{"type":45,"value":3340}," (",{"type":39,"tag":636,"props":3342,"children":3344},{"style":3343},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[3345],{"type":45,"value":3346},"e",{"type":39,"tag":636,"props":3348,"children":3349},{"style":750},[3350],{"type":45,"value":1246},{"type":39,"tag":636,"props":3352,"children":3353},{"style":905},[3354],{"type":45,"value":2923},{"type":39,"tag":636,"props":3356,"children":3357},{"style":750},[3358],{"type":45,"value":2928},{"type":39,"tag":636,"props":3360,"children":3362},{"class":638,"line":3361},21,[3363,3368,3372,3377,3381,3385,3389,3394,3399,3404,3408,3412,3417,3421],{"type":39,"tag":636,"props":3364,"children":3365},{"style":739},[3366],{"type":45,"value":3367},"  console",{"type":39,"tag":636,"props":3369,"children":3370},{"style":750},[3371],{"type":45,"value":1151},{"type":39,"tag":636,"props":3373,"children":3374},{"style":1318},[3375],{"type":45,"value":3376},"log",{"type":39,"tag":636,"props":3378,"children":3379},{"style":899},[3380],{"type":45,"value":1326},{"type":39,"tag":636,"props":3382,"children":3383},{"style":739},[3384],{"type":45,"value":3346},{"type":39,"tag":636,"props":3386,"children":3387},{"style":750},[3388],{"type":45,"value":1151},{"type":39,"tag":636,"props":3390,"children":3391},{"style":739},[3392],{"type":45,"value":3393},"features",{"type":39,"tag":636,"props":3395,"children":3396},{"style":899},[3397],{"type":45,"value":3398},"[",{"type":39,"tag":636,"props":3400,"children":3401},{"style":1422},[3402],{"type":45,"value":3403},"0",{"type":39,"tag":636,"props":3405,"children":3406},{"style":899},[3407],{"type":45,"value":1439},{"type":39,"tag":636,"props":3409,"children":3410},{"style":750},[3411],{"type":45,"value":1151},{"type":39,"tag":636,"props":3413,"children":3414},{"style":739},[3415],{"type":45,"value":3416},"properties",{"type":39,"tag":636,"props":3418,"children":3419},{"style":899},[3420],{"type":45,"value":1246},{"type":39,"tag":636,"props":3422,"children":3423},{"style":750},[3424],{"type":45,"value":768},{"type":39,"tag":636,"props":3426,"children":3428},{"class":638,"line":3427},22,[3429,3433,3437],{"type":39,"tag":636,"props":3430,"children":3431},{"style":750},[3432],{"type":45,"value":1468},{"type":39,"tag":636,"props":3434,"children":3435},{"style":739},[3436],{"type":45,"value":1246},{"type":39,"tag":636,"props":3438,"children":3439},{"style":750},[3440],{"type":45,"value":768},{"type":39,"tag":636,"props":3442,"children":3444},{"class":638,"line":3443},23,[3445],{"type":39,"tag":636,"props":3446,"children":3447},{"emptyLinePlaceholder":674},[3448],{"type":45,"value":677},{"type":39,"tag":636,"props":3450,"children":3452},{"class":638,"line":3451},24,[3453],{"type":39,"tag":636,"props":3454,"children":3455},{"style":643},[3456],{"type":45,"value":3457},"\u002F\u002F All map methods work the same\n",{"type":39,"tag":636,"props":3459,"children":3461},{"class":638,"line":3460},25,[3462,3466,3470,3475,3480,3484,3489],{"type":39,"tag":636,"props":3463,"children":3464},{"style":739},[3465],{"type":45,"value":1353},{"type":39,"tag":636,"props":3467,"children":3468},{"style":750},[3469],{"type":45,"value":1151},{"type":39,"tag":636,"props":3471,"children":3472},{"style":1318},[3473],{"type":45,"value":3474},"setCenter",{"type":39,"tag":636,"props":3476,"children":3477},{"style":739},[3478],{"type":45,"value":3479},"([lng",{"type":39,"tag":636,"props":3481,"children":3482},{"style":750},[3483],{"type":45,"value":1392},{"type":39,"tag":636,"props":3485,"children":3486},{"style":739},[3487],{"type":45,"value":3488}," lat])",{"type":39,"tag":636,"props":3490,"children":3491},{"style":750},[3492],{"type":45,"value":768},{"type":39,"tag":636,"props":3494,"children":3496},{"class":638,"line":3495},26,[3497,3501,3505,3510,3514,3519,3523],{"type":39,"tag":636,"props":3498,"children":3499},{"style":739},[3500],{"type":45,"value":1353},{"type":39,"tag":636,"props":3502,"children":3503},{"style":750},[3504],{"type":45,"value":1151},{"type":39,"tag":636,"props":3506,"children":3507},{"style":1318},[3508],{"type":45,"value":3509},"setZoom",{"type":39,"tag":636,"props":3511,"children":3512},{"style":739},[3513],{"type":45,"value":1326},{"type":39,"tag":636,"props":3515,"children":3516},{"style":1422},[3517],{"type":45,"value":3518},"12",{"type":39,"tag":636,"props":3520,"children":3521},{"style":739},[3522],{"type":45,"value":1246},{"type":39,"tag":636,"props":3524,"children":3525},{"style":750},[3526],{"type":45,"value":768},{"type":39,"tag":636,"props":3528,"children":3530},{"class":638,"line":3529},27,[3531,3535,3539,3544,3549],{"type":39,"tag":636,"props":3532,"children":3533},{"style":739},[3534],{"type":45,"value":1353},{"type":39,"tag":636,"props":3536,"children":3537},{"style":750},[3538],{"type":45,"value":1151},{"type":39,"tag":636,"props":3540,"children":3541},{"style":1318},[3542],{"type":45,"value":3543},"fitBounds",{"type":39,"tag":636,"props":3545,"children":3546},{"style":739},[3547],{"type":45,"value":3548},"(bounds)",{"type":39,"tag":636,"props":3550,"children":3551},{"style":750},[3552],{"type":45,"value":768},{"type":39,"tag":636,"props":3554,"children":3556},{"class":638,"line":3555},28,[3557,3561,3565,3570,3574,3579,3584,3588,3593,3597,3602,3606,3611,3615,3620,3625,3629],{"type":39,"tag":636,"props":3558,"children":3559},{"style":739},[3560],{"type":45,"value":1353},{"type":39,"tag":636,"props":3562,"children":3563},{"style":750},[3564],{"type":45,"value":1151},{"type":39,"tag":636,"props":3566,"children":3567},{"style":1318},[3568],{"type":45,"value":3569},"flyTo",{"type":39,"tag":636,"props":3571,"children":3572},{"style":739},[3573],{"type":45,"value":1326},{"type":39,"tag":636,"props":3575,"children":3576},{"style":750},[3577],{"type":45,"value":3578},"{",{"type":39,"tag":636,"props":3580,"children":3581},{"style":899},[3582],{"type":45,"value":3583}," center",{"type":39,"tag":636,"props":3585,"children":3586},{"style":750},[3587],{"type":45,"value":1344},{"type":39,"tag":636,"props":3589,"children":3590},{"style":739},[3591],{"type":45,"value":3592}," [lng",{"type":39,"tag":636,"props":3594,"children":3595},{"style":750},[3596],{"type":45,"value":1392},{"type":39,"tag":636,"props":3598,"children":3599},{"style":739},[3600],{"type":45,"value":3601}," lat]",{"type":39,"tag":636,"props":3603,"children":3604},{"style":750},[3605],{"type":45,"value":1392},{"type":39,"tag":636,"props":3607,"children":3608},{"style":899},[3609],{"type":45,"value":3610}," zoom",{"type":39,"tag":636,"props":3612,"children":3613},{"style":750},[3614],{"type":45,"value":1344},{"type":39,"tag":636,"props":3616,"children":3617},{"style":1422},[3618],{"type":45,"value":3619}," 14",{"type":39,"tag":636,"props":3621,"children":3622},{"style":750},[3623],{"type":45,"value":3624}," }",{"type":39,"tag":636,"props":3626,"children":3627},{"style":739},[3628],{"type":45,"value":1246},{"type":39,"tag":636,"props":3630,"children":3631},{"style":750},[3632],{"type":45,"value":768},{"type":39,"tag":54,"props":3634,"children":3636},{"id":3635},"what-changes-summary",[3637],{"type":45,"value":3638},"What Changes: Summary",{"type":39,"tag":48,"props":3640,"children":3641},{},[3642],{"type":39,"tag":71,"props":3643,"children":3644},{},[3645],{"type":45,"value":3646},"Must change:",{"type":39,"tag":94,"props":3648,"children":3649},{},[3650,3668,3673,3686,3699],{"type":39,"tag":98,"props":3651,"children":3652},{},[3653,3655,3660,3662,3667],{"type":45,"value":3654},"Package name (",{"type":39,"tag":610,"props":3656,"children":3658},{"className":3657},[],[3659],{"type":45,"value":758},{"type":45,"value":3661}," -> ",{"type":39,"tag":610,"props":3663,"children":3665},{"className":3664},[],[3666],{"type":45,"value":833},{"type":45,"value":1246},{"type":39,"tag":98,"props":3669,"children":3670},{},[3671],{"type":45,"value":3672},"Import statements",{"type":39,"tag":98,"props":3674,"children":3675},{},[3676,3678,3684],{"type":45,"value":3677},"Add ",{"type":39,"tag":610,"props":3679,"children":3681},{"className":3680},[],[3682],{"type":45,"value":3683},"mapboxgl.accessToken",{"type":45,"value":3685}," configuration",{"type":39,"tag":98,"props":3687,"children":3688},{},[3689,3691,3697],{"type":45,"value":3690},"Style URL (switch to ",{"type":39,"tag":610,"props":3692,"children":3694},{"className":3693},[],[3695],{"type":45,"value":3696},"mapbox:\u002F\u002F",{"type":45,"value":3698}," styles)",{"type":39,"tag":98,"props":3700,"children":3701},{},[3702],{"type":45,"value":3703},"Plugin packages (if used)",{"type":39,"tag":48,"props":3705,"children":3706},{},[3707],{"type":39,"tag":71,"props":3708,"children":3709},{},[3710],{"type":45,"value":3711},"Stays exactly the same:",{"type":39,"tag":94,"props":3713,"children":3714},{},[3715,3746,3765,3770,3775,3780,3785],{"type":39,"tag":98,"props":3716,"children":3717},{},[3718,3720,3725,3727,3732,3733,3738,3739,3744],{"type":45,"value":3719},"All map methods (",{"type":39,"tag":610,"props":3721,"children":3723},{"className":3722},[],[3724],{"type":45,"value":3474},{"type":45,"value":3726},", ",{"type":39,"tag":610,"props":3728,"children":3730},{"className":3729},[],[3731],{"type":45,"value":3509},{"type":45,"value":3726},{"type":39,"tag":610,"props":3734,"children":3736},{"className":3735},[],[3737],{"type":45,"value":3543},{"type":45,"value":3726},{"type":39,"tag":610,"props":3740,"children":3742},{"className":3741},[],[3743],{"type":45,"value":3569},{"type":45,"value":3745},", etc.)",{"type":39,"tag":98,"props":3747,"children":3748},{},[3749,3751,3757,3758,3764],{"type":45,"value":3750},"All event handling (",{"type":39,"tag":610,"props":3752,"children":3754},{"className":3753},[],[3755],{"type":45,"value":3756},"map.on('click')",{"type":45,"value":3726},{"type":39,"tag":610,"props":3759,"children":3761},{"className":3760},[],[3762],{"type":45,"value":3763},"map.on('load')",{"type":45,"value":3745},{"type":39,"tag":98,"props":3766,"children":3767},{},[3768],{"type":45,"value":3769},"Marker\u002FPopup APIs (100% compatible)",{"type":39,"tag":98,"props":3771,"children":3772},{},[3773],{"type":45,"value":3774},"Layer\u002Fsource APIs (100% compatible)",{"type":39,"tag":98,"props":3776,"children":3777},{},[3778],{"type":45,"value":3779},"GeoJSON handling",{"type":39,"tag":98,"props":3781,"children":3782},{},[3783],{"type":45,"value":3784},"Custom styling and expressions",{"type":39,"tag":98,"props":3786,"children":3787},{},[3788],{"type":45,"value":3789},"Controls (Navigation, Geolocate, Scale, etc.)",{"type":39,"tag":54,"props":3791,"children":3793},{"id":3792},"common-migration-issues",[3794],{"type":45,"value":3795},"Common Migration Issues",{"type":39,"tag":61,"props":3797,"children":3799},{"id":3798},"issue-1-token-not-set",[3800],{"type":45,"value":3801},"Issue 1: Token Not Set",{"type":39,"tag":48,"props":3803,"children":3804},{},[3805],{"type":39,"tag":71,"props":3806,"children":3807},{},[3808],{"type":45,"value":3809},"Problem:",{"type":39,"tag":625,"props":3811,"children":3813},{"className":713,"code":3812,"language":715,"meta":630,"style":630},"\u002F\u002F Error: \"A valid Mapbox access token is required to use Mapbox GL\"\nconst map = new mapboxgl.Map({...});\n",[3814],{"type":39,"tag":610,"props":3815,"children":3816},{"__ignoreMap":630},[3817,3825],{"type":39,"tag":636,"props":3818,"children":3819},{"class":638,"line":639},[3820],{"type":39,"tag":636,"props":3821,"children":3822},{"style":643},[3823],{"type":45,"value":3824},"\u002F\u002F Error: \"A valid Mapbox access token is required to use Mapbox GL\"\n",{"type":39,"tag":636,"props":3826,"children":3827},{"class":638,"line":649},[3828,3832,3836,3840,3844,3848,3852,3856,3860,3865,3869],{"type":39,"tag":636,"props":3829,"children":3830},{"style":905},[3831],{"type":45,"value":1292},{"type":39,"tag":636,"props":3833,"children":3834},{"style":739},[3835],{"type":45,"value":1297},{"type":39,"tag":636,"props":3837,"children":3838},{"style":750},[3839],{"type":45,"value":913},{"type":39,"tag":636,"props":3841,"children":3842},{"style":750},[3843],{"type":45,"value":1306},{"type":39,"tag":636,"props":3845,"children":3846},{"style":739},[3847],{"type":45,"value":1560},{"type":39,"tag":636,"props":3849,"children":3850},{"style":750},[3851],{"type":45,"value":1151},{"type":39,"tag":636,"props":3853,"children":3854},{"style":1318},[3855],{"type":45,"value":1321},{"type":39,"tag":636,"props":3857,"children":3858},{"style":739},[3859],{"type":45,"value":1326},{"type":39,"tag":636,"props":3861,"children":3862},{"style":750},[3863],{"type":45,"value":3864},"{...}",{"type":39,"tag":636,"props":3866,"children":3867},{"style":739},[3868],{"type":45,"value":1246},{"type":39,"tag":636,"props":3870,"children":3871},{"style":750},[3872],{"type":45,"value":768},{"type":39,"tag":48,"props":3874,"children":3875},{},[3876],{"type":39,"tag":71,"props":3877,"children":3878},{},[3879],{"type":45,"value":3880},"Solution:",{"type":39,"tag":625,"props":3882,"children":3884},{"className":713,"code":3883,"language":715,"meta":630,"style":630},"\u002F\u002F Set token BEFORE creating map\nmapboxgl.accessToken = 'pk.your_token';\nconst map = new mapboxgl.Map({...});\n",[3885],{"type":39,"tag":610,"props":3886,"children":3887},{"__ignoreMap":630},[3888,3896,3932],{"type":39,"tag":636,"props":3889,"children":3890},{"class":638,"line":639},[3891],{"type":39,"tag":636,"props":3892,"children":3893},{"style":643},[3894],{"type":45,"value":3895},"\u002F\u002F Set token BEFORE creating map\n",{"type":39,"tag":636,"props":3897,"children":3898},{"class":638,"line":649},[3899,3903,3907,3911,3915,3919,3924,3928],{"type":39,"tag":636,"props":3900,"children":3901},{"style":739},[3902],{"type":45,"value":1146},{"type":39,"tag":636,"props":3904,"children":3905},{"style":750},[3906],{"type":45,"value":1151},{"type":39,"tag":636,"props":3908,"children":3909},{"style":739},[3910],{"type":45,"value":1156},{"type":39,"tag":636,"props":3912,"children":3913},{"style":750},[3914],{"type":45,"value":913},{"type":39,"tag":636,"props":3916,"children":3917},{"style":750},[3918],{"type":45,"value":753},{"type":39,"tag":636,"props":3920,"children":3921},{"style":659},[3922],{"type":45,"value":3923},"pk.your_token",{"type":39,"tag":636,"props":3925,"children":3926},{"style":750},[3927],{"type":45,"value":763},{"type":39,"tag":636,"props":3929,"children":3930},{"style":750},[3931],{"type":45,"value":768},{"type":39,"tag":636,"props":3933,"children":3934},{"class":638,"line":670},[3935,3939,3943,3947,3951,3955,3959,3963,3967,3971,3975],{"type":39,"tag":636,"props":3936,"children":3937},{"style":905},[3938],{"type":45,"value":1292},{"type":39,"tag":636,"props":3940,"children":3941},{"style":739},[3942],{"type":45,"value":1297},{"type":39,"tag":636,"props":3944,"children":3945},{"style":750},[3946],{"type":45,"value":913},{"type":39,"tag":636,"props":3948,"children":3949},{"style":750},[3950],{"type":45,"value":1306},{"type":39,"tag":636,"props":3952,"children":3953},{"style":739},[3954],{"type":45,"value":1560},{"type":39,"tag":636,"props":3956,"children":3957},{"style":750},[3958],{"type":45,"value":1151},{"type":39,"tag":636,"props":3960,"children":3961},{"style":1318},[3962],{"type":45,"value":1321},{"type":39,"tag":636,"props":3964,"children":3965},{"style":739},[3966],{"type":45,"value":1326},{"type":39,"tag":636,"props":3968,"children":3969},{"style":750},[3970],{"type":45,"value":3864},{"type":39,"tag":636,"props":3972,"children":3973},{"style":739},[3974],{"type":45,"value":1246},{"type":39,"tag":636,"props":3976,"children":3977},{"style":750},[3978],{"type":45,"value":768},{"type":39,"tag":61,"props":3980,"children":3982},{"id":3981},"issue-2-token-in-git",[3983],{"type":45,"value":3984},"Issue 2: Token in Git",{"type":39,"tag":48,"props":3986,"children":3987},{},[3988],{"type":39,"tag":71,"props":3989,"children":3990},{},[3991],{"type":45,"value":3809},{"type":39,"tag":625,"props":3993,"children":3995},{"className":713,"code":3994,"language":715,"meta":630,"style":630},"\u002F\u002F Token hardcoded in source\nmapboxgl.accessToken = 'pk.eyJ1Ijoi...';\n",[3996],{"type":39,"tag":610,"props":3997,"children":3998},{"__ignoreMap":630},[3999,4007],{"type":39,"tag":636,"props":4000,"children":4001},{"class":638,"line":639},[4002],{"type":39,"tag":636,"props":4003,"children":4004},{"style":643},[4005],{"type":45,"value":4006},"\u002F\u002F Token hardcoded in source\n",{"type":39,"tag":636,"props":4008,"children":4009},{"class":638,"line":649},[4010,4014,4018,4022,4026,4030,4035,4039],{"type":39,"tag":636,"props":4011,"children":4012},{"style":739},[4013],{"type":45,"value":1146},{"type":39,"tag":636,"props":4015,"children":4016},{"style":750},[4017],{"type":45,"value":1151},{"type":39,"tag":636,"props":4019,"children":4020},{"style":739},[4021],{"type":45,"value":1156},{"type":39,"tag":636,"props":4023,"children":4024},{"style":750},[4025],{"type":45,"value":913},{"type":39,"tag":636,"props":4027,"children":4028},{"style":750},[4029],{"type":45,"value":753},{"type":39,"tag":636,"props":4031,"children":4032},{"style":659},[4033],{"type":45,"value":4034},"pk.eyJ1Ijoi...",{"type":39,"tag":636,"props":4036,"children":4037},{"style":750},[4038],{"type":45,"value":763},{"type":39,"tag":636,"props":4040,"children":4041},{"style":750},[4042],{"type":45,"value":768},{"type":39,"tag":48,"props":4044,"children":4045},{},[4046],{"type":39,"tag":71,"props":4047,"children":4048},{},[4049],{"type":45,"value":3880},{"type":39,"tag":625,"props":4051,"children":4053},{"className":713,"code":4052,"language":715,"meta":630,"style":630},"\u002F\u002F Use environment variables\nmapboxgl.accessToken = process.env.VITE_MAPBOX_TOKEN;\n\n\u002F\u002F Add to .env file (not committed to git)\nVITE_MAPBOX_TOKEN=pk.your_token\n\n\u002F\u002F Add .env to .gitignore\necho \".env\" >> .gitignore\n",[4054],{"type":39,"tag":610,"props":4055,"children":4056},{"__ignoreMap":630},[4057,4065,4111,4118,4126,4151,4158,4166],{"type":39,"tag":636,"props":4058,"children":4059},{"class":638,"line":639},[4060],{"type":39,"tag":636,"props":4061,"children":4062},{"style":643},[4063],{"type":45,"value":4064},"\u002F\u002F Use environment variables\n",{"type":39,"tag":636,"props":4066,"children":4067},{"class":638,"line":649},[4068,4072,4076,4080,4084,4089,4093,4098,4102,4107],{"type":39,"tag":636,"props":4069,"children":4070},{"style":739},[4071],{"type":45,"value":1146},{"type":39,"tag":636,"props":4073,"children":4074},{"style":750},[4075],{"type":45,"value":1151},{"type":39,"tag":636,"props":4077,"children":4078},{"style":739},[4079],{"type":45,"value":1156},{"type":39,"tag":636,"props":4081,"children":4082},{"style":750},[4083],{"type":45,"value":913},{"type":39,"tag":636,"props":4085,"children":4086},{"style":739},[4087],{"type":45,"value":4088}," process",{"type":39,"tag":636,"props":4090,"children":4091},{"style":750},[4092],{"type":45,"value":1151},{"type":39,"tag":636,"props":4094,"children":4095},{"style":739},[4096],{"type":45,"value":4097},"env",{"type":39,"tag":636,"props":4099,"children":4100},{"style":750},[4101],{"type":45,"value":1151},{"type":39,"tag":636,"props":4103,"children":4104},{"style":739},[4105],{"type":45,"value":4106},"VITE_MAPBOX_TOKEN",{"type":39,"tag":636,"props":4108,"children":4109},{"style":750},[4110],{"type":45,"value":768},{"type":39,"tag":636,"props":4112,"children":4113},{"class":638,"line":670},[4114],{"type":39,"tag":636,"props":4115,"children":4116},{"emptyLinePlaceholder":674},[4117],{"type":45,"value":677},{"type":39,"tag":636,"props":4119,"children":4120},{"class":638,"line":680},[4121],{"type":39,"tag":636,"props":4122,"children":4123},{"style":643},[4124],{"type":45,"value":4125},"\u002F\u002F Add to .env file (not committed to git)\n",{"type":39,"tag":636,"props":4127,"children":4128},{"class":638,"line":689},[4129,4133,4137,4142,4146],{"type":39,"tag":636,"props":4130,"children":4131},{"style":739},[4132],{"type":45,"value":4106},{"type":39,"tag":636,"props":4134,"children":4135},{"style":750},[4136],{"type":45,"value":913},{"type":39,"tag":636,"props":4138,"children":4139},{"style":739},[4140],{"type":45,"value":4141},"pk",{"type":39,"tag":636,"props":4143,"children":4144},{"style":750},[4145],{"type":45,"value":1151},{"type":39,"tag":636,"props":4147,"children":4148},{"style":739},[4149],{"type":45,"value":4150},"your_token\n",{"type":39,"tag":636,"props":4152,"children":4153},{"class":638,"line":810},[4154],{"type":39,"tag":636,"props":4155,"children":4156},{"emptyLinePlaceholder":674},[4157],{"type":45,"value":677},{"type":39,"tag":636,"props":4159,"children":4160},{"class":638,"line":844},[4161],{"type":39,"tag":636,"props":4162,"children":4163},{"style":643},[4164],{"type":45,"value":4165},"\u002F\u002F Add .env to .gitignore\n",{"type":39,"tag":636,"props":4167,"children":4168},{"class":638,"line":1479},[4169,4174,4178,4182,4186,4191,4196],{"type":39,"tag":636,"props":4170,"children":4171},{"style":739},[4172],{"type":45,"value":4173},"echo ",{"type":39,"tag":636,"props":4175,"children":4176},{"style":750},[4177],{"type":45,"value":918},{"type":39,"tag":636,"props":4179,"children":4180},{"style":659},[4181],{"type":45,"value":1236},{"type":39,"tag":636,"props":4183,"children":4184},{"style":750},[4185],{"type":45,"value":918},{"type":39,"tag":636,"props":4187,"children":4188},{"style":750},[4189],{"type":45,"value":4190}," >>",{"type":39,"tag":636,"props":4192,"children":4193},{"style":750},[4194],{"type":45,"value":4195}," .",{"type":39,"tag":636,"props":4197,"children":4198},{"style":739},[4199],{"type":45,"value":4200},"gitignore\n",{"type":39,"tag":61,"props":4202,"children":4204},{"id":4203},"issue-3-wrong-style-url-format",[4205],{"type":45,"value":4206},"Issue 3: Wrong Style URL Format",{"type":39,"tag":48,"props":4208,"children":4209},{},[4210],{"type":39,"tag":71,"props":4211,"children":4212},{},[4213],{"type":45,"value":3809},{"type":39,"tag":625,"props":4215,"children":4217},{"className":713,"code":4216,"language":715,"meta":630,"style":630},"\u002F\u002F MapLibre-style URL won't work optimally\nstyle: 'https:\u002F\u002Fdemotiles.maplibre.org\u002Fstyle.json';\n",[4218],{"type":39,"tag":610,"props":4219,"children":4220},{"__ignoreMap":630},[4221,4229],{"type":39,"tag":636,"props":4222,"children":4223},{"class":638,"line":639},[4224],{"type":39,"tag":636,"props":4225,"children":4226},{"style":643},[4227],{"type":45,"value":4228},"\u002F\u002F MapLibre-style URL won't work optimally\n",{"type":39,"tag":636,"props":4230,"children":4231},{"class":638,"line":649},[4232,4236,4240,4244,4248,4252],{"type":39,"tag":636,"props":4233,"children":4234},{"style":653},[4235],{"type":45,"value":1744},{"type":39,"tag":636,"props":4237,"children":4238},{"style":750},[4239],{"type":45,"value":1344},{"type":39,"tag":636,"props":4241,"children":4242},{"style":750},[4243],{"type":45,"value":753},{"type":39,"tag":636,"props":4245,"children":4246},{"style":659},[4247],{"type":45,"value":1383},{"type":39,"tag":636,"props":4249,"children":4250},{"style":750},[4251],{"type":45,"value":763},{"type":39,"tag":636,"props":4253,"children":4254},{"style":750},[4255],{"type":45,"value":768},{"type":39,"tag":48,"props":4257,"children":4258},{},[4259],{"type":39,"tag":71,"props":4260,"children":4261},{},[4262],{"type":45,"value":3880},{"type":39,"tag":625,"props":4264,"children":4266},{"className":713,"code":4265,"language":715,"meta":630,"style":630},"\u002F\u002F Use Mapbox style URL for better performance and features\nstyle: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstreets-v12';\n",[4267],{"type":39,"tag":610,"props":4268,"children":4269},{"__ignoreMap":630},[4270,4278],{"type":39,"tag":636,"props":4271,"children":4272},{"class":638,"line":639},[4273],{"type":39,"tag":636,"props":4274,"children":4275},{"style":643},[4276],{"type":45,"value":4277},"\u002F\u002F Use Mapbox style URL for better performance and features\n",{"type":39,"tag":636,"props":4279,"children":4280},{"class":638,"line":649},[4281,4285,4289,4293,4297,4301],{"type":39,"tag":636,"props":4282,"children":4283},{"style":653},[4284],{"type":45,"value":1744},{"type":39,"tag":636,"props":4286,"children":4287},{"style":750},[4288],{"type":45,"value":1344},{"type":39,"tag":636,"props":4290,"children":4291},{"style":750},[4292],{"type":45,"value":753},{"type":39,"tag":636,"props":4294,"children":4295},{"style":659},[4296],{"type":45,"value":1823},{"type":39,"tag":636,"props":4298,"children":4299},{"style":750},[4300],{"type":45,"value":763},{"type":39,"tag":636,"props":4302,"children":4303},{"style":750},[4304],{"type":45,"value":768},{"type":39,"tag":61,"props":4306,"children":4308},{"id":4307},"issue-4-plugin-compatibility",[4309],{"type":45,"value":4310},"Issue 4: Plugin Compatibility",{"type":39,"tag":48,"props":4312,"children":4313},{},[4314],{"type":39,"tag":71,"props":4315,"children":4316},{},[4317],{"type":45,"value":3809},{"type":39,"tag":625,"props":4319,"children":4321},{"className":713,"code":4320,"language":715,"meta":630,"style":630},"\u002F\u002F MapLibre plugin won't work\nimport MaplibreGeocoder from '@maplibre\u002Fmaplibre-gl-geocoder';\n",[4322],{"type":39,"tag":610,"props":4323,"children":4324},{"__ignoreMap":630},[4325,4333],{"type":39,"tag":636,"props":4326,"children":4327},{"class":638,"line":639},[4328],{"type":39,"tag":636,"props":4329,"children":4330},{"style":643},[4331],{"type":45,"value":4332},"\u002F\u002F MapLibre plugin won't work\n",{"type":39,"tag":636,"props":4334,"children":4335},{"class":638,"line":649},[4336,4340,4344,4348,4352,4356,4360],{"type":39,"tag":636,"props":4337,"children":4338},{"style":733},[4339],{"type":45,"value":736},{"type":39,"tag":636,"props":4341,"children":4342},{"style":739},[4343],{"type":45,"value":2666},{"type":39,"tag":636,"props":4345,"children":4346},{"style":733},[4347],{"type":45,"value":747},{"type":39,"tag":636,"props":4349,"children":4350},{"style":750},[4351],{"type":45,"value":753},{"type":39,"tag":636,"props":4353,"children":4354},{"style":659},[4355],{"type":45,"value":2584},{"type":39,"tag":636,"props":4357,"children":4358},{"style":750},[4359],{"type":45,"value":763},{"type":39,"tag":636,"props":4361,"children":4362},{"style":750},[4363],{"type":45,"value":768},{"type":39,"tag":48,"props":4365,"children":4366},{},[4367],{"type":39,"tag":71,"props":4368,"children":4369},{},[4370],{"type":45,"value":3880},{"type":39,"tag":625,"props":4372,"children":4374},{"className":713,"code":4373,"language":715,"meta":630,"style":630},"\u002F\u002F Use Mapbox plugin\nimport MapboxGeocoder from '@mapbox\u002Fmapbox-gl-geocoder';\n",[4375],{"type":39,"tag":610,"props":4376,"children":4377},{"__ignoreMap":630},[4378,4386],{"type":39,"tag":636,"props":4379,"children":4380},{"class":638,"line":639},[4381],{"type":39,"tag":636,"props":4382,"children":4383},{"style":643},[4384],{"type":45,"value":4385},"\u002F\u002F Use Mapbox plugin\n",{"type":39,"tag":636,"props":4387,"children":4388},{"class":638,"line":649},[4389,4393,4397,4401,4405,4409,4413],{"type":39,"tag":636,"props":4390,"children":4391},{"style":733},[4392],{"type":45,"value":736},{"type":39,"tag":636,"props":4394,"children":4395},{"style":739},[4396],{"type":45,"value":2712},{"type":39,"tag":636,"props":4398,"children":4399},{"style":733},[4400],{"type":45,"value":747},{"type":39,"tag":636,"props":4402,"children":4403},{"style":750},[4404],{"type":45,"value":753},{"type":39,"tag":636,"props":4406,"children":4407},{"style":659},[4408],{"type":45,"value":2593},{"type":39,"tag":636,"props":4410,"children":4411},{"style":750},[4412],{"type":45,"value":763},{"type":39,"tag":636,"props":4414,"children":4415},{"style":750},[4416],{"type":45,"value":768},{"type":39,"tag":4418,"props":4419,"children":4420},"blockquote",{},[4421],{"type":39,"tag":48,"props":4422,"children":4423},{},[4424,4429,4431,4437,4438,4444],{"type":39,"tag":71,"props":4425,"children":4426},{},[4427],{"type":45,"value":4428},"Important:",{"type":45,"value":4430}," This applies to ALL MapLibre plugins, not just the geocoder. Any ",{"type":39,"tag":610,"props":4432,"children":4434},{"className":4433},[],[4435],{"type":45,"value":4436},"@maplibre\u002F*",{"type":45,"value":1201},{"type":39,"tag":610,"props":4439,"children":4441},{"className":4440},[],[4442],{"type":45,"value":4443},"maplibre-gl-*",{"type":45,"value":4445}," plugin must be replaced with its Mapbox equivalent. Check the Mapbox ecosystem for Mapbox-specific versions of every plugin you use (see Step 8 above for the full mapping table).",{"type":39,"tag":61,"props":4447,"children":4449},{"id":4448},"issue-5-cdn-urls",[4450],{"type":45,"value":4451},"Issue 5: CDN URLs",{"type":39,"tag":48,"props":4453,"children":4454},{},[4455],{"type":39,"tag":71,"props":4456,"children":4457},{},[4458],{"type":45,"value":3809},{"type":39,"tag":625,"props":4460,"children":4462},{"className":713,"code":4461,"language":715,"meta":630,"style":630},"\u002F\u002F Wrong CDN\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fmaplibre-gl@3.0.0\u002Fdist\u002Fmaplibre-gl.js\">\u003C\u002Fscript>\n",[4463],{"type":39,"tag":610,"props":4464,"children":4465},{"__ignoreMap":630},[4466,4474],{"type":39,"tag":636,"props":4467,"children":4468},{"class":638,"line":639},[4469],{"type":39,"tag":636,"props":4470,"children":4471},{"style":643},[4472],{"type":45,"value":4473},"\u002F\u002F Wrong CDN\n",{"type":39,"tag":636,"props":4475,"children":4476},{"class":638,"line":649},[4477,4481,4485,4489,4493,4497,4501,4505,4509,4513],{"type":39,"tag":636,"props":4478,"children":4479},{"style":750},[4480],{"type":45,"value":896},{"type":39,"tag":636,"props":4482,"children":4483},{"style":899},[4484],{"type":45,"value":902},{"type":39,"tag":636,"props":4486,"children":4487},{"style":905},[4488],{"type":45,"value":908},{"type":39,"tag":636,"props":4490,"children":4491},{"style":750},[4492],{"type":45,"value":913},{"type":39,"tag":636,"props":4494,"children":4495},{"style":750},[4496],{"type":45,"value":918},{"type":39,"tag":636,"props":4498,"children":4499},{"style":659},[4500],{"type":45,"value":923},{"type":39,"tag":636,"props":4502,"children":4503},{"style":750},[4504],{"type":45,"value":918},{"type":39,"tag":636,"props":4506,"children":4507},{"style":750},[4508],{"type":45,"value":932},{"type":39,"tag":636,"props":4510,"children":4511},{"style":899},[4512],{"type":45,"value":902},{"type":39,"tag":636,"props":4514,"children":4515},{"style":750},[4516],{"type":45,"value":941},{"type":39,"tag":48,"props":4518,"children":4519},{},[4520],{"type":39,"tag":71,"props":4521,"children":4522},{},[4523],{"type":45,"value":3880},{"type":39,"tag":625,"props":4525,"children":4527},{"className":713,"code":4526,"language":715,"meta":630,"style":630},"\u002F\u002F Use Mapbox CDN\n\u003Cscript src='https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.0.0\u002Fmapbox-gl.js'>\u003C\u002Fscript>\n\u003Clink href='https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.0.0\u002Fmapbox-gl.css' rel='stylesheet' \u002F>\n",[4528],{"type":39,"tag":610,"props":4529,"children":4530},{"__ignoreMap":630},[4531,4539,4582],{"type":39,"tag":636,"props":4532,"children":4533},{"class":638,"line":639},[4534],{"type":39,"tag":636,"props":4535,"children":4536},{"style":643},[4537],{"type":45,"value":4538},"\u002F\u002F Use Mapbox CDN\n",{"type":39,"tag":636,"props":4540,"children":4541},{"class":638,"line":649},[4542,4546,4550,4554,4558,4562,4566,4570,4574,4578],{"type":39,"tag":636,"props":4543,"children":4544},{"style":750},[4545],{"type":45,"value":896},{"type":39,"tag":636,"props":4547,"children":4548},{"style":899},[4549],{"type":45,"value":902},{"type":39,"tag":636,"props":4551,"children":4552},{"style":905},[4553],{"type":45,"value":908},{"type":39,"tag":636,"props":4555,"children":4556},{"style":750},[4557],{"type":45,"value":913},{"type":39,"tag":636,"props":4559,"children":4560},{"style":750},[4561],{"type":45,"value":763},{"type":39,"tag":636,"props":4563,"children":4564},{"style":659},[4565],{"type":45,"value":1045},{"type":39,"tag":636,"props":4567,"children":4568},{"style":750},[4569],{"type":45,"value":763},{"type":39,"tag":636,"props":4571,"children":4572},{"style":750},[4573],{"type":45,"value":932},{"type":39,"tag":636,"props":4575,"children":4576},{"style":899},[4577],{"type":45,"value":902},{"type":39,"tag":636,"props":4579,"children":4580},{"style":750},[4581],{"type":45,"value":941},{"type":39,"tag":636,"props":4583,"children":4584},{"class":638,"line":670},[4585,4589,4593,4597,4601,4605,4609,4613,4617,4621,4625,4629,4633],{"type":39,"tag":636,"props":4586,"children":4587},{"style":750},[4588],{"type":45,"value":896},{"type":39,"tag":636,"props":4590,"children":4591},{"style":899},[4592],{"type":45,"value":953},{"type":39,"tag":636,"props":4594,"children":4595},{"style":905},[4596],{"type":45,"value":958},{"type":39,"tag":636,"props":4598,"children":4599},{"style":750},[4600],{"type":45,"value":913},{"type":39,"tag":636,"props":4602,"children":4603},{"style":750},[4604],{"type":45,"value":763},{"type":39,"tag":636,"props":4606,"children":4607},{"style":659},[4608],{"type":45,"value":1089},{"type":39,"tag":636,"props":4610,"children":4611},{"style":750},[4612],{"type":45,"value":763},{"type":39,"tag":636,"props":4614,"children":4615},{"style":905},[4616],{"type":45,"value":980},{"type":39,"tag":636,"props":4618,"children":4619},{"style":750},[4620],{"type":45,"value":913},{"type":39,"tag":636,"props":4622,"children":4623},{"style":750},[4624],{"type":45,"value":763},{"type":39,"tag":636,"props":4626,"children":4627},{"style":659},[4628],{"type":45,"value":993},{"type":39,"tag":636,"props":4630,"children":4631},{"style":750},[4632],{"type":45,"value":763},{"type":39,"tag":636,"props":4634,"children":4635},{"style":750},[4636],{"type":45,"value":1002},{"type":39,"tag":54,"props":4638,"children":4640},{"id":4639},"migration-checklist",[4641],{"type":45,"value":4642},"Migration Checklist",{"type":39,"tag":94,"props":4644,"children":4647},{"className":4645},[4646],"contains-task-list",[4648,4667,4690,4715,4742,4763,4783,4803,4832,4847,4862,4877,4892,4907],{"type":39,"tag":98,"props":4649,"children":4652},{"className":4650},[4651],"task-list-item",[4653,4658,4660,4665],{"type":39,"tag":4654,"props":4655,"children":4657},"input",{"disabled":674,"type":4656},"checkbox",[],{"type":45,"value":4659}," ",{"type":39,"tag":71,"props":4661,"children":4662},{},[4663],{"type":45,"value":4664},"Create Mapbox account",{"type":45,"value":4666}," and get access token",{"type":39,"tag":98,"props":4668,"children":4670},{"className":4669},[4651],[4671,4674,4675,4680,4682,4688],{"type":39,"tag":4654,"props":4672,"children":4673},{"disabled":674,"type":4656},[],{"type":45,"value":4659},{"type":39,"tag":71,"props":4676,"children":4677},{},[4678],{"type":45,"value":4679},"Update package",{"type":45,"value":4681},": ",{"type":39,"tag":610,"props":4683,"children":4685},{"className":4684},[],[4686],{"type":45,"value":4687},"npm install mapbox-gl",{"type":45,"value":4689}," (remove maplibre-gl)",{"type":39,"tag":98,"props":4691,"children":4693},{"className":4692},[4651],[4694,4697,4698,4703,4704,4709,4710],{"type":39,"tag":4654,"props":4695,"children":4696},{"disabled":674,"type":4656},[],{"type":45,"value":4659},{"type":39,"tag":71,"props":4699,"children":4700},{},[4701],{"type":45,"value":4702},"Update imports",{"type":45,"value":4681},{"type":39,"tag":610,"props":4705,"children":4707},{"className":4706},[],[4708],{"type":45,"value":758},{"type":45,"value":3661},{"type":39,"tag":610,"props":4711,"children":4713},{"className":4712},[],[4714],{"type":45,"value":833},{"type":39,"tag":98,"props":4716,"children":4718},{"className":4717},[4651],[4719,4722,4723,4728,4729,4735,4736],{"type":39,"tag":4654,"props":4720,"children":4721},{"disabled":674,"type":4656},[],{"type":45,"value":4659},{"type":39,"tag":71,"props":4724,"children":4725},{},[4726],{"type":45,"value":4727},"Update CSS imports",{"type":45,"value":4681},{"type":39,"tag":610,"props":4730,"children":4732},{"className":4731},[],[4733],{"type":45,"value":4734},"maplibre-gl.css",{"type":45,"value":3661},{"type":39,"tag":610,"props":4737,"children":4739},{"className":4738},[],[4740],{"type":45,"value":4741},"mapbox-gl.css",{"type":39,"tag":98,"props":4743,"children":4745},{"className":4744},[4651],[4746,4749,4750,4755,4757],{"type":39,"tag":4654,"props":4747,"children":4748},{"disabled":674,"type":4656},[],{"type":45,"value":4659},{"type":39,"tag":71,"props":4751,"children":4752},{},[4753],{"type":45,"value":4754},"Add token",{"type":45,"value":4756},": Set ",{"type":39,"tag":610,"props":4758,"children":4760},{"className":4759},[],[4761],{"type":45,"value":4762},"mapboxgl.accessToken = 'pk.xxx'",{"type":39,"tag":98,"props":4764,"children":4766},{"className":4765},[4651],[4767,4770,4771,4776,4778],{"type":39,"tag":4654,"props":4768,"children":4769},{"disabled":674,"type":4656},[],{"type":45,"value":4659},{"type":39,"tag":71,"props":4772,"children":4773},{},[4774],{"type":45,"value":4775},"Use environment variables",{"type":45,"value":4777},": Store token in ",{"type":39,"tag":610,"props":4779,"children":4781},{"className":4780},[],[4782],{"type":45,"value":1236},{"type":39,"tag":98,"props":4784,"children":4786},{"className":4785},[4651],[4787,4790,4791,4796,4798],{"type":39,"tag":4654,"props":4788,"children":4789},{"disabled":674,"type":4656},[],{"type":45,"value":4659},{"type":39,"tag":71,"props":4792,"children":4793},{},[4794],{"type":45,"value":4795},"Update style URL",{"type":45,"value":4797},": Change to ",{"type":39,"tag":610,"props":4799,"children":4801},{"className":4800},[],[4802],{"type":45,"value":1823},{"type":39,"tag":98,"props":4804,"children":4806},{"className":4805},[4651],[4807,4810,4811,4816,4818,4824,4826],{"type":39,"tag":4654,"props":4808,"children":4809},{"disabled":674,"type":4656},[],{"type":45,"value":4659},{"type":39,"tag":71,"props":4812,"children":4813},{},[4814],{"type":45,"value":4815},"Update all references",{"type":45,"value":4817},": Replace ",{"type":39,"tag":610,"props":4819,"children":4821},{"className":4820},[],[4822],{"type":45,"value":4823},"maplibregl.",{"type":45,"value":4825}," with ",{"type":39,"tag":610,"props":4827,"children":4829},{"className":4828},[],[4830],{"type":45,"value":4831},"mapboxgl.",{"type":39,"tag":98,"props":4833,"children":4835},{"className":4834},[4651],[4836,4839,4840,4845],{"type":39,"tag":4654,"props":4837,"children":4838},{"disabled":674,"type":4656},[],{"type":45,"value":4659},{"type":39,"tag":71,"props":4841,"children":4842},{},[4843],{"type":45,"value":4844},"Update plugins",{"type":45,"value":4846},": Install Mapbox versions of plugins (if used)",{"type":39,"tag":98,"props":4848,"children":4850},{"className":4849},[4651],[4851,4854,4855,4860],{"type":39,"tag":4654,"props":4852,"children":4853},{"disabled":674,"type":4656},[],{"type":45,"value":4659},{"type":39,"tag":71,"props":4856,"children":4857},{},[4858],{"type":45,"value":4859},"Configure token security",{"type":45,"value":4861},": Add URL restrictions in dashboard",{"type":39,"tag":98,"props":4863,"children":4865},{"className":4864},[4651],[4866,4869,4870,4875],{"type":39,"tag":4654,"props":4867,"children":4868},{"disabled":674,"type":4656},[],{"type":45,"value":4659},{"type":39,"tag":71,"props":4871,"children":4872},{},[4873],{"type":45,"value":4874},"Test all functionality",{"type":45,"value":4876},": Verify map loads, interactions work",{"type":39,"tag":98,"props":4878,"children":4880},{"className":4879},[4651],[4881,4884,4885,4890],{"type":39,"tag":4654,"props":4882,"children":4883},{"disabled":674,"type":4656},[],{"type":45,"value":4659},{"type":39,"tag":71,"props":4886,"children":4887},{},[4888],{"type":45,"value":4889},"Set up billing alerts",{"type":45,"value":4891},": Monitor usage in Mapbox dashboard",{"type":39,"tag":98,"props":4893,"children":4895},{"className":4894},[4651],[4896,4899,4900,4905],{"type":39,"tag":4654,"props":4897,"children":4898},{"disabled":674,"type":4656},[],{"type":45,"value":4659},{"type":39,"tag":71,"props":4901,"children":4902},{},[4903],{"type":45,"value":4904},"Update documentation",{"type":45,"value":4906},": Document token setup for team",{"type":39,"tag":98,"props":4908,"children":4910},{"className":4909},[4651],[4911,4914,4915,4920],{"type":39,"tag":4654,"props":4912,"children":4913},{"disabled":674,"type":4656},[],{"type":45,"value":4659},{"type":39,"tag":71,"props":4916,"children":4917},{},[4918],{"type":45,"value":4919},"Add .env to .gitignore",{"type":45,"value":4921},": Ensure tokens not committed",{"type":39,"tag":54,"props":4923,"children":4925},{"id":4924},"quick-reference",[4926],{"type":45,"value":4927},"Quick Reference",{"type":39,"tag":61,"props":4929,"children":4931},{"id":4930},"key-differences-summary",[4932],{"type":45,"value":4933},"Key Differences Summary",{"type":39,"tag":281,"props":4935,"children":4936},{},[4937,4957],{"type":39,"tag":285,"props":4938,"children":4939},{},[4940],{"type":39,"tag":289,"props":4941,"children":4942},{},[4943,4948,4953],{"type":39,"tag":293,"props":4944,"children":4945},{},[4946],{"type":45,"value":4947},"What",{"type":39,"tag":293,"props":4949,"children":4950},{},[4951],{"type":45,"value":4952},"MapLibre",{"type":39,"tag":293,"props":4954,"children":4955},{},[4956],{"type":45,"value":9},{"type":39,"tag":308,"props":4958,"children":4959},{},[4960,4984,5010,5032,5053,5069,5085,5102,5119],{"type":39,"tag":289,"props":4961,"children":4962},{},[4963,4968,4976],{"type":39,"tag":315,"props":4964,"children":4965},{},[4966],{"type":45,"value":4967},"Package",{"type":39,"tag":315,"props":4969,"children":4970},{},[4971],{"type":39,"tag":610,"props":4972,"children":4974},{"className":4973},[],[4975],{"type":45,"value":758},{"type":39,"tag":315,"props":4977,"children":4978},{},[4979],{"type":39,"tag":610,"props":4980,"children":4982},{"className":4981},[],[4983],{"type":45,"value":833},{"type":39,"tag":289,"props":4985,"children":4986},{},[4987,4992,5001],{"type":39,"tag":315,"props":4988,"children":4989},{},[4990],{"type":45,"value":4991},"Import",{"type":39,"tag":315,"props":4993,"children":4994},{},[4995],{"type":39,"tag":610,"props":4996,"children":4998},{"className":4997},[],[4999],{"type":45,"value":5000},"import maplibregl from 'maplibre-gl'",{"type":39,"tag":315,"props":5002,"children":5003},{},[5004],{"type":39,"tag":610,"props":5005,"children":5007},{"className":5006},[],[5008],{"type":45,"value":5009},"import mapboxgl from 'mapbox-gl'",{"type":39,"tag":289,"props":5011,"children":5012},{},[5013,5017,5022],{"type":39,"tag":315,"props":5014,"children":5015},{},[5016],{"type":45,"value":406},{"type":39,"tag":315,"props":5018,"children":5019},{},[5020],{"type":45,"value":5021},"Optional (depends on tiles)",{"type":39,"tag":315,"props":5023,"children":5024},{},[5025,5027],{"type":45,"value":5026},"Required: ",{"type":39,"tag":610,"props":5028,"children":5030},{"className":5029},[],[5031],{"type":45,"value":4762},{"type":39,"tag":289,"props":5033,"children":5034},{},[5035,5040,5045],{"type":39,"tag":315,"props":5036,"children":5037},{},[5038],{"type":45,"value":5039},"Style",{"type":39,"tag":315,"props":5041,"children":5042},{},[5043],{"type":45,"value":5044},"Custom URL or OSM tiles",{"type":39,"tag":315,"props":5046,"children":5047},{},[5048],{"type":39,"tag":610,"props":5049,"children":5051},{"className":5050},[],[5052],{"type":45,"value":1823},{"type":39,"tag":289,"props":5054,"children":5055},{},[5056,5060,5065],{"type":39,"tag":315,"props":5057,"children":5058},{},[5059],{"type":45,"value":322},{"type":39,"tag":315,"props":5061,"children":5062},{},[5063],{"type":45,"value":5064},"BSD (Open Source)",{"type":39,"tag":315,"props":5066,"children":5067},{},[5068],{"type":45,"value":327},{"type":39,"tag":289,"props":5070,"children":5071},{},[5072,5076,5081],{"type":39,"tag":315,"props":5073,"children":5074},{},[5075],{"type":45,"value":343},{"type":39,"tag":315,"props":5077,"children":5078},{},[5079],{"type":45,"value":5080},"Community",{"type":39,"tag":315,"props":5082,"children":5083},{},[5084],{"type":45,"value":348},{"type":39,"tag":289,"props":5086,"children":5087},{},[5088,5092,5097],{"type":39,"tag":315,"props":5089,"children":5090},{},[5091],{"type":45,"value":364},{"type":39,"tag":315,"props":5093,"children":5094},{},[5095],{"type":45,"value":5096},"Requires tile source",{"type":39,"tag":315,"props":5098,"children":5099},{},[5100],{"type":45,"value":5101},"Premium Mapbox tiles included",{"type":39,"tag":289,"props":5103,"children":5104},{},[5105,5109,5114],{"type":39,"tag":315,"props":5106,"children":5107},{},[5108],{"type":45,"value":427},{"type":39,"tag":315,"props":5110,"children":5111},{},[5112],{"type":45,"value":5113},"Third-party",{"type":39,"tag":315,"props":5115,"children":5116},{},[5117],{"type":45,"value":5118},"Full Mapbox API ecosystem",{"type":39,"tag":289,"props":5120,"children":5121},{},[5122,5127,5132],{"type":39,"tag":315,"props":5123,"children":5124},{},[5125],{"type":45,"value":5126},"API",{"type":39,"tag":315,"props":5128,"children":5129},{},[5130],{"type":45,"value":5131},"~95% compatible",{"type":39,"tag":315,"props":5133,"children":5134},{},[5135],{"type":45,"value":5131},{"type":39,"tag":48,"props":5137,"children":5138},{},[5139,5144],{"type":39,"tag":71,"props":5140,"children":5141},{},[5142],{"type":45,"value":5143},"Bottom line:",{"type":45,"value":5145}," Migration is easy because APIs are nearly identical. Main changes are packaging, token setup, and style URLs. The result is access to Mapbox's premium tiles, ecosystem, and support.",{"type":39,"tag":54,"props":5147,"children":5149},{"id":5148},"integration-with-other-skills",[5150],{"type":45,"value":5151},"Integration with Other Skills",{"type":39,"tag":48,"props":5153,"children":5154},{},[5155],{"type":39,"tag":71,"props":5156,"children":5157},{},[5158],{"type":45,"value":5159},"Related skills:",{"type":39,"tag":94,"props":5161,"children":5162},{},[5163,5173,5183,5192],{"type":39,"tag":98,"props":5164,"children":5165},{},[5166,5171],{"type":39,"tag":71,"props":5167,"children":5168},{},[5169],{"type":45,"value":5170},"mapbox-web-integration-patterns",{"type":45,"value":5172},": Framework-specific patterns (React, Vue, Svelte, Angular)",{"type":39,"tag":98,"props":5174,"children":5175},{},[5176,5181],{"type":39,"tag":71,"props":5177,"children":5178},{},[5179],{"type":45,"value":5180},"mapbox-web-performance-patterns",{"type":45,"value":5182},": Performance optimization techniques",{"type":39,"tag":98,"props":5184,"children":5185},{},[5186,5190],{"type":39,"tag":71,"props":5187,"children":5188},{},[5189],{"type":45,"value":1262},{"type":45,"value":5191},": Comprehensive token security best practices",{"type":39,"tag":98,"props":5193,"children":5194},{},[5195,5200],{"type":39,"tag":71,"props":5196,"children":5197},{},[5198],{"type":45,"value":5199},"mapbox-google-maps-migration",{"type":45,"value":5201},": Migrate from Google Maps to Mapbox",{"type":39,"tag":54,"props":5203,"children":5205},{"id":5204},"resources",[5206],{"type":45,"value":5207},"Resources",{"type":39,"tag":48,"props":5209,"children":5210},{},[5211],{"type":39,"tag":71,"props":5212,"children":5213},{},[5214],{"type":45,"value":5215},"Mapbox GL JS:",{"type":39,"tag":94,"props":5217,"children":5218},{},[5219,5229,5239,5249,5259,5269],{"type":39,"tag":98,"props":5220,"children":5221},{},[5222],{"type":39,"tag":586,"props":5223,"children":5226},{"href":5224,"rel":5225},"https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002F",[590],[5227],{"type":45,"value":5228},"Official Documentation",{"type":39,"tag":98,"props":5230,"children":5231},{},[5232],{"type":39,"tag":586,"props":5233,"children":5236},{"href":5234,"rel":5235},"https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fexamples\u002F",[590],[5237],{"type":45,"value":5238},"Example Gallery",{"type":39,"tag":98,"props":5240,"children":5241},{},[5242],{"type":39,"tag":586,"props":5243,"children":5246},{"href":5244,"rel":5245},"https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fapi\u002F",[590],[5247],{"type":45,"value":5248},"API Reference",{"type":39,"tag":98,"props":5250,"children":5251},{},[5252],{"type":39,"tag":586,"props":5253,"children":5256},{"href":5254,"rel":5255},"https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-gl-js",[590],[5257],{"type":45,"value":5258},"GitHub Repository",{"type":39,"tag":98,"props":5260,"children":5261},{},[5262],{"type":39,"tag":586,"props":5263,"children":5266},{"href":5264,"rel":5265},"https:\u002F\u002Fstudio.mapbox.com\u002F",[590],[5267],{"type":45,"value":5268},"Mapbox Studio",{"type":39,"tag":98,"props":5270,"children":5271},{},[5272],{"type":39,"tag":586,"props":5273,"children":5276},{"href":5274,"rel":5275},"https:\u002F\u002Fwww.mapbox.com\u002Fpricing\u002F",[590],[5277],{"type":45,"value":5278},"Pricing Information",{"type":39,"tag":48,"props":5280,"children":5281},{},[5282],{"type":39,"tag":71,"props":5283,"children":5284},{},[5285],{"type":45,"value":5286},"Migration Support:",{"type":39,"tag":94,"props":5288,"children":5289},{},[5290,5300,5310],{"type":39,"tag":98,"props":5291,"children":5292},{},[5293],{"type":39,"tag":586,"props":5294,"children":5297},{"href":5295,"rel":5296},"https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fguides\u002Finstall\u002F",[590],[5298],{"type":45,"value":5299},"Get Started Guide",{"type":39,"tag":98,"props":5301,"children":5302},{},[5303],{"type":39,"tag":586,"props":5304,"children":5307},{"href":5305,"rel":5306},"https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fstyle-spec\u002F",[590],[5308],{"type":45,"value":5309},"Style Specification",{"type":39,"tag":98,"props":5311,"children":5312},{},[5313],{"type":39,"tag":586,"props":5314,"children":5317},{"href":5315,"rel":5316},"https:\u002F\u002Fsupport.mapbox.com\u002Fhc\u002Fen-us\u002Fcommunity\u002Ftopics",[590],[5318],{"type":45,"value":5319},"Mapbox Community Support",{"type":39,"tag":54,"props":5321,"children":5323},{"id":5322},"reference-files",[5324],{"type":45,"value":5325},"Reference Files",{"type":39,"tag":48,"props":5327,"children":5328},{},[5329],{"type":45,"value":5330},"For detailed information on specific topics, load these reference files:",{"type":39,"tag":94,"props":5332,"children":5333},{},[5334,5348,5362],{"type":39,"tag":98,"props":5335,"children":5336},{},[5337,5346],{"type":39,"tag":71,"props":5338,"children":5339},{},[5340],{"type":39,"tag":610,"props":5341,"children":5343},{"className":5342},[],[5344],{"type":45,"value":5345},"references\u002Fapi-compatibility.md",{"type":45,"value":5347}," -- Full list of 100% compatible APIs + side-by-side migration example",{"type":39,"tag":98,"props":5349,"children":5350},{},[5351,5360],{"type":39,"tag":71,"props":5352,"children":5353},{},[5354],{"type":39,"tag":610,"props":5355,"children":5357},{"className":5356},[],[5358],{"type":45,"value":5359},"references\u002Fexclusive-features.md",{"type":45,"value":5361}," -- Mapbox-exclusive features (APIs, Studio, Advanced) + React\u002FVue framework examples",{"type":39,"tag":98,"props":5363,"children":5364},{},[5365,5374],{"type":39,"tag":71,"props":5366,"children":5367},{},[5368],{"type":39,"tag":610,"props":5369,"children":5371},{"className":5370},[],[5372],{"type":45,"value":5373},"references\u002Fwhy-mapbox.md",{"type":45,"value":5375}," -- Why Choose Mapbox (Production, Dev Teams, Business) + Performance Comparison",{"type":39,"tag":1744,"props":5377,"children":5378},{},[5379],{"type":45,"value":5380},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":5382,"total":3276},[5383,5397,5414,5429,5451,5463,5472],{"slug":5384,"name":5384,"fn":5385,"description":5386,"org":5387,"tags":5388,"stars":23,"repoUrl":24,"updatedAt":5396},"mapbox-android-patterns","integrate Mapbox Maps SDK on Android","Official integration patterns for Mapbox Maps SDK on Android. Covers installation, adding markers, user location, custom data, styles, camera control, and featureset interactions. Based on official Mapbox documentation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5389,5392,5393],{"name":5390,"slug":5391,"type":15},"Android","android",{"name":9,"slug":8,"type":15},{"name":5394,"slug":5395,"type":15},"Mobile","mobile","2026-07-30T05:30:51.739352",{"slug":5398,"name":5398,"fn":5399,"description":5400,"org":5401,"tags":5402,"stars":23,"repoUrl":24,"updatedAt":5413},"mapbox-cartography","apply cartographic design principles to Mapbox","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.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5403,5406,5409,5410],{"name":5404,"slug":5405,"type":15},"Branding","branding",{"name":5407,"slug":5408,"type":15},"Design","design",{"name":9,"slug":8,"type":15},{"name":5411,"slug":5412,"type":15},"Typography","typography","2026-04-06T18:28:41.2556",{"slug":5415,"name":5415,"fn":5416,"description":5417,"org":5418,"tags":5419,"stars":23,"repoUrl":24,"updatedAt":5428},"mapbox-data-visualization-patterns","implement Mapbox 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.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5420,5423,5424,5425],{"name":5421,"slug":5422,"type":15},"Data Visualization","data-visualization",{"name":5407,"slug":5408,"type":15},{"name":9,"slug":8,"type":15},{"name":5426,"slug":5427,"type":15},"Performance","performance","2026-04-06T18:29:02.907655",{"slug":5430,"name":5430,"fn":5431,"description":5432,"org":5433,"tags":5434,"stars":23,"repoUrl":24,"updatedAt":5450},"mapbox-flutter-patterns","integrate Mapbox maps into Flutter applications","Official integration patterns for the Mapbox Maps Flutter SDK. Covers installation, iOS\u002FAndroid platform setup, access token configuration, MapWidget initialization, camera control, annotations with tap handling, user location, and loading GeoJSON. Based on official Mapbox documentation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5435,5436,5439,5442,5445,5446,5447],{"name":5390,"slug":5391,"type":15},{"name":5437,"slug":5438,"type":15},"Dart","dart",{"name":5440,"slug":5441,"type":15},"Flutter","flutter",{"name":5443,"slug":5444,"type":15},"iOS","ios",{"name":9,"slug":8,"type":15},{"name":5394,"slug":5395,"type":15},{"name":5448,"slug":5449,"type":15},"SDK","sdk","2026-05-12T06:03:11.211517",{"slug":5452,"name":5452,"fn":5453,"description":5454,"org":5455,"tags":5456,"stars":23,"repoUrl":24,"updatedAt":5462},"mapbox-geospatial-operations","select geospatial tools for Mapbox operations","Expert guidance on choosing the right geospatial tool based on problem type, accuracy requirements, and performance needs",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5457,5458,5459],{"name":9,"slug":8,"type":15},{"name":5426,"slug":5427,"type":15},{"name":5460,"slug":5461,"type":15},"Strategy","strategy","2026-07-30T05:30:52.766227",{"slug":5199,"name":5199,"fn":5464,"description":5465,"org":5466,"tags":5467,"stars":23,"repoUrl":24,"updatedAt":5471},"migrate from Google Maps to Mapbox","Migration guide for developers moving from Google Maps Platform to Mapbox GL JS, covering API equivalents, pattern translations, and key differences",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5468,5469,5470],{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"name":18,"slug":19,"type":15},"2026-04-06T18:28:56.459496",{"slug":5473,"name":5473,"fn":5474,"description":5475,"org":5476,"tags":5477,"stars":23,"repoUrl":24,"updatedAt":5484},"mapbox-ios-patterns","integrate Mapbox Maps SDK on iOS","Official integration patterns for Mapbox Maps SDK on iOS. Covers installation, adding markers, user location, custom data, styles, camera control, and featureset interactions. Based on official Mapbox documentation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5478,5479,5480,5481],{"name":5443,"slug":5444,"type":15},{"name":9,"slug":8,"type":15},{"name":5394,"slug":5395,"type":15},{"name":5482,"slug":5483,"type":15},"Swift","swift","2026-07-30T05:30:54.75526",{"items":5486,"total":3276},[5487,5493,5500,5507,5517,5523,5529,5536,5550,5557,5572,5584],{"slug":5384,"name":5384,"fn":5385,"description":5386,"org":5488,"tags":5489,"stars":23,"repoUrl":24,"updatedAt":5396},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5490,5491,5492],{"name":5390,"slug":5391,"type":15},{"name":9,"slug":8,"type":15},{"name":5394,"slug":5395,"type":15},{"slug":5398,"name":5398,"fn":5399,"description":5400,"org":5494,"tags":5495,"stars":23,"repoUrl":24,"updatedAt":5413},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5496,5497,5498,5499],{"name":5404,"slug":5405,"type":15},{"name":5407,"slug":5408,"type":15},{"name":9,"slug":8,"type":15},{"name":5411,"slug":5412,"type":15},{"slug":5415,"name":5415,"fn":5416,"description":5417,"org":5501,"tags":5502,"stars":23,"repoUrl":24,"updatedAt":5428},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5503,5504,5505,5506],{"name":5421,"slug":5422,"type":15},{"name":5407,"slug":5408,"type":15},{"name":9,"slug":8,"type":15},{"name":5426,"slug":5427,"type":15},{"slug":5430,"name":5430,"fn":5431,"description":5432,"org":5508,"tags":5509,"stars":23,"repoUrl":24,"updatedAt":5450},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5510,5511,5512,5513,5514,5515,5516],{"name":5390,"slug":5391,"type":15},{"name":5437,"slug":5438,"type":15},{"name":5440,"slug":5441,"type":15},{"name":5443,"slug":5444,"type":15},{"name":9,"slug":8,"type":15},{"name":5394,"slug":5395,"type":15},{"name":5448,"slug":5449,"type":15},{"slug":5452,"name":5452,"fn":5453,"description":5454,"org":5518,"tags":5519,"stars":23,"repoUrl":24,"updatedAt":5462},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5520,5521,5522],{"name":9,"slug":8,"type":15},{"name":5426,"slug":5427,"type":15},{"name":5460,"slug":5461,"type":15},{"slug":5199,"name":5199,"fn":5464,"description":5465,"org":5524,"tags":5525,"stars":23,"repoUrl":24,"updatedAt":5471},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5526,5527,5528],{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"name":18,"slug":19,"type":15},{"slug":5473,"name":5473,"fn":5474,"description":5475,"org":5530,"tags":5531,"stars":23,"repoUrl":24,"updatedAt":5484},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5532,5533,5534,5535],{"name":5443,"slug":5444,"type":15},{"name":9,"slug":8,"type":15},{"name":5394,"slug":5395,"type":15},{"name":5482,"slug":5483,"type":15},{"slug":5537,"name":5537,"fn":5538,"description":5539,"org":5540,"tags":5541,"stars":23,"repoUrl":24,"updatedAt":5549},"mapbox-location-grounding","generate grounded location-aware responses with Mapbox","Compose Mapbox MCP tools to produce grounded, cited location-aware responses from live data instead of training data",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5542,5545,5546],{"name":5543,"slug":5544,"type":15},"Data Quality","data-quality",{"name":9,"slug":8,"type":15},{"name":5547,"slug":5548,"type":15},"MCP","mcp","2026-04-15T05:01:44.248764",{"slug":4,"name":4,"fn":5,"description":6,"org":5551,"tags":5552,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5553,5554,5555,5556],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"name":18,"slug":19,"type":15},{"slug":5558,"name":5558,"fn":5559,"description":5560,"org":5561,"tags":5562,"stars":23,"repoUrl":24,"updatedAt":5571},"mapbox-mcp-devkit-patterns","integrate Mapbox MCP DevKit in coding assistants","Integration patterns for Mapbox MCP DevKit Server in AI coding assistants. Covers setup, style management, token management, validation workflows, and documentation access through MCP. Use when building Mapbox applications with AI coding assistance.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5563,5566,5569,5570],{"name":5564,"slug":5565,"type":15},"Documentation","documentation",{"name":5567,"slug":5568,"type":15},"Local Development","local-development",{"name":9,"slug":8,"type":15},{"name":5547,"slug":5548,"type":15},"2026-04-06T18:28:53.790961",{"slug":5573,"name":5573,"fn":5574,"description":5575,"org":5576,"tags":5577,"stars":23,"repoUrl":24,"updatedAt":5583},"mapbox-mcp-runtime-patterns","integrate Mapbox MCP Server in AI apps","Integration patterns for Mapbox MCP Server in AI applications and agent frameworks. Covers runtime integration with pydantic-ai, mastra, LangChain, and custom agents. Use when building AI-powered applications that need geospatial capabilities.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5578,5581,5582],{"name":5579,"slug":5580,"type":15},"Architecture","architecture",{"name":9,"slug":8,"type":15},{"name":5547,"slug":5548,"type":15},"2026-04-06T18:28:55.164842",{"slug":5585,"name":5585,"fn":5586,"description":5587,"org":5588,"tags":5589,"stars":23,"repoUrl":24,"updatedAt":5597},"mapbox-search-integration","implement Mapbox search in applications","Complete workflow for implementing Mapbox search in applications - from discovery questions to production-ready integration with best practices",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5590,5593,5594],{"name":5591,"slug":5592,"type":15},"API Development","api-development",{"name":9,"slug":8,"type":15},{"name":5595,"slug":5596,"type":15},"Search","search","2026-04-06T18:28:50.264933"]