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