Documentation
Components
All available mapcn-vue components.
Components
mapcn-vue provides a comprehensive set of map components organized into categories.
Catalog at a glance
The library currently exports 65 Vue 3 components split across the families below. Counts are derived directly from the public exports in packages/v-maplibre/src/index.ts and packages/v-maplibre/src/layers/deckgl/index.ts, so each row is verifiable from the source.
| Category | Count | Required peer dependencies |
|---|---|---|
| Core (Map, Marker, Popup) | 3 | vue ^3, maplibre-gl ^5.24.0 |
| Map controls | 9 | core peers only |
| MapLibre-native layers | 11 | core peers (+ pmtiles, maplibre-gl-wind, maplibre-gl-lidar for specific layers) |
| deck.gl core layers | 13 | @deck.gl/core, @deck.gl/layers, @deck.gl/mapbox ^9.3.0 |
| deck.gl aggregation | 5 | @deck.gl/aggregation-layers ^9.3.0 |
| deck.gl geo / tile | 12 | @deck.gl/geo-layers ^9.3.0 |
| deck.gl mesh | 2 | @deck.gl/mesh-layers ^9.3.0 |
| deck.gl raster (COG/Zarr) | 4 | @developmentseed/deck.gl-raster, deck.gl-geotiff, deck.gl-zarr ^0.6.0 |
| deck.gl GeoArrow | 6 | apache-arrow ^17.0.0 (+ @deck.gl/geo-layers for trips) |
| deck.gl wind particle | 1 | @luma.gl/core ^9.3.0 |
| deck.gl generic escape | 1 | corresponds to whichever layer class you pass in |
Every component is demonstrated by 91 live, copy-paste example pages under /examples.
Core Components
map
The base map component with theme-aware styling.
npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map.json
Includes:
Map- Main map containerMapMarker- Interactive markersMapPopup- Popups and tooltipsMapControls- Navigation, scale controls
MapLibre Layers
map-layers
Native MapLibre layer components.
npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map-layers.json
Includes:
MapLayerGeojson- GeoJSON dataMapLayerVector- Vector tilesMapLayerRaster- Raster tilesMapLayerCluster- Clustered pointsMapLayerPmtiles- PMTilesMapLayerImage- Static imagesMapLayerVideo- Video overlaysMapLayerCanvas- Canvas rendering
deck.gl Layers
High-performance WebGL visualization layers.
map-deckgl-core
Core visualization layers.
npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map-deckgl-core.json
Includes:
MapLayerScatterplot- Points/circlesMapLayerArc- Origin-destination arcsMapLayerLine- Flat linesMapLayerPath- Polylines/routesMapLayerPolygon- Filled polygonsMapLayerGeojson- GeoJSON featuresMapLayerIcon- Custom iconsMapLayerText- Text labelsMapLayerColumn- 3D columnsMapLayerBitmap- Georeferenced images
map-deckgl-aggregation
Data aggregation layers.
npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map-deckgl-aggregation.json
Includes:
MapLayerHeatmap- Density heatmapMapLayerHexagon- Hexagonal binningMapLayerGrid- Square gridMapLayerContour- Contour linesMapLayerScreenGrid- Screen-space grid
map-deckgl-geo
Geospatial layers.
npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map-deckgl-geo.json
Includes:
MapLayerTrips- Animated pathsMapLayerMVT- Mapbox Vector TilesMapLayerTile- Generic tilesMapLayerTile3D- 3D Tiles (Cesium)MapLayerTerrain- Terrain meshMapLayerH3Hexagon- H3 hexagonsMapLayerGreatCircle- Great circle arcs
map-deckgl-mesh
3D mesh layers.
npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map-deckgl-mesh.json
Includes:
MapLayerSimpleMesh- 3D meshesMapLayerScenegraph- glTF/GLB models
Sources
H3 hierarchical hexagonal index(standard)