Installation

How to install and set up pantee-cn in your project.

Prerequisites

A project with Tailwind CSS and shadcn-svelte set up.

Installation

Run the following command to add the map component:

npx shadcn-svelte@latest add https://ninyawee.github.io/pantee-cn/r/map.json

This will install maplibre-gl and add the map component to your project.

Usage

Import and use the map component:

<script lang="ts">
  import { Map, MapControls } from "$lib/components/ui/map";
  import { Card } from "$lib/components/ui/card";
</script>

<Card class="h-[320px] overflow-hidden p-0">
  <Map center={[-74.006, 40.7128]} zoom={11}>
    <MapControls />
  </Map>
</Card>

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

Getting Started API Reference