Installation

How to install and set up mapcn-vue in your project.

Prerequisites

A Vue 3 project with Tailwind CSS and shadcn-vue set up.

Installation

Run the following command to add the map component:

npx shadcn-vue@latest add https://mapcn-vue.com/r/map.json

This will install maplibre-gl and copy the map components into components/ui/map/.

Usage

Import and use the map component:

<script setup lang="ts">
import { Map, MapControls } from "@/components/ui/map";
</script>

<template>
  <div class="h-[320px] overflow-hidden rounded-lg border">
    <Map :center="[-74.006, 40.7128]" :zoom="11">
      <MapControls />
    </Map>
  </div>
</template>

Note: The map uses free CARTO basemap tiles by default. Tiles automatically switch between light and dark themes.

Introduction API Reference