Introduction

mapcn-vue is a collection of beautifully designed map components that you can copy and paste into your apps. Built on top of @geoql/v-maplibre, styled with Tailwind CSS, and designed to work seamlessly with shadcn-vue.

By the numbers

mapcn-vue surfaces the full @geoql/v-maplibre component catalog (currently v1.9.0, published 2026-05-17 on npm and JSR) through copy-paste components and a shadcn-vue compatible registry.

61 Vue 3 components total, split across 4 families: 3 core (VMap, VMarker, VPopup), 9 map controls, 11 MapLibre-native layers, and 38 deck.gl layers
91 live examples in this showcase site, covering every component plus integrations with Valhalla routing, Cesium 3D Tiles, PMTiles, COG / Zarr, and LiDAR
~120 kB minified JavaScript and ~12.7 kB of extracted CSS for the full library (substantially smaller after gzip and tree-shaking)
100 unit tests passing against MapLibre GL JS ^5.24.0 and deck.gl ^9.3.0
MIT licensed, sourced on GitHub with TypeScript declarations bundled

Why mapcn-vue?

Copy & Paste - Add components to your project with a single CLI command
Theme Aware - Dark mode support with automatic basemap switching
TypeScript First - Full type safety with excellent IDE support
deck.gl Integration - High-performance WebGL visualization layers
Composable - Mix and match components as needed

Why MapLibre + deck.gl

The library wraps two specifications that complement each other: MapLibre GL JS for the basemap and deck.gl for high-volume data layers.

"MapLibre GL JS is a TypeScript library that uses WebGL 2 to render interactive maps from vector tiles and the MapLibre Style Specification."
— MapLibre GL JS documentation

"deck.gl is a WebGL2/WebGPU-powered, highly performant large-scale data visualization framework."
— deck.gl documentation

Together they cover ~99% of what an interactive web map needs without leaving the open-source MapLibre / 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.

Features

Core Components

Map - Theme-aware map container with CARTO basemaps
MapMarker - Interactive markers with custom content
MapPopup - Popups and tooltips
MapControls - Navigation, scale, and fullscreen controls

MapLibre Layers

GeoJSON, Vector, Raster layers
Cluster layer for large point datasets
PMTiles support for efficient tile storage
Image, Video, and Canvas layers

deck.gl Layers

High-performance WebGL visualization layers:

Core: Scatterplot, Arc, Line, Path, Polygon, Icon, Text
Aggregation: Heatmap, Hexagon, Grid, Contour
Geo: Trips, MVT, Tile, Terrain, H3
Mesh: SimpleMesh, Scenegraph (glTF/GLB)

Credits

Built with:

MapLibre GL JS - Open-source map rendering
deck.gl - Large-scale data visualization
@geoql/v-maplibre - Vue 3 components for MapLibre
shadcn-vue - Component architecture inspiration

Sources

::sources

sources:

name: MapLibre GL JS docs url: https://maplibre.org/maplibre-gl-js/docs/ type: tool
name: deck.gl docs url: https://deck.gl/docs type: tool
name: shadcn-vue url: https://shadcn-vue.com type: tool
name: Vue 3 docs url: https://vuejs.org/guide/introduction.html type: tool
name: '@geoql/v-maplibre on npm' url: https://www.npmjs.com/package/@geoql/v-maplibre type: tool