[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-mapbox-mapbox-google-maps-migration":3,"mdc--u1rck8-key":30,"related-repo-mapbox-mapbox-google-maps-migration":6307,"related-org-mapbox-mapbox-google-maps-migration":6407},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":20,"repoUrl":21,"updatedAt":22,"license":23,"forks":24,"topics":25,"repo":26,"sourceUrl":28,"mdContent":29},"mapbox-google-maps-migration","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},"mapbox","Mapbox","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmapbox.png",[12,16,17],{"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",69,"https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-agent-skills","2026-04-06T18:28:56.459496",null,10,[],{"repoUrl":21,"stars":20,"forks":24,"topics":27,"description":23},[],"https:\u002F\u002Fgithub.com\u002Fmapbox\u002Fmapbox-agent-skills\u002Ftree\u002FHEAD\u002Fskills\u002Fmapbox-google-maps-migration","---\nname: mapbox-google-maps-migration\ndescription: Migration guide for developers moving from Google Maps Platform to Mapbox GL JS, covering API equivalents, pattern translations, and key differences\n---\n\n# Mapbox Google Maps Migration Skill\n\nComprehensive guidance for migrating from Google Maps Platform to Mapbox GL JS. Provides API equivalents, pattern translations, and strategies for successful migration.\n\n## Core Philosophy Differences\n\n### Google Maps: Imperative & Object-Oriented\n\n- Create objects (Marker, Polygon, etc.)\n- Add to map with `.setMap(map)`\n- Update properties with setters\n- Heavy reliance on object instances\n\n### Mapbox GL JS: Declarative & Data-Driven\n\n- Add data sources\n- Define layers (visual representation)\n- Style with JSON\n- Update data, not object properties\n\n**Key Insight:** Mapbox treats everything as data + styling, not individual objects.\n\n## Map Initialization\n\n### Google Maps\n\n```javascript\nconst map = new google.maps.Map(document.getElementById('map'), {\n  center: { lat: 37.7749, lng: -122.4194 },\n  zoom: 12,\n  mapTypeId: 'roadmap' \u002F\u002F or 'satellite', 'hybrid', 'terrain'\n});\n```\n\n### Mapbox GL JS\n\n```javascript\nmapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';\nconst map = new mapboxgl.Map({\n  container: 'map',\n  style: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstreets-v12', \u002F\u002F or satellite-v9, outdoors-v12\n  center: [-122.4194, 37.7749], \u002F\u002F [lng, lat] - note the order!\n  zoom: 12\n});\n```\n\n**Key Differences:**\n\n- **Coordinate order:** Google uses `{lat, lng}`, Mapbox uses `[lng, lat]`\n- **Authentication:** Google uses API key in script tag, Mapbox uses access token in code\n- **Styling:** Google uses map types, Mapbox uses full style URLs\n\n## API Equivalents Reference\n\n### Map Methods\n\n| Google Maps              | Mapbox GL JS                           | Notes                         |\n| ------------------------ | -------------------------------------- | ----------------------------- |\n| `map.setCenter(latLng)`  | `map.setCenter([lng, lat])`            | Coordinate order reversed     |\n| `map.getCenter()`        | `map.getCenter()`                      | Returns LngLat object         |\n| `map.setZoom(zoom)`      | `map.setZoom(zoom)`                    | Same behavior                 |\n| `map.getZoom()`          | `map.getZoom()`                        | Same behavior                 |\n| `map.panTo(latLng)`      | `map.panTo([lng, lat])`                | Animated pan                  |\n| `map.fitBounds(bounds)`  | `map.fitBounds([[lng,lat],[lng,lat]])` | Different bound format        |\n| `map.setMapTypeId(type)` | `map.setStyle(styleUrl)`               | Completely different approach |\n| `map.getBounds()`        | `map.getBounds()`                      | Similar                       |\n\n### Map Events\n\n| Google Maps                                       | Mapbox GL JS           | Notes                 |\n| ------------------------------------------------- | ---------------------- | --------------------- |\n| `google.maps.event.addListener(map, 'click', fn)` | `map.on('click', fn)`  | Simpler syntax        |\n| `event.latLng`                                    | `event.lngLat`         | Event property name   |\n| `'center_changed'`                                | `'move'` \u002F `'moveend'` | Different event names |\n| `'zoom_changed'`                                  | `'zoom'` \u002F `'zoomend'` | Different event names |\n| `'bounds_changed'`                                | `'moveend'`            | No direct equivalent  |\n| `'mousemove'`                                     | `'mousemove'`          | Same                  |\n| `'mouseout'`                                      | `'mouseleave'`         | Different name        |\n\n## Markers and Points\n\n### Simple Marker\n\n**Google Maps:**\n\n```javascript\nconst marker = new google.maps.Marker({\n  position: { lat: 37.7749, lng: -122.4194 },\n  map: map,\n  title: 'San Francisco',\n  icon: 'custom-icon.png'\n});\n\n\u002F\u002F Remove marker\nmarker.setMap(null);\n```\n\n**Mapbox GL JS:**\n\n```javascript\n\u002F\u002F Create marker\nconst marker = new mapboxgl.Marker()\n  .setLngLat([-122.4194, 37.7749])\n  .setPopup(new mapboxgl.Popup().setText('San Francisco'))\n  .addTo(map);\n\n\u002F\u002F Remove marker\nmarker.remove();\n```\n\n### Multiple Markers\n\n**Google Maps:**\n\n```javascript\nconst markers = locations.map(\n  (loc) =>\n    new google.maps.Marker({\n      position: { lat: loc.lat, lng: loc.lng },\n      map: map\n    })\n);\n```\n\n**Mapbox GL JS (Equivalent Approach):**\n\n```javascript\n\u002F\u002F Same object-oriented approach\nconst markers = locations.map((loc) => new mapboxgl.Marker().setLngLat([loc.lng, loc.lat]).addTo(map));\n```\n\n**Mapbox GL JS (Data-Driven Approach - Recommended for 100+ points):**\n\n```javascript\n\u002F\u002F Add as GeoJSON source + layer (uses WebGL, not DOM)\nmap.addSource('points', {\n  type: 'geojson',\n  data: {\n    type: 'FeatureCollection',\n    features: locations.map((loc) => ({\n      type: 'Feature',\n      geometry: { type: 'Point', coordinates: [loc.lng, loc.lat] },\n      properties: { name: loc.name }\n    }))\n  }\n});\n\nmap.addLayer({\n  id: 'points-layer',\n  type: 'circle', \u002F\u002F or 'symbol' for icons\n  source: 'points',\n  paint: {\n    'circle-radius': 8,\n    'circle-color': '#ff0000'\n  }\n});\n```\n\n**Performance Advantage:** Google Maps renders all markers as DOM elements (even when using the Data Layer), which becomes slow with 500+ markers. Mapbox's circle and symbol layers are rendered by WebGL, making them much faster for large datasets (1,000-10,000+ points). This is a significant advantage when building applications with many points.\n\n## Info Windows \u002F Popups\n\n### Google Maps\n\n```javascript\nconst infowindow = new google.maps.InfoWindow({\n  content: '\u003Ch3>Title\u003C\u002Fh3>\u003Cp>Content\u003C\u002Fp>'\n});\n\nmarker.addListener('click', () => {\n  infowindow.open(map, marker);\n});\n```\n\n### Mapbox GL JS\n\n```javascript\n\u002F\u002F Option 1: Attach to marker\nconst marker = new mapboxgl.Marker()\n  .setLngLat([-122.4194, 37.7749])\n  .setPopup(new mapboxgl.Popup().setHTML('\u003Ch3>Title\u003C\u002Fh3>\u003Cp>Content\u003C\u002Fp>'))\n  .addTo(map);\n\n\u002F\u002F Option 2: On layer click (for data-driven markers)\nmap.on('click', 'points-layer', (e) => {\n  const coordinates = e.features[0].geometry.coordinates.slice();\n  const description = e.features[0].properties.description;\n\n  new mapboxgl.Popup().setLngLat(coordinates).setHTML(description).addTo(map);\n});\n```\n\n## Migration Strategy\n\n### Step 1: Audit Current Implementation\n\nIdentify all Google Maps features you use:\n\n- [ ] Basic map with markers\n- [ ] Info windows\u002Fpopups\n- [ ] Polygons\u002Fpolylines\n- [ ] Geocoding\n- [ ] Directions\n- [ ] Clustering\n- [ ] Custom styling\n- [ ] Drawing tools\n- [ ] Street View (no Mapbox equivalent)\n- [ ] Other advanced features\n\n### Step 2: Set Up Mapbox\n\n```html\n\u003C!-- Replace Google Maps script -->\n\u003Cscript src=\"https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.18.1\u002Fmapbox-gl.js\">\u003C\u002Fscript>\n\u003Clink href=\"https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.18.1\u002Fmapbox-gl.css\" rel=\"stylesheet\" \u002F>\n```\n\n### Step 3: Convert Core Map\n\nStart with basic map initialization:\n\n1. Replace `new google.maps.Map()` with `new mapboxgl.Map()`\n2. Fix coordinate order (lat,lng -> lng,lat)\n3. Update zoom\u002Fcenter\n\n### Step 4: Convert Features One by One\n\nPrioritize by complexity:\n\n1. **Easy:** Map controls, basic markers\n2. **Medium:** Popups, polygons, lines\n3. **Complex:** Clustering, custom styling, data updates\n\n### Step 5: Update Event Handlers\n\nChange event syntax:\n\n- `google.maps.event.addListener()` -> `map.on()`\n- Update event property names (`latLng` -> `lngLat`)\n\n### Step 6: Optimize for Mapbox\n\nTake advantage of Mapbox features:\n\n- Convert multiple markers to data-driven layers\n- Use clustering (built-in)\n- Leverage vector tiles for custom styling\n- Use expressions for dynamic styling\n\n### Step 7: Test Thoroughly\n\n- Cross-browser testing\n- Mobile responsiveness\n- Performance with real data volumes\n- Touch\u002Fgesture interactions\n\n## Gotchas and Common Issues\n\n### Coordinate Order\n\n```javascript\n\u002F\u002F Google Maps\n{ lat: 37.7749, lng: -122.4194 }\n\n\u002F\u002F Mapbox (REVERSED!)\n[-122.4194, 37.7749]\n```\n\n**Always double-check coordinate order!**\n\n### Event Properties\n\n```javascript\n\u002F\u002F Google Maps\nmap.on('click', (e) => {\n  console.log(e.latLng.lat(), e.latLng.lng());\n});\n\n\u002F\u002F Mapbox\nmap.on('click', (e) => {\n  console.log(e.lngLat.lat, e.lngLat.lng);\n});\n```\n\n### Timing Issues\n\n```javascript\n\u002F\u002F Google Maps - immediate\nconst marker = new google.maps.Marker({ map: map });\n\n\u002F\u002F Mapbox - wait for load\nmap.on('load', () => {\n  map.addSource(...);\n  map.addLayer(...);\n});\n```\n\n### Removing Features\n\n```javascript\n\u002F\u002F Google Maps\nmarker.setMap(null);\n\n\u002F\u002F Mapbox - must remove both\nmap.removeLayer('layer-id');\nmap.removeSource('source-id');\n```\n\n### Updating Data Without Flash\n\n**Never** remove and re-add layers to update data — this reinitializes WebGL resources and causes a visible flash. Instead:\n\n```javascript\n\u002F\u002F ✅ Update data in place (no flash)\nmap.getSource('stores').setData(newGeoJSON);\n\n\u002F\u002F ✅ Filter existing data (GPU-side, fastest)\nmap.setFilter('stores-layer', ['==', ['get', 'category'], 'coffee']);\n\n\u002F\u002F ❌ BAD: remove + re-add causes flash\nmap.removeLayer('stores-layer');\nmap.removeSource('stores');\nmap.addSource('stores', { ... });\nmap.addLayer({ ... });\n```\n\n## When NOT to Migrate\n\nConsider staying with Google Maps if:\n\n- **Street View is critical** - Mapbox doesn't have equivalent\n- **Tight Google Workspace integration** - Places API deeply integrated\n- **Already heavily optimized** - Migration cost > benefits\n- **Team expertise** - Retraining costs too high\n- **Short-term project** - Not worth migration effort\n\n## Quick Reference: Side-by-Side Comparison\n\n```javascript\n\u002F\u002F GOOGLE MAPS\nconst map = new google.maps.Map(el, {\n  center: { lat: 37.7749, lng: -122.4194 },\n  zoom: 12\n});\n\nconst marker = new google.maps.Marker({\n  position: { lat: 37.7749, lng: -122.4194 },\n  map: map\n});\n\ngoogle.maps.event.addListener(map, 'click', (e) => {\n  console.log(e.latLng.lat(), e.latLng.lng());\n});\n\n\u002F\u002F MAPBOX GL JS\nmapboxgl.accessToken = 'YOUR_TOKEN';\nconst map = new mapboxgl.Map({\n  container: el,\n  center: [-122.4194, 37.7749], \u002F\u002F REVERSED!\n  zoom: 12,\n  style: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstreets-v12'\n});\n\nconst marker = new mapboxgl.Marker()\n  .setLngLat([-122.4194, 37.7749]) \u002F\u002F REVERSED!\n  .addTo(map);\n\nmap.on('click', (e) => {\n  console.log(e.lngLat.lat, e.lngLat.lng);\n});\n```\n\n**Remember:** lng, lat order in Mapbox!\n\n## Additional Resources\n\n- [Mapbox GL JS Documentation](https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002F)\n- [Official Google Maps to Mapbox Migration Guide](https:\u002F\u002Fdocs.mapbox.com\u002Fhelp\u002Ftutorials\u002Fgoogle-to-mapbox\u002F)\n- [Mapbox Examples](https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fexamples\u002F)\n- [Style Specification](https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fstyle-spec\u002F)\n\n## Integration with Other Skills\n\n**Works with:**\n\n- **mapbox-web-integration-patterns**: Framework-specific migration guidance\n- **mapbox-web-performance-patterns**: Optimize after migration\n- **mapbox-token-security**: Secure your Mapbox tokens properly\n- **mapbox-geospatial-operations**: Use Mapbox's geospatial tools effectively\n- **mapbox-search-patterns**: Migrate geocoding\u002Fsearch functionality\n\n## Reference Files\n\nThe following reference files contain detailed migration guides for specific topics. Load them when working on those areas:\n\n- **`references\u002Fshapes-geocoding.md`** — Polygons, Polylines, Custom Icons, Geocoding\n- **`references\u002Fdirections-controls.md`** — Directions\u002FRouting, Controls\n- **`references\u002Fclustering-styling.md`** — Clustering, Styling\u002FAppearance\n- **`references\u002Fdata-performance.md`** — Data Updates, Performance, Common Migration Patterns (Store Locator, Drawing Tools, Heatmaps)\n- **`references\u002Fapi-services.md`** — API Services Comparison, Pricing, Plugins, Framework Integration, Testing, Migration Checklist\n\nTo load a reference, read the file relative to this skill directory, e.g.:\n\n```\nLoad references\u002Fshapes-geocoding.md\n```\n",{"data":31,"body":32},{"name":4,"description":6},{"type":33,"children":34},"root",[35,44,50,57,64,96,102,125,136,142,148,399,405,633,641,688,694,700,934,940,1158,1164,1170,1178,1430,1438,1656,1662,1669,1878,1886,2025,2033,2641,2651,2657,2662,2872,2877,3385,3391,3397,3402,3500,3506,3634,3640,3645,3678,3684,3689,3722,3728,3733,3772,3778,3783,3806,3812,3835,3841,3847,3951,3959,3965,4283,4289,4516,4522,4664,4670,4680,5076,5082,5087,5140,5146,6074,6084,6090,6135,6141,6149,6202,6208,6213,6286,6291,6301],{"type":36,"tag":37,"props":38,"children":40},"element","h1",{"id":39},"mapbox-google-maps-migration-skill",[41],{"type":42,"value":43},"text","Mapbox Google Maps Migration Skill",{"type":36,"tag":45,"props":46,"children":47},"p",{},[48],{"type":42,"value":49},"Comprehensive guidance for migrating from Google Maps Platform to Mapbox GL JS. Provides API equivalents, pattern translations, and strategies for successful migration.",{"type":36,"tag":51,"props":52,"children":54},"h2",{"id":53},"core-philosophy-differences",[55],{"type":42,"value":56},"Core Philosophy Differences",{"type":36,"tag":58,"props":59,"children":61},"h3",{"id":60},"google-maps-imperative-object-oriented",[62],{"type":42,"value":63},"Google Maps: Imperative & Object-Oriented",{"type":36,"tag":65,"props":66,"children":67},"ul",{},[68,74,86,91],{"type":36,"tag":69,"props":70,"children":71},"li",{},[72],{"type":42,"value":73},"Create objects (Marker, Polygon, etc.)",{"type":36,"tag":69,"props":75,"children":76},{},[77,79],{"type":42,"value":78},"Add to map with ",{"type":36,"tag":80,"props":81,"children":83},"code",{"className":82},[],[84],{"type":42,"value":85},".setMap(map)",{"type":36,"tag":69,"props":87,"children":88},{},[89],{"type":42,"value":90},"Update properties with setters",{"type":36,"tag":69,"props":92,"children":93},{},[94],{"type":42,"value":95},"Heavy reliance on object instances",{"type":36,"tag":58,"props":97,"children":99},{"id":98},"mapbox-gl-js-declarative-data-driven",[100],{"type":42,"value":101},"Mapbox GL JS: Declarative & Data-Driven",{"type":36,"tag":65,"props":103,"children":104},{},[105,110,115,120],{"type":36,"tag":69,"props":106,"children":107},{},[108],{"type":42,"value":109},"Add data sources",{"type":36,"tag":69,"props":111,"children":112},{},[113],{"type":42,"value":114},"Define layers (visual representation)",{"type":36,"tag":69,"props":116,"children":117},{},[118],{"type":42,"value":119},"Style with JSON",{"type":36,"tag":69,"props":121,"children":122},{},[123],{"type":42,"value":124},"Update data, not object properties",{"type":36,"tag":45,"props":126,"children":127},{},[128,134],{"type":36,"tag":129,"props":130,"children":131},"strong",{},[132],{"type":42,"value":133},"Key Insight:",{"type":42,"value":135}," Mapbox treats everything as data + styling, not individual objects.",{"type":36,"tag":51,"props":137,"children":139},{"id":138},"map-initialization",[140],{"type":42,"value":141},"Map Initialization",{"type":36,"tag":58,"props":143,"children":145},{"id":144},"google-maps",[146],{"type":42,"value":147},"Google Maps",{"type":36,"tag":149,"props":150,"children":155},"pre",{"className":151,"code":152,"language":153,"meta":154,"style":154},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const map = new google.maps.Map(document.getElementById('map'), {\n  center: { lat: 37.7749, lng: -122.4194 },\n  zoom: 12,\n  mapTypeId: 'roadmap' \u002F\u002F or 'satellite', 'hybrid', 'terrain'\n});\n","javascript","",[156],{"type":36,"tag":80,"props":157,"children":158},{"__ignoreMap":154},[159,262,325,348,381],{"type":36,"tag":160,"props":161,"children":164},"span",{"class":162,"line":163},"line",1,[165,171,177,183,188,193,198,203,207,213,218,222,227,232,237,243,247,252,257],{"type":36,"tag":160,"props":166,"children":168},{"style":167},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[169],{"type":42,"value":170},"const",{"type":36,"tag":160,"props":172,"children":174},{"style":173},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[175],{"type":42,"value":176}," map ",{"type":36,"tag":160,"props":178,"children":180},{"style":179},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[181],{"type":42,"value":182},"=",{"type":36,"tag":160,"props":184,"children":185},{"style":179},[186],{"type":42,"value":187}," new",{"type":36,"tag":160,"props":189,"children":190},{"style":173},[191],{"type":42,"value":192}," google",{"type":36,"tag":160,"props":194,"children":195},{"style":179},[196],{"type":42,"value":197},".",{"type":36,"tag":160,"props":199,"children":200},{"style":173},[201],{"type":42,"value":202},"maps",{"type":36,"tag":160,"props":204,"children":205},{"style":179},[206],{"type":42,"value":197},{"type":36,"tag":160,"props":208,"children":210},{"style":209},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[211],{"type":42,"value":212},"Map",{"type":36,"tag":160,"props":214,"children":215},{"style":173},[216],{"type":42,"value":217},"(document",{"type":36,"tag":160,"props":219,"children":220},{"style":179},[221],{"type":42,"value":197},{"type":36,"tag":160,"props":223,"children":224},{"style":209},[225],{"type":42,"value":226},"getElementById",{"type":36,"tag":160,"props":228,"children":229},{"style":173},[230],{"type":42,"value":231},"(",{"type":36,"tag":160,"props":233,"children":234},{"style":179},[235],{"type":42,"value":236},"'",{"type":36,"tag":160,"props":238,"children":240},{"style":239},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[241],{"type":42,"value":242},"map",{"type":36,"tag":160,"props":244,"children":245},{"style":179},[246],{"type":42,"value":236},{"type":36,"tag":160,"props":248,"children":249},{"style":173},[250],{"type":42,"value":251},")",{"type":36,"tag":160,"props":253,"children":254},{"style":179},[255],{"type":42,"value":256},",",{"type":36,"tag":160,"props":258,"children":259},{"style":179},[260],{"type":42,"value":261}," {\n",{"type":36,"tag":160,"props":263,"children":265},{"class":162,"line":264},2,[266,272,277,282,287,291,297,301,306,310,315,320],{"type":36,"tag":160,"props":267,"children":269},{"style":268},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[270],{"type":42,"value":271},"  center",{"type":36,"tag":160,"props":273,"children":274},{"style":179},[275],{"type":42,"value":276},":",{"type":36,"tag":160,"props":278,"children":279},{"style":179},[280],{"type":42,"value":281}," {",{"type":36,"tag":160,"props":283,"children":284},{"style":268},[285],{"type":42,"value":286}," lat",{"type":36,"tag":160,"props":288,"children":289},{"style":179},[290],{"type":42,"value":276},{"type":36,"tag":160,"props":292,"children":294},{"style":293},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[295],{"type":42,"value":296}," 37.7749",{"type":36,"tag":160,"props":298,"children":299},{"style":179},[300],{"type":42,"value":256},{"type":36,"tag":160,"props":302,"children":303},{"style":268},[304],{"type":42,"value":305}," lng",{"type":36,"tag":160,"props":307,"children":308},{"style":179},[309],{"type":42,"value":276},{"type":36,"tag":160,"props":311,"children":312},{"style":179},[313],{"type":42,"value":314}," -",{"type":36,"tag":160,"props":316,"children":317},{"style":293},[318],{"type":42,"value":319},"122.4194",{"type":36,"tag":160,"props":321,"children":322},{"style":179},[323],{"type":42,"value":324}," },\n",{"type":36,"tag":160,"props":326,"children":328},{"class":162,"line":327},3,[329,334,338,343],{"type":36,"tag":160,"props":330,"children":331},{"style":268},[332],{"type":42,"value":333},"  zoom",{"type":36,"tag":160,"props":335,"children":336},{"style":179},[337],{"type":42,"value":276},{"type":36,"tag":160,"props":339,"children":340},{"style":293},[341],{"type":42,"value":342}," 12",{"type":36,"tag":160,"props":344,"children":345},{"style":179},[346],{"type":42,"value":347},",\n",{"type":36,"tag":160,"props":349,"children":351},{"class":162,"line":350},4,[352,357,361,366,371,375],{"type":36,"tag":160,"props":353,"children":354},{"style":268},[355],{"type":42,"value":356},"  mapTypeId",{"type":36,"tag":160,"props":358,"children":359},{"style":179},[360],{"type":42,"value":276},{"type":36,"tag":160,"props":362,"children":363},{"style":179},[364],{"type":42,"value":365}," '",{"type":36,"tag":160,"props":367,"children":368},{"style":239},[369],{"type":42,"value":370},"roadmap",{"type":36,"tag":160,"props":372,"children":373},{"style":179},[374],{"type":42,"value":236},{"type":36,"tag":160,"props":376,"children":378},{"style":377},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[379],{"type":42,"value":380}," \u002F\u002F or 'satellite', 'hybrid', 'terrain'\n",{"type":36,"tag":160,"props":382,"children":384},{"class":162,"line":383},5,[385,390,394],{"type":36,"tag":160,"props":386,"children":387},{"style":179},[388],{"type":42,"value":389},"}",{"type":36,"tag":160,"props":391,"children":392},{"style":173},[393],{"type":42,"value":251},{"type":36,"tag":160,"props":395,"children":396},{"style":179},[397],{"type":42,"value":398},";\n",{"type":36,"tag":58,"props":400,"children":402},{"id":401},"mapbox-gl-js",[403],{"type":42,"value":404},"Mapbox GL JS",{"type":36,"tag":149,"props":406,"children":408},{"className":151,"code":407,"language":153,"meta":154,"style":154},"mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';\nconst map = new mapboxgl.Map({\n  container: 'map',\n  style: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstreets-v12', \u002F\u002F or satellite-v9, outdoors-v12\n  center: [-122.4194, 37.7749], \u002F\u002F [lng, lat] - note the order!\n  zoom: 12\n});\n",[409],{"type":36,"tag":80,"props":410,"children":411},{"__ignoreMap":154},[412,450,491,519,553,600,617],{"type":36,"tag":160,"props":413,"children":414},{"class":162,"line":163},[415,420,424,429,433,437,442,446],{"type":36,"tag":160,"props":416,"children":417},{"style":173},[418],{"type":42,"value":419},"mapboxgl",{"type":36,"tag":160,"props":421,"children":422},{"style":179},[423],{"type":42,"value":197},{"type":36,"tag":160,"props":425,"children":426},{"style":173},[427],{"type":42,"value":428},"accessToken ",{"type":36,"tag":160,"props":430,"children":431},{"style":179},[432],{"type":42,"value":182},{"type":36,"tag":160,"props":434,"children":435},{"style":179},[436],{"type":42,"value":365},{"type":36,"tag":160,"props":438,"children":439},{"style":239},[440],{"type":42,"value":441},"YOUR_MAPBOX_TOKEN",{"type":36,"tag":160,"props":443,"children":444},{"style":179},[445],{"type":42,"value":236},{"type":36,"tag":160,"props":447,"children":448},{"style":179},[449],{"type":42,"value":398},{"type":36,"tag":160,"props":451,"children":452},{"class":162,"line":264},[453,457,461,465,469,474,478,482,486],{"type":36,"tag":160,"props":454,"children":455},{"style":167},[456],{"type":42,"value":170},{"type":36,"tag":160,"props":458,"children":459},{"style":173},[460],{"type":42,"value":176},{"type":36,"tag":160,"props":462,"children":463},{"style":179},[464],{"type":42,"value":182},{"type":36,"tag":160,"props":466,"children":467},{"style":179},[468],{"type":42,"value":187},{"type":36,"tag":160,"props":470,"children":471},{"style":173},[472],{"type":42,"value":473}," mapboxgl",{"type":36,"tag":160,"props":475,"children":476},{"style":179},[477],{"type":42,"value":197},{"type":36,"tag":160,"props":479,"children":480},{"style":209},[481],{"type":42,"value":212},{"type":36,"tag":160,"props":483,"children":484},{"style":173},[485],{"type":42,"value":231},{"type":36,"tag":160,"props":487,"children":488},{"style":179},[489],{"type":42,"value":490},"{\n",{"type":36,"tag":160,"props":492,"children":493},{"class":162,"line":327},[494,499,503,507,511,515],{"type":36,"tag":160,"props":495,"children":496},{"style":268},[497],{"type":42,"value":498},"  container",{"type":36,"tag":160,"props":500,"children":501},{"style":179},[502],{"type":42,"value":276},{"type":36,"tag":160,"props":504,"children":505},{"style":179},[506],{"type":42,"value":365},{"type":36,"tag":160,"props":508,"children":509},{"style":239},[510],{"type":42,"value":242},{"type":36,"tag":160,"props":512,"children":513},{"style":179},[514],{"type":42,"value":236},{"type":36,"tag":160,"props":516,"children":517},{"style":179},[518],{"type":42,"value":347},{"type":36,"tag":160,"props":520,"children":521},{"class":162,"line":350},[522,527,531,535,540,544,548],{"type":36,"tag":160,"props":523,"children":524},{"style":268},[525],{"type":42,"value":526},"  style",{"type":36,"tag":160,"props":528,"children":529},{"style":179},[530],{"type":42,"value":276},{"type":36,"tag":160,"props":532,"children":533},{"style":179},[534],{"type":42,"value":365},{"type":36,"tag":160,"props":536,"children":537},{"style":239},[538],{"type":42,"value":539},"mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstreets-v12",{"type":36,"tag":160,"props":541,"children":542},{"style":179},[543],{"type":42,"value":236},{"type":36,"tag":160,"props":545,"children":546},{"style":179},[547],{"type":42,"value":256},{"type":36,"tag":160,"props":549,"children":550},{"style":377},[551],{"type":42,"value":552}," \u002F\u002F or satellite-v9, outdoors-v12\n",{"type":36,"tag":160,"props":554,"children":555},{"class":162,"line":383},[556,560,564,569,574,578,582,586,591,595],{"type":36,"tag":160,"props":557,"children":558},{"style":268},[559],{"type":42,"value":271},{"type":36,"tag":160,"props":561,"children":562},{"style":179},[563],{"type":42,"value":276},{"type":36,"tag":160,"props":565,"children":566},{"style":173},[567],{"type":42,"value":568}," [",{"type":36,"tag":160,"props":570,"children":571},{"style":179},[572],{"type":42,"value":573},"-",{"type":36,"tag":160,"props":575,"children":576},{"style":293},[577],{"type":42,"value":319},{"type":36,"tag":160,"props":579,"children":580},{"style":179},[581],{"type":42,"value":256},{"type":36,"tag":160,"props":583,"children":584},{"style":293},[585],{"type":42,"value":296},{"type":36,"tag":160,"props":587,"children":588},{"style":173},[589],{"type":42,"value":590},"]",{"type":36,"tag":160,"props":592,"children":593},{"style":179},[594],{"type":42,"value":256},{"type":36,"tag":160,"props":596,"children":597},{"style":377},[598],{"type":42,"value":599}," \u002F\u002F [lng, lat] - note the order!\n",{"type":36,"tag":160,"props":601,"children":603},{"class":162,"line":602},6,[604,608,612],{"type":36,"tag":160,"props":605,"children":606},{"style":268},[607],{"type":42,"value":333},{"type":36,"tag":160,"props":609,"children":610},{"style":179},[611],{"type":42,"value":276},{"type":36,"tag":160,"props":613,"children":614},{"style":293},[615],{"type":42,"value":616}," 12\n",{"type":36,"tag":160,"props":618,"children":620},{"class":162,"line":619},7,[621,625,629],{"type":36,"tag":160,"props":622,"children":623},{"style":179},[624],{"type":42,"value":389},{"type":36,"tag":160,"props":626,"children":627},{"style":173},[628],{"type":42,"value":251},{"type":36,"tag":160,"props":630,"children":631},{"style":179},[632],{"type":42,"value":398},{"type":36,"tag":45,"props":634,"children":635},{},[636],{"type":36,"tag":129,"props":637,"children":638},{},[639],{"type":42,"value":640},"Key Differences:",{"type":36,"tag":65,"props":642,"children":643},{},[644,668,678],{"type":36,"tag":69,"props":645,"children":646},{},[647,652,654,660,662],{"type":36,"tag":129,"props":648,"children":649},{},[650],{"type":42,"value":651},"Coordinate order:",{"type":42,"value":653}," Google uses ",{"type":36,"tag":80,"props":655,"children":657},{"className":656},[],[658],{"type":42,"value":659},"{lat, lng}",{"type":42,"value":661},", Mapbox uses ",{"type":36,"tag":80,"props":663,"children":665},{"className":664},[],[666],{"type":42,"value":667},"[lng, lat]",{"type":36,"tag":69,"props":669,"children":670},{},[671,676],{"type":36,"tag":129,"props":672,"children":673},{},[674],{"type":42,"value":675},"Authentication:",{"type":42,"value":677}," Google uses API key in script tag, Mapbox uses access token in code",{"type":36,"tag":69,"props":679,"children":680},{},[681,686],{"type":36,"tag":129,"props":682,"children":683},{},[684],{"type":42,"value":685},"Styling:",{"type":42,"value":687}," Google uses map types, Mapbox uses full style URLs",{"type":36,"tag":51,"props":689,"children":691},{"id":690},"api-equivalents-reference",[692],{"type":42,"value":693},"API Equivalents Reference",{"type":36,"tag":58,"props":695,"children":697},{"id":696},"map-methods",[698],{"type":42,"value":699},"Map Methods",{"type":36,"tag":701,"props":702,"children":703},"table",{},[704,726],{"type":36,"tag":705,"props":706,"children":707},"thead",{},[708],{"type":36,"tag":709,"props":710,"children":711},"tr",{},[712,717,721],{"type":36,"tag":713,"props":714,"children":715},"th",{},[716],{"type":42,"value":147},{"type":36,"tag":713,"props":718,"children":719},{},[720],{"type":42,"value":404},{"type":36,"tag":713,"props":722,"children":723},{},[724],{"type":42,"value":725},"Notes",{"type":36,"tag":727,"props":728,"children":729},"tbody",{},[730,757,782,807,831,857,883,909],{"type":36,"tag":709,"props":731,"children":732},{},[733,743,752],{"type":36,"tag":734,"props":735,"children":736},"td",{},[737],{"type":36,"tag":80,"props":738,"children":740},{"className":739},[],[741],{"type":42,"value":742},"map.setCenter(latLng)",{"type":36,"tag":734,"props":744,"children":745},{},[746],{"type":36,"tag":80,"props":747,"children":749},{"className":748},[],[750],{"type":42,"value":751},"map.setCenter([lng, lat])",{"type":36,"tag":734,"props":753,"children":754},{},[755],{"type":42,"value":756},"Coordinate order reversed",{"type":36,"tag":709,"props":758,"children":759},{},[760,769,777],{"type":36,"tag":734,"props":761,"children":762},{},[763],{"type":36,"tag":80,"props":764,"children":766},{"className":765},[],[767],{"type":42,"value":768},"map.getCenter()",{"type":36,"tag":734,"props":770,"children":771},{},[772],{"type":36,"tag":80,"props":773,"children":775},{"className":774},[],[776],{"type":42,"value":768},{"type":36,"tag":734,"props":778,"children":779},{},[780],{"type":42,"value":781},"Returns LngLat object",{"type":36,"tag":709,"props":783,"children":784},{},[785,794,802],{"type":36,"tag":734,"props":786,"children":787},{},[788],{"type":36,"tag":80,"props":789,"children":791},{"className":790},[],[792],{"type":42,"value":793},"map.setZoom(zoom)",{"type":36,"tag":734,"props":795,"children":796},{},[797],{"type":36,"tag":80,"props":798,"children":800},{"className":799},[],[801],{"type":42,"value":793},{"type":36,"tag":734,"props":803,"children":804},{},[805],{"type":42,"value":806},"Same behavior",{"type":36,"tag":709,"props":808,"children":809},{},[810,819,827],{"type":36,"tag":734,"props":811,"children":812},{},[813],{"type":36,"tag":80,"props":814,"children":816},{"className":815},[],[817],{"type":42,"value":818},"map.getZoom()",{"type":36,"tag":734,"props":820,"children":821},{},[822],{"type":36,"tag":80,"props":823,"children":825},{"className":824},[],[826],{"type":42,"value":818},{"type":36,"tag":734,"props":828,"children":829},{},[830],{"type":42,"value":806},{"type":36,"tag":709,"props":832,"children":833},{},[834,843,852],{"type":36,"tag":734,"props":835,"children":836},{},[837],{"type":36,"tag":80,"props":838,"children":840},{"className":839},[],[841],{"type":42,"value":842},"map.panTo(latLng)",{"type":36,"tag":734,"props":844,"children":845},{},[846],{"type":36,"tag":80,"props":847,"children":849},{"className":848},[],[850],{"type":42,"value":851},"map.panTo([lng, lat])",{"type":36,"tag":734,"props":853,"children":854},{},[855],{"type":42,"value":856},"Animated pan",{"type":36,"tag":709,"props":858,"children":859},{},[860,869,878],{"type":36,"tag":734,"props":861,"children":862},{},[863],{"type":36,"tag":80,"props":864,"children":866},{"className":865},[],[867],{"type":42,"value":868},"map.fitBounds(bounds)",{"type":36,"tag":734,"props":870,"children":871},{},[872],{"type":36,"tag":80,"props":873,"children":875},{"className":874},[],[876],{"type":42,"value":877},"map.fitBounds([[lng,lat],[lng,lat]])",{"type":36,"tag":734,"props":879,"children":880},{},[881],{"type":42,"value":882},"Different bound format",{"type":36,"tag":709,"props":884,"children":885},{},[886,895,904],{"type":36,"tag":734,"props":887,"children":888},{},[889],{"type":36,"tag":80,"props":890,"children":892},{"className":891},[],[893],{"type":42,"value":894},"map.setMapTypeId(type)",{"type":36,"tag":734,"props":896,"children":897},{},[898],{"type":36,"tag":80,"props":899,"children":901},{"className":900},[],[902],{"type":42,"value":903},"map.setStyle(styleUrl)",{"type":36,"tag":734,"props":905,"children":906},{},[907],{"type":42,"value":908},"Completely different approach",{"type":36,"tag":709,"props":910,"children":911},{},[912,921,929],{"type":36,"tag":734,"props":913,"children":914},{},[915],{"type":36,"tag":80,"props":916,"children":918},{"className":917},[],[919],{"type":42,"value":920},"map.getBounds()",{"type":36,"tag":734,"props":922,"children":923},{},[924],{"type":36,"tag":80,"props":925,"children":927},{"className":926},[],[928],{"type":42,"value":920},{"type":36,"tag":734,"props":930,"children":931},{},[932],{"type":42,"value":933},"Similar",{"type":36,"tag":58,"props":935,"children":937},{"id":936},"map-events",[938],{"type":42,"value":939},"Map Events",{"type":36,"tag":701,"props":941,"children":942},{},[943,961],{"type":36,"tag":705,"props":944,"children":945},{},[946],{"type":36,"tag":709,"props":947,"children":948},{},[949,953,957],{"type":36,"tag":713,"props":950,"children":951},{},[952],{"type":42,"value":147},{"type":36,"tag":713,"props":954,"children":955},{},[956],{"type":42,"value":404},{"type":36,"tag":713,"props":958,"children":959},{},[960],{"type":42,"value":725},{"type":36,"tag":727,"props":962,"children":963},{},[964,990,1016,1050,1082,1107,1132],{"type":36,"tag":709,"props":965,"children":966},{},[967,976,985],{"type":36,"tag":734,"props":968,"children":969},{},[970],{"type":36,"tag":80,"props":971,"children":973},{"className":972},[],[974],{"type":42,"value":975},"google.maps.event.addListener(map, 'click', fn)",{"type":36,"tag":734,"props":977,"children":978},{},[979],{"type":36,"tag":80,"props":980,"children":982},{"className":981},[],[983],{"type":42,"value":984},"map.on('click', fn)",{"type":36,"tag":734,"props":986,"children":987},{},[988],{"type":42,"value":989},"Simpler syntax",{"type":36,"tag":709,"props":991,"children":992},{},[993,1002,1011],{"type":36,"tag":734,"props":994,"children":995},{},[996],{"type":36,"tag":80,"props":997,"children":999},{"className":998},[],[1000],{"type":42,"value":1001},"event.latLng",{"type":36,"tag":734,"props":1003,"children":1004},{},[1005],{"type":36,"tag":80,"props":1006,"children":1008},{"className":1007},[],[1009],{"type":42,"value":1010},"event.lngLat",{"type":36,"tag":734,"props":1012,"children":1013},{},[1014],{"type":42,"value":1015},"Event property name",{"type":36,"tag":709,"props":1017,"children":1018},{},[1019,1028,1045],{"type":36,"tag":734,"props":1020,"children":1021},{},[1022],{"type":36,"tag":80,"props":1023,"children":1025},{"className":1024},[],[1026],{"type":42,"value":1027},"'center_changed'",{"type":36,"tag":734,"props":1029,"children":1030},{},[1031,1037,1039],{"type":36,"tag":80,"props":1032,"children":1034},{"className":1033},[],[1035],{"type":42,"value":1036},"'move'",{"type":42,"value":1038}," \u002F ",{"type":36,"tag":80,"props":1040,"children":1042},{"className":1041},[],[1043],{"type":42,"value":1044},"'moveend'",{"type":36,"tag":734,"props":1046,"children":1047},{},[1048],{"type":42,"value":1049},"Different event names",{"type":36,"tag":709,"props":1051,"children":1052},{},[1053,1062,1078],{"type":36,"tag":734,"props":1054,"children":1055},{},[1056],{"type":36,"tag":80,"props":1057,"children":1059},{"className":1058},[],[1060],{"type":42,"value":1061},"'zoom_changed'",{"type":36,"tag":734,"props":1063,"children":1064},{},[1065,1071,1072],{"type":36,"tag":80,"props":1066,"children":1068},{"className":1067},[],[1069],{"type":42,"value":1070},"'zoom'",{"type":42,"value":1038},{"type":36,"tag":80,"props":1073,"children":1075},{"className":1074},[],[1076],{"type":42,"value":1077},"'zoomend'",{"type":36,"tag":734,"props":1079,"children":1080},{},[1081],{"type":42,"value":1049},{"type":36,"tag":709,"props":1083,"children":1084},{},[1085,1094,1102],{"type":36,"tag":734,"props":1086,"children":1087},{},[1088],{"type":36,"tag":80,"props":1089,"children":1091},{"className":1090},[],[1092],{"type":42,"value":1093},"'bounds_changed'",{"type":36,"tag":734,"props":1095,"children":1096},{},[1097],{"type":36,"tag":80,"props":1098,"children":1100},{"className":1099},[],[1101],{"type":42,"value":1044},{"type":36,"tag":734,"props":1103,"children":1104},{},[1105],{"type":42,"value":1106},"No direct equivalent",{"type":36,"tag":709,"props":1108,"children":1109},{},[1110,1119,1127],{"type":36,"tag":734,"props":1111,"children":1112},{},[1113],{"type":36,"tag":80,"props":1114,"children":1116},{"className":1115},[],[1117],{"type":42,"value":1118},"'mousemove'",{"type":36,"tag":734,"props":1120,"children":1121},{},[1122],{"type":36,"tag":80,"props":1123,"children":1125},{"className":1124},[],[1126],{"type":42,"value":1118},{"type":36,"tag":734,"props":1128,"children":1129},{},[1130],{"type":42,"value":1131},"Same",{"type":36,"tag":709,"props":1133,"children":1134},{},[1135,1144,1153],{"type":36,"tag":734,"props":1136,"children":1137},{},[1138],{"type":36,"tag":80,"props":1139,"children":1141},{"className":1140},[],[1142],{"type":42,"value":1143},"'mouseout'",{"type":36,"tag":734,"props":1145,"children":1146},{},[1147],{"type":36,"tag":80,"props":1148,"children":1150},{"className":1149},[],[1151],{"type":42,"value":1152},"'mouseleave'",{"type":36,"tag":734,"props":1154,"children":1155},{},[1156],{"type":42,"value":1157},"Different name",{"type":36,"tag":51,"props":1159,"children":1161},{"id":1160},"markers-and-points",[1162],{"type":42,"value":1163},"Markers and Points",{"type":36,"tag":58,"props":1165,"children":1167},{"id":1166},"simple-marker",[1168],{"type":42,"value":1169},"Simple Marker",{"type":36,"tag":45,"props":1171,"children":1172},{},[1173],{"type":36,"tag":129,"props":1174,"children":1175},{},[1176],{"type":42,"value":1177},"Google Maps:",{"type":36,"tag":149,"props":1179,"children":1181},{"className":151,"code":1180,"language":153,"meta":154,"style":154},"const marker = new google.maps.Marker({\n  position: { lat: 37.7749, lng: -122.4194 },\n  map: map,\n  title: 'San Francisco',\n  icon: 'custom-icon.png'\n});\n\n\u002F\u002F Remove marker\nmarker.setMap(null);\n",[1182],{"type":36,"tag":80,"props":1183,"children":1184},{"__ignoreMap":154},[1185,1234,1286,1307,1336,1362,1377,1386,1395],{"type":36,"tag":160,"props":1186,"children":1187},{"class":162,"line":163},[1188,1192,1197,1201,1205,1209,1213,1217,1221,1226,1230],{"type":36,"tag":160,"props":1189,"children":1190},{"style":167},[1191],{"type":42,"value":170},{"type":36,"tag":160,"props":1193,"children":1194},{"style":173},[1195],{"type":42,"value":1196}," marker ",{"type":36,"tag":160,"props":1198,"children":1199},{"style":179},[1200],{"type":42,"value":182},{"type":36,"tag":160,"props":1202,"children":1203},{"style":179},[1204],{"type":42,"value":187},{"type":36,"tag":160,"props":1206,"children":1207},{"style":173},[1208],{"type":42,"value":192},{"type":36,"tag":160,"props":1210,"children":1211},{"style":179},[1212],{"type":42,"value":197},{"type":36,"tag":160,"props":1214,"children":1215},{"style":173},[1216],{"type":42,"value":202},{"type":36,"tag":160,"props":1218,"children":1219},{"style":179},[1220],{"type":42,"value":197},{"type":36,"tag":160,"props":1222,"children":1223},{"style":209},[1224],{"type":42,"value":1225},"Marker",{"type":36,"tag":160,"props":1227,"children":1228},{"style":173},[1229],{"type":42,"value":231},{"type":36,"tag":160,"props":1231,"children":1232},{"style":179},[1233],{"type":42,"value":490},{"type":36,"tag":160,"props":1235,"children":1236},{"class":162,"line":264},[1237,1242,1246,1250,1254,1258,1262,1266,1270,1274,1278,1282],{"type":36,"tag":160,"props":1238,"children":1239},{"style":268},[1240],{"type":42,"value":1241},"  position",{"type":36,"tag":160,"props":1243,"children":1244},{"style":179},[1245],{"type":42,"value":276},{"type":36,"tag":160,"props":1247,"children":1248},{"style":179},[1249],{"type":42,"value":281},{"type":36,"tag":160,"props":1251,"children":1252},{"style":268},[1253],{"type":42,"value":286},{"type":36,"tag":160,"props":1255,"children":1256},{"style":179},[1257],{"type":42,"value":276},{"type":36,"tag":160,"props":1259,"children":1260},{"style":293},[1261],{"type":42,"value":296},{"type":36,"tag":160,"props":1263,"children":1264},{"style":179},[1265],{"type":42,"value":256},{"type":36,"tag":160,"props":1267,"children":1268},{"style":268},[1269],{"type":42,"value":305},{"type":36,"tag":160,"props":1271,"children":1272},{"style":179},[1273],{"type":42,"value":276},{"type":36,"tag":160,"props":1275,"children":1276},{"style":179},[1277],{"type":42,"value":314},{"type":36,"tag":160,"props":1279,"children":1280},{"style":293},[1281],{"type":42,"value":319},{"type":36,"tag":160,"props":1283,"children":1284},{"style":179},[1285],{"type":42,"value":324},{"type":36,"tag":160,"props":1287,"children":1288},{"class":162,"line":327},[1289,1294,1298,1303],{"type":36,"tag":160,"props":1290,"children":1291},{"style":268},[1292],{"type":42,"value":1293},"  map",{"type":36,"tag":160,"props":1295,"children":1296},{"style":179},[1297],{"type":42,"value":276},{"type":36,"tag":160,"props":1299,"children":1300},{"style":173},[1301],{"type":42,"value":1302}," map",{"type":36,"tag":160,"props":1304,"children":1305},{"style":179},[1306],{"type":42,"value":347},{"type":36,"tag":160,"props":1308,"children":1309},{"class":162,"line":350},[1310,1315,1319,1323,1328,1332],{"type":36,"tag":160,"props":1311,"children":1312},{"style":268},[1313],{"type":42,"value":1314},"  title",{"type":36,"tag":160,"props":1316,"children":1317},{"style":179},[1318],{"type":42,"value":276},{"type":36,"tag":160,"props":1320,"children":1321},{"style":179},[1322],{"type":42,"value":365},{"type":36,"tag":160,"props":1324,"children":1325},{"style":239},[1326],{"type":42,"value":1327},"San Francisco",{"type":36,"tag":160,"props":1329,"children":1330},{"style":179},[1331],{"type":42,"value":236},{"type":36,"tag":160,"props":1333,"children":1334},{"style":179},[1335],{"type":42,"value":347},{"type":36,"tag":160,"props":1337,"children":1338},{"class":162,"line":383},[1339,1344,1348,1352,1357],{"type":36,"tag":160,"props":1340,"children":1341},{"style":268},[1342],{"type":42,"value":1343},"  icon",{"type":36,"tag":160,"props":1345,"children":1346},{"style":179},[1347],{"type":42,"value":276},{"type":36,"tag":160,"props":1349,"children":1350},{"style":179},[1351],{"type":42,"value":365},{"type":36,"tag":160,"props":1353,"children":1354},{"style":239},[1355],{"type":42,"value":1356},"custom-icon.png",{"type":36,"tag":160,"props":1358,"children":1359},{"style":179},[1360],{"type":42,"value":1361},"'\n",{"type":36,"tag":160,"props":1363,"children":1364},{"class":162,"line":602},[1365,1369,1373],{"type":36,"tag":160,"props":1366,"children":1367},{"style":179},[1368],{"type":42,"value":389},{"type":36,"tag":160,"props":1370,"children":1371},{"style":173},[1372],{"type":42,"value":251},{"type":36,"tag":160,"props":1374,"children":1375},{"style":179},[1376],{"type":42,"value":398},{"type":36,"tag":160,"props":1378,"children":1379},{"class":162,"line":619},[1380],{"type":36,"tag":160,"props":1381,"children":1383},{"emptyLinePlaceholder":1382},true,[1384],{"type":42,"value":1385},"\n",{"type":36,"tag":160,"props":1387,"children":1389},{"class":162,"line":1388},8,[1390],{"type":36,"tag":160,"props":1391,"children":1392},{"style":377},[1393],{"type":42,"value":1394},"\u002F\u002F Remove marker\n",{"type":36,"tag":160,"props":1396,"children":1398},{"class":162,"line":1397},9,[1399,1404,1408,1413,1417,1422,1426],{"type":36,"tag":160,"props":1400,"children":1401},{"style":173},[1402],{"type":42,"value":1403},"marker",{"type":36,"tag":160,"props":1405,"children":1406},{"style":179},[1407],{"type":42,"value":197},{"type":36,"tag":160,"props":1409,"children":1410},{"style":209},[1411],{"type":42,"value":1412},"setMap",{"type":36,"tag":160,"props":1414,"children":1415},{"style":173},[1416],{"type":42,"value":231},{"type":36,"tag":160,"props":1418,"children":1419},{"style":179},[1420],{"type":42,"value":1421},"null",{"type":36,"tag":160,"props":1423,"children":1424},{"style":173},[1425],{"type":42,"value":251},{"type":36,"tag":160,"props":1427,"children":1428},{"style":179},[1429],{"type":42,"value":398},{"type":36,"tag":45,"props":1431,"children":1432},{},[1433],{"type":36,"tag":129,"props":1434,"children":1435},{},[1436],{"type":42,"value":1437},"Mapbox GL JS:",{"type":36,"tag":149,"props":1439,"children":1441},{"className":151,"code":1440,"language":153,"meta":154,"style":154},"\u002F\u002F Create marker\nconst marker = new mapboxgl.Marker()\n  .setLngLat([-122.4194, 37.7749])\n  .setPopup(new mapboxgl.Popup().setText('San Francisco'))\n  .addTo(map);\n\n\u002F\u002F Remove marker\nmarker.remove();\n",[1442],{"type":36,"tag":80,"props":1443,"children":1444},{"__ignoreMap":154},[1445,1453,1489,1528,1597,1618,1625,1632],{"type":36,"tag":160,"props":1446,"children":1447},{"class":162,"line":163},[1448],{"type":36,"tag":160,"props":1449,"children":1450},{"style":377},[1451],{"type":42,"value":1452},"\u002F\u002F Create marker\n",{"type":36,"tag":160,"props":1454,"children":1455},{"class":162,"line":264},[1456,1460,1464,1468,1472,1476,1480,1484],{"type":36,"tag":160,"props":1457,"children":1458},{"style":167},[1459],{"type":42,"value":170},{"type":36,"tag":160,"props":1461,"children":1462},{"style":173},[1463],{"type":42,"value":1196},{"type":36,"tag":160,"props":1465,"children":1466},{"style":179},[1467],{"type":42,"value":182},{"type":36,"tag":160,"props":1469,"children":1470},{"style":179},[1471],{"type":42,"value":187},{"type":36,"tag":160,"props":1473,"children":1474},{"style":173},[1475],{"type":42,"value":473},{"type":36,"tag":160,"props":1477,"children":1478},{"style":179},[1479],{"type":42,"value":197},{"type":36,"tag":160,"props":1481,"children":1482},{"style":209},[1483],{"type":42,"value":1225},{"type":36,"tag":160,"props":1485,"children":1486},{"style":173},[1487],{"type":42,"value":1488},"()\n",{"type":36,"tag":160,"props":1490,"children":1491},{"class":162,"line":327},[1492,1497,1502,1507,1511,1515,1519,1523],{"type":36,"tag":160,"props":1493,"children":1494},{"style":179},[1495],{"type":42,"value":1496},"  .",{"type":36,"tag":160,"props":1498,"children":1499},{"style":209},[1500],{"type":42,"value":1501},"setLngLat",{"type":36,"tag":160,"props":1503,"children":1504},{"style":173},[1505],{"type":42,"value":1506},"([",{"type":36,"tag":160,"props":1508,"children":1509},{"style":179},[1510],{"type":42,"value":573},{"type":36,"tag":160,"props":1512,"children":1513},{"style":293},[1514],{"type":42,"value":319},{"type":36,"tag":160,"props":1516,"children":1517},{"style":179},[1518],{"type":42,"value":256},{"type":36,"tag":160,"props":1520,"children":1521},{"style":293},[1522],{"type":42,"value":296},{"type":36,"tag":160,"props":1524,"children":1525},{"style":173},[1526],{"type":42,"value":1527},"])\n",{"type":36,"tag":160,"props":1529,"children":1530},{"class":162,"line":350},[1531,1535,1540,1544,1549,1553,1557,1562,1567,1571,1576,1580,1584,1588,1592],{"type":36,"tag":160,"props":1532,"children":1533},{"style":179},[1534],{"type":42,"value":1496},{"type":36,"tag":160,"props":1536,"children":1537},{"style":209},[1538],{"type":42,"value":1539},"setPopup",{"type":36,"tag":160,"props":1541,"children":1542},{"style":173},[1543],{"type":42,"value":231},{"type":36,"tag":160,"props":1545,"children":1546},{"style":179},[1547],{"type":42,"value":1548},"new",{"type":36,"tag":160,"props":1550,"children":1551},{"style":173},[1552],{"type":42,"value":473},{"type":36,"tag":160,"props":1554,"children":1555},{"style":179},[1556],{"type":42,"value":197},{"type":36,"tag":160,"props":1558,"children":1559},{"style":209},[1560],{"type":42,"value":1561},"Popup",{"type":36,"tag":160,"props":1563,"children":1564},{"style":173},[1565],{"type":42,"value":1566},"()",{"type":36,"tag":160,"props":1568,"children":1569},{"style":179},[1570],{"type":42,"value":197},{"type":36,"tag":160,"props":1572,"children":1573},{"style":209},[1574],{"type":42,"value":1575},"setText",{"type":36,"tag":160,"props":1577,"children":1578},{"style":173},[1579],{"type":42,"value":231},{"type":36,"tag":160,"props":1581,"children":1582},{"style":179},[1583],{"type":42,"value":236},{"type":36,"tag":160,"props":1585,"children":1586},{"style":239},[1587],{"type":42,"value":1327},{"type":36,"tag":160,"props":1589,"children":1590},{"style":179},[1591],{"type":42,"value":236},{"type":36,"tag":160,"props":1593,"children":1594},{"style":173},[1595],{"type":42,"value":1596},"))\n",{"type":36,"tag":160,"props":1598,"children":1599},{"class":162,"line":383},[1600,1604,1609,1614],{"type":36,"tag":160,"props":1601,"children":1602},{"style":179},[1603],{"type":42,"value":1496},{"type":36,"tag":160,"props":1605,"children":1606},{"style":209},[1607],{"type":42,"value":1608},"addTo",{"type":36,"tag":160,"props":1610,"children":1611},{"style":173},[1612],{"type":42,"value":1613},"(map)",{"type":36,"tag":160,"props":1615,"children":1616},{"style":179},[1617],{"type":42,"value":398},{"type":36,"tag":160,"props":1619,"children":1620},{"class":162,"line":602},[1621],{"type":36,"tag":160,"props":1622,"children":1623},{"emptyLinePlaceholder":1382},[1624],{"type":42,"value":1385},{"type":36,"tag":160,"props":1626,"children":1627},{"class":162,"line":619},[1628],{"type":36,"tag":160,"props":1629,"children":1630},{"style":377},[1631],{"type":42,"value":1394},{"type":36,"tag":160,"props":1633,"children":1634},{"class":162,"line":1388},[1635,1639,1643,1648,1652],{"type":36,"tag":160,"props":1636,"children":1637},{"style":173},[1638],{"type":42,"value":1403},{"type":36,"tag":160,"props":1640,"children":1641},{"style":179},[1642],{"type":42,"value":197},{"type":36,"tag":160,"props":1644,"children":1645},{"style":209},[1646],{"type":42,"value":1647},"remove",{"type":36,"tag":160,"props":1649,"children":1650},{"style":173},[1651],{"type":42,"value":1566},{"type":36,"tag":160,"props":1653,"children":1654},{"style":179},[1655],{"type":42,"value":398},{"type":36,"tag":58,"props":1657,"children":1659},{"id":1658},"multiple-markers",[1660],{"type":42,"value":1661},"Multiple Markers",{"type":36,"tag":45,"props":1663,"children":1664},{},[1665],{"type":36,"tag":129,"props":1666,"children":1667},{},[1668],{"type":42,"value":1177},{"type":36,"tag":149,"props":1670,"children":1672},{"className":151,"code":1671,"language":153,"meta":154,"style":154},"const markers = locations.map(\n  (loc) =>\n    new google.maps.Marker({\n      position: { lat: loc.lat, lng: loc.lng },\n      map: map\n    })\n);\n",[1673],{"type":36,"tag":80,"props":1674,"children":1675},{"__ignoreMap":154},[1676,1710,1733,1769,1837,1854,1867],{"type":36,"tag":160,"props":1677,"children":1678},{"class":162,"line":163},[1679,1683,1688,1692,1697,1701,1705],{"type":36,"tag":160,"props":1680,"children":1681},{"style":167},[1682],{"type":42,"value":170},{"type":36,"tag":160,"props":1684,"children":1685},{"style":173},[1686],{"type":42,"value":1687}," markers ",{"type":36,"tag":160,"props":1689,"children":1690},{"style":179},[1691],{"type":42,"value":182},{"type":36,"tag":160,"props":1693,"children":1694},{"style":173},[1695],{"type":42,"value":1696}," locations",{"type":36,"tag":160,"props":1698,"children":1699},{"style":179},[1700],{"type":42,"value":197},{"type":36,"tag":160,"props":1702,"children":1703},{"style":209},[1704],{"type":42,"value":242},{"type":36,"tag":160,"props":1706,"children":1707},{"style":173},[1708],{"type":42,"value":1709},"(\n",{"type":36,"tag":160,"props":1711,"children":1712},{"class":162,"line":264},[1713,1718,1724,1728],{"type":36,"tag":160,"props":1714,"children":1715},{"style":179},[1716],{"type":42,"value":1717},"  (",{"type":36,"tag":160,"props":1719,"children":1721},{"style":1720},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[1722],{"type":42,"value":1723},"loc",{"type":36,"tag":160,"props":1725,"children":1726},{"style":179},[1727],{"type":42,"value":251},{"type":36,"tag":160,"props":1729,"children":1730},{"style":167},[1731],{"type":42,"value":1732}," =>\n",{"type":36,"tag":160,"props":1734,"children":1735},{"class":162,"line":327},[1736,1741,1745,1749,1753,1757,1761,1765],{"type":36,"tag":160,"props":1737,"children":1738},{"style":179},[1739],{"type":42,"value":1740},"    new",{"type":36,"tag":160,"props":1742,"children":1743},{"style":173},[1744],{"type":42,"value":192},{"type":36,"tag":160,"props":1746,"children":1747},{"style":179},[1748],{"type":42,"value":197},{"type":36,"tag":160,"props":1750,"children":1751},{"style":173},[1752],{"type":42,"value":202},{"type":36,"tag":160,"props":1754,"children":1755},{"style":179},[1756],{"type":42,"value":197},{"type":36,"tag":160,"props":1758,"children":1759},{"style":209},[1760],{"type":42,"value":1225},{"type":36,"tag":160,"props":1762,"children":1763},{"style":173},[1764],{"type":42,"value":231},{"type":36,"tag":160,"props":1766,"children":1767},{"style":179},[1768],{"type":42,"value":490},{"type":36,"tag":160,"props":1770,"children":1771},{"class":162,"line":350},[1772,1777,1781,1785,1789,1793,1798,1802,1807,1811,1815,1819,1823,1827,1832],{"type":36,"tag":160,"props":1773,"children":1774},{"style":268},[1775],{"type":42,"value":1776},"      position",{"type":36,"tag":160,"props":1778,"children":1779},{"style":179},[1780],{"type":42,"value":276},{"type":36,"tag":160,"props":1782,"children":1783},{"style":179},[1784],{"type":42,"value":281},{"type":36,"tag":160,"props":1786,"children":1787},{"style":268},[1788],{"type":42,"value":286},{"type":36,"tag":160,"props":1790,"children":1791},{"style":179},[1792],{"type":42,"value":276},{"type":36,"tag":160,"props":1794,"children":1795},{"style":173},[1796],{"type":42,"value":1797}," loc",{"type":36,"tag":160,"props":1799,"children":1800},{"style":179},[1801],{"type":42,"value":197},{"type":36,"tag":160,"props":1803,"children":1804},{"style":173},[1805],{"type":42,"value":1806},"lat",{"type":36,"tag":160,"props":1808,"children":1809},{"style":179},[1810],{"type":42,"value":256},{"type":36,"tag":160,"props":1812,"children":1813},{"style":268},[1814],{"type":42,"value":305},{"type":36,"tag":160,"props":1816,"children":1817},{"style":179},[1818],{"type":42,"value":276},{"type":36,"tag":160,"props":1820,"children":1821},{"style":173},[1822],{"type":42,"value":1797},{"type":36,"tag":160,"props":1824,"children":1825},{"style":179},[1826],{"type":42,"value":197},{"type":36,"tag":160,"props":1828,"children":1829},{"style":173},[1830],{"type":42,"value":1831},"lng ",{"type":36,"tag":160,"props":1833,"children":1834},{"style":179},[1835],{"type":42,"value":1836},"},\n",{"type":36,"tag":160,"props":1838,"children":1839},{"class":162,"line":383},[1840,1845,1849],{"type":36,"tag":160,"props":1841,"children":1842},{"style":268},[1843],{"type":42,"value":1844},"      map",{"type":36,"tag":160,"props":1846,"children":1847},{"style":179},[1848],{"type":42,"value":276},{"type":36,"tag":160,"props":1850,"children":1851},{"style":173},[1852],{"type":42,"value":1853}," map\n",{"type":36,"tag":160,"props":1855,"children":1856},{"class":162,"line":602},[1857,1862],{"type":36,"tag":160,"props":1858,"children":1859},{"style":179},[1860],{"type":42,"value":1861},"    }",{"type":36,"tag":160,"props":1863,"children":1864},{"style":173},[1865],{"type":42,"value":1866},")\n",{"type":36,"tag":160,"props":1868,"children":1869},{"class":162,"line":619},[1870,1874],{"type":36,"tag":160,"props":1871,"children":1872},{"style":173},[1873],{"type":42,"value":251},{"type":36,"tag":160,"props":1875,"children":1876},{"style":179},[1877],{"type":42,"value":398},{"type":36,"tag":45,"props":1879,"children":1880},{},[1881],{"type":36,"tag":129,"props":1882,"children":1883},{},[1884],{"type":42,"value":1885},"Mapbox GL JS (Equivalent Approach):",{"type":36,"tag":149,"props":1887,"children":1889},{"className":151,"code":1888,"language":153,"meta":154,"style":154},"\u002F\u002F Same object-oriented approach\nconst markers = locations.map((loc) => new mapboxgl.Marker().setLngLat([loc.lng, loc.lat]).addTo(map));\n",[1890],{"type":36,"tag":80,"props":1891,"children":1892},{"__ignoreMap":154},[1893,1901],{"type":36,"tag":160,"props":1894,"children":1895},{"class":162,"line":163},[1896],{"type":36,"tag":160,"props":1897,"children":1898},{"style":377},[1899],{"type":42,"value":1900},"\u002F\u002F Same object-oriented approach\n",{"type":36,"tag":160,"props":1902,"children":1903},{"class":162,"line":264},[1904,1908,1912,1916,1920,1924,1928,1932,1936,1940,1944,1949,1953,1957,1961,1965,1969,1973,1977,1982,1986,1991,1995,1999,2003,2008,2012,2016,2021],{"type":36,"tag":160,"props":1905,"children":1906},{"style":167},[1907],{"type":42,"value":170},{"type":36,"tag":160,"props":1909,"children":1910},{"style":173},[1911],{"type":42,"value":1687},{"type":36,"tag":160,"props":1913,"children":1914},{"style":179},[1915],{"type":42,"value":182},{"type":36,"tag":160,"props":1917,"children":1918},{"style":173},[1919],{"type":42,"value":1696},{"type":36,"tag":160,"props":1921,"children":1922},{"style":179},[1923],{"type":42,"value":197},{"type":36,"tag":160,"props":1925,"children":1926},{"style":209},[1927],{"type":42,"value":242},{"type":36,"tag":160,"props":1929,"children":1930},{"style":173},[1931],{"type":42,"value":231},{"type":36,"tag":160,"props":1933,"children":1934},{"style":179},[1935],{"type":42,"value":231},{"type":36,"tag":160,"props":1937,"children":1938},{"style":1720},[1939],{"type":42,"value":1723},{"type":36,"tag":160,"props":1941,"children":1942},{"style":179},[1943],{"type":42,"value":251},{"type":36,"tag":160,"props":1945,"children":1946},{"style":167},[1947],{"type":42,"value":1948}," =>",{"type":36,"tag":160,"props":1950,"children":1951},{"style":179},[1952],{"type":42,"value":187},{"type":36,"tag":160,"props":1954,"children":1955},{"style":173},[1956],{"type":42,"value":473},{"type":36,"tag":160,"props":1958,"children":1959},{"style":179},[1960],{"type":42,"value":197},{"type":36,"tag":160,"props":1962,"children":1963},{"style":209},[1964],{"type":42,"value":1225},{"type":36,"tag":160,"props":1966,"children":1967},{"style":173},[1968],{"type":42,"value":1566},{"type":36,"tag":160,"props":1970,"children":1971},{"style":179},[1972],{"type":42,"value":197},{"type":36,"tag":160,"props":1974,"children":1975},{"style":209},[1976],{"type":42,"value":1501},{"type":36,"tag":160,"props":1978,"children":1979},{"style":173},[1980],{"type":42,"value":1981},"([loc",{"type":36,"tag":160,"props":1983,"children":1984},{"style":179},[1985],{"type":42,"value":197},{"type":36,"tag":160,"props":1987,"children":1988},{"style":173},[1989],{"type":42,"value":1990},"lng",{"type":36,"tag":160,"props":1992,"children":1993},{"style":179},[1994],{"type":42,"value":256},{"type":36,"tag":160,"props":1996,"children":1997},{"style":173},[1998],{"type":42,"value":1797},{"type":36,"tag":160,"props":2000,"children":2001},{"style":179},[2002],{"type":42,"value":197},{"type":36,"tag":160,"props":2004,"children":2005},{"style":173},[2006],{"type":42,"value":2007},"lat])",{"type":36,"tag":160,"props":2009,"children":2010},{"style":179},[2011],{"type":42,"value":197},{"type":36,"tag":160,"props":2013,"children":2014},{"style":209},[2015],{"type":42,"value":1608},{"type":36,"tag":160,"props":2017,"children":2018},{"style":173},[2019],{"type":42,"value":2020},"(map))",{"type":36,"tag":160,"props":2022,"children":2023},{"style":179},[2024],{"type":42,"value":398},{"type":36,"tag":45,"props":2026,"children":2027},{},[2028],{"type":36,"tag":129,"props":2029,"children":2030},{},[2031],{"type":42,"value":2032},"Mapbox GL JS (Data-Driven Approach - Recommended for 100+ points):",{"type":36,"tag":149,"props":2034,"children":2036},{"className":151,"code":2035,"language":153,"meta":154,"style":154},"\u002F\u002F Add as GeoJSON source + layer (uses WebGL, not DOM)\nmap.addSource('points', {\n  type: 'geojson',\n  data: {\n    type: 'FeatureCollection',\n    features: locations.map((loc) => ({\n      type: 'Feature',\n      geometry: { type: 'Point', coordinates: [loc.lng, loc.lat] },\n      properties: { name: loc.name }\n    }))\n  }\n});\n\nmap.addLayer({\n  id: 'points-layer',\n  type: 'circle', \u002F\u002F or 'symbol' for icons\n  source: 'points',\n  paint: {\n    'circle-radius': 8,\n    'circle-color': '#ff0000'\n  }\n});\n",[2037],{"type":36,"tag":80,"props":2038,"children":2039},{"__ignoreMap":154},[2040,2048,2089,2118,2134,2163,2216,2245,2330,2373,2384,2393,2409,2417,2442,2472,2506,2535,2552,2583,2617,2625],{"type":36,"tag":160,"props":2041,"children":2042},{"class":162,"line":163},[2043],{"type":36,"tag":160,"props":2044,"children":2045},{"style":377},[2046],{"type":42,"value":2047},"\u002F\u002F Add as GeoJSON source + layer (uses WebGL, not DOM)\n",{"type":36,"tag":160,"props":2049,"children":2050},{"class":162,"line":264},[2051,2055,2059,2064,2068,2072,2077,2081,2085],{"type":36,"tag":160,"props":2052,"children":2053},{"style":173},[2054],{"type":42,"value":242},{"type":36,"tag":160,"props":2056,"children":2057},{"style":179},[2058],{"type":42,"value":197},{"type":36,"tag":160,"props":2060,"children":2061},{"style":209},[2062],{"type":42,"value":2063},"addSource",{"type":36,"tag":160,"props":2065,"children":2066},{"style":173},[2067],{"type":42,"value":231},{"type":36,"tag":160,"props":2069,"children":2070},{"style":179},[2071],{"type":42,"value":236},{"type":36,"tag":160,"props":2073,"children":2074},{"style":239},[2075],{"type":42,"value":2076},"points",{"type":36,"tag":160,"props":2078,"children":2079},{"style":179},[2080],{"type":42,"value":236},{"type":36,"tag":160,"props":2082,"children":2083},{"style":179},[2084],{"type":42,"value":256},{"type":36,"tag":160,"props":2086,"children":2087},{"style":179},[2088],{"type":42,"value":261},{"type":36,"tag":160,"props":2090,"children":2091},{"class":162,"line":327},[2092,2097,2101,2105,2110,2114],{"type":36,"tag":160,"props":2093,"children":2094},{"style":268},[2095],{"type":42,"value":2096},"  type",{"type":36,"tag":160,"props":2098,"children":2099},{"style":179},[2100],{"type":42,"value":276},{"type":36,"tag":160,"props":2102,"children":2103},{"style":179},[2104],{"type":42,"value":365},{"type":36,"tag":160,"props":2106,"children":2107},{"style":239},[2108],{"type":42,"value":2109},"geojson",{"type":36,"tag":160,"props":2111,"children":2112},{"style":179},[2113],{"type":42,"value":236},{"type":36,"tag":160,"props":2115,"children":2116},{"style":179},[2117],{"type":42,"value":347},{"type":36,"tag":160,"props":2119,"children":2120},{"class":162,"line":350},[2121,2126,2130],{"type":36,"tag":160,"props":2122,"children":2123},{"style":268},[2124],{"type":42,"value":2125},"  data",{"type":36,"tag":160,"props":2127,"children":2128},{"style":179},[2129],{"type":42,"value":276},{"type":36,"tag":160,"props":2131,"children":2132},{"style":179},[2133],{"type":42,"value":261},{"type":36,"tag":160,"props":2135,"children":2136},{"class":162,"line":383},[2137,2142,2146,2150,2155,2159],{"type":36,"tag":160,"props":2138,"children":2139},{"style":268},[2140],{"type":42,"value":2141},"    type",{"type":36,"tag":160,"props":2143,"children":2144},{"style":179},[2145],{"type":42,"value":276},{"type":36,"tag":160,"props":2147,"children":2148},{"style":179},[2149],{"type":42,"value":365},{"type":36,"tag":160,"props":2151,"children":2152},{"style":239},[2153],{"type":42,"value":2154},"FeatureCollection",{"type":36,"tag":160,"props":2156,"children":2157},{"style":179},[2158],{"type":42,"value":236},{"type":36,"tag":160,"props":2160,"children":2161},{"style":179},[2162],{"type":42,"value":347},{"type":36,"tag":160,"props":2164,"children":2165},{"class":162,"line":602},[2166,2171,2175,2179,2183,2187,2191,2195,2199,2203,2207,2212],{"type":36,"tag":160,"props":2167,"children":2168},{"style":268},[2169],{"type":42,"value":2170},"    features",{"type":36,"tag":160,"props":2172,"children":2173},{"style":179},[2174],{"type":42,"value":276},{"type":36,"tag":160,"props":2176,"children":2177},{"style":173},[2178],{"type":42,"value":1696},{"type":36,"tag":160,"props":2180,"children":2181},{"style":179},[2182],{"type":42,"value":197},{"type":36,"tag":160,"props":2184,"children":2185},{"style":209},[2186],{"type":42,"value":242},{"type":36,"tag":160,"props":2188,"children":2189},{"style":173},[2190],{"type":42,"value":231},{"type":36,"tag":160,"props":2192,"children":2193},{"style":179},[2194],{"type":42,"value":231},{"type":36,"tag":160,"props":2196,"children":2197},{"style":1720},[2198],{"type":42,"value":1723},{"type":36,"tag":160,"props":2200,"children":2201},{"style":179},[2202],{"type":42,"value":251},{"type":36,"tag":160,"props":2204,"children":2205},{"style":167},[2206],{"type":42,"value":1948},{"type":36,"tag":160,"props":2208,"children":2209},{"style":173},[2210],{"type":42,"value":2211}," (",{"type":36,"tag":160,"props":2213,"children":2214},{"style":179},[2215],{"type":42,"value":490},{"type":36,"tag":160,"props":2217,"children":2218},{"class":162,"line":619},[2219,2224,2228,2232,2237,2241],{"type":36,"tag":160,"props":2220,"children":2221},{"style":268},[2222],{"type":42,"value":2223},"      type",{"type":36,"tag":160,"props":2225,"children":2226},{"style":179},[2227],{"type":42,"value":276},{"type":36,"tag":160,"props":2229,"children":2230},{"style":179},[2231],{"type":42,"value":365},{"type":36,"tag":160,"props":2233,"children":2234},{"style":239},[2235],{"type":42,"value":2236},"Feature",{"type":36,"tag":160,"props":2238,"children":2239},{"style":179},[2240],{"type":42,"value":236},{"type":36,"tag":160,"props":2242,"children":2243},{"style":179},[2244],{"type":42,"value":347},{"type":36,"tag":160,"props":2246,"children":2247},{"class":162,"line":1388},[2248,2253,2257,2261,2266,2270,2274,2279,2283,2287,2292,2296,2301,2305,2309,2313,2317,2321,2326],{"type":36,"tag":160,"props":2249,"children":2250},{"style":268},[2251],{"type":42,"value":2252},"      geometry",{"type":36,"tag":160,"props":2254,"children":2255},{"style":179},[2256],{"type":42,"value":276},{"type":36,"tag":160,"props":2258,"children":2259},{"style":179},[2260],{"type":42,"value":281},{"type":36,"tag":160,"props":2262,"children":2263},{"style":268},[2264],{"type":42,"value":2265}," type",{"type":36,"tag":160,"props":2267,"children":2268},{"style":179},[2269],{"type":42,"value":276},{"type":36,"tag":160,"props":2271,"children":2272},{"style":179},[2273],{"type":42,"value":365},{"type":36,"tag":160,"props":2275,"children":2276},{"style":239},[2277],{"type":42,"value":2278},"Point",{"type":36,"tag":160,"props":2280,"children":2281},{"style":179},[2282],{"type":42,"value":236},{"type":36,"tag":160,"props":2284,"children":2285},{"style":179},[2286],{"type":42,"value":256},{"type":36,"tag":160,"props":2288,"children":2289},{"style":268},[2290],{"type":42,"value":2291}," coordinates",{"type":36,"tag":160,"props":2293,"children":2294},{"style":179},[2295],{"type":42,"value":276},{"type":36,"tag":160,"props":2297,"children":2298},{"style":173},[2299],{"type":42,"value":2300}," [loc",{"type":36,"tag":160,"props":2302,"children":2303},{"style":179},[2304],{"type":42,"value":197},{"type":36,"tag":160,"props":2306,"children":2307},{"style":173},[2308],{"type":42,"value":1990},{"type":36,"tag":160,"props":2310,"children":2311},{"style":179},[2312],{"type":42,"value":256},{"type":36,"tag":160,"props":2314,"children":2315},{"style":173},[2316],{"type":42,"value":1797},{"type":36,"tag":160,"props":2318,"children":2319},{"style":179},[2320],{"type":42,"value":197},{"type":36,"tag":160,"props":2322,"children":2323},{"style":173},[2324],{"type":42,"value":2325},"lat] ",{"type":36,"tag":160,"props":2327,"children":2328},{"style":179},[2329],{"type":42,"value":1836},{"type":36,"tag":160,"props":2331,"children":2332},{"class":162,"line":1397},[2333,2338,2342,2346,2351,2355,2359,2363,2368],{"type":36,"tag":160,"props":2334,"children":2335},{"style":268},[2336],{"type":42,"value":2337},"      properties",{"type":36,"tag":160,"props":2339,"children":2340},{"style":179},[2341],{"type":42,"value":276},{"type":36,"tag":160,"props":2343,"children":2344},{"style":179},[2345],{"type":42,"value":281},{"type":36,"tag":160,"props":2347,"children":2348},{"style":268},[2349],{"type":42,"value":2350}," name",{"type":36,"tag":160,"props":2352,"children":2353},{"style":179},[2354],{"type":42,"value":276},{"type":36,"tag":160,"props":2356,"children":2357},{"style":173},[2358],{"type":42,"value":1797},{"type":36,"tag":160,"props":2360,"children":2361},{"style":179},[2362],{"type":42,"value":197},{"type":36,"tag":160,"props":2364,"children":2365},{"style":173},[2366],{"type":42,"value":2367},"name ",{"type":36,"tag":160,"props":2369,"children":2370},{"style":179},[2371],{"type":42,"value":2372},"}\n",{"type":36,"tag":160,"props":2374,"children":2375},{"class":162,"line":24},[2376,2380],{"type":36,"tag":160,"props":2377,"children":2378},{"style":179},[2379],{"type":42,"value":1861},{"type":36,"tag":160,"props":2381,"children":2382},{"style":173},[2383],{"type":42,"value":1596},{"type":36,"tag":160,"props":2385,"children":2387},{"class":162,"line":2386},11,[2388],{"type":36,"tag":160,"props":2389,"children":2390},{"style":179},[2391],{"type":42,"value":2392},"  }\n",{"type":36,"tag":160,"props":2394,"children":2396},{"class":162,"line":2395},12,[2397,2401,2405],{"type":36,"tag":160,"props":2398,"children":2399},{"style":179},[2400],{"type":42,"value":389},{"type":36,"tag":160,"props":2402,"children":2403},{"style":173},[2404],{"type":42,"value":251},{"type":36,"tag":160,"props":2406,"children":2407},{"style":179},[2408],{"type":42,"value":398},{"type":36,"tag":160,"props":2410,"children":2412},{"class":162,"line":2411},13,[2413],{"type":36,"tag":160,"props":2414,"children":2415},{"emptyLinePlaceholder":1382},[2416],{"type":42,"value":1385},{"type":36,"tag":160,"props":2418,"children":2420},{"class":162,"line":2419},14,[2421,2425,2429,2434,2438],{"type":36,"tag":160,"props":2422,"children":2423},{"style":173},[2424],{"type":42,"value":242},{"type":36,"tag":160,"props":2426,"children":2427},{"style":179},[2428],{"type":42,"value":197},{"type":36,"tag":160,"props":2430,"children":2431},{"style":209},[2432],{"type":42,"value":2433},"addLayer",{"type":36,"tag":160,"props":2435,"children":2436},{"style":173},[2437],{"type":42,"value":231},{"type":36,"tag":160,"props":2439,"children":2440},{"style":179},[2441],{"type":42,"value":490},{"type":36,"tag":160,"props":2443,"children":2445},{"class":162,"line":2444},15,[2446,2451,2455,2459,2464,2468],{"type":36,"tag":160,"props":2447,"children":2448},{"style":268},[2449],{"type":42,"value":2450},"  id",{"type":36,"tag":160,"props":2452,"children":2453},{"style":179},[2454],{"type":42,"value":276},{"type":36,"tag":160,"props":2456,"children":2457},{"style":179},[2458],{"type":42,"value":365},{"type":36,"tag":160,"props":2460,"children":2461},{"style":239},[2462],{"type":42,"value":2463},"points-layer",{"type":36,"tag":160,"props":2465,"children":2466},{"style":179},[2467],{"type":42,"value":236},{"type":36,"tag":160,"props":2469,"children":2470},{"style":179},[2471],{"type":42,"value":347},{"type":36,"tag":160,"props":2473,"children":2475},{"class":162,"line":2474},16,[2476,2480,2484,2488,2493,2497,2501],{"type":36,"tag":160,"props":2477,"children":2478},{"style":268},[2479],{"type":42,"value":2096},{"type":36,"tag":160,"props":2481,"children":2482},{"style":179},[2483],{"type":42,"value":276},{"type":36,"tag":160,"props":2485,"children":2486},{"style":179},[2487],{"type":42,"value":365},{"type":36,"tag":160,"props":2489,"children":2490},{"style":239},[2491],{"type":42,"value":2492},"circle",{"type":36,"tag":160,"props":2494,"children":2495},{"style":179},[2496],{"type":42,"value":236},{"type":36,"tag":160,"props":2498,"children":2499},{"style":179},[2500],{"type":42,"value":256},{"type":36,"tag":160,"props":2502,"children":2503},{"style":377},[2504],{"type":42,"value":2505}," \u002F\u002F or 'symbol' for icons\n",{"type":36,"tag":160,"props":2507,"children":2509},{"class":162,"line":2508},17,[2510,2515,2519,2523,2527,2531],{"type":36,"tag":160,"props":2511,"children":2512},{"style":268},[2513],{"type":42,"value":2514},"  source",{"type":36,"tag":160,"props":2516,"children":2517},{"style":179},[2518],{"type":42,"value":276},{"type":36,"tag":160,"props":2520,"children":2521},{"style":179},[2522],{"type":42,"value":365},{"type":36,"tag":160,"props":2524,"children":2525},{"style":239},[2526],{"type":42,"value":2076},{"type":36,"tag":160,"props":2528,"children":2529},{"style":179},[2530],{"type":42,"value":236},{"type":36,"tag":160,"props":2532,"children":2533},{"style":179},[2534],{"type":42,"value":347},{"type":36,"tag":160,"props":2536,"children":2538},{"class":162,"line":2537},18,[2539,2544,2548],{"type":36,"tag":160,"props":2540,"children":2541},{"style":268},[2542],{"type":42,"value":2543},"  paint",{"type":36,"tag":160,"props":2545,"children":2546},{"style":179},[2547],{"type":42,"value":276},{"type":36,"tag":160,"props":2549,"children":2550},{"style":179},[2551],{"type":42,"value":261},{"type":36,"tag":160,"props":2553,"children":2555},{"class":162,"line":2554},19,[2556,2561,2566,2570,2574,2579],{"type":36,"tag":160,"props":2557,"children":2558},{"style":179},[2559],{"type":42,"value":2560},"    '",{"type":36,"tag":160,"props":2562,"children":2563},{"style":268},[2564],{"type":42,"value":2565},"circle-radius",{"type":36,"tag":160,"props":2567,"children":2568},{"style":179},[2569],{"type":42,"value":236},{"type":36,"tag":160,"props":2571,"children":2572},{"style":179},[2573],{"type":42,"value":276},{"type":36,"tag":160,"props":2575,"children":2576},{"style":293},[2577],{"type":42,"value":2578}," 8",{"type":36,"tag":160,"props":2580,"children":2581},{"style":179},[2582],{"type":42,"value":347},{"type":36,"tag":160,"props":2584,"children":2586},{"class":162,"line":2585},20,[2587,2591,2596,2600,2604,2608,2613],{"type":36,"tag":160,"props":2588,"children":2589},{"style":179},[2590],{"type":42,"value":2560},{"type":36,"tag":160,"props":2592,"children":2593},{"style":268},[2594],{"type":42,"value":2595},"circle-color",{"type":36,"tag":160,"props":2597,"children":2598},{"style":179},[2599],{"type":42,"value":236},{"type":36,"tag":160,"props":2601,"children":2602},{"style":179},[2603],{"type":42,"value":276},{"type":36,"tag":160,"props":2605,"children":2606},{"style":179},[2607],{"type":42,"value":365},{"type":36,"tag":160,"props":2609,"children":2610},{"style":239},[2611],{"type":42,"value":2612},"#ff0000",{"type":36,"tag":160,"props":2614,"children":2615},{"style":179},[2616],{"type":42,"value":1361},{"type":36,"tag":160,"props":2618,"children":2620},{"class":162,"line":2619},21,[2621],{"type":36,"tag":160,"props":2622,"children":2623},{"style":179},[2624],{"type":42,"value":2392},{"type":36,"tag":160,"props":2626,"children":2628},{"class":162,"line":2627},22,[2629,2633,2637],{"type":36,"tag":160,"props":2630,"children":2631},{"style":179},[2632],{"type":42,"value":389},{"type":36,"tag":160,"props":2634,"children":2635},{"style":173},[2636],{"type":42,"value":251},{"type":36,"tag":160,"props":2638,"children":2639},{"style":179},[2640],{"type":42,"value":398},{"type":36,"tag":45,"props":2642,"children":2643},{},[2644,2649],{"type":36,"tag":129,"props":2645,"children":2646},{},[2647],{"type":42,"value":2648},"Performance Advantage:",{"type":42,"value":2650}," Google Maps renders all markers as DOM elements (even when using the Data Layer), which becomes slow with 500+ markers. Mapbox's circle and symbol layers are rendered by WebGL, making them much faster for large datasets (1,000-10,000+ points). This is a significant advantage when building applications with many points.",{"type":36,"tag":51,"props":2652,"children":2654},{"id":2653},"info-windows-popups",[2655],{"type":42,"value":2656},"Info Windows \u002F Popups",{"type":36,"tag":58,"props":2658,"children":2660},{"id":2659},"google-maps-1",[2661],{"type":42,"value":147},{"type":36,"tag":149,"props":2663,"children":2665},{"className":151,"code":2664,"language":153,"meta":154,"style":154},"const infowindow = new google.maps.InfoWindow({\n  content: '\u003Ch3>Title\u003C\u002Fh3>\u003Cp>Content\u003C\u002Fp>'\n});\n\nmarker.addListener('click', () => {\n  infowindow.open(map, marker);\n});\n",[2666],{"type":36,"tag":80,"props":2667,"children":2668},{"__ignoreMap":154},[2669,2718,2743,2758,2765,2815,2857],{"type":36,"tag":160,"props":2670,"children":2671},{"class":162,"line":163},[2672,2676,2681,2685,2689,2693,2697,2701,2705,2710,2714],{"type":36,"tag":160,"props":2673,"children":2674},{"style":167},[2675],{"type":42,"value":170},{"type":36,"tag":160,"props":2677,"children":2678},{"style":173},[2679],{"type":42,"value":2680}," infowindow ",{"type":36,"tag":160,"props":2682,"children":2683},{"style":179},[2684],{"type":42,"value":182},{"type":36,"tag":160,"props":2686,"children":2687},{"style":179},[2688],{"type":42,"value":187},{"type":36,"tag":160,"props":2690,"children":2691},{"style":173},[2692],{"type":42,"value":192},{"type":36,"tag":160,"props":2694,"children":2695},{"style":179},[2696],{"type":42,"value":197},{"type":36,"tag":160,"props":2698,"children":2699},{"style":173},[2700],{"type":42,"value":202},{"type":36,"tag":160,"props":2702,"children":2703},{"style":179},[2704],{"type":42,"value":197},{"type":36,"tag":160,"props":2706,"children":2707},{"style":209},[2708],{"type":42,"value":2709},"InfoWindow",{"type":36,"tag":160,"props":2711,"children":2712},{"style":173},[2713],{"type":42,"value":231},{"type":36,"tag":160,"props":2715,"children":2716},{"style":179},[2717],{"type":42,"value":490},{"type":36,"tag":160,"props":2719,"children":2720},{"class":162,"line":264},[2721,2726,2730,2734,2739],{"type":36,"tag":160,"props":2722,"children":2723},{"style":268},[2724],{"type":42,"value":2725},"  content",{"type":36,"tag":160,"props":2727,"children":2728},{"style":179},[2729],{"type":42,"value":276},{"type":36,"tag":160,"props":2731,"children":2732},{"style":179},[2733],{"type":42,"value":365},{"type":36,"tag":160,"props":2735,"children":2736},{"style":239},[2737],{"type":42,"value":2738},"\u003Ch3>Title\u003C\u002Fh3>\u003Cp>Content\u003C\u002Fp>",{"type":36,"tag":160,"props":2740,"children":2741},{"style":179},[2742],{"type":42,"value":1361},{"type":36,"tag":160,"props":2744,"children":2745},{"class":162,"line":327},[2746,2750,2754],{"type":36,"tag":160,"props":2747,"children":2748},{"style":179},[2749],{"type":42,"value":389},{"type":36,"tag":160,"props":2751,"children":2752},{"style":173},[2753],{"type":42,"value":251},{"type":36,"tag":160,"props":2755,"children":2756},{"style":179},[2757],{"type":42,"value":398},{"type":36,"tag":160,"props":2759,"children":2760},{"class":162,"line":350},[2761],{"type":36,"tag":160,"props":2762,"children":2763},{"emptyLinePlaceholder":1382},[2764],{"type":42,"value":1385},{"type":36,"tag":160,"props":2766,"children":2767},{"class":162,"line":383},[2768,2772,2776,2781,2785,2789,2794,2798,2802,2807,2811],{"type":36,"tag":160,"props":2769,"children":2770},{"style":173},[2771],{"type":42,"value":1403},{"type":36,"tag":160,"props":2773,"children":2774},{"style":179},[2775],{"type":42,"value":197},{"type":36,"tag":160,"props":2777,"children":2778},{"style":209},[2779],{"type":42,"value":2780},"addListener",{"type":36,"tag":160,"props":2782,"children":2783},{"style":173},[2784],{"type":42,"value":231},{"type":36,"tag":160,"props":2786,"children":2787},{"style":179},[2788],{"type":42,"value":236},{"type":36,"tag":160,"props":2790,"children":2791},{"style":239},[2792],{"type":42,"value":2793},"click",{"type":36,"tag":160,"props":2795,"children":2796},{"style":179},[2797],{"type":42,"value":236},{"type":36,"tag":160,"props":2799,"children":2800},{"style":179},[2801],{"type":42,"value":256},{"type":36,"tag":160,"props":2803,"children":2804},{"style":179},[2805],{"type":42,"value":2806}," ()",{"type":36,"tag":160,"props":2808,"children":2809},{"style":167},[2810],{"type":42,"value":1948},{"type":36,"tag":160,"props":2812,"children":2813},{"style":179},[2814],{"type":42,"value":261},{"type":36,"tag":160,"props":2816,"children":2817},{"class":162,"line":602},[2818,2823,2827,2832,2836,2840,2844,2849,2853],{"type":36,"tag":160,"props":2819,"children":2820},{"style":173},[2821],{"type":42,"value":2822},"  infowindow",{"type":36,"tag":160,"props":2824,"children":2825},{"style":179},[2826],{"type":42,"value":197},{"type":36,"tag":160,"props":2828,"children":2829},{"style":209},[2830],{"type":42,"value":2831},"open",{"type":36,"tag":160,"props":2833,"children":2834},{"style":268},[2835],{"type":42,"value":231},{"type":36,"tag":160,"props":2837,"children":2838},{"style":173},[2839],{"type":42,"value":242},{"type":36,"tag":160,"props":2841,"children":2842},{"style":179},[2843],{"type":42,"value":256},{"type":36,"tag":160,"props":2845,"children":2846},{"style":173},[2847],{"type":42,"value":2848}," marker",{"type":36,"tag":160,"props":2850,"children":2851},{"style":268},[2852],{"type":42,"value":251},{"type":36,"tag":160,"props":2854,"children":2855},{"style":179},[2856],{"type":42,"value":398},{"type":36,"tag":160,"props":2858,"children":2859},{"class":162,"line":619},[2860,2864,2868],{"type":36,"tag":160,"props":2861,"children":2862},{"style":179},[2863],{"type":42,"value":389},{"type":36,"tag":160,"props":2865,"children":2866},{"style":173},[2867],{"type":42,"value":251},{"type":36,"tag":160,"props":2869,"children":2870},{"style":179},[2871],{"type":42,"value":398},{"type":36,"tag":58,"props":2873,"children":2875},{"id":2874},"mapbox-gl-js-1",[2876],{"type":42,"value":404},{"type":36,"tag":149,"props":2878,"children":2880},{"className":151,"code":2879,"language":153,"meta":154,"style":154},"\u002F\u002F Option 1: Attach to marker\nconst marker = new mapboxgl.Marker()\n  .setLngLat([-122.4194, 37.7749])\n  .setPopup(new mapboxgl.Popup().setHTML('\u003Ch3>Title\u003C\u002Fh3>\u003Cp>Content\u003C\u002Fp>'))\n  .addTo(map);\n\n\u002F\u002F Option 2: On layer click (for data-driven markers)\nmap.on('click', 'points-layer', (e) => {\n  const coordinates = e.features[0].geometry.coordinates.slice();\n  const description = e.features[0].properties.description;\n\n  new mapboxgl.Popup().setLngLat(coordinates).setHTML(description).addTo(map);\n});\n",[2881],{"type":36,"tag":80,"props":2882,"children":2883},{"__ignoreMap":154},[2884,2892,2927,2962,3026,3045,3052,3060,3133,3213,3275,3282,3370],{"type":36,"tag":160,"props":2885,"children":2886},{"class":162,"line":163},[2887],{"type":36,"tag":160,"props":2888,"children":2889},{"style":377},[2890],{"type":42,"value":2891},"\u002F\u002F Option 1: Attach to marker\n",{"type":36,"tag":160,"props":2893,"children":2894},{"class":162,"line":264},[2895,2899,2903,2907,2911,2915,2919,2923],{"type":36,"tag":160,"props":2896,"children":2897},{"style":167},[2898],{"type":42,"value":170},{"type":36,"tag":160,"props":2900,"children":2901},{"style":173},[2902],{"type":42,"value":1196},{"type":36,"tag":160,"props":2904,"children":2905},{"style":179},[2906],{"type":42,"value":182},{"type":36,"tag":160,"props":2908,"children":2909},{"style":179},[2910],{"type":42,"value":187},{"type":36,"tag":160,"props":2912,"children":2913},{"style":173},[2914],{"type":42,"value":473},{"type":36,"tag":160,"props":2916,"children":2917},{"style":179},[2918],{"type":42,"value":197},{"type":36,"tag":160,"props":2920,"children":2921},{"style":209},[2922],{"type":42,"value":1225},{"type":36,"tag":160,"props":2924,"children":2925},{"style":173},[2926],{"type":42,"value":1488},{"type":36,"tag":160,"props":2928,"children":2929},{"class":162,"line":327},[2930,2934,2938,2942,2946,2950,2954,2958],{"type":36,"tag":160,"props":2931,"children":2932},{"style":179},[2933],{"type":42,"value":1496},{"type":36,"tag":160,"props":2935,"children":2936},{"style":209},[2937],{"type":42,"value":1501},{"type":36,"tag":160,"props":2939,"children":2940},{"style":173},[2941],{"type":42,"value":1506},{"type":36,"tag":160,"props":2943,"children":2944},{"style":179},[2945],{"type":42,"value":573},{"type":36,"tag":160,"props":2947,"children":2948},{"style":293},[2949],{"type":42,"value":319},{"type":36,"tag":160,"props":2951,"children":2952},{"style":179},[2953],{"type":42,"value":256},{"type":36,"tag":160,"props":2955,"children":2956},{"style":293},[2957],{"type":42,"value":296},{"type":36,"tag":160,"props":2959,"children":2960},{"style":173},[2961],{"type":42,"value":1527},{"type":36,"tag":160,"props":2963,"children":2964},{"class":162,"line":350},[2965,2969,2973,2977,2981,2985,2989,2993,2997,3001,3006,3010,3014,3018,3022],{"type":36,"tag":160,"props":2966,"children":2967},{"style":179},[2968],{"type":42,"value":1496},{"type":36,"tag":160,"props":2970,"children":2971},{"style":209},[2972],{"type":42,"value":1539},{"type":36,"tag":160,"props":2974,"children":2975},{"style":173},[2976],{"type":42,"value":231},{"type":36,"tag":160,"props":2978,"children":2979},{"style":179},[2980],{"type":42,"value":1548},{"type":36,"tag":160,"props":2982,"children":2983},{"style":173},[2984],{"type":42,"value":473},{"type":36,"tag":160,"props":2986,"children":2987},{"style":179},[2988],{"type":42,"value":197},{"type":36,"tag":160,"props":2990,"children":2991},{"style":209},[2992],{"type":42,"value":1561},{"type":36,"tag":160,"props":2994,"children":2995},{"style":173},[2996],{"type":42,"value":1566},{"type":36,"tag":160,"props":2998,"children":2999},{"style":179},[3000],{"type":42,"value":197},{"type":36,"tag":160,"props":3002,"children":3003},{"style":209},[3004],{"type":42,"value":3005},"setHTML",{"type":36,"tag":160,"props":3007,"children":3008},{"style":173},[3009],{"type":42,"value":231},{"type":36,"tag":160,"props":3011,"children":3012},{"style":179},[3013],{"type":42,"value":236},{"type":36,"tag":160,"props":3015,"children":3016},{"style":239},[3017],{"type":42,"value":2738},{"type":36,"tag":160,"props":3019,"children":3020},{"style":179},[3021],{"type":42,"value":236},{"type":36,"tag":160,"props":3023,"children":3024},{"style":173},[3025],{"type":42,"value":1596},{"type":36,"tag":160,"props":3027,"children":3028},{"class":162,"line":383},[3029,3033,3037,3041],{"type":36,"tag":160,"props":3030,"children":3031},{"style":179},[3032],{"type":42,"value":1496},{"type":36,"tag":160,"props":3034,"children":3035},{"style":209},[3036],{"type":42,"value":1608},{"type":36,"tag":160,"props":3038,"children":3039},{"style":173},[3040],{"type":42,"value":1613},{"type":36,"tag":160,"props":3042,"children":3043},{"style":179},[3044],{"type":42,"value":398},{"type":36,"tag":160,"props":3046,"children":3047},{"class":162,"line":602},[3048],{"type":36,"tag":160,"props":3049,"children":3050},{"emptyLinePlaceholder":1382},[3051],{"type":42,"value":1385},{"type":36,"tag":160,"props":3053,"children":3054},{"class":162,"line":619},[3055],{"type":36,"tag":160,"props":3056,"children":3057},{"style":377},[3058],{"type":42,"value":3059},"\u002F\u002F Option 2: On layer click (for data-driven markers)\n",{"type":36,"tag":160,"props":3061,"children":3062},{"class":162,"line":1388},[3063,3067,3071,3076,3080,3084,3088,3092,3096,3100,3104,3108,3112,3116,3121,3125,3129],{"type":36,"tag":160,"props":3064,"children":3065},{"style":173},[3066],{"type":42,"value":242},{"type":36,"tag":160,"props":3068,"children":3069},{"style":179},[3070],{"type":42,"value":197},{"type":36,"tag":160,"props":3072,"children":3073},{"style":209},[3074],{"type":42,"value":3075},"on",{"type":36,"tag":160,"props":3077,"children":3078},{"style":173},[3079],{"type":42,"value":231},{"type":36,"tag":160,"props":3081,"children":3082},{"style":179},[3083],{"type":42,"value":236},{"type":36,"tag":160,"props":3085,"children":3086},{"style":239},[3087],{"type":42,"value":2793},{"type":36,"tag":160,"props":3089,"children":3090},{"style":179},[3091],{"type":42,"value":236},{"type":36,"tag":160,"props":3093,"children":3094},{"style":179},[3095],{"type":42,"value":256},{"type":36,"tag":160,"props":3097,"children":3098},{"style":179},[3099],{"type":42,"value":365},{"type":36,"tag":160,"props":3101,"children":3102},{"style":239},[3103],{"type":42,"value":2463},{"type":36,"tag":160,"props":3105,"children":3106},{"style":179},[3107],{"type":42,"value":236},{"type":36,"tag":160,"props":3109,"children":3110},{"style":179},[3111],{"type":42,"value":256},{"type":36,"tag":160,"props":3113,"children":3114},{"style":179},[3115],{"type":42,"value":2211},{"type":36,"tag":160,"props":3117,"children":3118},{"style":1720},[3119],{"type":42,"value":3120},"e",{"type":36,"tag":160,"props":3122,"children":3123},{"style":179},[3124],{"type":42,"value":251},{"type":36,"tag":160,"props":3126,"children":3127},{"style":167},[3128],{"type":42,"value":1948},{"type":36,"tag":160,"props":3130,"children":3131},{"style":179},[3132],{"type":42,"value":261},{"type":36,"tag":160,"props":3134,"children":3135},{"class":162,"line":1397},[3136,3141,3145,3150,3155,3159,3164,3169,3174,3178,3182,3187,3191,3196,3200,3205,3209],{"type":36,"tag":160,"props":3137,"children":3138},{"style":167},[3139],{"type":42,"value":3140},"  const",{"type":36,"tag":160,"props":3142,"children":3143},{"style":173},[3144],{"type":42,"value":2291},{"type":36,"tag":160,"props":3146,"children":3147},{"style":179},[3148],{"type":42,"value":3149}," =",{"type":36,"tag":160,"props":3151,"children":3152},{"style":173},[3153],{"type":42,"value":3154}," e",{"type":36,"tag":160,"props":3156,"children":3157},{"style":179},[3158],{"type":42,"value":197},{"type":36,"tag":160,"props":3160,"children":3161},{"style":173},[3162],{"type":42,"value":3163},"features",{"type":36,"tag":160,"props":3165,"children":3166},{"style":268},[3167],{"type":42,"value":3168},"[",{"type":36,"tag":160,"props":3170,"children":3171},{"style":293},[3172],{"type":42,"value":3173},"0",{"type":36,"tag":160,"props":3175,"children":3176},{"style":268},[3177],{"type":42,"value":590},{"type":36,"tag":160,"props":3179,"children":3180},{"style":179},[3181],{"type":42,"value":197},{"type":36,"tag":160,"props":3183,"children":3184},{"style":173},[3185],{"type":42,"value":3186},"geometry",{"type":36,"tag":160,"props":3188,"children":3189},{"style":179},[3190],{"type":42,"value":197},{"type":36,"tag":160,"props":3192,"children":3193},{"style":173},[3194],{"type":42,"value":3195},"coordinates",{"type":36,"tag":160,"props":3197,"children":3198},{"style":179},[3199],{"type":42,"value":197},{"type":36,"tag":160,"props":3201,"children":3202},{"style":209},[3203],{"type":42,"value":3204},"slice",{"type":36,"tag":160,"props":3206,"children":3207},{"style":268},[3208],{"type":42,"value":1566},{"type":36,"tag":160,"props":3210,"children":3211},{"style":179},[3212],{"type":42,"value":398},{"type":36,"tag":160,"props":3214,"children":3215},{"class":162,"line":24},[3216,3220,3225,3229,3233,3237,3241,3245,3249,3253,3257,3262,3266,3271],{"type":36,"tag":160,"props":3217,"children":3218},{"style":167},[3219],{"type":42,"value":3140},{"type":36,"tag":160,"props":3221,"children":3222},{"style":173},[3223],{"type":42,"value":3224}," description",{"type":36,"tag":160,"props":3226,"children":3227},{"style":179},[3228],{"type":42,"value":3149},{"type":36,"tag":160,"props":3230,"children":3231},{"style":173},[3232],{"type":42,"value":3154},{"type":36,"tag":160,"props":3234,"children":3235},{"style":179},[3236],{"type":42,"value":197},{"type":36,"tag":160,"props":3238,"children":3239},{"style":173},[3240],{"type":42,"value":3163},{"type":36,"tag":160,"props":3242,"children":3243},{"style":268},[3244],{"type":42,"value":3168},{"type":36,"tag":160,"props":3246,"children":3247},{"style":293},[3248],{"type":42,"value":3173},{"type":36,"tag":160,"props":3250,"children":3251},{"style":268},[3252],{"type":42,"value":590},{"type":36,"tag":160,"props":3254,"children":3255},{"style":179},[3256],{"type":42,"value":197},{"type":36,"tag":160,"props":3258,"children":3259},{"style":173},[3260],{"type":42,"value":3261},"properties",{"type":36,"tag":160,"props":3263,"children":3264},{"style":179},[3265],{"type":42,"value":197},{"type":36,"tag":160,"props":3267,"children":3268},{"style":173},[3269],{"type":42,"value":3270},"description",{"type":36,"tag":160,"props":3272,"children":3273},{"style":179},[3274],{"type":42,"value":398},{"type":36,"tag":160,"props":3276,"children":3277},{"class":162,"line":2386},[3278],{"type":36,"tag":160,"props":3279,"children":3280},{"emptyLinePlaceholder":1382},[3281],{"type":42,"value":1385},{"type":36,"tag":160,"props":3283,"children":3284},{"class":162,"line":2395},[3285,3290,3294,3298,3302,3306,3310,3314,3318,3322,3326,3330,3334,3338,3342,3346,3350,3354,3358,3362,3366],{"type":36,"tag":160,"props":3286,"children":3287},{"style":179},[3288],{"type":42,"value":3289},"  new",{"type":36,"tag":160,"props":3291,"children":3292},{"style":173},[3293],{"type":42,"value":473},{"type":36,"tag":160,"props":3295,"children":3296},{"style":179},[3297],{"type":42,"value":197},{"type":36,"tag":160,"props":3299,"children":3300},{"style":209},[3301],{"type":42,"value":1561},{"type":36,"tag":160,"props":3303,"children":3304},{"style":268},[3305],{"type":42,"value":1566},{"type":36,"tag":160,"props":3307,"children":3308},{"style":179},[3309],{"type":42,"value":197},{"type":36,"tag":160,"props":3311,"children":3312},{"style":209},[3313],{"type":42,"value":1501},{"type":36,"tag":160,"props":3315,"children":3316},{"style":268},[3317],{"type":42,"value":231},{"type":36,"tag":160,"props":3319,"children":3320},{"style":173},[3321],{"type":42,"value":3195},{"type":36,"tag":160,"props":3323,"children":3324},{"style":268},[3325],{"type":42,"value":251},{"type":36,"tag":160,"props":3327,"children":3328},{"style":179},[3329],{"type":42,"value":197},{"type":36,"tag":160,"props":3331,"children":3332},{"style":209},[3333],{"type":42,"value":3005},{"type":36,"tag":160,"props":3335,"children":3336},{"style":268},[3337],{"type":42,"value":231},{"type":36,"tag":160,"props":3339,"children":3340},{"style":173},[3341],{"type":42,"value":3270},{"type":36,"tag":160,"props":3343,"children":3344},{"style":268},[3345],{"type":42,"value":251},{"type":36,"tag":160,"props":3347,"children":3348},{"style":179},[3349],{"type":42,"value":197},{"type":36,"tag":160,"props":3351,"children":3352},{"style":209},[3353],{"type":42,"value":1608},{"type":36,"tag":160,"props":3355,"children":3356},{"style":268},[3357],{"type":42,"value":231},{"type":36,"tag":160,"props":3359,"children":3360},{"style":173},[3361],{"type":42,"value":242},{"type":36,"tag":160,"props":3363,"children":3364},{"style":268},[3365],{"type":42,"value":251},{"type":36,"tag":160,"props":3367,"children":3368},{"style":179},[3369],{"type":42,"value":398},{"type":36,"tag":160,"props":3371,"children":3372},{"class":162,"line":2411},[3373,3377,3381],{"type":36,"tag":160,"props":3374,"children":3375},{"style":179},[3376],{"type":42,"value":389},{"type":36,"tag":160,"props":3378,"children":3379},{"style":173},[3380],{"type":42,"value":251},{"type":36,"tag":160,"props":3382,"children":3383},{"style":179},[3384],{"type":42,"value":398},{"type":36,"tag":51,"props":3386,"children":3388},{"id":3387},"migration-strategy",[3389],{"type":42,"value":3390},"Migration Strategy",{"type":36,"tag":58,"props":3392,"children":3394},{"id":3393},"step-1-audit-current-implementation",[3395],{"type":42,"value":3396},"Step 1: Audit Current Implementation",{"type":36,"tag":45,"props":3398,"children":3399},{},[3400],{"type":42,"value":3401},"Identify all Google Maps features you use:",{"type":36,"tag":65,"props":3403,"children":3406},{"className":3404},[3405],"contains-task-list",[3407,3419,3428,3437,3446,3455,3464,3473,3482,3491],{"type":36,"tag":69,"props":3408,"children":3411},{"className":3409},[3410],"task-list-item",[3412,3417],{"type":36,"tag":3413,"props":3414,"children":3416},"input",{"disabled":1382,"type":3415},"checkbox",[],{"type":42,"value":3418}," Basic map with markers",{"type":36,"tag":69,"props":3420,"children":3422},{"className":3421},[3410],[3423,3426],{"type":36,"tag":3413,"props":3424,"children":3425},{"disabled":1382,"type":3415},[],{"type":42,"value":3427}," Info windows\u002Fpopups",{"type":36,"tag":69,"props":3429,"children":3431},{"className":3430},[3410],[3432,3435],{"type":36,"tag":3413,"props":3433,"children":3434},{"disabled":1382,"type":3415},[],{"type":42,"value":3436}," Polygons\u002Fpolylines",{"type":36,"tag":69,"props":3438,"children":3440},{"className":3439},[3410],[3441,3444],{"type":36,"tag":3413,"props":3442,"children":3443},{"disabled":1382,"type":3415},[],{"type":42,"value":3445}," Geocoding",{"type":36,"tag":69,"props":3447,"children":3449},{"className":3448},[3410],[3450,3453],{"type":36,"tag":3413,"props":3451,"children":3452},{"disabled":1382,"type":3415},[],{"type":42,"value":3454}," Directions",{"type":36,"tag":69,"props":3456,"children":3458},{"className":3457},[3410],[3459,3462],{"type":36,"tag":3413,"props":3460,"children":3461},{"disabled":1382,"type":3415},[],{"type":42,"value":3463}," Clustering",{"type":36,"tag":69,"props":3465,"children":3467},{"className":3466},[3410],[3468,3471],{"type":36,"tag":3413,"props":3469,"children":3470},{"disabled":1382,"type":3415},[],{"type":42,"value":3472}," Custom styling",{"type":36,"tag":69,"props":3474,"children":3476},{"className":3475},[3410],[3477,3480],{"type":36,"tag":3413,"props":3478,"children":3479},{"disabled":1382,"type":3415},[],{"type":42,"value":3481}," Drawing tools",{"type":36,"tag":69,"props":3483,"children":3485},{"className":3484},[3410],[3486,3489],{"type":36,"tag":3413,"props":3487,"children":3488},{"disabled":1382,"type":3415},[],{"type":42,"value":3490}," Street View (no Mapbox equivalent)",{"type":36,"tag":69,"props":3492,"children":3494},{"className":3493},[3410],[3495,3498],{"type":36,"tag":3413,"props":3496,"children":3497},{"disabled":1382,"type":3415},[],{"type":42,"value":3499}," Other advanced features",{"type":36,"tag":58,"props":3501,"children":3503},{"id":3502},"step-2-set-up-mapbox",[3504],{"type":42,"value":3505},"Step 2: Set Up Mapbox",{"type":36,"tag":149,"props":3507,"children":3511},{"className":3508,"code":3509,"language":3510,"meta":154,"style":154},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Replace Google Maps script -->\n\u003Cscript src=\"https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.18.1\u002Fmapbox-gl.js\">\u003C\u002Fscript>\n\u003Clink href=\"https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.18.1\u002Fmapbox-gl.css\" rel=\"stylesheet\" \u002F>\n","html",[3512],{"type":36,"tag":80,"props":3513,"children":3514},{"__ignoreMap":154},[3515,3523,3573],{"type":36,"tag":160,"props":3516,"children":3517},{"class":162,"line":163},[3518],{"type":36,"tag":160,"props":3519,"children":3520},{"style":377},[3521],{"type":42,"value":3522},"\u003C!-- Replace Google Maps script -->\n",{"type":36,"tag":160,"props":3524,"children":3525},{"class":162,"line":264},[3526,3531,3536,3541,3545,3550,3555,3559,3564,3568],{"type":36,"tag":160,"props":3527,"children":3528},{"style":179},[3529],{"type":42,"value":3530},"\u003C",{"type":36,"tag":160,"props":3532,"children":3533},{"style":268},[3534],{"type":42,"value":3535},"script",{"type":36,"tag":160,"props":3537,"children":3538},{"style":167},[3539],{"type":42,"value":3540}," src",{"type":36,"tag":160,"props":3542,"children":3543},{"style":179},[3544],{"type":42,"value":182},{"type":36,"tag":160,"props":3546,"children":3547},{"style":179},[3548],{"type":42,"value":3549},"\"",{"type":36,"tag":160,"props":3551,"children":3552},{"style":239},[3553],{"type":42,"value":3554},"https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.18.1\u002Fmapbox-gl.js",{"type":36,"tag":160,"props":3556,"children":3557},{"style":179},[3558],{"type":42,"value":3549},{"type":36,"tag":160,"props":3560,"children":3561},{"style":179},[3562],{"type":42,"value":3563},">\u003C\u002F",{"type":36,"tag":160,"props":3565,"children":3566},{"style":268},[3567],{"type":42,"value":3535},{"type":36,"tag":160,"props":3569,"children":3570},{"style":179},[3571],{"type":42,"value":3572},">\n",{"type":36,"tag":160,"props":3574,"children":3575},{"class":162,"line":327},[3576,3580,3585,3590,3594,3598,3603,3607,3612,3616,3620,3625,3629],{"type":36,"tag":160,"props":3577,"children":3578},{"style":179},[3579],{"type":42,"value":3530},{"type":36,"tag":160,"props":3581,"children":3582},{"style":268},[3583],{"type":42,"value":3584},"link",{"type":36,"tag":160,"props":3586,"children":3587},{"style":167},[3588],{"type":42,"value":3589}," href",{"type":36,"tag":160,"props":3591,"children":3592},{"style":179},[3593],{"type":42,"value":182},{"type":36,"tag":160,"props":3595,"children":3596},{"style":179},[3597],{"type":42,"value":3549},{"type":36,"tag":160,"props":3599,"children":3600},{"style":239},[3601],{"type":42,"value":3602},"https:\u002F\u002Fapi.mapbox.com\u002Fmapbox-gl-js\u002Fv3.18.1\u002Fmapbox-gl.css",{"type":36,"tag":160,"props":3604,"children":3605},{"style":179},[3606],{"type":42,"value":3549},{"type":36,"tag":160,"props":3608,"children":3609},{"style":167},[3610],{"type":42,"value":3611}," rel",{"type":36,"tag":160,"props":3613,"children":3614},{"style":179},[3615],{"type":42,"value":182},{"type":36,"tag":160,"props":3617,"children":3618},{"style":179},[3619],{"type":42,"value":3549},{"type":36,"tag":160,"props":3621,"children":3622},{"style":239},[3623],{"type":42,"value":3624},"stylesheet",{"type":36,"tag":160,"props":3626,"children":3627},{"style":179},[3628],{"type":42,"value":3549},{"type":36,"tag":160,"props":3630,"children":3631},{"style":179},[3632],{"type":42,"value":3633}," \u002F>\n",{"type":36,"tag":58,"props":3635,"children":3637},{"id":3636},"step-3-convert-core-map",[3638],{"type":42,"value":3639},"Step 3: Convert Core Map",{"type":36,"tag":45,"props":3641,"children":3642},{},[3643],{"type":42,"value":3644},"Start with basic map initialization:",{"type":36,"tag":3646,"props":3647,"children":3648},"ol",{},[3649,3668,3673],{"type":36,"tag":69,"props":3650,"children":3651},{},[3652,3654,3660,3662],{"type":42,"value":3653},"Replace ",{"type":36,"tag":80,"props":3655,"children":3657},{"className":3656},[],[3658],{"type":42,"value":3659},"new google.maps.Map()",{"type":42,"value":3661}," with ",{"type":36,"tag":80,"props":3663,"children":3665},{"className":3664},[],[3666],{"type":42,"value":3667},"new mapboxgl.Map()",{"type":36,"tag":69,"props":3669,"children":3670},{},[3671],{"type":42,"value":3672},"Fix coordinate order (lat,lng -> lng,lat)",{"type":36,"tag":69,"props":3674,"children":3675},{},[3676],{"type":42,"value":3677},"Update zoom\u002Fcenter",{"type":36,"tag":58,"props":3679,"children":3681},{"id":3680},"step-4-convert-features-one-by-one",[3682],{"type":42,"value":3683},"Step 4: Convert Features One by One",{"type":36,"tag":45,"props":3685,"children":3686},{},[3687],{"type":42,"value":3688},"Prioritize by complexity:",{"type":36,"tag":3646,"props":3690,"children":3691},{},[3692,3702,3712],{"type":36,"tag":69,"props":3693,"children":3694},{},[3695,3700],{"type":36,"tag":129,"props":3696,"children":3697},{},[3698],{"type":42,"value":3699},"Easy:",{"type":42,"value":3701}," Map controls, basic markers",{"type":36,"tag":69,"props":3703,"children":3704},{},[3705,3710],{"type":36,"tag":129,"props":3706,"children":3707},{},[3708],{"type":42,"value":3709},"Medium:",{"type":42,"value":3711}," Popups, polygons, lines",{"type":36,"tag":69,"props":3713,"children":3714},{},[3715,3720],{"type":36,"tag":129,"props":3716,"children":3717},{},[3718],{"type":42,"value":3719},"Complex:",{"type":42,"value":3721}," Clustering, custom styling, data updates",{"type":36,"tag":58,"props":3723,"children":3725},{"id":3724},"step-5-update-event-handlers",[3726],{"type":42,"value":3727},"Step 5: Update Event Handlers",{"type":36,"tag":45,"props":3729,"children":3730},{},[3731],{"type":42,"value":3732},"Change event syntax:",{"type":36,"tag":65,"props":3734,"children":3735},{},[3736,3753],{"type":36,"tag":69,"props":3737,"children":3738},{},[3739,3745,3747],{"type":36,"tag":80,"props":3740,"children":3742},{"className":3741},[],[3743],{"type":42,"value":3744},"google.maps.event.addListener()",{"type":42,"value":3746}," -> ",{"type":36,"tag":80,"props":3748,"children":3750},{"className":3749},[],[3751],{"type":42,"value":3752},"map.on()",{"type":36,"tag":69,"props":3754,"children":3755},{},[3756,3758,3764,3765,3771],{"type":42,"value":3757},"Update event property names (",{"type":36,"tag":80,"props":3759,"children":3761},{"className":3760},[],[3762],{"type":42,"value":3763},"latLng",{"type":42,"value":3746},{"type":36,"tag":80,"props":3766,"children":3768},{"className":3767},[],[3769],{"type":42,"value":3770},"lngLat",{"type":42,"value":251},{"type":36,"tag":58,"props":3773,"children":3775},{"id":3774},"step-6-optimize-for-mapbox",[3776],{"type":42,"value":3777},"Step 6: Optimize for Mapbox",{"type":36,"tag":45,"props":3779,"children":3780},{},[3781],{"type":42,"value":3782},"Take advantage of Mapbox features:",{"type":36,"tag":65,"props":3784,"children":3785},{},[3786,3791,3796,3801],{"type":36,"tag":69,"props":3787,"children":3788},{},[3789],{"type":42,"value":3790},"Convert multiple markers to data-driven layers",{"type":36,"tag":69,"props":3792,"children":3793},{},[3794],{"type":42,"value":3795},"Use clustering (built-in)",{"type":36,"tag":69,"props":3797,"children":3798},{},[3799],{"type":42,"value":3800},"Leverage vector tiles for custom styling",{"type":36,"tag":69,"props":3802,"children":3803},{},[3804],{"type":42,"value":3805},"Use expressions for dynamic styling",{"type":36,"tag":58,"props":3807,"children":3809},{"id":3808},"step-7-test-thoroughly",[3810],{"type":42,"value":3811},"Step 7: Test Thoroughly",{"type":36,"tag":65,"props":3813,"children":3814},{},[3815,3820,3825,3830],{"type":36,"tag":69,"props":3816,"children":3817},{},[3818],{"type":42,"value":3819},"Cross-browser testing",{"type":36,"tag":69,"props":3821,"children":3822},{},[3823],{"type":42,"value":3824},"Mobile responsiveness",{"type":36,"tag":69,"props":3826,"children":3827},{},[3828],{"type":42,"value":3829},"Performance with real data volumes",{"type":36,"tag":69,"props":3831,"children":3832},{},[3833],{"type":42,"value":3834},"Touch\u002Fgesture interactions",{"type":36,"tag":51,"props":3836,"children":3838},{"id":3837},"gotchas-and-common-issues",[3839],{"type":42,"value":3840},"Gotchas and Common Issues",{"type":36,"tag":58,"props":3842,"children":3844},{"id":3843},"coordinate-order",[3845],{"type":42,"value":3846},"Coordinate Order",{"type":36,"tag":149,"props":3848,"children":3850},{"className":151,"code":3849,"language":153,"meta":154,"style":154},"\u002F\u002F Google Maps\n{ lat: 37.7749, lng: -122.4194 }\n\n\u002F\u002F Mapbox (REVERSED!)\n[-122.4194, 37.7749]\n",[3851],{"type":36,"tag":80,"props":3852,"children":3853},{"__ignoreMap":154},[3854,3862,3908,3915,3923],{"type":36,"tag":160,"props":3855,"children":3856},{"class":162,"line":163},[3857],{"type":36,"tag":160,"props":3858,"children":3859},{"style":377},[3860],{"type":42,"value":3861},"\u002F\u002F Google Maps\n",{"type":36,"tag":160,"props":3863,"children":3864},{"class":162,"line":264},[3865,3870,3875,3879,3883,3887,3891,3895,3899,3903],{"type":36,"tag":160,"props":3866,"children":3867},{"style":179},[3868],{"type":42,"value":3869},"{",{"type":36,"tag":160,"props":3871,"children":3873},{"style":3872},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[3874],{"type":42,"value":286},{"type":36,"tag":160,"props":3876,"children":3877},{"style":179},[3878],{"type":42,"value":276},{"type":36,"tag":160,"props":3880,"children":3881},{"style":293},[3882],{"type":42,"value":296},{"type":36,"tag":160,"props":3884,"children":3885},{"style":179},[3886],{"type":42,"value":256},{"type":36,"tag":160,"props":3888,"children":3889},{"style":3872},[3890],{"type":42,"value":305},{"type":36,"tag":160,"props":3892,"children":3893},{"style":179},[3894],{"type":42,"value":276},{"type":36,"tag":160,"props":3896,"children":3897},{"style":179},[3898],{"type":42,"value":314},{"type":36,"tag":160,"props":3900,"children":3901},{"style":293},[3902],{"type":42,"value":319},{"type":36,"tag":160,"props":3904,"children":3905},{"style":179},[3906],{"type":42,"value":3907}," }\n",{"type":36,"tag":160,"props":3909,"children":3910},{"class":162,"line":327},[3911],{"type":36,"tag":160,"props":3912,"children":3913},{"emptyLinePlaceholder":1382},[3914],{"type":42,"value":1385},{"type":36,"tag":160,"props":3916,"children":3917},{"class":162,"line":350},[3918],{"type":36,"tag":160,"props":3919,"children":3920},{"style":377},[3921],{"type":42,"value":3922},"\u002F\u002F Mapbox (REVERSED!)\n",{"type":36,"tag":160,"props":3924,"children":3925},{"class":162,"line":383},[3926,3930,3934,3938,3942,3946],{"type":36,"tag":160,"props":3927,"children":3928},{"style":173},[3929],{"type":42,"value":3168},{"type":36,"tag":160,"props":3931,"children":3932},{"style":179},[3933],{"type":42,"value":573},{"type":36,"tag":160,"props":3935,"children":3936},{"style":293},[3937],{"type":42,"value":319},{"type":36,"tag":160,"props":3939,"children":3940},{"style":179},[3941],{"type":42,"value":256},{"type":36,"tag":160,"props":3943,"children":3944},{"style":293},[3945],{"type":42,"value":296},{"type":36,"tag":160,"props":3947,"children":3948},{"style":173},[3949],{"type":42,"value":3950},"]\n",{"type":36,"tag":45,"props":3952,"children":3953},{},[3954],{"type":36,"tag":129,"props":3955,"children":3956},{},[3957],{"type":42,"value":3958},"Always double-check coordinate order!",{"type":36,"tag":58,"props":3960,"children":3962},{"id":3961},"event-properties",[3963],{"type":42,"value":3964},"Event Properties",{"type":36,"tag":149,"props":3966,"children":3968},{"className":151,"code":3967,"language":153,"meta":154,"style":154},"\u002F\u002F Google Maps\nmap.on('click', (e) => {\n  console.log(e.latLng.lat(), e.latLng.lng());\n});\n\n\u002F\u002F Mapbox\nmap.on('click', (e) => {\n  console.log(e.lngLat.lat, e.lngLat.lng);\n});\n",[3969],{"type":36,"tag":80,"props":3970,"children":3971},{"__ignoreMap":154},[3972,3979,4034,4112,4127,4134,4142,4197,4268],{"type":36,"tag":160,"props":3973,"children":3974},{"class":162,"line":163},[3975],{"type":36,"tag":160,"props":3976,"children":3977},{"style":377},[3978],{"type":42,"value":3861},{"type":36,"tag":160,"props":3980,"children":3981},{"class":162,"line":264},[3982,3986,3990,3994,3998,4002,4006,4010,4014,4018,4022,4026,4030],{"type":36,"tag":160,"props":3983,"children":3984},{"style":173},[3985],{"type":42,"value":242},{"type":36,"tag":160,"props":3987,"children":3988},{"style":179},[3989],{"type":42,"value":197},{"type":36,"tag":160,"props":3991,"children":3992},{"style":209},[3993],{"type":42,"value":3075},{"type":36,"tag":160,"props":3995,"children":3996},{"style":173},[3997],{"type":42,"value":231},{"type":36,"tag":160,"props":3999,"children":4000},{"style":179},[4001],{"type":42,"value":236},{"type":36,"tag":160,"props":4003,"children":4004},{"style":239},[4005],{"type":42,"value":2793},{"type":36,"tag":160,"props":4007,"children":4008},{"style":179},[4009],{"type":42,"value":236},{"type":36,"tag":160,"props":4011,"children":4012},{"style":179},[4013],{"type":42,"value":256},{"type":36,"tag":160,"props":4015,"children":4016},{"style":179},[4017],{"type":42,"value":2211},{"type":36,"tag":160,"props":4019,"children":4020},{"style":1720},[4021],{"type":42,"value":3120},{"type":36,"tag":160,"props":4023,"children":4024},{"style":179},[4025],{"type":42,"value":251},{"type":36,"tag":160,"props":4027,"children":4028},{"style":167},[4029],{"type":42,"value":1948},{"type":36,"tag":160,"props":4031,"children":4032},{"style":179},[4033],{"type":42,"value":261},{"type":36,"tag":160,"props":4035,"children":4036},{"class":162,"line":327},[4037,4042,4046,4051,4055,4059,4063,4067,4071,4075,4079,4083,4087,4091,4095,4099,4103,4108],{"type":36,"tag":160,"props":4038,"children":4039},{"style":173},[4040],{"type":42,"value":4041},"  console",{"type":36,"tag":160,"props":4043,"children":4044},{"style":179},[4045],{"type":42,"value":197},{"type":36,"tag":160,"props":4047,"children":4048},{"style":209},[4049],{"type":42,"value":4050},"log",{"type":36,"tag":160,"props":4052,"children":4053},{"style":268},[4054],{"type":42,"value":231},{"type":36,"tag":160,"props":4056,"children":4057},{"style":173},[4058],{"type":42,"value":3120},{"type":36,"tag":160,"props":4060,"children":4061},{"style":179},[4062],{"type":42,"value":197},{"type":36,"tag":160,"props":4064,"children":4065},{"style":173},[4066],{"type":42,"value":3763},{"type":36,"tag":160,"props":4068,"children":4069},{"style":179},[4070],{"type":42,"value":197},{"type":36,"tag":160,"props":4072,"children":4073},{"style":209},[4074],{"type":42,"value":1806},{"type":36,"tag":160,"props":4076,"children":4077},{"style":268},[4078],{"type":42,"value":1566},{"type":36,"tag":160,"props":4080,"children":4081},{"style":179},[4082],{"type":42,"value":256},{"type":36,"tag":160,"props":4084,"children":4085},{"style":173},[4086],{"type":42,"value":3154},{"type":36,"tag":160,"props":4088,"children":4089},{"style":179},[4090],{"type":42,"value":197},{"type":36,"tag":160,"props":4092,"children":4093},{"style":173},[4094],{"type":42,"value":3763},{"type":36,"tag":160,"props":4096,"children":4097},{"style":179},[4098],{"type":42,"value":197},{"type":36,"tag":160,"props":4100,"children":4101},{"style":209},[4102],{"type":42,"value":1990},{"type":36,"tag":160,"props":4104,"children":4105},{"style":268},[4106],{"type":42,"value":4107},"())",{"type":36,"tag":160,"props":4109,"children":4110},{"style":179},[4111],{"type":42,"value":398},{"type":36,"tag":160,"props":4113,"children":4114},{"class":162,"line":350},[4115,4119,4123],{"type":36,"tag":160,"props":4116,"children":4117},{"style":179},[4118],{"type":42,"value":389},{"type":36,"tag":160,"props":4120,"children":4121},{"style":173},[4122],{"type":42,"value":251},{"type":36,"tag":160,"props":4124,"children":4125},{"style":179},[4126],{"type":42,"value":398},{"type":36,"tag":160,"props":4128,"children":4129},{"class":162,"line":383},[4130],{"type":36,"tag":160,"props":4131,"children":4132},{"emptyLinePlaceholder":1382},[4133],{"type":42,"value":1385},{"type":36,"tag":160,"props":4135,"children":4136},{"class":162,"line":602},[4137],{"type":36,"tag":160,"props":4138,"children":4139},{"style":377},[4140],{"type":42,"value":4141},"\u002F\u002F Mapbox\n",{"type":36,"tag":160,"props":4143,"children":4144},{"class":162,"line":619},[4145,4149,4153,4157,4161,4165,4169,4173,4177,4181,4185,4189,4193],{"type":36,"tag":160,"props":4146,"children":4147},{"style":173},[4148],{"type":42,"value":242},{"type":36,"tag":160,"props":4150,"children":4151},{"style":179},[4152],{"type":42,"value":197},{"type":36,"tag":160,"props":4154,"children":4155},{"style":209},[4156],{"type":42,"value":3075},{"type":36,"tag":160,"props":4158,"children":4159},{"style":173},[4160],{"type":42,"value":231},{"type":36,"tag":160,"props":4162,"children":4163},{"style":179},[4164],{"type":42,"value":236},{"type":36,"tag":160,"props":4166,"children":4167},{"style":239},[4168],{"type":42,"value":2793},{"type":36,"tag":160,"props":4170,"children":4171},{"style":179},[4172],{"type":42,"value":236},{"type":36,"tag":160,"props":4174,"children":4175},{"style":179},[4176],{"type":42,"value":256},{"type":36,"tag":160,"props":4178,"children":4179},{"style":179},[4180],{"type":42,"value":2211},{"type":36,"tag":160,"props":4182,"children":4183},{"style":1720},[4184],{"type":42,"value":3120},{"type":36,"tag":160,"props":4186,"children":4187},{"style":179},[4188],{"type":42,"value":251},{"type":36,"tag":160,"props":4190,"children":4191},{"style":167},[4192],{"type":42,"value":1948},{"type":36,"tag":160,"props":4194,"children":4195},{"style":179},[4196],{"type":42,"value":261},{"type":36,"tag":160,"props":4198,"children":4199},{"class":162,"line":1388},[4200,4204,4208,4212,4216,4220,4224,4228,4232,4236,4240,4244,4248,4252,4256,4260,4264],{"type":36,"tag":160,"props":4201,"children":4202},{"style":173},[4203],{"type":42,"value":4041},{"type":36,"tag":160,"props":4205,"children":4206},{"style":179},[4207],{"type":42,"value":197},{"type":36,"tag":160,"props":4209,"children":4210},{"style":209},[4211],{"type":42,"value":4050},{"type":36,"tag":160,"props":4213,"children":4214},{"style":268},[4215],{"type":42,"value":231},{"type":36,"tag":160,"props":4217,"children":4218},{"style":173},[4219],{"type":42,"value":3120},{"type":36,"tag":160,"props":4221,"children":4222},{"style":179},[4223],{"type":42,"value":197},{"type":36,"tag":160,"props":4225,"children":4226},{"style":173},[4227],{"type":42,"value":3770},{"type":36,"tag":160,"props":4229,"children":4230},{"style":179},[4231],{"type":42,"value":197},{"type":36,"tag":160,"props":4233,"children":4234},{"style":173},[4235],{"type":42,"value":1806},{"type":36,"tag":160,"props":4237,"children":4238},{"style":179},[4239],{"type":42,"value":256},{"type":36,"tag":160,"props":4241,"children":4242},{"style":173},[4243],{"type":42,"value":3154},{"type":36,"tag":160,"props":4245,"children":4246},{"style":179},[4247],{"type":42,"value":197},{"type":36,"tag":160,"props":4249,"children":4250},{"style":173},[4251],{"type":42,"value":3770},{"type":36,"tag":160,"props":4253,"children":4254},{"style":179},[4255],{"type":42,"value":197},{"type":36,"tag":160,"props":4257,"children":4258},{"style":173},[4259],{"type":42,"value":1990},{"type":36,"tag":160,"props":4261,"children":4262},{"style":268},[4263],{"type":42,"value":251},{"type":36,"tag":160,"props":4265,"children":4266},{"style":179},[4267],{"type":42,"value":398},{"type":36,"tag":160,"props":4269,"children":4270},{"class":162,"line":1397},[4271,4275,4279],{"type":36,"tag":160,"props":4272,"children":4273},{"style":179},[4274],{"type":42,"value":389},{"type":36,"tag":160,"props":4276,"children":4277},{"style":173},[4278],{"type":42,"value":251},{"type":36,"tag":160,"props":4280,"children":4281},{"style":179},[4282],{"type":42,"value":398},{"type":36,"tag":58,"props":4284,"children":4286},{"id":4285},"timing-issues",[4287],{"type":42,"value":4288},"Timing Issues",{"type":36,"tag":149,"props":4290,"children":4292},{"className":151,"code":4291,"language":153,"meta":154,"style":154},"\u002F\u002F Google Maps - immediate\nconst marker = new google.maps.Marker({ map: map });\n\n\u002F\u002F Mapbox - wait for load\nmap.on('load', () => {\n  map.addSource(...);\n  map.addLayer(...);\n});\n",[4293],{"type":36,"tag":80,"props":4294,"children":4295},{"__ignoreMap":154},[4296,4304,4375,4382,4390,4438,4470,4501],{"type":36,"tag":160,"props":4297,"children":4298},{"class":162,"line":163},[4299],{"type":36,"tag":160,"props":4300,"children":4301},{"style":377},[4302],{"type":42,"value":4303},"\u002F\u002F Google Maps - immediate\n",{"type":36,"tag":160,"props":4305,"children":4306},{"class":162,"line":264},[4307,4311,4315,4319,4323,4327,4331,4335,4339,4343,4347,4351,4355,4359,4363,4367,4371],{"type":36,"tag":160,"props":4308,"children":4309},{"style":167},[4310],{"type":42,"value":170},{"type":36,"tag":160,"props":4312,"children":4313},{"style":173},[4314],{"type":42,"value":1196},{"type":36,"tag":160,"props":4316,"children":4317},{"style":179},[4318],{"type":42,"value":182},{"type":36,"tag":160,"props":4320,"children":4321},{"style":179},[4322],{"type":42,"value":187},{"type":36,"tag":160,"props":4324,"children":4325},{"style":173},[4326],{"type":42,"value":192},{"type":36,"tag":160,"props":4328,"children":4329},{"style":179},[4330],{"type":42,"value":197},{"type":36,"tag":160,"props":4332,"children":4333},{"style":173},[4334],{"type":42,"value":202},{"type":36,"tag":160,"props":4336,"children":4337},{"style":179},[4338],{"type":42,"value":197},{"type":36,"tag":160,"props":4340,"children":4341},{"style":209},[4342],{"type":42,"value":1225},{"type":36,"tag":160,"props":4344,"children":4345},{"style":173},[4346],{"type":42,"value":231},{"type":36,"tag":160,"props":4348,"children":4349},{"style":179},[4350],{"type":42,"value":3869},{"type":36,"tag":160,"props":4352,"children":4353},{"style":268},[4354],{"type":42,"value":1302},{"type":36,"tag":160,"props":4356,"children":4357},{"style":179},[4358],{"type":42,"value":276},{"type":36,"tag":160,"props":4360,"children":4361},{"style":173},[4362],{"type":42,"value":176},{"type":36,"tag":160,"props":4364,"children":4365},{"style":179},[4366],{"type":42,"value":389},{"type":36,"tag":160,"props":4368,"children":4369},{"style":173},[4370],{"type":42,"value":251},{"type":36,"tag":160,"props":4372,"children":4373},{"style":179},[4374],{"type":42,"value":398},{"type":36,"tag":160,"props":4376,"children":4377},{"class":162,"line":327},[4378],{"type":36,"tag":160,"props":4379,"children":4380},{"emptyLinePlaceholder":1382},[4381],{"type":42,"value":1385},{"type":36,"tag":160,"props":4383,"children":4384},{"class":162,"line":350},[4385],{"type":36,"tag":160,"props":4386,"children":4387},{"style":377},[4388],{"type":42,"value":4389},"\u002F\u002F Mapbox - wait for load\n",{"type":36,"tag":160,"props":4391,"children":4392},{"class":162,"line":383},[4393,4397,4401,4405,4409,4413,4418,4422,4426,4430,4434],{"type":36,"tag":160,"props":4394,"children":4395},{"style":173},[4396],{"type":42,"value":242},{"type":36,"tag":160,"props":4398,"children":4399},{"style":179},[4400],{"type":42,"value":197},{"type":36,"tag":160,"props":4402,"children":4403},{"style":209},[4404],{"type":42,"value":3075},{"type":36,"tag":160,"props":4406,"children":4407},{"style":173},[4408],{"type":42,"value":231},{"type":36,"tag":160,"props":4410,"children":4411},{"style":179},[4412],{"type":42,"value":236},{"type":36,"tag":160,"props":4414,"children":4415},{"style":239},[4416],{"type":42,"value":4417},"load",{"type":36,"tag":160,"props":4419,"children":4420},{"style":179},[4421],{"type":42,"value":236},{"type":36,"tag":160,"props":4423,"children":4424},{"style":179},[4425],{"type":42,"value":256},{"type":36,"tag":160,"props":4427,"children":4428},{"style":179},[4429],{"type":42,"value":2806},{"type":36,"tag":160,"props":4431,"children":4432},{"style":167},[4433],{"type":42,"value":1948},{"type":36,"tag":160,"props":4435,"children":4436},{"style":179},[4437],{"type":42,"value":261},{"type":36,"tag":160,"props":4439,"children":4440},{"class":162,"line":602},[4441,4445,4449,4453,4457,4462,4466],{"type":36,"tag":160,"props":4442,"children":4443},{"style":173},[4444],{"type":42,"value":1293},{"type":36,"tag":160,"props":4446,"children":4447},{"style":179},[4448],{"type":42,"value":197},{"type":36,"tag":160,"props":4450,"children":4451},{"style":209},[4452],{"type":42,"value":2063},{"type":36,"tag":160,"props":4454,"children":4455},{"style":268},[4456],{"type":42,"value":231},{"type":36,"tag":160,"props":4458,"children":4459},{"style":179},[4460],{"type":42,"value":4461},"...",{"type":36,"tag":160,"props":4463,"children":4464},{"style":268},[4465],{"type":42,"value":251},{"type":36,"tag":160,"props":4467,"children":4468},{"style":179},[4469],{"type":42,"value":398},{"type":36,"tag":160,"props":4471,"children":4472},{"class":162,"line":619},[4473,4477,4481,4485,4489,4493,4497],{"type":36,"tag":160,"props":4474,"children":4475},{"style":173},[4476],{"type":42,"value":1293},{"type":36,"tag":160,"props":4478,"children":4479},{"style":179},[4480],{"type":42,"value":197},{"type":36,"tag":160,"props":4482,"children":4483},{"style":209},[4484],{"type":42,"value":2433},{"type":36,"tag":160,"props":4486,"children":4487},{"style":268},[4488],{"type":42,"value":231},{"type":36,"tag":160,"props":4490,"children":4491},{"style":179},[4492],{"type":42,"value":4461},{"type":36,"tag":160,"props":4494,"children":4495},{"style":268},[4496],{"type":42,"value":251},{"type":36,"tag":160,"props":4498,"children":4499},{"style":179},[4500],{"type":42,"value":398},{"type":36,"tag":160,"props":4502,"children":4503},{"class":162,"line":1388},[4504,4508,4512],{"type":36,"tag":160,"props":4505,"children":4506},{"style":179},[4507],{"type":42,"value":389},{"type":36,"tag":160,"props":4509,"children":4510},{"style":173},[4511],{"type":42,"value":251},{"type":36,"tag":160,"props":4513,"children":4514},{"style":179},[4515],{"type":42,"value":398},{"type":36,"tag":58,"props":4517,"children":4519},{"id":4518},"removing-features",[4520],{"type":42,"value":4521},"Removing Features",{"type":36,"tag":149,"props":4523,"children":4525},{"className":151,"code":4524,"language":153,"meta":154,"style":154},"\u002F\u002F Google Maps\nmarker.setMap(null);\n\n\u002F\u002F Mapbox - must remove both\nmap.removeLayer('layer-id');\nmap.removeSource('source-id');\n",[4526],{"type":36,"tag":80,"props":4527,"children":4528},{"__ignoreMap":154},[4529,4536,4567,4574,4582,4623],{"type":36,"tag":160,"props":4530,"children":4531},{"class":162,"line":163},[4532],{"type":36,"tag":160,"props":4533,"children":4534},{"style":377},[4535],{"type":42,"value":3861},{"type":36,"tag":160,"props":4537,"children":4538},{"class":162,"line":264},[4539,4543,4547,4551,4555,4559,4563],{"type":36,"tag":160,"props":4540,"children":4541},{"style":173},[4542],{"type":42,"value":1403},{"type":36,"tag":160,"props":4544,"children":4545},{"style":179},[4546],{"type":42,"value":197},{"type":36,"tag":160,"props":4548,"children":4549},{"style":209},[4550],{"type":42,"value":1412},{"type":36,"tag":160,"props":4552,"children":4553},{"style":173},[4554],{"type":42,"value":231},{"type":36,"tag":160,"props":4556,"children":4557},{"style":179},[4558],{"type":42,"value":1421},{"type":36,"tag":160,"props":4560,"children":4561},{"style":173},[4562],{"type":42,"value":251},{"type":36,"tag":160,"props":4564,"children":4565},{"style":179},[4566],{"type":42,"value":398},{"type":36,"tag":160,"props":4568,"children":4569},{"class":162,"line":327},[4570],{"type":36,"tag":160,"props":4571,"children":4572},{"emptyLinePlaceholder":1382},[4573],{"type":42,"value":1385},{"type":36,"tag":160,"props":4575,"children":4576},{"class":162,"line":350},[4577],{"type":36,"tag":160,"props":4578,"children":4579},{"style":377},[4580],{"type":42,"value":4581},"\u002F\u002F Mapbox - must remove both\n",{"type":36,"tag":160,"props":4583,"children":4584},{"class":162,"line":383},[4585,4589,4593,4598,4602,4606,4611,4615,4619],{"type":36,"tag":160,"props":4586,"children":4587},{"style":173},[4588],{"type":42,"value":242},{"type":36,"tag":160,"props":4590,"children":4591},{"style":179},[4592],{"type":42,"value":197},{"type":36,"tag":160,"props":4594,"children":4595},{"style":209},[4596],{"type":42,"value":4597},"removeLayer",{"type":36,"tag":160,"props":4599,"children":4600},{"style":173},[4601],{"type":42,"value":231},{"type":36,"tag":160,"props":4603,"children":4604},{"style":179},[4605],{"type":42,"value":236},{"type":36,"tag":160,"props":4607,"children":4608},{"style":239},[4609],{"type":42,"value":4610},"layer-id",{"type":36,"tag":160,"props":4612,"children":4613},{"style":179},[4614],{"type":42,"value":236},{"type":36,"tag":160,"props":4616,"children":4617},{"style":173},[4618],{"type":42,"value":251},{"type":36,"tag":160,"props":4620,"children":4621},{"style":179},[4622],{"type":42,"value":398},{"type":36,"tag":160,"props":4624,"children":4625},{"class":162,"line":602},[4626,4630,4634,4639,4643,4647,4652,4656,4660],{"type":36,"tag":160,"props":4627,"children":4628},{"style":173},[4629],{"type":42,"value":242},{"type":36,"tag":160,"props":4631,"children":4632},{"style":179},[4633],{"type":42,"value":197},{"type":36,"tag":160,"props":4635,"children":4636},{"style":209},[4637],{"type":42,"value":4638},"removeSource",{"type":36,"tag":160,"props":4640,"children":4641},{"style":173},[4642],{"type":42,"value":231},{"type":36,"tag":160,"props":4644,"children":4645},{"style":179},[4646],{"type":42,"value":236},{"type":36,"tag":160,"props":4648,"children":4649},{"style":239},[4650],{"type":42,"value":4651},"source-id",{"type":36,"tag":160,"props":4653,"children":4654},{"style":179},[4655],{"type":42,"value":236},{"type":36,"tag":160,"props":4657,"children":4658},{"style":173},[4659],{"type":42,"value":251},{"type":36,"tag":160,"props":4661,"children":4662},{"style":179},[4663],{"type":42,"value":398},{"type":36,"tag":58,"props":4665,"children":4667},{"id":4666},"updating-data-without-flash",[4668],{"type":42,"value":4669},"Updating Data Without Flash",{"type":36,"tag":45,"props":4671,"children":4672},{},[4673,4678],{"type":36,"tag":129,"props":4674,"children":4675},{},[4676],{"type":42,"value":4677},"Never",{"type":42,"value":4679}," remove and re-add layers to update data — this reinitializes WebGL resources and causes a visible flash. Instead:",{"type":36,"tag":149,"props":4681,"children":4683},{"className":151,"code":4682,"language":153,"meta":154,"style":154},"\u002F\u002F ✅ Update data in place (no flash)\nmap.getSource('stores').setData(newGeoJSON);\n\n\u002F\u002F ✅ Filter existing data (GPU-side, fastest)\nmap.setFilter('stores-layer', ['==', ['get', 'category'], 'coffee']);\n\n\u002F\u002F ❌ BAD: remove + re-add causes flash\nmap.removeLayer('stores-layer');\nmap.removeSource('stores');\nmap.addSource('stores', { ... });\nmap.addLayer({ ... });\n",[4684],{"type":36,"tag":80,"props":4685,"children":4686},{"__ignoreMap":154},[4687,4695,4750,4757,4765,4887,4894,4902,4941,4980,5037],{"type":36,"tag":160,"props":4688,"children":4689},{"class":162,"line":163},[4690],{"type":36,"tag":160,"props":4691,"children":4692},{"style":377},[4693],{"type":42,"value":4694},"\u002F\u002F ✅ Update data in place (no flash)\n",{"type":36,"tag":160,"props":4696,"children":4697},{"class":162,"line":264},[4698,4702,4706,4711,4715,4719,4724,4728,4732,4736,4741,4746],{"type":36,"tag":160,"props":4699,"children":4700},{"style":173},[4701],{"type":42,"value":242},{"type":36,"tag":160,"props":4703,"children":4704},{"style":179},[4705],{"type":42,"value":197},{"type":36,"tag":160,"props":4707,"children":4708},{"style":209},[4709],{"type":42,"value":4710},"getSource",{"type":36,"tag":160,"props":4712,"children":4713},{"style":173},[4714],{"type":42,"value":231},{"type":36,"tag":160,"props":4716,"children":4717},{"style":179},[4718],{"type":42,"value":236},{"type":36,"tag":160,"props":4720,"children":4721},{"style":239},[4722],{"type":42,"value":4723},"stores",{"type":36,"tag":160,"props":4725,"children":4726},{"style":179},[4727],{"type":42,"value":236},{"type":36,"tag":160,"props":4729,"children":4730},{"style":173},[4731],{"type":42,"value":251},{"type":36,"tag":160,"props":4733,"children":4734},{"style":179},[4735],{"type":42,"value":197},{"type":36,"tag":160,"props":4737,"children":4738},{"style":209},[4739],{"type":42,"value":4740},"setData",{"type":36,"tag":160,"props":4742,"children":4743},{"style":173},[4744],{"type":42,"value":4745},"(newGeoJSON)",{"type":36,"tag":160,"props":4747,"children":4748},{"style":179},[4749],{"type":42,"value":398},{"type":36,"tag":160,"props":4751,"children":4752},{"class":162,"line":327},[4753],{"type":36,"tag":160,"props":4754,"children":4755},{"emptyLinePlaceholder":1382},[4756],{"type":42,"value":1385},{"type":36,"tag":160,"props":4758,"children":4759},{"class":162,"line":350},[4760],{"type":36,"tag":160,"props":4761,"children":4762},{"style":377},[4763],{"type":42,"value":4764},"\u002F\u002F ✅ Filter existing data (GPU-side, fastest)\n",{"type":36,"tag":160,"props":4766,"children":4767},{"class":162,"line":383},[4768,4772,4776,4781,4785,4789,4794,4798,4802,4806,4810,4815,4819,4823,4827,4831,4836,4840,4844,4848,4853,4857,4861,4865,4869,4874,4878,4883],{"type":36,"tag":160,"props":4769,"children":4770},{"style":173},[4771],{"type":42,"value":242},{"type":36,"tag":160,"props":4773,"children":4774},{"style":179},[4775],{"type":42,"value":197},{"type":36,"tag":160,"props":4777,"children":4778},{"style":209},[4779],{"type":42,"value":4780},"setFilter",{"type":36,"tag":160,"props":4782,"children":4783},{"style":173},[4784],{"type":42,"value":231},{"type":36,"tag":160,"props":4786,"children":4787},{"style":179},[4788],{"type":42,"value":236},{"type":36,"tag":160,"props":4790,"children":4791},{"style":239},[4792],{"type":42,"value":4793},"stores-layer",{"type":36,"tag":160,"props":4795,"children":4796},{"style":179},[4797],{"type":42,"value":236},{"type":36,"tag":160,"props":4799,"children":4800},{"style":179},[4801],{"type":42,"value":256},{"type":36,"tag":160,"props":4803,"children":4804},{"style":173},[4805],{"type":42,"value":568},{"type":36,"tag":160,"props":4807,"children":4808},{"style":179},[4809],{"type":42,"value":236},{"type":36,"tag":160,"props":4811,"children":4812},{"style":239},[4813],{"type":42,"value":4814},"==",{"type":36,"tag":160,"props":4816,"children":4817},{"style":179},[4818],{"type":42,"value":236},{"type":36,"tag":160,"props":4820,"children":4821},{"style":179},[4822],{"type":42,"value":256},{"type":36,"tag":160,"props":4824,"children":4825},{"style":173},[4826],{"type":42,"value":568},{"type":36,"tag":160,"props":4828,"children":4829},{"style":179},[4830],{"type":42,"value":236},{"type":36,"tag":160,"props":4832,"children":4833},{"style":239},[4834],{"type":42,"value":4835},"get",{"type":36,"tag":160,"props":4837,"children":4838},{"style":179},[4839],{"type":42,"value":236},{"type":36,"tag":160,"props":4841,"children":4842},{"style":179},[4843],{"type":42,"value":256},{"type":36,"tag":160,"props":4845,"children":4846},{"style":179},[4847],{"type":42,"value":365},{"type":36,"tag":160,"props":4849,"children":4850},{"style":239},[4851],{"type":42,"value":4852},"category",{"type":36,"tag":160,"props":4854,"children":4855},{"style":179},[4856],{"type":42,"value":236},{"type":36,"tag":160,"props":4858,"children":4859},{"style":173},[4860],{"type":42,"value":590},{"type":36,"tag":160,"props":4862,"children":4863},{"style":179},[4864],{"type":42,"value":256},{"type":36,"tag":160,"props":4866,"children":4867},{"style":179},[4868],{"type":42,"value":365},{"type":36,"tag":160,"props":4870,"children":4871},{"style":239},[4872],{"type":42,"value":4873},"coffee",{"type":36,"tag":160,"props":4875,"children":4876},{"style":179},[4877],{"type":42,"value":236},{"type":36,"tag":160,"props":4879,"children":4880},{"style":173},[4881],{"type":42,"value":4882},"])",{"type":36,"tag":160,"props":4884,"children":4885},{"style":179},[4886],{"type":42,"value":398},{"type":36,"tag":160,"props":4888,"children":4889},{"class":162,"line":602},[4890],{"type":36,"tag":160,"props":4891,"children":4892},{"emptyLinePlaceholder":1382},[4893],{"type":42,"value":1385},{"type":36,"tag":160,"props":4895,"children":4896},{"class":162,"line":619},[4897],{"type":36,"tag":160,"props":4898,"children":4899},{"style":377},[4900],{"type":42,"value":4901},"\u002F\u002F ❌ BAD: remove + re-add causes flash\n",{"type":36,"tag":160,"props":4903,"children":4904},{"class":162,"line":1388},[4905,4909,4913,4917,4921,4925,4929,4933,4937],{"type":36,"tag":160,"props":4906,"children":4907},{"style":173},[4908],{"type":42,"value":242},{"type":36,"tag":160,"props":4910,"children":4911},{"style":179},[4912],{"type":42,"value":197},{"type":36,"tag":160,"props":4914,"children":4915},{"style":209},[4916],{"type":42,"value":4597},{"type":36,"tag":160,"props":4918,"children":4919},{"style":173},[4920],{"type":42,"value":231},{"type":36,"tag":160,"props":4922,"children":4923},{"style":179},[4924],{"type":42,"value":236},{"type":36,"tag":160,"props":4926,"children":4927},{"style":239},[4928],{"type":42,"value":4793},{"type":36,"tag":160,"props":4930,"children":4931},{"style":179},[4932],{"type":42,"value":236},{"type":36,"tag":160,"props":4934,"children":4935},{"style":173},[4936],{"type":42,"value":251},{"type":36,"tag":160,"props":4938,"children":4939},{"style":179},[4940],{"type":42,"value":398},{"type":36,"tag":160,"props":4942,"children":4943},{"class":162,"line":1397},[4944,4948,4952,4956,4960,4964,4968,4972,4976],{"type":36,"tag":160,"props":4945,"children":4946},{"style":173},[4947],{"type":42,"value":242},{"type":36,"tag":160,"props":4949,"children":4950},{"style":179},[4951],{"type":42,"value":197},{"type":36,"tag":160,"props":4953,"children":4954},{"style":209},[4955],{"type":42,"value":4638},{"type":36,"tag":160,"props":4957,"children":4958},{"style":173},[4959],{"type":42,"value":231},{"type":36,"tag":160,"props":4961,"children":4962},{"style":179},[4963],{"type":42,"value":236},{"type":36,"tag":160,"props":4965,"children":4966},{"style":239},[4967],{"type":42,"value":4723},{"type":36,"tag":160,"props":4969,"children":4970},{"style":179},[4971],{"type":42,"value":236},{"type":36,"tag":160,"props":4973,"children":4974},{"style":173},[4975],{"type":42,"value":251},{"type":36,"tag":160,"props":4977,"children":4978},{"style":179},[4979],{"type":42,"value":398},{"type":36,"tag":160,"props":4981,"children":4982},{"class":162,"line":24},[4983,4987,4991,4995,4999,5003,5007,5011,5015,5019,5024,5029,5033],{"type":36,"tag":160,"props":4984,"children":4985},{"style":173},[4986],{"type":42,"value":242},{"type":36,"tag":160,"props":4988,"children":4989},{"style":179},[4990],{"type":42,"value":197},{"type":36,"tag":160,"props":4992,"children":4993},{"style":209},[4994],{"type":42,"value":2063},{"type":36,"tag":160,"props":4996,"children":4997},{"style":173},[4998],{"type":42,"value":231},{"type":36,"tag":160,"props":5000,"children":5001},{"style":179},[5002],{"type":42,"value":236},{"type":36,"tag":160,"props":5004,"children":5005},{"style":239},[5006],{"type":42,"value":4723},{"type":36,"tag":160,"props":5008,"children":5009},{"style":179},[5010],{"type":42,"value":236},{"type":36,"tag":160,"props":5012,"children":5013},{"style":179},[5014],{"type":42,"value":256},{"type":36,"tag":160,"props":5016,"children":5017},{"style":179},[5018],{"type":42,"value":281},{"type":36,"tag":160,"props":5020,"children":5021},{"style":179},[5022],{"type":42,"value":5023}," ...",{"type":36,"tag":160,"props":5025,"children":5026},{"style":179},[5027],{"type":42,"value":5028}," }",{"type":36,"tag":160,"props":5030,"children":5031},{"style":173},[5032],{"type":42,"value":251},{"type":36,"tag":160,"props":5034,"children":5035},{"style":179},[5036],{"type":42,"value":398},{"type":36,"tag":160,"props":5038,"children":5039},{"class":162,"line":2386},[5040,5044,5048,5052,5056,5060,5064,5068,5072],{"type":36,"tag":160,"props":5041,"children":5042},{"style":173},[5043],{"type":42,"value":242},{"type":36,"tag":160,"props":5045,"children":5046},{"style":179},[5047],{"type":42,"value":197},{"type":36,"tag":160,"props":5049,"children":5050},{"style":209},[5051],{"type":42,"value":2433},{"type":36,"tag":160,"props":5053,"children":5054},{"style":173},[5055],{"type":42,"value":231},{"type":36,"tag":160,"props":5057,"children":5058},{"style":179},[5059],{"type":42,"value":3869},{"type":36,"tag":160,"props":5061,"children":5062},{"style":179},[5063],{"type":42,"value":5023},{"type":36,"tag":160,"props":5065,"children":5066},{"style":179},[5067],{"type":42,"value":5028},{"type":36,"tag":160,"props":5069,"children":5070},{"style":173},[5071],{"type":42,"value":251},{"type":36,"tag":160,"props":5073,"children":5074},{"style":179},[5075],{"type":42,"value":398},{"type":36,"tag":51,"props":5077,"children":5079},{"id":5078},"when-not-to-migrate",[5080],{"type":42,"value":5081},"When NOT to Migrate",{"type":36,"tag":45,"props":5083,"children":5084},{},[5085],{"type":42,"value":5086},"Consider staying with Google Maps if:",{"type":36,"tag":65,"props":5088,"children":5089},{},[5090,5100,5110,5120,5130],{"type":36,"tag":69,"props":5091,"children":5092},{},[5093,5098],{"type":36,"tag":129,"props":5094,"children":5095},{},[5096],{"type":42,"value":5097},"Street View is critical",{"type":42,"value":5099}," - Mapbox doesn't have equivalent",{"type":36,"tag":69,"props":5101,"children":5102},{},[5103,5108],{"type":36,"tag":129,"props":5104,"children":5105},{},[5106],{"type":42,"value":5107},"Tight Google Workspace integration",{"type":42,"value":5109}," - Places API deeply integrated",{"type":36,"tag":69,"props":5111,"children":5112},{},[5113,5118],{"type":36,"tag":129,"props":5114,"children":5115},{},[5116],{"type":42,"value":5117},"Already heavily optimized",{"type":42,"value":5119}," - Migration cost > benefits",{"type":36,"tag":69,"props":5121,"children":5122},{},[5123,5128],{"type":36,"tag":129,"props":5124,"children":5125},{},[5126],{"type":42,"value":5127},"Team expertise",{"type":42,"value":5129}," - Retraining costs too high",{"type":36,"tag":69,"props":5131,"children":5132},{},[5133,5138],{"type":36,"tag":129,"props":5134,"children":5135},{},[5136],{"type":42,"value":5137},"Short-term project",{"type":42,"value":5139}," - Not worth migration effort",{"type":36,"tag":51,"props":5141,"children":5143},{"id":5142},"quick-reference-side-by-side-comparison",[5144],{"type":42,"value":5145},"Quick Reference: Side-by-Side Comparison",{"type":36,"tag":149,"props":5147,"children":5149},{"className":151,"code":5148,"language":153,"meta":154,"style":154},"\u002F\u002F GOOGLE MAPS\nconst map = new google.maps.Map(el, {\n  center: { lat: 37.7749, lng: -122.4194 },\n  zoom: 12\n});\n\nconst marker = new google.maps.Marker({\n  position: { lat: 37.7749, lng: -122.4194 },\n  map: map\n});\n\ngoogle.maps.event.addListener(map, 'click', (e) => {\n  console.log(e.latLng.lat(), e.latLng.lng());\n});\n\n\u002F\u002F MAPBOX GL JS\nmapboxgl.accessToken = 'YOUR_TOKEN';\nconst map = new mapboxgl.Map({\n  container: el,\n  center: [-122.4194, 37.7749], \u002F\u002F REVERSED!\n  zoom: 12,\n  style: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fstreets-v12'\n});\n\nconst marker = new mapboxgl.Marker()\n  .setLngLat([-122.4194, 37.7749]) \u002F\u002F REVERSED!\n  .addTo(map);\n\nmap.on('click', (e) => {\n  console.log(e.lngLat.lat, e.lngLat.lng);\n});\n",[5150],{"type":36,"tag":80,"props":5151,"children":5152},{"__ignoreMap":154},[5153,5161,5213,5264,5279,5294,5301,5348,5399,5414,5429,5436,5514,5589,5604,5611,5619,5655,5694,5714,5758,5777,5800,5816,5824,5860,5902,5922,5930,5986,6058],{"type":36,"tag":160,"props":5154,"children":5155},{"class":162,"line":163},[5156],{"type":36,"tag":160,"props":5157,"children":5158},{"style":377},[5159],{"type":42,"value":5160},"\u002F\u002F GOOGLE MAPS\n",{"type":36,"tag":160,"props":5162,"children":5163},{"class":162,"line":264},[5164,5168,5172,5176,5180,5184,5188,5192,5196,5200,5205,5209],{"type":36,"tag":160,"props":5165,"children":5166},{"style":167},[5167],{"type":42,"value":170},{"type":36,"tag":160,"props":5169,"children":5170},{"style":173},[5171],{"type":42,"value":176},{"type":36,"tag":160,"props":5173,"children":5174},{"style":179},[5175],{"type":42,"value":182},{"type":36,"tag":160,"props":5177,"children":5178},{"style":179},[5179],{"type":42,"value":187},{"type":36,"tag":160,"props":5181,"children":5182},{"style":173},[5183],{"type":42,"value":192},{"type":36,"tag":160,"props":5185,"children":5186},{"style":179},[5187],{"type":42,"value":197},{"type":36,"tag":160,"props":5189,"children":5190},{"style":173},[5191],{"type":42,"value":202},{"type":36,"tag":160,"props":5193,"children":5194},{"style":179},[5195],{"type":42,"value":197},{"type":36,"tag":160,"props":5197,"children":5198},{"style":209},[5199],{"type":42,"value":212},{"type":36,"tag":160,"props":5201,"children":5202},{"style":173},[5203],{"type":42,"value":5204},"(el",{"type":36,"tag":160,"props":5206,"children":5207},{"style":179},[5208],{"type":42,"value":256},{"type":36,"tag":160,"props":5210,"children":5211},{"style":179},[5212],{"type":42,"value":261},{"type":36,"tag":160,"props":5214,"children":5215},{"class":162,"line":327},[5216,5220,5224,5228,5232,5236,5240,5244,5248,5252,5256,5260],{"type":36,"tag":160,"props":5217,"children":5218},{"style":268},[5219],{"type":42,"value":271},{"type":36,"tag":160,"props":5221,"children":5222},{"style":179},[5223],{"type":42,"value":276},{"type":36,"tag":160,"props":5225,"children":5226},{"style":179},[5227],{"type":42,"value":281},{"type":36,"tag":160,"props":5229,"children":5230},{"style":268},[5231],{"type":42,"value":286},{"type":36,"tag":160,"props":5233,"children":5234},{"style":179},[5235],{"type":42,"value":276},{"type":36,"tag":160,"props":5237,"children":5238},{"style":293},[5239],{"type":42,"value":296},{"type":36,"tag":160,"props":5241,"children":5242},{"style":179},[5243],{"type":42,"value":256},{"type":36,"tag":160,"props":5245,"children":5246},{"style":268},[5247],{"type":42,"value":305},{"type":36,"tag":160,"props":5249,"children":5250},{"style":179},[5251],{"type":42,"value":276},{"type":36,"tag":160,"props":5253,"children":5254},{"style":179},[5255],{"type":42,"value":314},{"type":36,"tag":160,"props":5257,"children":5258},{"style":293},[5259],{"type":42,"value":319},{"type":36,"tag":160,"props":5261,"children":5262},{"style":179},[5263],{"type":42,"value":324},{"type":36,"tag":160,"props":5265,"children":5266},{"class":162,"line":350},[5267,5271,5275],{"type":36,"tag":160,"props":5268,"children":5269},{"style":268},[5270],{"type":42,"value":333},{"type":36,"tag":160,"props":5272,"children":5273},{"style":179},[5274],{"type":42,"value":276},{"type":36,"tag":160,"props":5276,"children":5277},{"style":293},[5278],{"type":42,"value":616},{"type":36,"tag":160,"props":5280,"children":5281},{"class":162,"line":383},[5282,5286,5290],{"type":36,"tag":160,"props":5283,"children":5284},{"style":179},[5285],{"type":42,"value":389},{"type":36,"tag":160,"props":5287,"children":5288},{"style":173},[5289],{"type":42,"value":251},{"type":36,"tag":160,"props":5291,"children":5292},{"style":179},[5293],{"type":42,"value":398},{"type":36,"tag":160,"props":5295,"children":5296},{"class":162,"line":602},[5297],{"type":36,"tag":160,"props":5298,"children":5299},{"emptyLinePlaceholder":1382},[5300],{"type":42,"value":1385},{"type":36,"tag":160,"props":5302,"children":5303},{"class":162,"line":619},[5304,5308,5312,5316,5320,5324,5328,5332,5336,5340,5344],{"type":36,"tag":160,"props":5305,"children":5306},{"style":167},[5307],{"type":42,"value":170},{"type":36,"tag":160,"props":5309,"children":5310},{"style":173},[5311],{"type":42,"value":1196},{"type":36,"tag":160,"props":5313,"children":5314},{"style":179},[5315],{"type":42,"value":182},{"type":36,"tag":160,"props":5317,"children":5318},{"style":179},[5319],{"type":42,"value":187},{"type":36,"tag":160,"props":5321,"children":5322},{"style":173},[5323],{"type":42,"value":192},{"type":36,"tag":160,"props":5325,"children":5326},{"style":179},[5327],{"type":42,"value":197},{"type":36,"tag":160,"props":5329,"children":5330},{"style":173},[5331],{"type":42,"value":202},{"type":36,"tag":160,"props":5333,"children":5334},{"style":179},[5335],{"type":42,"value":197},{"type":36,"tag":160,"props":5337,"children":5338},{"style":209},[5339],{"type":42,"value":1225},{"type":36,"tag":160,"props":5341,"children":5342},{"style":173},[5343],{"type":42,"value":231},{"type":36,"tag":160,"props":5345,"children":5346},{"style":179},[5347],{"type":42,"value":490},{"type":36,"tag":160,"props":5349,"children":5350},{"class":162,"line":1388},[5351,5355,5359,5363,5367,5371,5375,5379,5383,5387,5391,5395],{"type":36,"tag":160,"props":5352,"children":5353},{"style":268},[5354],{"type":42,"value":1241},{"type":36,"tag":160,"props":5356,"children":5357},{"style":179},[5358],{"type":42,"value":276},{"type":36,"tag":160,"props":5360,"children":5361},{"style":179},[5362],{"type":42,"value":281},{"type":36,"tag":160,"props":5364,"children":5365},{"style":268},[5366],{"type":42,"value":286},{"type":36,"tag":160,"props":5368,"children":5369},{"style":179},[5370],{"type":42,"value":276},{"type":36,"tag":160,"props":5372,"children":5373},{"style":293},[5374],{"type":42,"value":296},{"type":36,"tag":160,"props":5376,"children":5377},{"style":179},[5378],{"type":42,"value":256},{"type":36,"tag":160,"props":5380,"children":5381},{"style":268},[5382],{"type":42,"value":305},{"type":36,"tag":160,"props":5384,"children":5385},{"style":179},[5386],{"type":42,"value":276},{"type":36,"tag":160,"props":5388,"children":5389},{"style":179},[5390],{"type":42,"value":314},{"type":36,"tag":160,"props":5392,"children":5393},{"style":293},[5394],{"type":42,"value":319},{"type":36,"tag":160,"props":5396,"children":5397},{"style":179},[5398],{"type":42,"value":324},{"type":36,"tag":160,"props":5400,"children":5401},{"class":162,"line":1397},[5402,5406,5410],{"type":36,"tag":160,"props":5403,"children":5404},{"style":268},[5405],{"type":42,"value":1293},{"type":36,"tag":160,"props":5407,"children":5408},{"style":179},[5409],{"type":42,"value":276},{"type":36,"tag":160,"props":5411,"children":5412},{"style":173},[5413],{"type":42,"value":1853},{"type":36,"tag":160,"props":5415,"children":5416},{"class":162,"line":24},[5417,5421,5425],{"type":36,"tag":160,"props":5418,"children":5419},{"style":179},[5420],{"type":42,"value":389},{"type":36,"tag":160,"props":5422,"children":5423},{"style":173},[5424],{"type":42,"value":251},{"type":36,"tag":160,"props":5426,"children":5427},{"style":179},[5428],{"type":42,"value":398},{"type":36,"tag":160,"props":5430,"children":5431},{"class":162,"line":2386},[5432],{"type":36,"tag":160,"props":5433,"children":5434},{"emptyLinePlaceholder":1382},[5435],{"type":42,"value":1385},{"type":36,"tag":160,"props":5437,"children":5438},{"class":162,"line":2395},[5439,5444,5448,5452,5456,5461,5465,5469,5474,5478,5482,5486,5490,5494,5498,5502,5506,5510],{"type":36,"tag":160,"props":5440,"children":5441},{"style":173},[5442],{"type":42,"value":5443},"google",{"type":36,"tag":160,"props":5445,"children":5446},{"style":179},[5447],{"type":42,"value":197},{"type":36,"tag":160,"props":5449,"children":5450},{"style":173},[5451],{"type":42,"value":202},{"type":36,"tag":160,"props":5453,"children":5454},{"style":179},[5455],{"type":42,"value":197},{"type":36,"tag":160,"props":5457,"children":5458},{"style":173},[5459],{"type":42,"value":5460},"event",{"type":36,"tag":160,"props":5462,"children":5463},{"style":179},[5464],{"type":42,"value":197},{"type":36,"tag":160,"props":5466,"children":5467},{"style":209},[5468],{"type":42,"value":2780},{"type":36,"tag":160,"props":5470,"children":5471},{"style":173},[5472],{"type":42,"value":5473},"(map",{"type":36,"tag":160,"props":5475,"children":5476},{"style":179},[5477],{"type":42,"value":256},{"type":36,"tag":160,"props":5479,"children":5480},{"style":179},[5481],{"type":42,"value":365},{"type":36,"tag":160,"props":5483,"children":5484},{"style":239},[5485],{"type":42,"value":2793},{"type":36,"tag":160,"props":5487,"children":5488},{"style":179},[5489],{"type":42,"value":236},{"type":36,"tag":160,"props":5491,"children":5492},{"style":179},[5493],{"type":42,"value":256},{"type":36,"tag":160,"props":5495,"children":5496},{"style":179},[5497],{"type":42,"value":2211},{"type":36,"tag":160,"props":5499,"children":5500},{"style":1720},[5501],{"type":42,"value":3120},{"type":36,"tag":160,"props":5503,"children":5504},{"style":179},[5505],{"type":42,"value":251},{"type":36,"tag":160,"props":5507,"children":5508},{"style":167},[5509],{"type":42,"value":1948},{"type":36,"tag":160,"props":5511,"children":5512},{"style":179},[5513],{"type":42,"value":261},{"type":36,"tag":160,"props":5515,"children":5516},{"class":162,"line":2411},[5517,5521,5525,5529,5533,5537,5541,5545,5549,5553,5557,5561,5565,5569,5573,5577,5581,5585],{"type":36,"tag":160,"props":5518,"children":5519},{"style":173},[5520],{"type":42,"value":4041},{"type":36,"tag":160,"props":5522,"children":5523},{"style":179},[5524],{"type":42,"value":197},{"type":36,"tag":160,"props":5526,"children":5527},{"style":209},[5528],{"type":42,"value":4050},{"type":36,"tag":160,"props":5530,"children":5531},{"style":268},[5532],{"type":42,"value":231},{"type":36,"tag":160,"props":5534,"children":5535},{"style":173},[5536],{"type":42,"value":3120},{"type":36,"tag":160,"props":5538,"children":5539},{"style":179},[5540],{"type":42,"value":197},{"type":36,"tag":160,"props":5542,"children":5543},{"style":173},[5544],{"type":42,"value":3763},{"type":36,"tag":160,"props":5546,"children":5547},{"style":179},[5548],{"type":42,"value":197},{"type":36,"tag":160,"props":5550,"children":5551},{"style":209},[5552],{"type":42,"value":1806},{"type":36,"tag":160,"props":5554,"children":5555},{"style":268},[5556],{"type":42,"value":1566},{"type":36,"tag":160,"props":5558,"children":5559},{"style":179},[5560],{"type":42,"value":256},{"type":36,"tag":160,"props":5562,"children":5563},{"style":173},[5564],{"type":42,"value":3154},{"type":36,"tag":160,"props":5566,"children":5567},{"style":179},[5568],{"type":42,"value":197},{"type":36,"tag":160,"props":5570,"children":5571},{"style":173},[5572],{"type":42,"value":3763},{"type":36,"tag":160,"props":5574,"children":5575},{"style":179},[5576],{"type":42,"value":197},{"type":36,"tag":160,"props":5578,"children":5579},{"style":209},[5580],{"type":42,"value":1990},{"type":36,"tag":160,"props":5582,"children":5583},{"style":268},[5584],{"type":42,"value":4107},{"type":36,"tag":160,"props":5586,"children":5587},{"style":179},[5588],{"type":42,"value":398},{"type":36,"tag":160,"props":5590,"children":5591},{"class":162,"line":2419},[5592,5596,5600],{"type":36,"tag":160,"props":5593,"children":5594},{"style":179},[5595],{"type":42,"value":389},{"type":36,"tag":160,"props":5597,"children":5598},{"style":173},[5599],{"type":42,"value":251},{"type":36,"tag":160,"props":5601,"children":5602},{"style":179},[5603],{"type":42,"value":398},{"type":36,"tag":160,"props":5605,"children":5606},{"class":162,"line":2444},[5607],{"type":36,"tag":160,"props":5608,"children":5609},{"emptyLinePlaceholder":1382},[5610],{"type":42,"value":1385},{"type":36,"tag":160,"props":5612,"children":5613},{"class":162,"line":2474},[5614],{"type":36,"tag":160,"props":5615,"children":5616},{"style":377},[5617],{"type":42,"value":5618},"\u002F\u002F MAPBOX GL JS\n",{"type":36,"tag":160,"props":5620,"children":5621},{"class":162,"line":2508},[5622,5626,5630,5634,5638,5642,5647,5651],{"type":36,"tag":160,"props":5623,"children":5624},{"style":173},[5625],{"type":42,"value":419},{"type":36,"tag":160,"props":5627,"children":5628},{"style":179},[5629],{"type":42,"value":197},{"type":36,"tag":160,"props":5631,"children":5632},{"style":173},[5633],{"type":42,"value":428},{"type":36,"tag":160,"props":5635,"children":5636},{"style":179},[5637],{"type":42,"value":182},{"type":36,"tag":160,"props":5639,"children":5640},{"style":179},[5641],{"type":42,"value":365},{"type":36,"tag":160,"props":5643,"children":5644},{"style":239},[5645],{"type":42,"value":5646},"YOUR_TOKEN",{"type":36,"tag":160,"props":5648,"children":5649},{"style":179},[5650],{"type":42,"value":236},{"type":36,"tag":160,"props":5652,"children":5653},{"style":179},[5654],{"type":42,"value":398},{"type":36,"tag":160,"props":5656,"children":5657},{"class":162,"line":2537},[5658,5662,5666,5670,5674,5678,5682,5686,5690],{"type":36,"tag":160,"props":5659,"children":5660},{"style":167},[5661],{"type":42,"value":170},{"type":36,"tag":160,"props":5663,"children":5664},{"style":173},[5665],{"type":42,"value":176},{"type":36,"tag":160,"props":5667,"children":5668},{"style":179},[5669],{"type":42,"value":182},{"type":36,"tag":160,"props":5671,"children":5672},{"style":179},[5673],{"type":42,"value":187},{"type":36,"tag":160,"props":5675,"children":5676},{"style":173},[5677],{"type":42,"value":473},{"type":36,"tag":160,"props":5679,"children":5680},{"style":179},[5681],{"type":42,"value":197},{"type":36,"tag":160,"props":5683,"children":5684},{"style":209},[5685],{"type":42,"value":212},{"type":36,"tag":160,"props":5687,"children":5688},{"style":173},[5689],{"type":42,"value":231},{"type":36,"tag":160,"props":5691,"children":5692},{"style":179},[5693],{"type":42,"value":490},{"type":36,"tag":160,"props":5695,"children":5696},{"class":162,"line":2554},[5697,5701,5705,5710],{"type":36,"tag":160,"props":5698,"children":5699},{"style":268},[5700],{"type":42,"value":498},{"type":36,"tag":160,"props":5702,"children":5703},{"style":179},[5704],{"type":42,"value":276},{"type":36,"tag":160,"props":5706,"children":5707},{"style":173},[5708],{"type":42,"value":5709}," el",{"type":36,"tag":160,"props":5711,"children":5712},{"style":179},[5713],{"type":42,"value":347},{"type":36,"tag":160,"props":5715,"children":5716},{"class":162,"line":2585},[5717,5721,5725,5729,5733,5737,5741,5745,5749,5753],{"type":36,"tag":160,"props":5718,"children":5719},{"style":268},[5720],{"type":42,"value":271},{"type":36,"tag":160,"props":5722,"children":5723},{"style":179},[5724],{"type":42,"value":276},{"type":36,"tag":160,"props":5726,"children":5727},{"style":173},[5728],{"type":42,"value":568},{"type":36,"tag":160,"props":5730,"children":5731},{"style":179},[5732],{"type":42,"value":573},{"type":36,"tag":160,"props":5734,"children":5735},{"style":293},[5736],{"type":42,"value":319},{"type":36,"tag":160,"props":5738,"children":5739},{"style":179},[5740],{"type":42,"value":256},{"type":36,"tag":160,"props":5742,"children":5743},{"style":293},[5744],{"type":42,"value":296},{"type":36,"tag":160,"props":5746,"children":5747},{"style":173},[5748],{"type":42,"value":590},{"type":36,"tag":160,"props":5750,"children":5751},{"style":179},[5752],{"type":42,"value":256},{"type":36,"tag":160,"props":5754,"children":5755},{"style":377},[5756],{"type":42,"value":5757}," \u002F\u002F REVERSED!\n",{"type":36,"tag":160,"props":5759,"children":5760},{"class":162,"line":2619},[5761,5765,5769,5773],{"type":36,"tag":160,"props":5762,"children":5763},{"style":268},[5764],{"type":42,"value":333},{"type":36,"tag":160,"props":5766,"children":5767},{"style":179},[5768],{"type":42,"value":276},{"type":36,"tag":160,"props":5770,"children":5771},{"style":293},[5772],{"type":42,"value":342},{"type":36,"tag":160,"props":5774,"children":5775},{"style":179},[5776],{"type":42,"value":347},{"type":36,"tag":160,"props":5778,"children":5779},{"class":162,"line":2627},[5780,5784,5788,5792,5796],{"type":36,"tag":160,"props":5781,"children":5782},{"style":268},[5783],{"type":42,"value":526},{"type":36,"tag":160,"props":5785,"children":5786},{"style":179},[5787],{"type":42,"value":276},{"type":36,"tag":160,"props":5789,"children":5790},{"style":179},[5791],{"type":42,"value":365},{"type":36,"tag":160,"props":5793,"children":5794},{"style":239},[5795],{"type":42,"value":539},{"type":36,"tag":160,"props":5797,"children":5798},{"style":179},[5799],{"type":42,"value":1361},{"type":36,"tag":160,"props":5801,"children":5803},{"class":162,"line":5802},23,[5804,5808,5812],{"type":36,"tag":160,"props":5805,"children":5806},{"style":179},[5807],{"type":42,"value":389},{"type":36,"tag":160,"props":5809,"children":5810},{"style":173},[5811],{"type":42,"value":251},{"type":36,"tag":160,"props":5813,"children":5814},{"style":179},[5815],{"type":42,"value":398},{"type":36,"tag":160,"props":5817,"children":5819},{"class":162,"line":5818},24,[5820],{"type":36,"tag":160,"props":5821,"children":5822},{"emptyLinePlaceholder":1382},[5823],{"type":42,"value":1385},{"type":36,"tag":160,"props":5825,"children":5827},{"class":162,"line":5826},25,[5828,5832,5836,5840,5844,5848,5852,5856],{"type":36,"tag":160,"props":5829,"children":5830},{"style":167},[5831],{"type":42,"value":170},{"type":36,"tag":160,"props":5833,"children":5834},{"style":173},[5835],{"type":42,"value":1196},{"type":36,"tag":160,"props":5837,"children":5838},{"style":179},[5839],{"type":42,"value":182},{"type":36,"tag":160,"props":5841,"children":5842},{"style":179},[5843],{"type":42,"value":187},{"type":36,"tag":160,"props":5845,"children":5846},{"style":173},[5847],{"type":42,"value":473},{"type":36,"tag":160,"props":5849,"children":5850},{"style":179},[5851],{"type":42,"value":197},{"type":36,"tag":160,"props":5853,"children":5854},{"style":209},[5855],{"type":42,"value":1225},{"type":36,"tag":160,"props":5857,"children":5858},{"style":173},[5859],{"type":42,"value":1488},{"type":36,"tag":160,"props":5861,"children":5863},{"class":162,"line":5862},26,[5864,5868,5872,5876,5880,5884,5888,5892,5897],{"type":36,"tag":160,"props":5865,"children":5866},{"style":179},[5867],{"type":42,"value":1496},{"type":36,"tag":160,"props":5869,"children":5870},{"style":209},[5871],{"type":42,"value":1501},{"type":36,"tag":160,"props":5873,"children":5874},{"style":173},[5875],{"type":42,"value":1506},{"type":36,"tag":160,"props":5877,"children":5878},{"style":179},[5879],{"type":42,"value":573},{"type":36,"tag":160,"props":5881,"children":5882},{"style":293},[5883],{"type":42,"value":319},{"type":36,"tag":160,"props":5885,"children":5886},{"style":179},[5887],{"type":42,"value":256},{"type":36,"tag":160,"props":5889,"children":5890},{"style":293},[5891],{"type":42,"value":296},{"type":36,"tag":160,"props":5893,"children":5894},{"style":173},[5895],{"type":42,"value":5896},"]) ",{"type":36,"tag":160,"props":5898,"children":5899},{"style":377},[5900],{"type":42,"value":5901},"\u002F\u002F REVERSED!\n",{"type":36,"tag":160,"props":5903,"children":5905},{"class":162,"line":5904},27,[5906,5910,5914,5918],{"type":36,"tag":160,"props":5907,"children":5908},{"style":179},[5909],{"type":42,"value":1496},{"type":36,"tag":160,"props":5911,"children":5912},{"style":209},[5913],{"type":42,"value":1608},{"type":36,"tag":160,"props":5915,"children":5916},{"style":173},[5917],{"type":42,"value":1613},{"type":36,"tag":160,"props":5919,"children":5920},{"style":179},[5921],{"type":42,"value":398},{"type":36,"tag":160,"props":5923,"children":5925},{"class":162,"line":5924},28,[5926],{"type":36,"tag":160,"props":5927,"children":5928},{"emptyLinePlaceholder":1382},[5929],{"type":42,"value":1385},{"type":36,"tag":160,"props":5931,"children":5933},{"class":162,"line":5932},29,[5934,5938,5942,5946,5950,5954,5958,5962,5966,5970,5974,5978,5982],{"type":36,"tag":160,"props":5935,"children":5936},{"style":173},[5937],{"type":42,"value":242},{"type":36,"tag":160,"props":5939,"children":5940},{"style":179},[5941],{"type":42,"value":197},{"type":36,"tag":160,"props":5943,"children":5944},{"style":209},[5945],{"type":42,"value":3075},{"type":36,"tag":160,"props":5947,"children":5948},{"style":173},[5949],{"type":42,"value":231},{"type":36,"tag":160,"props":5951,"children":5952},{"style":179},[5953],{"type":42,"value":236},{"type":36,"tag":160,"props":5955,"children":5956},{"style":239},[5957],{"type":42,"value":2793},{"type":36,"tag":160,"props":5959,"children":5960},{"style":179},[5961],{"type":42,"value":236},{"type":36,"tag":160,"props":5963,"children":5964},{"style":179},[5965],{"type":42,"value":256},{"type":36,"tag":160,"props":5967,"children":5968},{"style":179},[5969],{"type":42,"value":2211},{"type":36,"tag":160,"props":5971,"children":5972},{"style":1720},[5973],{"type":42,"value":3120},{"type":36,"tag":160,"props":5975,"children":5976},{"style":179},[5977],{"type":42,"value":251},{"type":36,"tag":160,"props":5979,"children":5980},{"style":167},[5981],{"type":42,"value":1948},{"type":36,"tag":160,"props":5983,"children":5984},{"style":179},[5985],{"type":42,"value":261},{"type":36,"tag":160,"props":5987,"children":5989},{"class":162,"line":5988},30,[5990,5994,5998,6002,6006,6010,6014,6018,6022,6026,6030,6034,6038,6042,6046,6050,6054],{"type":36,"tag":160,"props":5991,"children":5992},{"style":173},[5993],{"type":42,"value":4041},{"type":36,"tag":160,"props":5995,"children":5996},{"style":179},[5997],{"type":42,"value":197},{"type":36,"tag":160,"props":5999,"children":6000},{"style":209},[6001],{"type":42,"value":4050},{"type":36,"tag":160,"props":6003,"children":6004},{"style":268},[6005],{"type":42,"value":231},{"type":36,"tag":160,"props":6007,"children":6008},{"style":173},[6009],{"type":42,"value":3120},{"type":36,"tag":160,"props":6011,"children":6012},{"style":179},[6013],{"type":42,"value":197},{"type":36,"tag":160,"props":6015,"children":6016},{"style":173},[6017],{"type":42,"value":3770},{"type":36,"tag":160,"props":6019,"children":6020},{"style":179},[6021],{"type":42,"value":197},{"type":36,"tag":160,"props":6023,"children":6024},{"style":173},[6025],{"type":42,"value":1806},{"type":36,"tag":160,"props":6027,"children":6028},{"style":179},[6029],{"type":42,"value":256},{"type":36,"tag":160,"props":6031,"children":6032},{"style":173},[6033],{"type":42,"value":3154},{"type":36,"tag":160,"props":6035,"children":6036},{"style":179},[6037],{"type":42,"value":197},{"type":36,"tag":160,"props":6039,"children":6040},{"style":173},[6041],{"type":42,"value":3770},{"type":36,"tag":160,"props":6043,"children":6044},{"style":179},[6045],{"type":42,"value":197},{"type":36,"tag":160,"props":6047,"children":6048},{"style":173},[6049],{"type":42,"value":1990},{"type":36,"tag":160,"props":6051,"children":6052},{"style":268},[6053],{"type":42,"value":251},{"type":36,"tag":160,"props":6055,"children":6056},{"style":179},[6057],{"type":42,"value":398},{"type":36,"tag":160,"props":6059,"children":6061},{"class":162,"line":6060},31,[6062,6066,6070],{"type":36,"tag":160,"props":6063,"children":6064},{"style":179},[6065],{"type":42,"value":389},{"type":36,"tag":160,"props":6067,"children":6068},{"style":173},[6069],{"type":42,"value":251},{"type":36,"tag":160,"props":6071,"children":6072},{"style":179},[6073],{"type":42,"value":398},{"type":36,"tag":45,"props":6075,"children":6076},{},[6077,6082],{"type":36,"tag":129,"props":6078,"children":6079},{},[6080],{"type":42,"value":6081},"Remember:",{"type":42,"value":6083}," lng, lat order in Mapbox!",{"type":36,"tag":51,"props":6085,"children":6087},{"id":6086},"additional-resources",[6088],{"type":42,"value":6089},"Additional Resources",{"type":36,"tag":65,"props":6091,"children":6092},{},[6093,6105,6115,6125],{"type":36,"tag":69,"props":6094,"children":6095},{},[6096],{"type":36,"tag":6097,"props":6098,"children":6102},"a",{"href":6099,"rel":6100},"https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002F",[6101],"nofollow",[6103],{"type":42,"value":6104},"Mapbox GL JS Documentation",{"type":36,"tag":69,"props":6106,"children":6107},{},[6108],{"type":36,"tag":6097,"props":6109,"children":6112},{"href":6110,"rel":6111},"https:\u002F\u002Fdocs.mapbox.com\u002Fhelp\u002Ftutorials\u002Fgoogle-to-mapbox\u002F",[6101],[6113],{"type":42,"value":6114},"Official Google Maps to Mapbox Migration Guide",{"type":36,"tag":69,"props":6116,"children":6117},{},[6118],{"type":36,"tag":6097,"props":6119,"children":6122},{"href":6120,"rel":6121},"https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fexamples\u002F",[6101],[6123],{"type":42,"value":6124},"Mapbox Examples",{"type":36,"tag":69,"props":6126,"children":6127},{},[6128],{"type":36,"tag":6097,"props":6129,"children":6132},{"href":6130,"rel":6131},"https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fstyle-spec\u002F",[6101],[6133],{"type":42,"value":6134},"Style Specification",{"type":36,"tag":51,"props":6136,"children":6138},{"id":6137},"integration-with-other-skills",[6139],{"type":42,"value":6140},"Integration with Other Skills",{"type":36,"tag":45,"props":6142,"children":6143},{},[6144],{"type":36,"tag":129,"props":6145,"children":6146},{},[6147],{"type":42,"value":6148},"Works with:",{"type":36,"tag":65,"props":6150,"children":6151},{},[6152,6162,6172,6182,6192],{"type":36,"tag":69,"props":6153,"children":6154},{},[6155,6160],{"type":36,"tag":129,"props":6156,"children":6157},{},[6158],{"type":42,"value":6159},"mapbox-web-integration-patterns",{"type":42,"value":6161},": Framework-specific migration guidance",{"type":36,"tag":69,"props":6163,"children":6164},{},[6165,6170],{"type":36,"tag":129,"props":6166,"children":6167},{},[6168],{"type":42,"value":6169},"mapbox-web-performance-patterns",{"type":42,"value":6171},": Optimize after migration",{"type":36,"tag":69,"props":6173,"children":6174},{},[6175,6180],{"type":36,"tag":129,"props":6176,"children":6177},{},[6178],{"type":42,"value":6179},"mapbox-token-security",{"type":42,"value":6181},": Secure your Mapbox tokens properly",{"type":36,"tag":69,"props":6183,"children":6184},{},[6185,6190],{"type":36,"tag":129,"props":6186,"children":6187},{},[6188],{"type":42,"value":6189},"mapbox-geospatial-operations",{"type":42,"value":6191},": Use Mapbox's geospatial tools effectively",{"type":36,"tag":69,"props":6193,"children":6194},{},[6195,6200],{"type":36,"tag":129,"props":6196,"children":6197},{},[6198],{"type":42,"value":6199},"mapbox-search-patterns",{"type":42,"value":6201},": Migrate geocoding\u002Fsearch functionality",{"type":36,"tag":51,"props":6203,"children":6205},{"id":6204},"reference-files",[6206],{"type":42,"value":6207},"Reference Files",{"type":36,"tag":45,"props":6209,"children":6210},{},[6211],{"type":42,"value":6212},"The following reference files contain detailed migration guides for specific topics. Load them when working on those areas:",{"type":36,"tag":65,"props":6214,"children":6215},{},[6216,6230,6244,6258,6272],{"type":36,"tag":69,"props":6217,"children":6218},{},[6219,6228],{"type":36,"tag":129,"props":6220,"children":6221},{},[6222],{"type":36,"tag":80,"props":6223,"children":6225},{"className":6224},[],[6226],{"type":42,"value":6227},"references\u002Fshapes-geocoding.md",{"type":42,"value":6229}," — Polygons, Polylines, Custom Icons, Geocoding",{"type":36,"tag":69,"props":6231,"children":6232},{},[6233,6242],{"type":36,"tag":129,"props":6234,"children":6235},{},[6236],{"type":36,"tag":80,"props":6237,"children":6239},{"className":6238},[],[6240],{"type":42,"value":6241},"references\u002Fdirections-controls.md",{"type":42,"value":6243}," — Directions\u002FRouting, Controls",{"type":36,"tag":69,"props":6245,"children":6246},{},[6247,6256],{"type":36,"tag":129,"props":6248,"children":6249},{},[6250],{"type":36,"tag":80,"props":6251,"children":6253},{"className":6252},[],[6254],{"type":42,"value":6255},"references\u002Fclustering-styling.md",{"type":42,"value":6257}," — Clustering, Styling\u002FAppearance",{"type":36,"tag":69,"props":6259,"children":6260},{},[6261,6270],{"type":36,"tag":129,"props":6262,"children":6263},{},[6264],{"type":36,"tag":80,"props":6265,"children":6267},{"className":6266},[],[6268],{"type":42,"value":6269},"references\u002Fdata-performance.md",{"type":42,"value":6271}," — Data Updates, Performance, Common Migration Patterns (Store Locator, Drawing Tools, Heatmaps)",{"type":36,"tag":69,"props":6273,"children":6274},{},[6275,6284],{"type":36,"tag":129,"props":6276,"children":6277},{},[6278],{"type":36,"tag":80,"props":6279,"children":6281},{"className":6280},[],[6282],{"type":42,"value":6283},"references\u002Fapi-services.md",{"type":42,"value":6285}," — API Services Comparison, Pricing, Plugins, Framework Integration, Testing, Migration Checklist",{"type":36,"tag":45,"props":6287,"children":6288},{},[6289],{"type":42,"value":6290},"To load a reference, read the file relative to this skill directory, e.g.:",{"type":36,"tag":149,"props":6292,"children":6296},{"className":6293,"code":6295,"language":42},[6294],"language-text","Load references\u002Fshapes-geocoding.md\n",[6297],{"type":36,"tag":80,"props":6298,"children":6299},{"__ignoreMap":154},[6300],{"type":42,"value":6295},{"type":36,"tag":6302,"props":6303,"children":6304},"style",{},[6305],{"type":42,"value":6306},"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":6308,"total":2554},[6309,6323,6340,6355,6377,6388,6394],{"slug":6310,"name":6310,"fn":6311,"description":6312,"org":6313,"tags":6314,"stars":20,"repoUrl":21,"updatedAt":6322},"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},[6315,6318,6319],{"name":6316,"slug":6317,"type":15},"Android","android",{"name":9,"slug":8,"type":15},{"name":6320,"slug":6321,"type":15},"Mobile","mobile","2026-07-30T05:30:51.739352",{"slug":6324,"name":6324,"fn":6325,"description":6326,"org":6327,"tags":6328,"stars":20,"repoUrl":21,"updatedAt":6339},"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},[6329,6332,6335,6336],{"name":6330,"slug":6331,"type":15},"Branding","branding",{"name":6333,"slug":6334,"type":15},"Design","design",{"name":9,"slug":8,"type":15},{"name":6337,"slug":6338,"type":15},"Typography","typography","2026-04-06T18:28:41.2556",{"slug":6341,"name":6341,"fn":6342,"description":6343,"org":6344,"tags":6345,"stars":20,"repoUrl":21,"updatedAt":6354},"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},[6346,6349,6350,6351],{"name":6347,"slug":6348,"type":15},"Data Visualization","data-visualization",{"name":6333,"slug":6334,"type":15},{"name":9,"slug":8,"type":15},{"name":6352,"slug":6353,"type":15},"Performance","performance","2026-04-06T18:29:02.907655",{"slug":6356,"name":6356,"fn":6357,"description":6358,"org":6359,"tags":6360,"stars":20,"repoUrl":21,"updatedAt":6376},"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},[6361,6362,6365,6368,6371,6372,6373],{"name":6316,"slug":6317,"type":15},{"name":6363,"slug":6364,"type":15},"Dart","dart",{"name":6366,"slug":6367,"type":15},"Flutter","flutter",{"name":6369,"slug":6370,"type":15},"iOS","ios",{"name":9,"slug":8,"type":15},{"name":6320,"slug":6321,"type":15},{"name":6374,"slug":6375,"type":15},"SDK","sdk","2026-05-12T06:03:11.211517",{"slug":6189,"name":6189,"fn":6378,"description":6379,"org":6380,"tags":6381,"stars":20,"repoUrl":21,"updatedAt":6387},"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},[6382,6383,6384],{"name":9,"slug":8,"type":15},{"name":6352,"slug":6353,"type":15},{"name":6385,"slug":6386,"type":15},"Strategy","strategy","2026-07-30T05:30:52.766227",{"slug":4,"name":4,"fn":5,"description":6,"org":6389,"tags":6390,"stars":20,"repoUrl":21,"updatedAt":22},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6391,6392,6393],{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"name":18,"slug":19,"type":15},{"slug":6395,"name":6395,"fn":6396,"description":6397,"org":6398,"tags":6399,"stars":20,"repoUrl":21,"updatedAt":6406},"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},[6400,6401,6402,6403],{"name":6369,"slug":6370,"type":15},{"name":9,"slug":8,"type":15},{"name":6320,"slug":6321,"type":15},{"name":6404,"slug":6405,"type":15},"Swift","swift","2026-07-30T05:30:54.75526",{"items":6408,"total":2554},[6409,6415,6422,6429,6439,6445,6451,6458,6472,6485,6500,6512],{"slug":6310,"name":6310,"fn":6311,"description":6312,"org":6410,"tags":6411,"stars":20,"repoUrl":21,"updatedAt":6322},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6412,6413,6414],{"name":6316,"slug":6317,"type":15},{"name":9,"slug":8,"type":15},{"name":6320,"slug":6321,"type":15},{"slug":6324,"name":6324,"fn":6325,"description":6326,"org":6416,"tags":6417,"stars":20,"repoUrl":21,"updatedAt":6339},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6418,6419,6420,6421],{"name":6330,"slug":6331,"type":15},{"name":6333,"slug":6334,"type":15},{"name":9,"slug":8,"type":15},{"name":6337,"slug":6338,"type":15},{"slug":6341,"name":6341,"fn":6342,"description":6343,"org":6423,"tags":6424,"stars":20,"repoUrl":21,"updatedAt":6354},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6425,6426,6427,6428],{"name":6347,"slug":6348,"type":15},{"name":6333,"slug":6334,"type":15},{"name":9,"slug":8,"type":15},{"name":6352,"slug":6353,"type":15},{"slug":6356,"name":6356,"fn":6357,"description":6358,"org":6430,"tags":6431,"stars":20,"repoUrl":21,"updatedAt":6376},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6432,6433,6434,6435,6436,6437,6438],{"name":6316,"slug":6317,"type":15},{"name":6363,"slug":6364,"type":15},{"name":6366,"slug":6367,"type":15},{"name":6369,"slug":6370,"type":15},{"name":9,"slug":8,"type":15},{"name":6320,"slug":6321,"type":15},{"name":6374,"slug":6375,"type":15},{"slug":6189,"name":6189,"fn":6378,"description":6379,"org":6440,"tags":6441,"stars":20,"repoUrl":21,"updatedAt":6387},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6442,6443,6444],{"name":9,"slug":8,"type":15},{"name":6352,"slug":6353,"type":15},{"name":6385,"slug":6386,"type":15},{"slug":4,"name":4,"fn":5,"description":6,"org":6446,"tags":6447,"stars":20,"repoUrl":21,"updatedAt":22},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6448,6449,6450],{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"name":18,"slug":19,"type":15},{"slug":6395,"name":6395,"fn":6396,"description":6397,"org":6452,"tags":6453,"stars":20,"repoUrl":21,"updatedAt":6406},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[6454,6455,6456,6457],{"name":6369,"slug":6370,"type":15},{"name":9,"slug":8,"type":15},{"name":6320,"slug":6321,"type":15},{"name":6404,"slug":6405,"type":15},{"slug":6459,"name":6459,"fn":6460,"description":6461,"org":6462,"tags":6463,"stars":20,"repoUrl":21,"updatedAt":6471},"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},[6464,6467,6468],{"name":6465,"slug":6466,"type":15},"Data Quality","data-quality",{"name":9,"slug":8,"type":15},{"name":6469,"slug":6470,"type":15},"MCP","mcp","2026-04-15T05:01:44.248764",{"slug":6473,"name":6473,"fn":6474,"description":6475,"org":6476,"tags":6477,"stars":20,"repoUrl":21,"updatedAt":6484},"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},[6478,6481,6482,6483],{"name":6479,"slug":6480,"type":15},"Engineering","engineering",{"name":9,"slug":8,"type":15},{"name":13,"slug":14,"type":15},{"name":18,"slug":19,"type":15},"2026-04-06T18:28:51.531856",{"slug":6486,"name":6486,"fn":6487,"description":6488,"org":6489,"tags":6490,"stars":20,"repoUrl":21,"updatedAt":6499},"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},[6491,6494,6497,6498],{"name":6492,"slug":6493,"type":15},"Documentation","documentation",{"name":6495,"slug":6496,"type":15},"Local Development","local-development",{"name":9,"slug":8,"type":15},{"name":6469,"slug":6470,"type":15},"2026-04-06T18:28:53.790961",{"slug":6501,"name":6501,"fn":6502,"description":6503,"org":6504,"tags":6505,"stars":20,"repoUrl":21,"updatedAt":6511},"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},[6506,6509,6510],{"name":6507,"slug":6508,"type":15},"Architecture","architecture",{"name":9,"slug":8,"type":15},{"name":6469,"slug":6470,"type":15},"2026-04-06T18:28:55.164842",{"slug":6513,"name":6513,"fn":6514,"description":6515,"org":6516,"tags":6517,"stars":20,"repoUrl":21,"updatedAt":6525},"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},[6518,6521,6522],{"name":6519,"slug":6520,"type":15},"API Development","api-development",{"name":9,"slug":8,"type":15},{"name":6523,"slug":6524,"type":15},"Search","search","2026-04-06T18:28:50.264933"]