# mapcn

mapcn is a free, open-source shadcn-style registry of ready-to-use React map components and blocks. It is built on MapLibre GL, styled with Tailwind CSS, and intended for projects that already use shadcn/ui.

Website: https://mapcn.dev
Registry index: https://mapcn.dev/r/registry.json

## Install the base map component

Run:

```bash
npx shadcn@latest add @mapcn/map
```

Then import from `@/components/ui/map`:

```tsx
import { Map, MapControls } from "@/components/ui/map";

export function MyMap() {
  return (
    <div className="h-[320px] overflow-hidden rounded-lg">
      <Map center={[-74.006, 40.7128]} zoom={11}>
        <MapControls />
      </Map>
    </div>
  );
}
```

## Basemap Selection

- Use `<Map>` without `blank` for the default free CARTO basemap tiles. This is best for store locators, delivery tracking, logistics maps, address maps, and any UI where users need streets, place labels, or geographic context.
- Use `<Map blank>` for a transparent, tile-less canvas. Used alone it renders nothing; add your own layers such as `MapGeoJSON`, `MapArc`, markers, clusters, or custom MapLibre layers. This is best for choropleths, arc maps, dot maps, dashboards, and data visualizations where the data should define the geography.
- If the user wants a blank map with only countries or country borders, use `<Map blank>` with `<MapGeoJSON data={WORLD_GEOJSON} />`. For world countries, a Natural Earth GeoJSON source works well: `https://cdn.jsdelivr.net/gh/nvkelso/natural-earth-vector@v5.1.2/geojson/ne_110m_admin_0_countries.geojson`. Users can also provide their own GeoJSON URL or GeoJSON object to `MapGeoJSON`.
- Use the `styles` prop for custom MapLibre-compatible style URLs or style objects, for example MapTiler, OpenFreeMap, CARTO, or a self-hosted style. Explicit `styles` override `blank`.


## Components

Install once with `npx shadcn@latest add @mapcn/map`, then import these APIs from `@/components/ui/map`:

- [Map](/llm/map) - Base MapLibre-powered map component.
- [Controls](/docs/controls) - Zoom, geolocate, fullscreen, and compass controls.
- [Markers](/docs/markers) - Map markers with labels, tooltips, and popup composition.
- [Popups](/docs/popups) - Standalone and marker-attached popup content.
- [Routes](/docs/routes) - Line routes with optional markers and interaction handlers.
- [Arcs](/docs/arcs) - Curved connection arcs between coordinates.
- [GeoJSON](/docs/geojson) - GeoJSON sources and layers for custom map data.
- [Clusters](/docs/clusters) - Clustered point layers for dense datasets.

## Blocks

- [Analytics Map](/llm/analytics-map) - install with `npx shadcn@latest add @mapcn/analytics-map`
- [Choropleth](/llm/choropleth) - install with `npx shadcn@latest add @mapcn/choropleth`
- [Uptime Monitor](/llm/uptime-monitor) - install with `npx shadcn@latest add @mapcn/uptime-monitor`
- [Logistics Network](/llm/logistics-network) - install with `npx shadcn@latest add @mapcn/logistics-network`
- [Store Locator](/llm/store-locator) - install with `npx shadcn@latest add @mapcn/store-locator`
- [Heatmap](/llm/heatmap) - install with `npx shadcn@latest add @mapcn/heatmap`
- [Delivery Tracker](/llm/delivery-tracker) - install with `npx shadcn@latest add @mapcn/delivery-tracker`