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