mapcn

<h1 align="center">mapcn</h1>

<p align="center">
  Free & open-source, ready-to-use, customizable map components for React.<br/>
  Zero config. One command setup. Built on <a href="https://maplibre.org/">MapLibre GL</a>, styled with <a href="https://tailwindcss.com/">Tailwind</a>, works seamlessly with <a href="https://ui.shadcn.com/">shadcn/ui</a>.
</p>

<p align="center">
  <a href="https://mapcn.dev/docs">Get Started</a> ·
  <a href="https://mapcn.dev/docs/installation">Installation</a> ·
  <a href="https://mapcn.dev/docs/basic-map">Components</a>
</p>

<br />

<p align="center">
  <a href="https://vercel.com/oss">
    <img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge.svg" />
  </a>
</p>

<p align="center">
  <picture>
    <source media="(prefers-color-scheme: light)" srcset="public/banner-light.png" />
    <img src="public/banner.png" alt="mapcn banner" />
  </picture>
</p>

## Features

- **Theme-aware** — Automatically adapts to light/dark mode
- **Zero config** — Works out of the box with sensible defaults
- **shadcn/ui compatible** — Uses the same patterns and styling conventions
- **MapLibre GL powered** — Full access to MapLibre's powerful mapping capabilities
- **Composable** — Build complex map UIs with simple, declarative components
- **Markers & Popups** — Rich marker system with popups, tooltips, and labels
- **Routes** — Draw routes and paths on your maps
- **Controls** — Zoom, compass, locate, and fullscreen controls

## Agent Skill

Teach your coding agent (Claude Code, Cursor, Codex, …) how to use mapcn:

```bash
npx skills add AnmolSaini16/mapcn
```

Then ask for a map, or ask where one would fit in your app. See [mapcn.dev/docs/skill](https://mapcn.dev/docs/skill).

## Sponsors

mapcn is free and open source, supported by sponsors.
[Become a sponsor](https://mapcn.dev/sponsors).

<table>
<tr>
<td align="center" width="340">
  <a href="https://links.codedthemes.com/Bcozd" rel="sponsored">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="public/sponsors/uiable-dark.svg" />
      <img src="public/sponsors/uiable.svg" alt="UIAble" width="200" />
    </picture>
  </a>
  <br />
  <sub>50% off with code <code>MAP50</code> until December 5, 2026</sub>
</td>
</tr>
</table>

## Basemap Terms of Service

mapcn uses [CARTO Basemaps](https://docs.carto.com/faqs/carto-basemaps) powered by OpenStreetMap data for its default styles and examples.

CARTO offers free tiers for commercial and non-commercial usage, subject to monthly tile request limits and attribution requirements.

- **Commercial use**: Free up to 1 million tile requests per month.
- **Non-commercial use**: Free up to 5 million tile requests per month.
- **Attribution**: CARTO and OpenStreetMap attribution must remain visible.
- **API keys**: CARTO requires API keys for raster basemaps and may extend this requirement to vector basemaps.

For production applications, review [CARTO's terms](https://carto.com/legal/basemap-terms/) and