[{"data":1,"prerenderedAt":476},["ShallowReactive",2],{"faq-page":3},{"id":4,"title":5,"body":6,"description":468,"extension":469,"meta":470,"navigation":471,"path":472,"seo":473,"stem":474,"__hash__":475},"faq\u002Ffaq.md","Frequently Asked Questions",{"type":7,"value":8,"toc":455},"minimark",[9,13,25,30,57,61,64,102,121,125,135,139,142,159,162,166,169,197,226,230,241,245,269,273,276,284,302,306,315,378,391,395,398,441,451],[10,11,5],"h1",{"id":12},"frequently-asked-questions",[14,15,16,17,24],"p",{},"Answers to the questions developers ask most often about mapcn-vue, installation, peer dependencies, the shadcn-vue registry, and how it relates to the underlying ",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@geoql\u002Fv-maplibre",[22],"nofollow","@geoql\u002Fv-maplibre"," library.",[26,27,29],"h2",{"id":28},"what-is-mapcn-vue","What is mapcn-vue?",[14,31,32,33,36,37,42,43,50,51,56],{},"mapcn-vue is a copy-and-paste component registry for Vue 3 map UI, built on top of ",[18,34,23],{"href":20,"rel":35},[22]," and styled with Tailwind CSS. Instead of installing a single black-box package, you use the ",[18,38,41],{"href":39,"rel":40},"https:\u002F\u002Fshadcn-vue.com",[22],"shadcn-vue"," CLI to copy individual components (Map, Markers, Popups, Controls, deck.gl layers) directly into your project, where you can edit them like any other source file. mapcn-vue is published as a registry at ",[18,44,47],{"href":45,"rel":46},"https:\u002F\u002Fmapcn-vue.geoql.in",[22],[48,49,45],"code",{}," and the core library is on npm as ",[18,52,54],{"href":20,"rel":53},[22],[48,55,23],{},".",[26,58,60],{"id":59},"what-are-the-peer-dependencies","What are the peer dependencies?",[14,62,63],{},"mapcn-vue components require four peers in your host project:",[65,66,67,79,85,96],"ul",{},[68,69,70,74,75,78],"li",{},[71,72,73],"strong",{},"Vue 3.4+"," (Composition API, ",[48,76,77],{},"\u003Cscript setup>"," syntax)",[68,80,81,84],{},[71,82,83],{},"MapLibre GL JS 5.x"," (the rendering engine)",[68,86,87,90,91,95],{},[71,88,89],{},"@geoql\u002Fv-maplibre 1.x"," (the Vue wrappers consumed by every component — install the latest release from ",[18,92,94],{"href":20,"rel":93},[22],"npm",")",[68,97,98,101],{},[71,99,100],{},"Tailwind CSS v4"," (for styling, with the shadcn-vue token system)",[14,103,104,105,108,109,112,113,116,117,120],{},"deck.gl-based components additionally depend on ",[48,106,107],{},"@deck.gl\u002Fcore",", ",[48,110,111],{},"@deck.gl\u002Flayers",", and ",[48,114,115],{},"@deck.gl\u002Fmapbox",". The shadcn-vue CLI prints the exact ",[48,118,119],{},"pnpm add"," command for each component you copy.",[26,122,124],{"id":123},"does-mapcn-vue-support-vue-2","Does mapcn-vue support Vue 2?",[14,126,127,128,130,131,134],{},"No. mapcn-vue requires Vue 3.4 or newer and uses the Composition API exclusively. Vue 2 is past end-of-life and several APIs the components rely on (",[48,129,77],{},", generic components, ",[48,132,133],{},"defineModel",", the reactivity transform-free ref system) do not exist in Vue 2. There are no plans to backport.",[26,136,138],{"id":137},"what-is-the-difference-between-maplibre-layers-and-deckgl-layers","What is the difference between MapLibre layers and deck.gl layers?",[14,140,141],{},"mapcn-vue ships two layer families, and the right choice depends on data volume and visual fidelity:",[65,143,144,150],{},[68,145,146,149],{},[71,147,148],{},"MapLibre layers"," render through the native WebGL pipeline of MapLibre GL itself. They share the same z-order as basemap features, support every MapLibre paint and layout property, and are the right choice for vector tiles, choropleths, and styled feature layers that need to interleave with the basemap.",[68,151,152,155,156,158],{},[71,153,154],{},"deck.gl layers"," render as a WebGL2 overlay on top of the map via the ",[48,157,115],{}," interleaving API. They are dramatically faster for large point clouds (hundreds of thousands of features), heatmaps, hexbins, arcs, and 3D geometry, and they expose richer GPU-accelerated visual encodings (extrusions, GPU aggregation, picking). The tradeoff is that deck.gl layers always render above MapLibre layers in the same group and require slightly more memory.",[14,160,161],{},"Use MapLibre layers when you need basemap interleaving or fewer than ~10K features. Use deck.gl layers for heavy point\u002Fheatmap\u002F3D workloads.",[26,163,165],{"id":164},"how-do-i-install-a-single-component","How do I install a single component?",[14,167,168],{},"Use the shadcn-vue CLI and point it at the mapcn-vue registry URL:",[170,171,176],"pre",{"className":172,"code":173,"language":174,"meta":175,"style":175},"language-bash shiki shiki-themes github-dark github-dark github-light","npx shadcn-vue@latest add https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap\n","bash","",[48,177,178],{"__ignoreMap":175},[179,180,183,187,191,194],"span",{"class":181,"line":182},"line",1,[179,184,186],{"class":185},"s5n6i","npx",[179,188,190],{"class":189},"s4Y1p"," shadcn-vue@latest",[179,192,193],{"class":189}," add",[179,195,196],{"class":189}," https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap\n",[14,198,199,200,203,204,108,207,108,210,108,213,216,217,220,221,56],{},"Replace ",[48,201,202],{},"map"," with any component name (",[48,205,206],{},"marker",[48,208,209],{},"popup",[48,211,212],{},"control-navigation",[48,214,215],{},"layer-heatmap",", etc.). The CLI copies the component source into your ",[48,218,219],{},"components\u002Fui\u002F"," directory, installs missing peer dependencies, and merges any required Tailwind config. You can browse the full component catalog on the ",[18,222,225],{"href":223,"rel":224},"https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr",[22],"registry index",[26,227,229],{"id":228},"is-mapcn-vue-free-to-use","Is mapcn-vue free to use?",[14,231,232,233,236,237,240],{},"Yes. mapcn-vue and the underlying ",[18,234,23],{"href":20,"rel":235},[22]," library are released under the ",[71,238,239],{},"MIT license",". You may use, modify, and redistribute them in commercial and non-commercial projects without attribution beyond preserving the MIT license header. The MapLibre GL and deck.gl peers are independently MIT-licensed and BSD-3-Clause-licensed respectively.",[26,242,244],{"id":243},"does-it-work-on-cloudflare-pages-edge","Does it work on Cloudflare Pages \u002F Edge?",[14,246,247,248,252,253,256,257,260,261,264,265,268],{},"Yes. The showcase site at ",[18,249,251],{"href":45,"rel":250},[22],"mapcn-vue.geoql.in"," is itself a Nuxt 4 application deployed to Cloudflare Pages using the ",[48,254,255],{},"cloudflare-pages"," Nitro preset, with every example route prerendered to static HTML. Component code is SSR-safe: MapLibre and deck.gl initialization is gated to the client via ",[48,258,259],{},"onMounted",", so no ",[48,262,263],{},"window"," or ",[48,266,267],{},"document"," access leaks into the server bundle. mapcn-vue runs identically on Vercel, Netlify, Cloudflare Workers, and any Node.js host.",[26,270,272],{"id":271},"what-is-the-registry-url-for-shadcn-vue-cli","What is the registry URL for shadcn-vue CLI?",[14,274,275],{},"Every mapcn-vue component is exposed as a JSON manifest at:",[170,277,282],{"className":278,"code":280,"language":281},[279],"language-text","https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002F[name].json\n","text",[48,283,280],{"__ignoreMap":175},[14,285,286,287,293,294,297,298,301],{},"For example, the map component manifest lives at ",[18,288,291],{"href":289,"rel":290},"https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap.json",[22],[48,292,289],{},". The shadcn-vue CLI fetches this URL, resolves dependencies, and copies the listed files into your project. You can also configure the registry once in your ",[48,295,296],{},"components.json"," so that ",[48,299,300],{},"npx shadcn-vue@latest add map"," resolves against mapcn-vue by default.",[26,303,305],{"id":304},"how-do-i-contribute","How do I contribute?",[14,307,308,309,314],{},"mapcn-vue is developed in the open at ",[18,310,313],{"href":311,"rel":312},"https:\u002F\u002Fgithub.com\u002Fgeoql\u002Fv-maplibre",[22],"github.com\u002Fgeoql\u002Fv-maplibre",". To contribute:",[316,317,318,324,334,343,352,368],"ol",{},[68,319,320,323],{},[71,321,322],{},"Fork"," the repository",[68,325,326,329,330,333],{},[71,327,328],{},"Clone"," your fork and run ",[48,331,332],{},"pnpm install"," at the monorepo root",[68,335,336,339,340,95],{},[71,337,338],{},"Create a feature branch"," (",[48,341,342],{},"git checkout -b feat\u002Fmy-component",[68,344,345,348,349],{},[71,346,347],{},"Add or modify"," components under ",[48,350,351],{},"packages\u002Fmapcn-vue\u002Fsrc\u002Fregistry\u002Fui\u002F",[68,353,354,357,358,108,361,112,364,367],{},[71,355,356],{},"Run"," ",[48,359,360],{},"pnpm run lint",[48,362,363],{},"pnpm run test",[48,365,366],{},"pnpm run build"," to verify your changes",[68,369,370,373,374,377],{},[71,371,372],{},"Open a pull request"," against ",[48,375,376],{},"main"," with a clear description and screenshots for visual changes",[14,379,380,381,386,387,390],{},"Bug reports and feature requests are welcome via ",[18,382,385],{"href":383,"rel":384},"https:\u002F\u002Fgithub.com\u002Fgeoql\u002Fv-maplibre\u002Fissues",[22],"GitHub Issues",". The full contributor guide lives in ",[48,388,389],{},"AGENTS.md"," at the repo root.",[26,392,394],{"id":393},"how-does-mapcn-vue-relate-to-geoqlv-maplibre","How does mapcn-vue relate to @geoql\u002Fv-maplibre?",[14,396,397],{},"The two packages are complementary layers in the same stack:",[65,399,400,426],{},[68,401,402,407,408,411,412,108,415,108,418,421,422,425],{},[71,403,404],{},[18,405,23],{"href":20,"rel":406},[22]," is the ",[71,409,410],{},"core library"," published to npm. It provides the low-level Vue 3 wrappers around MapLibre GL JS (",[48,413,414],{},"VMap",[48,416,417],{},"VMarker",[48,419,420],{},"VPopup",", controls, layer primitives) and the deck.gl integration. You install it with ",[48,423,424],{},"pnpm add @geoql\u002Fv-maplibre"," and import components directly.",[68,427,428,407,431,434,435,437,438,440],{},[71,429,430],{},"mapcn-vue",[71,432,433],{},"shadcn-compatible registry layer"," built on top of ",[48,436,23],{},". Instead of importing components from an npm package, you copy pre-styled, pre-themed component source files into your own project via the shadcn-vue CLI. Every mapcn-vue component is a thin, Tailwind-styled, token-aware wrapper around the equivalent ",[48,439,23],{}," primitive.",[14,442,443,444,446,447,450],{},"Choose ",[48,445,23],{}," when you want a versioned dependency you can upgrade with ",[48,448,449],{},"pnpm update",". Choose mapcn-vue when you want to own and customize the component source code in your repo.",[452,453,454],"style",{},"html pre.shiki code .s5n6i, html code.shiki .s5n6i{--shiki-default:#B392F0;--shiki-dark:#B392F0;--shiki-light:#6F42C1}html pre.shiki code .s4Y1p, html code.shiki .s4Y1p{--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF;--shiki-light:#032F62}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);}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);}",{"title":175,"searchDepth":456,"depth":456,"links":457},2,[458,459,460,461,462,463,464,465,466,467],{"id":28,"depth":456,"text":29},{"id":59,"depth":456,"text":60},{"id":123,"depth":456,"text":124},{"id":137,"depth":456,"text":138},{"id":164,"depth":456,"text":165},{"id":228,"depth":456,"text":229},{"id":243,"depth":456,"text":244},{"id":271,"depth":456,"text":272},{"id":304,"depth":456,"text":305},{"id":393,"depth":456,"text":394},"Common questions about mapcn-vue, the shadcn-compatible map component registry for Vue 3 powered by MapLibre GL and deck.gl.","md",{},true,"\u002Ffaq",{"title":5,"description":468},"faq","0Buajpl9bnoiXfTbg0y-cWdFu1ob5DDaR1hP4HcxAeM",1781120197820]