[{"data":1,"prerenderedAt":2275},["ShallowReactive",2],{"docs-\u002Fdocs\u002Fcomponents":3,"docs-nav":711},{"id":4,"title":5,"body":6,"description":703,"extension":704,"meta":705,"navigation":706,"path":707,"seo":708,"stem":709,"__hash__":710},"docs\u002Fdocs\u002F3.components.md","Components",{"type":7,"value":8,"toc":685},"minimark",[9,13,17,22,49,247,260,264,268,271,299,304,332,336,339,342,358,362,412,416,419,422,425,441,445,506,509,512,528,532,564,567,570,586,590,634,637,640,656,660,674,678,681],[10,11,5],"h1",{"id":12},"components",[14,15,16],"p",{},"mapcn-vue provides a comprehensive set of map components organized into categories.",[18,19,21],"h2",{"id":20},"catalog-at-a-glance","Catalog at a glance",[14,23,24,25,29,30,40,41,48],{},"The library currently exports ",[26,27,28],"strong",{},"65 Vue 3 components"," split across the families below. Counts are derived directly from the public exports in ",[31,32,36],"a",{"href":33,"rel":34},"https:\u002F\u002Fgithub.com\u002Fgeoql\u002Fv-maplibre\u002Fblob\u002Fmain\u002Fpackages\u002Fv-maplibre\u002Fsrc\u002Findex.ts",[35],"nofollow",[37,38,39],"code",{},"packages\u002Fv-maplibre\u002Fsrc\u002Findex.ts"," and ",[31,42,45],{"href":43,"rel":44},"https:\u002F\u002Fgithub.com\u002Fgeoql\u002Fv-maplibre\u002Fblob\u002Fmain\u002Fpackages\u002Fv-maplibre\u002Fsrc\u002Flayers\u002Fdeckgl\u002Findex.ts",[35],[37,46,47],{},"packages\u002Fv-maplibre\u002Fsrc\u002Flayers\u002Fdeckgl\u002Findex.ts",", so each row is verifiable from the source.",[50,51,52,69],"table",{},[53,54,55],"thead",{},[56,57,58,62,66],"tr",{},[59,60,61],"th",{},"Category",[59,63,65],{"align":64},"right","Count",[59,67,68],{},"Required peer dependencies",[70,71,72,90,101,122,145,158,171,184,206,224,237],"tbody",{},[56,73,74,78,81],{},[75,76,77],"td",{},"Core (Map, Marker, Popup)",[75,79,80],{"align":64},"3",[75,82,83,86,87],{},[37,84,85],{},"vue ^3",", ",[37,88,89],{},"maplibre-gl ^5.24.0",[56,91,92,95,98],{},[75,93,94],{},"Map controls",[75,96,97],{"align":64},"9",[75,99,100],{},"core peers only",[56,102,103,106,109],{},[75,104,105],{},"MapLibre-native layers",[75,107,108],{"align":64},"11",[75,110,111,112,86,115,86,118,121],{},"core peers (+ ",[37,113,114],{},"pmtiles",[37,116,117],{},"maplibre-gl-wind",[37,119,120],{},"maplibre-gl-lidar"," for specific layers)",[56,123,124,127,130],{},[75,125,126],{},"deck.gl core layers",[75,128,129],{"align":64},"13",[75,131,132,86,135,86,138,141,142],{},[37,133,134],{},"@deck.gl\u002Fcore",[37,136,137],{},"@deck.gl\u002Flayers",[37,139,140],{},"@deck.gl\u002Fmapbox"," ",[37,143,144],{},"^9.3.0",[56,146,147,150,153],{},[75,148,149],{},"deck.gl aggregation",[75,151,152],{"align":64},"5",[75,154,155],{},[37,156,157],{},"@deck.gl\u002Faggregation-layers ^9.3.0",[56,159,160,163,166],{},[75,161,162],{},"deck.gl geo \u002F tile",[75,164,165],{"align":64},"12",[75,167,168],{},[37,169,170],{},"@deck.gl\u002Fgeo-layers ^9.3.0",[56,172,173,176,179],{},[75,174,175],{},"deck.gl mesh",[75,177,178],{"align":64},"2",[75,180,181],{},[37,182,183],{},"@deck.gl\u002Fmesh-layers ^9.3.0",[56,185,186,189,192],{},[75,187,188],{},"deck.gl raster (COG\u002FZarr)",[75,190,191],{"align":64},"4",[75,193,194,86,197,86,200,141,203],{},[37,195,196],{},"@developmentseed\u002Fdeck.gl-raster",[37,198,199],{},"deck.gl-geotiff",[37,201,202],{},"deck.gl-zarr",[37,204,205],{},"^0.6.0",[56,207,208,211,214],{},[75,209,210],{},"deck.gl GeoArrow",[75,212,213],{"align":64},"6",[75,215,216,219,220,223],{},[37,217,218],{},"apache-arrow ^17.0.0"," (+ ",[37,221,222],{},"@deck.gl\u002Fgeo-layers"," for trips)",[56,225,226,229,232],{},[75,227,228],{},"deck.gl wind particle",[75,230,231],{"align":64},"1",[75,233,234],{},[37,235,236],{},"@luma.gl\u002Fcore ^9.3.0",[56,238,239,242,244],{},[75,240,241],{},"deck.gl generic escape",[75,243,231],{"align":64},[75,245,246],{},"corresponds to whichever layer class you pass in",[14,248,249,250,253,254,259],{},"Every component is demonstrated by ",[26,251,252],{},"91 live, copy-paste example pages"," under ",[31,255,257],{"href":256},"\u002Fexamples",[37,258,256],{},".",[18,261,263],{"id":262},"core-components","Core Components",[265,266,267],"h3",{"id":267},"map",[14,269,270],{},"The base map component with theme-aware styling.",[272,273,278],"pre",{"className":274,"code":275,"language":276,"meta":277,"style":277},"language-bash shiki shiki-themes github-dark github-dark github-light","npx shadcn-vue@latest add https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap.json\n","bash","",[37,279,280],{"__ignoreMap":277},[281,282,285,289,293,296],"span",{"class":283,"line":284},"line",1,[281,286,288],{"class":287},"s5n6i","npx",[281,290,292],{"class":291},"s4Y1p"," shadcn-vue@latest",[281,294,295],{"class":291}," add",[281,297,298],{"class":291}," https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap.json\n",[14,300,301],{},[26,302,303],{},"Includes:",[305,306,307,314,320,326],"ul",{},[308,309,310,313],"li",{},[37,311,312],{},"Map"," - Main map container",[308,315,316,319],{},[37,317,318],{},"MapMarker"," - Interactive markers",[308,321,322,325],{},[37,323,324],{},"MapPopup"," - Popups and tooltips",[308,327,328,331],{},[37,329,330],{},"MapControls"," - Navigation, scale controls",[18,333,335],{"id":334},"maplibre-layers","MapLibre Layers",[265,337,338],{"id":338},"map-layers",[14,340,341],{},"Native MapLibre layer components.",[272,343,345],{"className":274,"code":344,"language":276,"meta":277,"style":277},"npx shadcn-vue@latest add https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap-layers.json\n",[37,346,347],{"__ignoreMap":277},[281,348,349,351,353,355],{"class":283,"line":284},[281,350,288],{"class":287},[281,352,292],{"class":291},[281,354,295],{"class":291},[281,356,357],{"class":291}," https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap-layers.json\n",[14,359,360],{},[26,361,303],{},[305,363,364,370,376,382,388,394,400,406],{},[308,365,366,369],{},[37,367,368],{},"MapLayerGeojson"," - GeoJSON data",[308,371,372,375],{},[37,373,374],{},"MapLayerVector"," - Vector tiles",[308,377,378,381],{},[37,379,380],{},"MapLayerRaster"," - Raster tiles",[308,383,384,387],{},[37,385,386],{},"MapLayerCluster"," - Clustered points",[308,389,390,393],{},[37,391,392],{},"MapLayerPmtiles"," - PMTiles",[308,395,396,399],{},[37,397,398],{},"MapLayerImage"," - Static images",[308,401,402,405],{},[37,403,404],{},"MapLayerVideo"," - Video overlays",[308,407,408,411],{},[37,409,410],{},"MapLayerCanvas"," - Canvas rendering",[18,413,415],{"id":414},"deckgl-layers","deck.gl Layers",[14,417,418],{},"High-performance WebGL visualization layers.",[265,420,421],{"id":421},"map-deckgl-core",[14,423,424],{},"Core visualization layers.",[272,426,428],{"className":274,"code":427,"language":276,"meta":277,"style":277},"npx shadcn-vue@latest add https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap-deckgl-core.json\n",[37,429,430],{"__ignoreMap":277},[281,431,432,434,436,438],{"class":283,"line":284},[281,433,288],{"class":287},[281,435,292],{"class":291},[281,437,295],{"class":291},[281,439,440],{"class":291}," https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap-deckgl-core.json\n",[14,442,443],{},[26,444,303],{},[305,446,447,453,459,465,471,477,482,488,494,500],{},[308,448,449,452],{},[37,450,451],{},"MapLayerScatterplot"," - Points\u002Fcircles",[308,454,455,458],{},[37,456,457],{},"MapLayerArc"," - Origin-destination arcs",[308,460,461,464],{},[37,462,463],{},"MapLayerLine"," - Flat lines",[308,466,467,470],{},[37,468,469],{},"MapLayerPath"," - Polylines\u002Froutes",[308,472,473,476],{},[37,474,475],{},"MapLayerPolygon"," - Filled polygons",[308,478,479,481],{},[37,480,368],{}," - GeoJSON features",[308,483,484,487],{},[37,485,486],{},"MapLayerIcon"," - Custom icons",[308,489,490,493],{},[37,491,492],{},"MapLayerText"," - Text labels",[308,495,496,499],{},[37,497,498],{},"MapLayerColumn"," - 3D columns",[308,501,502,505],{},[37,503,504],{},"MapLayerBitmap"," - Georeferenced images",[265,507,508],{"id":508},"map-deckgl-aggregation",[14,510,511],{},"Data aggregation layers.",[272,513,515],{"className":274,"code":514,"language":276,"meta":277,"style":277},"npx shadcn-vue@latest add https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap-deckgl-aggregation.json\n",[37,516,517],{"__ignoreMap":277},[281,518,519,521,523,525],{"class":283,"line":284},[281,520,288],{"class":287},[281,522,292],{"class":291},[281,524,295],{"class":291},[281,526,527],{"class":291}," https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap-deckgl-aggregation.json\n",[14,529,530],{},[26,531,303],{},[305,533,534,540,546,552,558],{},[308,535,536,539],{},[37,537,538],{},"MapLayerHeatmap"," - Density heatmap",[308,541,542,545],{},[37,543,544],{},"MapLayerHexagon"," - Hexagonal binning",[308,547,548,551],{},[37,549,550],{},"MapLayerGrid"," - Square grid",[308,553,554,557],{},[37,555,556],{},"MapLayerContour"," - Contour lines",[308,559,560,563],{},[37,561,562],{},"MapLayerScreenGrid"," - Screen-space grid",[265,565,566],{"id":566},"map-deckgl-geo",[14,568,569],{},"Geospatial layers.",[272,571,573],{"className":274,"code":572,"language":276,"meta":277,"style":277},"npx shadcn-vue@latest add https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap-deckgl-geo.json\n",[37,574,575],{"__ignoreMap":277},[281,576,577,579,581,583],{"class":283,"line":284},[281,578,288],{"class":287},[281,580,292],{"class":291},[281,582,295],{"class":291},[281,584,585],{"class":291}," https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap-deckgl-geo.json\n",[14,587,588],{},[26,589,303],{},[305,591,592,598,604,610,616,622,628],{},[308,593,594,597],{},[37,595,596],{},"MapLayerTrips"," - Animated paths",[308,599,600,603],{},[37,601,602],{},"MapLayerMVT"," - Mapbox Vector Tiles",[308,605,606,609],{},[37,607,608],{},"MapLayerTile"," - Generic tiles",[308,611,612,615],{},[37,613,614],{},"MapLayerTile3D"," - 3D Tiles (Cesium)",[308,617,618,621],{},[37,619,620],{},"MapLayerTerrain"," - Terrain mesh",[308,623,624,627],{},[37,625,626],{},"MapLayerH3Hexagon"," - H3 hexagons",[308,629,630,633],{},[37,631,632],{},"MapLayerGreatCircle"," - Great circle arcs",[265,635,636],{"id":636},"map-deckgl-mesh",[14,638,639],{},"3D mesh layers.",[272,641,643],{"className":274,"code":642,"language":276,"meta":277,"style":277},"npx shadcn-vue@latest add https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap-deckgl-mesh.json\n",[37,644,645],{"__ignoreMap":277},[281,646,647,649,651,653],{"class":283,"line":284},[281,648,288],{"class":287},[281,650,292],{"class":291},[281,652,295],{"class":291},[281,654,655],{"class":291}," https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap-deckgl-mesh.json\n",[14,657,658],{},[26,659,303],{},[305,661,662,668],{},[308,663,664,667],{},[37,665,666],{},"MapLayerSimpleMesh"," - 3D meshes",[308,669,670,673],{},[37,671,672],{},"MapLayerScenegraph"," - glTF\u002FGLB models",[18,675,677],{"id":676},"sources","Sources",[676,679],{":sources":680},"[{\"name\":\"deck.gl layer catalog\",\"url\":\"https:\u002F\u002Fdeck.gl\u002Fdocs\u002Fapi-reference\u002Flayers\",\"type\":\"tool\"},{\"name\":\"MapLibre style specification\",\"url\":\"https:\u002F\u002Fmaplibre.org\u002Fmaplibre-style-spec\u002F\",\"type\":\"standard\"},{\"name\":\"@developmentseed\u002Fdeck.gl-raster\",\"url\":\"https:\u002F\u002Fgithub.com\u002Fdevelopmentseed\u002Fdeck.gl-raster\",\"type\":\"tool\"},{\"name\":\"PMTiles specification\",\"url\":\"https:\u002F\u002Fgithub.com\u002Fprotomaps\u002FPMTiles\",\"type\":\"standard\"},{\"name\":\"H3 hierarchical hexagonal index\",\"url\":\"https:\u002F\u002Fh3geo.org\u002F\",\"type\":\"standard\"}]",[682,683,684],"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":277,"searchDepth":686,"depth":686,"links":687},2,[688,689,693,696,702],{"id":20,"depth":686,"text":21},{"id":262,"depth":686,"text":263,"children":690},[691],{"id":267,"depth":692,"text":267},3,{"id":334,"depth":686,"text":335,"children":694},[695],{"id":338,"depth":692,"text":338},{"id":414,"depth":686,"text":415,"children":697},[698,699,700,701],{"id":421,"depth":692,"text":421},{"id":508,"depth":692,"text":508},{"id":566,"depth":692,"text":566},{"id":636,"depth":692,"text":636},{"id":676,"depth":686,"text":677},"All available mapcn-vue components.","md",{},true,"\u002Fdocs\u002Fcomponents",{"title":5,"description":703},"docs\u002F3.components","cpX5H5gPt1BXQ1_7znovlaax9qceA0h5jpj2ETkT5Io",[712,1071,1784],{"id":713,"title":714,"body":715,"description":1065,"extension":704,"meta":1066,"navigation":706,"path":1067,"seo":1068,"stem":1069,"__hash__":1070},"docs\u002Fdocs\u002F1.introduction.md","Introduction",{"type":7,"value":716,"toc":1052},[717,720,734,738,764,820,824,856,860,863,877,889,892,896,898,919,921,935,937,940,966,970,973,1003,1005,1009,1012,1046,1049],[10,718,714],{"id":719},"introduction",[14,721,722,723,728,729,259],{},"mapcn-vue is a collection of beautifully designed map components that you can copy and paste into your apps. Built on top of ",[31,724,727],{"href":725,"rel":726},"https:\u002F\u002Fgithub.com\u002Fgeoql\u002Fv-maplibre",[35],"@geoql\u002Fv-maplibre",", styled with Tailwind CSS, and designed to work seamlessly with ",[31,730,733],{"href":731,"rel":732},"https:\u002F\u002Fshadcn-vue.com",[35],"shadcn-vue",[18,735,737],{"id":736},"by-the-numbers","By the numbers",[14,739,740,741,745,746,749,750,40,754,759,760,763],{},"mapcn-vue surfaces the full ",[31,742,727],{"href":743,"rel":744},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@geoql\u002Fv-maplibre",[35]," component catalog (currently ",[37,747,748],{},"v1.9.0",", published 2026-05-17 on ",[31,751,753],{"href":743,"rel":752},[35],"npm",[31,755,758],{"href":756,"rel":757},"https:\u002F\u002Fjsr.io\u002F@geoql\u002Fv-maplibre",[35],"JSR",") through copy-paste components and a ",[31,761,733],{"href":731,"rel":762},[35]," compatible registry.",[305,765,766,782,788,797,809],{},[308,767,768,771,772,86,775,86,778,781],{},[26,769,770],{},"61 Vue 3 components"," total, split across 4 families: 3 core (",[37,773,774],{},"VMap",[37,776,777],{},"VMarker",[37,779,780],{},"VPopup","), 9 map controls, 11 MapLibre-native layers, and 38 deck.gl layers",[308,783,784,787],{},[26,785,786],{},"91 live examples"," in this showcase site, covering every component plus integrations with Valhalla routing, Cesium 3D Tiles, PMTiles, COG \u002F Zarr, and LiDAR",[308,789,790,40,793,796],{},[26,791,792],{},"~120 kB minified JavaScript",[26,794,795],{},"~12.7 kB of extracted CSS"," for the full library (substantially smaller after gzip and tree-shaking)",[308,798,799,802,803,806,807],{},[26,800,801],{},"100 unit tests passing"," against MapLibre GL JS ",[37,804,805],{},"^5.24.0"," and deck.gl ",[37,808,144],{},[308,810,811,814,815,819],{},[26,812,813],{},"MIT licensed",", sourced on ",[31,816,818],{"href":725,"rel":817},[35],"GitHub"," with TypeScript declarations bundled",[18,821,823],{"id":822},"why-mapcn-vue","Why mapcn-vue?",[305,825,826,832,838,844,850],{},[308,827,828,831],{},[26,829,830],{},"Copy & Paste"," - Add components to your project with a single CLI command",[308,833,834,837],{},[26,835,836],{},"Theme Aware"," - Dark mode support with automatic basemap switching",[308,839,840,843],{},[26,841,842],{},"TypeScript First"," - Full type safety with excellent IDE support",[308,845,846,849],{},[26,847,848],{},"deck.gl Integration"," - High-performance WebGL visualization layers",[308,851,852,855],{},[26,853,854],{},"Composable"," - Mix and match components as needed",[18,857,859],{"id":858},"why-maplibre-deckgl","Why MapLibre + deck.gl",[14,861,862],{},"The library wraps two specifications that complement each other: MapLibre GL JS for the basemap and deck.gl for high-volume data layers.",[864,865,866,869],"blockquote",{},[14,867,868],{},"\"MapLibre GL JS is a TypeScript library that uses WebGL 2 to render interactive maps from vector tiles and the MapLibre Style Specification.\"",[14,870,871,872],{},"— ",[31,873,876],{"href":874,"rel":875},"https:\u002F\u002Fmaplibre.org\u002Fmaplibre-gl-js\u002Fdocs\u002F",[35],"MapLibre GL JS documentation",[864,878,879,882],{},[14,880,881],{},"\"deck.gl is a WebGL2\u002FWebGPU-powered, highly performant large-scale data visualization framework.\"",[14,883,871,884],{},[31,885,888],{"href":886,"rel":887},"https:\u002F\u002Fdeck.gl\u002Fdocs",[35],"deck.gl documentation",[14,890,891],{},"Together they cover ~99% of what an interactive web map needs without leaving the open-source MapLibre \u002F Apache-2.0 deck.gl stack. mapcn-vue closes the last mile: a Vue 3 reactive wrapper, theme-aware CARTO basemaps, and shadcn-vue-style copy-paste delivery so you own the component code outright.",[18,893,895],{"id":894},"features","Features",[265,897,263],{"id":262},[305,899,900,905,910,914],{},[308,901,902,904],{},[26,903,312],{}," - Theme-aware map container with CARTO basemaps",[308,906,907,909],{},[26,908,318],{}," - Interactive markers with custom content",[308,911,912,325],{},[26,913,324],{},[308,915,916,918],{},[26,917,330],{}," - Navigation, scale, and fullscreen controls",[265,920,335],{"id":334},[305,922,923,926,929,932],{},[308,924,925],{},"GeoJSON, Vector, Raster layers",[308,927,928],{},"Cluster layer for large point datasets",[308,930,931],{},"PMTiles support for efficient tile storage",[308,933,934],{},"Image, Video, and Canvas layers",[265,936,415],{"id":414},[14,938,939],{},"High-performance WebGL visualization layers:",[305,941,942,948,954,960],{},[308,943,944,947],{},[26,945,946],{},"Core",": Scatterplot, Arc, Line, Path, Polygon, Icon, Text",[308,949,950,953],{},[26,951,952],{},"Aggregation",": Heatmap, Hexagon, Grid, Contour",[308,955,956,959],{},[26,957,958],{},"Geo",": Trips, MVT, Tile, Terrain, H3",[308,961,962,965],{},[26,963,964],{},"Mesh",": SimpleMesh, Scenegraph (glTF\u002FGLB)",[18,967,969],{"id":968},"credits","Credits",[14,971,972],{},"Built with:",[305,974,975,983,991,997],{},[308,976,977,982],{},[31,978,981],{"href":979,"rel":980},"https:\u002F\u002Fmaplibre.org\u002F",[35],"MapLibre GL JS"," - Open-source map rendering",[308,984,985,990],{},[31,986,989],{"href":987,"rel":988},"https:\u002F\u002Fdeck.gl\u002F",[35],"deck.gl"," - Large-scale data visualization",[308,992,993,996],{},[31,994,727],{"href":725,"rel":995},[35]," - Vue 3 components for MapLibre",[308,998,999,1002],{},[31,1000,733],{"href":731,"rel":1001},[35]," - Component architecture inspiration",[18,1004,677],{"id":676},[18,1006,1008],{"id":1007},"sources-1","::sources",[14,1010,1011],{},"sources:",[305,1013,1014,1021,1027,1033,1040],{},[308,1015,1016,1017,1020],{},"name: MapLibre GL JS docs\nurl: ",[31,1018,874],{"href":874,"rel":1019},[35],"\ntype: tool",[308,1022,1023,1024,1020],{},"name: deck.gl docs\nurl: ",[31,1025,886],{"href":886,"rel":1026},[35],[308,1028,1029,1030,1020],{},"name: shadcn-vue\nurl: ",[31,1031,731],{"href":731,"rel":1032},[35],[308,1034,1035,1036,1020],{},"name: Vue 3 docs\nurl: ",[31,1037,1038],{"href":1038,"rel":1039},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fintroduction.html",[35],[308,1041,1042,1043,1020],{},"name: '@geoql\u002Fv-maplibre on npm'\nurl: ",[31,1044,743],{"href":743,"rel":1045},[35],[1047,1048],"hr",{},[14,1050,1051],{},"::",{"title":277,"searchDepth":686,"depth":686,"links":1053},[1054,1055,1056,1057,1062,1063,1064],{"id":736,"depth":686,"text":737},{"id":822,"depth":686,"text":823},{"id":858,"depth":686,"text":859},{"id":894,"depth":686,"text":895,"children":1058},[1059,1060,1061],{"id":262,"depth":692,"text":263},{"id":334,"depth":692,"text":335},{"id":414,"depth":692,"text":415},{"id":968,"depth":686,"text":969},{"id":676,"depth":686,"text":677},{"id":1007,"depth":686,"text":1008},"Beautiful map components for Vue. Built on @geoql\u002Fv-maplibre, styled with Tailwind CSS, works with shadcn-vue.",{},"\u002Fdocs\u002Fintroduction",{"title":714,"description":1065},"docs\u002F1.introduction","mNtLcVbb9GekcHGUrsZ06WEpF4Xfvu8nIBZr0wbMyVM",{"id":1072,"title":1073,"body":1074,"description":1778,"extension":704,"meta":1779,"navigation":706,"path":1780,"seo":1781,"stem":1782,"__hash__":1783},"docs\u002Fdocs\u002F2.installation.md","Installation",{"type":7,"value":1075,"toc":1765},[1076,1079,1083,1158,1162,1165,1176,1180,1183,1248,1252,1255,1259,1357,1361,1364,1408,1412,1421,1425,1428,1634,1638,1645,1757,1759,1762],[10,1077,1073],{"id":1078},"installation",[18,1080,1082],{"id":1081},"what-youre-adding","What you're adding",[305,1084,1085,1102,1111,1152],{},[308,1086,1087,1090,1091,1093,1094,1097,1098,1101],{},[26,1088,1089],{},"2 packages minimum"," in your dependency graph (",[37,1092,727],{}," + ",[37,1095,1096],{},"maplibre-gl","), or up to ",[26,1099,1100],{},"12 packages"," if you opt into the full deck.gl + GeoTIFF\u002FZarr\u002Fraster\u002FGeoArrow stack",[308,1103,1104,1093,1107,1110],{},[26,1105,1106],{},"~120 kB minified JS",[26,1108,1109],{},"~12.7 kB CSS"," for the full library, tree-shakeable down to only the components you import",[308,1112,1113,1116,1117,1119,1120,86,1122,86,1124,141,1126,1128,1129,86,1132,86,1134,1137,1138,86,1140,86,1143,141,1146,1148,1149,1151],{},[26,1114,1115],{},"5 peer-dependency tiers"," — Required (Vue 3 + MapLibre GL JS ",[37,1118,805],{},") → +deck.gl base (",[37,1121,134],{},[37,1123,137],{},[37,1125,140],{},[37,1127,144],{},") → +aggregation\u002Fgeo\u002Fmesh (",[37,1130,1131],{},"@deck.gl\u002Faggregation-layers",[37,1133,222],{},[37,1135,1136],{},"@deck.gl\u002Fmesh-layers",") → +raster\u002FZarr (",[37,1139,196],{},[37,1141,1142],{},"@developmentseed\u002Fdeck.gl-zarr",[37,1144,1145],{},"@developmentseed\u002Fdeck.gl-geotiff",[37,1147,205],{},") → +GeoArrow (",[37,1150,218],{},")",[308,1153,1154,1157],{},[26,1155,1156],{},"Node.js 20+"," and any modern package manager (pnpm 11+ is what we use in CI)",[18,1159,1161],{"id":1160},"prerequisites","Prerequisites",[14,1163,1164],{},"Before you begin, make sure you have:",[305,1166,1167,1170,1173],{},[308,1168,1169],{},"A Vue 3 or Nuxt 3+ project",[308,1171,1172],{},"Tailwind CSS v4 configured",[308,1174,1175],{},"shadcn-vue initialized (optional, but recommended)",[18,1177,1179],{"id":1178},"quick-start","Quick Start",[14,1181,1182],{},"The easiest way to add mapcn-vue components is using the shadcn-vue CLI:",[272,1184,1186],{"className":274,"code":1185,"language":276,"meta":277,"style":277},"# Add the base map component\nnpx shadcn-vue@latest add https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap.json\n\n# Add MapLibre layers\nnpx shadcn-vue@latest add https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap-layers.json\n\n# Add deck.gl core layers\nnpx shadcn-vue@latest add https:\u002F\u002Fmapcn-vue.geoql.in\u002Fr\u002Fmap-deckgl-core.json\n",[37,1187,1188,1194,1204,1209,1215,1226,1231,1237],{"__ignoreMap":277},[281,1189,1190],{"class":283,"line":284},[281,1191,1193],{"class":1192},"sxXm1","# Add the base map component\n",[281,1195,1196,1198,1200,1202],{"class":283,"line":686},[281,1197,288],{"class":287},[281,1199,292],{"class":291},[281,1201,295],{"class":291},[281,1203,298],{"class":291},[281,1205,1206],{"class":283,"line":692},[281,1207,1208],{"emptyLinePlaceholder":706},"\n",[281,1210,1212],{"class":283,"line":1211},4,[281,1213,1214],{"class":1192},"# Add MapLibre layers\n",[281,1216,1218,1220,1222,1224],{"class":283,"line":1217},5,[281,1219,288],{"class":287},[281,1221,292],{"class":291},[281,1223,295],{"class":291},[281,1225,357],{"class":291},[281,1227,1229],{"class":283,"line":1228},6,[281,1230,1208],{"emptyLinePlaceholder":706},[281,1232,1234],{"class":283,"line":1233},7,[281,1235,1236],{"class":1192},"# Add deck.gl core layers\n",[281,1238,1240,1242,1244,1246],{"class":283,"line":1239},8,[281,1241,288],{"class":287},[281,1243,292],{"class":291},[281,1245,295],{"class":291},[281,1247,440],{"class":291},[18,1249,1251],{"id":1250},"manual-installation","Manual Installation",[14,1253,1254],{},"If you prefer to install manually:",[265,1256,1258],{"id":1257},"_1-install-dependencies","1. Install dependencies",[272,1260,1262],{"className":274,"code":1261,"language":276,"meta":277,"style":277},"# Core dependencies (use your preferred package manager)\npnpm add @geoql\u002Fv-maplibre maplibre-gl @vueuse\u002Fcore\n# or: npm install @geoql\u002Fv-maplibre maplibre-gl @vueuse\u002Fcore\n# or: yarn add @geoql\u002Fv-maplibre maplibre-gl @vueuse\u002Fcore\n\n# For deck.gl layers (optional)\npnpm add @deck.gl\u002Fcore @deck.gl\u002Flayers @deck.gl\u002Fmapbox\npnpm add @deck.gl\u002Faggregation-layers  # Heatmap, Hexagon, Grid\npnpm add @deck.gl\u002Fgeo-layers          # Trips, MVT, Tile\npnpm add @deck.gl\u002Fmesh-layers         # SimpleMesh, Scenegraph\n",[37,1263,1264,1269,1285,1290,1295,1299,1304,1319,1331,1344],{"__ignoreMap":277},[281,1265,1266],{"class":283,"line":284},[281,1267,1268],{"class":1192},"# Core dependencies (use your preferred package manager)\n",[281,1270,1271,1274,1276,1279,1282],{"class":283,"line":686},[281,1272,1273],{"class":287},"pnpm",[281,1275,295],{"class":291},[281,1277,1278],{"class":291}," @geoql\u002Fv-maplibre",[281,1280,1281],{"class":291}," maplibre-gl",[281,1283,1284],{"class":291}," @vueuse\u002Fcore\n",[281,1286,1287],{"class":283,"line":692},[281,1288,1289],{"class":1192},"# or: npm install @geoql\u002Fv-maplibre maplibre-gl @vueuse\u002Fcore\n",[281,1291,1292],{"class":283,"line":1211},[281,1293,1294],{"class":1192},"# or: yarn add @geoql\u002Fv-maplibre maplibre-gl @vueuse\u002Fcore\n",[281,1296,1297],{"class":283,"line":1217},[281,1298,1208],{"emptyLinePlaceholder":706},[281,1300,1301],{"class":283,"line":1228},[281,1302,1303],{"class":1192},"# For deck.gl layers (optional)\n",[281,1305,1306,1308,1310,1313,1316],{"class":283,"line":1233},[281,1307,1273],{"class":287},[281,1309,295],{"class":291},[281,1311,1312],{"class":291}," @deck.gl\u002Fcore",[281,1314,1315],{"class":291}," @deck.gl\u002Flayers",[281,1317,1318],{"class":291}," @deck.gl\u002Fmapbox\n",[281,1320,1321,1323,1325,1328],{"class":283,"line":1239},[281,1322,1273],{"class":287},[281,1324,295],{"class":291},[281,1326,1327],{"class":291}," @deck.gl\u002Faggregation-layers",[281,1329,1330],{"class":1192},"  # Heatmap, Hexagon, Grid\n",[281,1332,1334,1336,1338,1341],{"class":283,"line":1333},9,[281,1335,1273],{"class":287},[281,1337,295],{"class":291},[281,1339,1340],{"class":291}," @deck.gl\u002Fgeo-layers",[281,1342,1343],{"class":1192},"          # Trips, MVT, Tile\n",[281,1345,1347,1349,1351,1354],{"class":283,"line":1346},10,[281,1348,1273],{"class":287},[281,1350,295],{"class":291},[281,1352,1353],{"class":291}," @deck.gl\u002Fmesh-layers",[281,1355,1356],{"class":1192},"         # SimpleMesh, Scenegraph\n",[265,1358,1360],{"id":1359},"_2-add-css","2. Add CSS",[14,1362,1363],{},"Import the MapLibre CSS in your main entry file or Nuxt config:",[272,1365,1369],{"className":1366,"code":1367,"language":1368,"meta":277,"style":277},"language-typescript shiki shiki-themes github-dark github-dark github-light","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  css: ['maplibre-gl\u002Fdist\u002Fmaplibre-gl.css'],\n});\n","typescript",[37,1370,1371,1376,1392,1403],{"__ignoreMap":277},[281,1372,1373],{"class":283,"line":284},[281,1374,1375],{"class":1192},"\u002F\u002F nuxt.config.ts\n",[281,1377,1378,1382,1385,1388],{"class":283,"line":686},[281,1379,1381],{"class":1380},"s6ubI","export",[281,1383,1384],{"class":1380}," default",[281,1386,1387],{"class":287}," defineNuxtConfig",[281,1389,1391],{"class":1390},"sAvwS","({\n",[281,1393,1394,1397,1400],{"class":283,"line":692},[281,1395,1396],{"class":1390},"  css: [",[281,1398,1399],{"class":291},"'maplibre-gl\u002Fdist\u002Fmaplibre-gl.css'",[281,1401,1402],{"class":1390},"],\n",[281,1404,1405],{"class":283,"line":1211},[281,1406,1407],{"class":1390},"});\n",[265,1409,1411],{"id":1410},"_3-copy-components","3. Copy components",[14,1413,1414,1415,1420],{},"Copy the components you need from the ",[31,1416,1419],{"href":1417,"rel":1418},"https:\u002F\u002Fgithub.com\u002Fgeoql\u002Fv-maplibre\u002Ftree\u002Fmain\u002Fpackages\u002Fmapcn-vue\u002Fsrc\u002Fregistry\u002Fui",[35],"GitHub repository"," into your project.",[18,1422,1424],{"id":1423},"usage","Usage",[14,1426,1427],{},"Once installed, you can use the components in your Vue templates:",[272,1429,1433],{"className":1430,"code":1431,"language":1432,"meta":277,"style":277},"language-vue shiki shiki-themes github-dark github-dark github-light","\u003Cscript setup lang=\"ts\">\n  import { Map, MapMarker, MapControls } from '@\u002Fcomponents\u002Fui\u002Fmap';\n\n  const mapOptions = {\n    style: 'https:\u002F\u002Fbasemaps.cartocdn.com\u002Fgl\u002Fdark-matter-gl-style\u002Fstyle.json',\n    center: [-74.006, 40.7128],\n    zoom: 11,\n  };\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMap :options=\"mapOptions\" class=\"h-125\">\n    \u003CMapControls \u002F>\n    \u003CMapMarker :coordinates=\"[-74.006, 40.7128]\" \u002F>\n  \u003C\u002FMap>\n\u003C\u002Ftemplate>\n","vue",[37,1434,1435,1459,1476,1480,1495,1506,1524,1533,1538,1547,1551,1561,1587,1598,1615,1625],{"__ignoreMap":277},[281,1436,1437,1440,1444,1447,1450,1453,1456],{"class":283,"line":284},[281,1438,1439],{"class":1390},"\u003C",[281,1441,1443],{"class":1442},"sxkHK","script",[281,1445,1446],{"class":287}," setup",[281,1448,1449],{"class":287}," lang",[281,1451,1452],{"class":1390},"=",[281,1454,1455],{"class":291},"\"ts\"",[281,1457,1458],{"class":1390},">\n",[281,1460,1461,1464,1467,1470,1473],{"class":283,"line":686},[281,1462,1463],{"class":1380},"  import",[281,1465,1466],{"class":1390}," { Map, MapMarker, MapControls } ",[281,1468,1469],{"class":1380},"from",[281,1471,1472],{"class":291}," '@\u002Fcomponents\u002Fui\u002Fmap'",[281,1474,1475],{"class":1390},";\n",[281,1477,1478],{"class":283,"line":692},[281,1479,1208],{"emptyLinePlaceholder":706},[281,1481,1482,1485,1489,1492],{"class":283,"line":1211},[281,1483,1484],{"class":1380},"  const",[281,1486,1488],{"class":1487},"sXWYR"," mapOptions",[281,1490,1491],{"class":1380}," =",[281,1493,1494],{"class":1390}," {\n",[281,1496,1497,1500,1503],{"class":283,"line":1217},[281,1498,1499],{"class":1390},"    style: ",[281,1501,1502],{"class":291},"'https:\u002F\u002Fbasemaps.cartocdn.com\u002Fgl\u002Fdark-matter-gl-style\u002Fstyle.json'",[281,1504,1505],{"class":1390},",\n",[281,1507,1508,1511,1514,1517,1519,1522],{"class":283,"line":1228},[281,1509,1510],{"class":1390},"    center: [",[281,1512,1513],{"class":1380},"-",[281,1515,1516],{"class":1487},"74.006",[281,1518,86],{"class":1390},[281,1520,1521],{"class":1487},"40.7128",[281,1523,1402],{"class":1390},[281,1525,1526,1529,1531],{"class":283,"line":1233},[281,1527,1528],{"class":1390},"    zoom: ",[281,1530,108],{"class":1487},[281,1532,1505],{"class":1390},[281,1534,1535],{"class":283,"line":1239},[281,1536,1537],{"class":1390},"  };\n",[281,1539,1540,1543,1545],{"class":283,"line":1333},[281,1541,1542],{"class":1390},"\u003C\u002F",[281,1544,1443],{"class":1442},[281,1546,1458],{"class":1390},[281,1548,1549],{"class":283,"line":1346},[281,1550,1208],{"emptyLinePlaceholder":706},[281,1552,1554,1556,1559],{"class":283,"line":1553},11,[281,1555,1439],{"class":1390},[281,1557,1558],{"class":1442},"template",[281,1560,1458],{"class":1390},[281,1562,1564,1567,1569,1572,1574,1577,1580,1582,1585],{"class":283,"line":1563},12,[281,1565,1566],{"class":1390},"  \u003C",[281,1568,312],{"class":1442},[281,1570,1571],{"class":287}," :options",[281,1573,1452],{"class":1390},[281,1575,1576],{"class":291},"\"mapOptions\"",[281,1578,1579],{"class":287}," class",[281,1581,1452],{"class":1390},[281,1583,1584],{"class":291},"\"h-125\"",[281,1586,1458],{"class":1390},[281,1588,1590,1593,1595],{"class":283,"line":1589},13,[281,1591,1592],{"class":1390},"    \u003C",[281,1594,330],{"class":1442},[281,1596,1597],{"class":1390}," \u002F>\n",[281,1599,1601,1603,1605,1608,1610,1613],{"class":283,"line":1600},14,[281,1602,1592],{"class":1390},[281,1604,318],{"class":1442},[281,1606,1607],{"class":287}," :coordinates",[281,1609,1452],{"class":1390},[281,1611,1612],{"class":291},"\"[-74.006, 40.7128]\"",[281,1614,1597],{"class":1390},[281,1616,1618,1621,1623],{"class":283,"line":1617},15,[281,1619,1620],{"class":1390},"  \u003C\u002F",[281,1622,312],{"class":1442},[281,1624,1458],{"class":1390},[281,1626,1628,1630,1632],{"class":283,"line":1627},16,[281,1629,1542],{"class":1390},[281,1631,1558],{"class":1442},[281,1633,1458],{"class":1390},[18,1635,1637],{"id":1636},"nuxt-usage","Nuxt Usage",[14,1639,1640,1641,1644],{},"For Nuxt applications, wrap map components with ",[37,1642,1643],{},"ClientOnly",":",[272,1646,1648],{"className":1430,"code":1647,"language":1432,"meta":277,"style":277},"\u003Ctemplate>\n  \u003CClientOnly>\n    \u003CMap :options=\"mapOptions\">\n      \u003CMapControls \u002F>\n    \u003C\u002FMap>\n    \u003Ctemplate #fallback>\n      \u003Cdiv class=\"h-125 flex items-center justify-center\">Loading map...\u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FClientOnly>\n\u003C\u002Ftemplate>\n",[37,1649,1650,1658,1666,1680,1689,1698,1712,1733,1741,1749],{"__ignoreMap":277},[281,1651,1652,1654,1656],{"class":283,"line":284},[281,1653,1439],{"class":1390},[281,1655,1558],{"class":1442},[281,1657,1458],{"class":1390},[281,1659,1660,1662,1664],{"class":283,"line":686},[281,1661,1566],{"class":1390},[281,1663,1643],{"class":1442},[281,1665,1458],{"class":1390},[281,1667,1668,1670,1672,1674,1676,1678],{"class":283,"line":692},[281,1669,1592],{"class":1390},[281,1671,312],{"class":1442},[281,1673,1571],{"class":287},[281,1675,1452],{"class":1390},[281,1677,1576],{"class":291},[281,1679,1458],{"class":1390},[281,1681,1682,1685,1687],{"class":283,"line":1211},[281,1683,1684],{"class":1390},"      \u003C",[281,1686,330],{"class":1442},[281,1688,1597],{"class":1390},[281,1690,1691,1694,1696],{"class":283,"line":1217},[281,1692,1693],{"class":1390},"    \u003C\u002F",[281,1695,312],{"class":1442},[281,1697,1458],{"class":1390},[281,1699,1700,1702,1704,1707,1710],{"class":283,"line":1228},[281,1701,1592],{"class":1390},[281,1703,1558],{"class":1442},[281,1705,1706],{"class":1390}," #",[281,1708,1709],{"class":287},"fallback",[281,1711,1458],{"class":1390},[281,1713,1714,1716,1719,1721,1723,1726,1729,1731],{"class":283,"line":1233},[281,1715,1684],{"class":1390},[281,1717,1718],{"class":1442},"div",[281,1720,1579],{"class":287},[281,1722,1452],{"class":1390},[281,1724,1725],{"class":291},"\"h-125 flex items-center justify-center\"",[281,1727,1728],{"class":1390},">Loading map...\u003C\u002F",[281,1730,1718],{"class":1442},[281,1732,1458],{"class":1390},[281,1734,1735,1737,1739],{"class":283,"line":1239},[281,1736,1693],{"class":1390},[281,1738,1558],{"class":1442},[281,1740,1458],{"class":1390},[281,1742,1743,1745,1747],{"class":283,"line":1333},[281,1744,1620],{"class":1390},[281,1746,1643],{"class":1442},[281,1748,1458],{"class":1390},[281,1750,1751,1753,1755],{"class":283,"line":1346},[281,1752,1542],{"class":1390},[281,1754,1558],{"class":1442},[281,1756,1458],{"class":1390},[18,1758,677],{"id":676},[676,1760],{":sources":1761},"[{\"name\":\"shadcn-vue CLI\",\"url\":\"https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fcli.html\",\"type\":\"tool\"},{\"name\":\"MapLibre GL JS install guide\",\"url\":\"https:\u002F\u002Fmaplibre.org\u002Fmaplibre-gl-js\u002Fdocs\u002F\",\"type\":\"tool\"},{\"name\":\"deck.gl getting started\",\"url\":\"https:\u002F\u002Fdeck.gl\u002Fdocs\u002Fget-started\u002Fgetting-started\",\"type\":\"tool\"},{\"name\":\"pnpm install docs\",\"url\":\"https:\u002F\u002Fpnpm.io\u002Fcli\u002Finstall\",\"type\":\"tool\"},{\"name\":\"Nuxt 4 installation\",\"url\":\"https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fgetting-started\u002Finstallation\",\"type\":\"tool\"}]",[682,1763,1764],{},"html pre.shiki code .sxXm1, html code.shiki .sxXm1{--shiki-default:#6A737D;--shiki-dark:#6A737D;--shiki-light:#6A737D}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);}html pre.shiki code .s6ubI, html code.shiki .s6ubI{--shiki-default:#F97583;--shiki-dark:#F97583;--shiki-light:#D73A49}html pre.shiki code .sAvwS, html code.shiki .sAvwS{--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8;--shiki-light:#24292E}html pre.shiki code .sxkHK, html code.shiki .sxkHK{--shiki-default:#85E89D;--shiki-dark:#85E89D;--shiki-light:#22863A}html pre.shiki code .sXWYR, html code.shiki .sXWYR{--shiki-default:#79B8FF;--shiki-dark:#79B8FF;--shiki-light:#005CC5}",{"title":277,"searchDepth":686,"depth":686,"links":1766},[1767,1768,1769,1770,1775,1776,1777],{"id":1081,"depth":686,"text":1082},{"id":1160,"depth":686,"text":1161},{"id":1178,"depth":686,"text":1179},{"id":1250,"depth":686,"text":1251,"children":1771},[1772,1773,1774],{"id":1257,"depth":692,"text":1258},{"id":1359,"depth":692,"text":1360},{"id":1410,"depth":692,"text":1411},{"id":1423,"depth":686,"text":1424},{"id":1636,"depth":686,"text":1637},{"id":676,"depth":686,"text":677},"How to install and configure mapcn-vue components in your project.",{},"\u002Fdocs\u002Finstallation",{"title":1073,"description":1778},"docs\u002F2.installation","jmOP4VP2FA2DUcPBIRAIG5a6wvfdwH3WCDpR46uuDIM",{"id":4,"title":5,"body":1785,"description":703,"extension":704,"meta":2273,"navigation":706,"path":707,"seo":2274,"stem":709,"__hash__":710},{"type":7,"value":1786,"toc":2257},[1787,1789,1791,1793,1807,1947,1955,1957,1959,1961,1975,1979,1997,1999,2001,2003,2017,2021,2055,2057,2059,2061,2063,2077,2081,2123,2125,2127,2141,2145,2167,2169,2171,2185,2189,2219,2221,2223,2237,2241,2251,2253,2255],[10,1788,5],{"id":12},[14,1790,16],{},[18,1792,21],{"id":20},[14,1794,24,1795,29,1797,40,1802,48],{},[26,1796,28],{},[31,1798,1800],{"href":33,"rel":1799},[35],[37,1801,39],{},[31,1803,1805],{"href":43,"rel":1804},[35],[37,1806,47],{},[50,1808,1809,1819],{},[53,1810,1811],{},[56,1812,1813,1815,1817],{},[59,1814,61],{},[59,1816,65],{"align":64},[59,1818,68],{},[70,1820,1821,1833,1841,1855,1871,1881,1891,1901,1917,1929,1939],{},[56,1822,1823,1825,1827],{},[75,1824,77],{},[75,1826,80],{"align":64},[75,1828,1829,86,1831],{},[37,1830,85],{},[37,1832,89],{},[56,1834,1835,1837,1839],{},[75,1836,94],{},[75,1838,97],{"align":64},[75,1840,100],{},[56,1842,1843,1845,1847],{},[75,1844,105],{},[75,1846,108],{"align":64},[75,1848,111,1849,86,1851,86,1853,121],{},[37,1850,114],{},[37,1852,117],{},[37,1854,120],{},[56,1856,1857,1859,1861],{},[75,1858,126],{},[75,1860,129],{"align":64},[75,1862,1863,86,1865,86,1867,141,1869],{},[37,1864,134],{},[37,1866,137],{},[37,1868,140],{},[37,1870,144],{},[56,1872,1873,1875,1877],{},[75,1874,149],{},[75,1876,152],{"align":64},[75,1878,1879],{},[37,1880,157],{},[56,1882,1883,1885,1887],{},[75,1884,162],{},[75,1886,165],{"align":64},[75,1888,1889],{},[37,1890,170],{},[56,1892,1893,1895,1897],{},[75,1894,175],{},[75,1896,178],{"align":64},[75,1898,1899],{},[37,1900,183],{},[56,1902,1903,1905,1907],{},[75,1904,188],{},[75,1906,191],{"align":64},[75,1908,1909,86,1911,86,1913,141,1915],{},[37,1910,196],{},[37,1912,199],{},[37,1914,202],{},[37,1916,205],{},[56,1918,1919,1921,1923],{},[75,1920,210],{},[75,1922,213],{"align":64},[75,1924,1925,219,1927,223],{},[37,1926,218],{},[37,1928,222],{},[56,1930,1931,1933,1935],{},[75,1932,228],{},[75,1934,231],{"align":64},[75,1936,1937],{},[37,1938,236],{},[56,1940,1941,1943,1945],{},[75,1942,241],{},[75,1944,231],{"align":64},[75,1946,246],{},[14,1948,249,1949,253,1951,259],{},[26,1950,252],{},[31,1952,1953],{"href":256},[37,1954,256],{},[18,1956,263],{"id":262},[265,1958,267],{"id":267},[14,1960,270],{},[272,1962,1963],{"className":274,"code":275,"language":276,"meta":277,"style":277},[37,1964,1965],{"__ignoreMap":277},[281,1966,1967,1969,1971,1973],{"class":283,"line":284},[281,1968,288],{"class":287},[281,1970,292],{"class":291},[281,1972,295],{"class":291},[281,1974,298],{"class":291},[14,1976,1977],{},[26,1978,303],{},[305,1980,1981,1985,1989,1993],{},[308,1982,1983,313],{},[37,1984,312],{},[308,1986,1987,319],{},[37,1988,318],{},[308,1990,1991,325],{},[37,1992,324],{},[308,1994,1995,331],{},[37,1996,330],{},[18,1998,335],{"id":334},[265,2000,338],{"id":338},[14,2002,341],{},[272,2004,2005],{"className":274,"code":344,"language":276,"meta":277,"style":277},[37,2006,2007],{"__ignoreMap":277},[281,2008,2009,2011,2013,2015],{"class":283,"line":284},[281,2010,288],{"class":287},[281,2012,292],{"class":291},[281,2014,295],{"class":291},[281,2016,357],{"class":291},[14,2018,2019],{},[26,2020,303],{},[305,2022,2023,2027,2031,2035,2039,2043,2047,2051],{},[308,2024,2025,369],{},[37,2026,368],{},[308,2028,2029,375],{},[37,2030,374],{},[308,2032,2033,381],{},[37,2034,380],{},[308,2036,2037,387],{},[37,2038,386],{},[308,2040,2041,393],{},[37,2042,392],{},[308,2044,2045,399],{},[37,2046,398],{},[308,2048,2049,405],{},[37,2050,404],{},[308,2052,2053,411],{},[37,2054,410],{},[18,2056,415],{"id":414},[14,2058,418],{},[265,2060,421],{"id":421},[14,2062,424],{},[272,2064,2065],{"className":274,"code":427,"language":276,"meta":277,"style":277},[37,2066,2067],{"__ignoreMap":277},[281,2068,2069,2071,2073,2075],{"class":283,"line":284},[281,2070,288],{"class":287},[281,2072,292],{"class":291},[281,2074,295],{"class":291},[281,2076,440],{"class":291},[14,2078,2079],{},[26,2080,303],{},[305,2082,2083,2087,2091,2095,2099,2103,2107,2111,2115,2119],{},[308,2084,2085,452],{},[37,2086,451],{},[308,2088,2089,458],{},[37,2090,457],{},[308,2092,2093,464],{},[37,2094,463],{},[308,2096,2097,470],{},[37,2098,469],{},[308,2100,2101,476],{},[37,2102,475],{},[308,2104,2105,481],{},[37,2106,368],{},[308,2108,2109,487],{},[37,2110,486],{},[308,2112,2113,493],{},[37,2114,492],{},[308,2116,2117,499],{},[37,2118,498],{},[308,2120,2121,505],{},[37,2122,504],{},[265,2124,508],{"id":508},[14,2126,511],{},[272,2128,2129],{"className":274,"code":514,"language":276,"meta":277,"style":277},[37,2130,2131],{"__ignoreMap":277},[281,2132,2133,2135,2137,2139],{"class":283,"line":284},[281,2134,288],{"class":287},[281,2136,292],{"class":291},[281,2138,295],{"class":291},[281,2140,527],{"class":291},[14,2142,2143],{},[26,2144,303],{},[305,2146,2147,2151,2155,2159,2163],{},[308,2148,2149,539],{},[37,2150,538],{},[308,2152,2153,545],{},[37,2154,544],{},[308,2156,2157,551],{},[37,2158,550],{},[308,2160,2161,557],{},[37,2162,556],{},[308,2164,2165,563],{},[37,2166,562],{},[265,2168,566],{"id":566},[14,2170,569],{},[272,2172,2173],{"className":274,"code":572,"language":276,"meta":277,"style":277},[37,2174,2175],{"__ignoreMap":277},[281,2176,2177,2179,2181,2183],{"class":283,"line":284},[281,2178,288],{"class":287},[281,2180,292],{"class":291},[281,2182,295],{"class":291},[281,2184,585],{"class":291},[14,2186,2187],{},[26,2188,303],{},[305,2190,2191,2195,2199,2203,2207,2211,2215],{},[308,2192,2193,597],{},[37,2194,596],{},[308,2196,2197,603],{},[37,2198,602],{},[308,2200,2201,609],{},[37,2202,608],{},[308,2204,2205,615],{},[37,2206,614],{},[308,2208,2209,621],{},[37,2210,620],{},[308,2212,2213,627],{},[37,2214,626],{},[308,2216,2217,633],{},[37,2218,632],{},[265,2220,636],{"id":636},[14,2222,639],{},[272,2224,2225],{"className":274,"code":642,"language":276,"meta":277,"style":277},[37,2226,2227],{"__ignoreMap":277},[281,2228,2229,2231,2233,2235],{"class":283,"line":284},[281,2230,288],{"class":287},[281,2232,292],{"class":291},[281,2234,295],{"class":291},[281,2236,655],{"class":291},[14,2238,2239],{},[26,2240,303],{},[305,2242,2243,2247],{},[308,2244,2245,667],{},[37,2246,666],{},[308,2248,2249,673],{},[37,2250,672],{},[18,2252,677],{"id":676},[676,2254],{":sources":680},[682,2256,684],{},{"title":277,"searchDepth":686,"depth":686,"links":2258},[2259,2260,2263,2266,2272],{"id":20,"depth":686,"text":21},{"id":262,"depth":686,"text":263,"children":2261},[2262],{"id":267,"depth":692,"text":267},{"id":334,"depth":686,"text":335,"children":2264},[2265],{"id":338,"depth":692,"text":338},{"id":414,"depth":686,"text":415,"children":2267},[2268,2269,2270,2271],{"id":421,"depth":692,"text":421},{"id":508,"depth":692,"text":508},{"id":566,"depth":692,"text":566},{"id":636,"depth":692,"text":636},{"id":676,"depth":686,"text":677},{},{"title":5,"description":703},1781120196702]