This Tool Lets You Add Themeable Production-Ready Maps Into Your React App 🔥

Mapcn is a new set of React map components that make it easy to add production-ready, themeable maps to your React applications. Unlike other map libraries that are either too opinionated or too low-level, mapcn provides customizable components built on top of MapLibre GL and styled with Tailwind CSS.

One of the standout features of mapcn is that it doesn't require an API key to get started. It ships with free CARTO basemap tiles, allowing you to have a working map immediately with no signup process. The components are designed to be theme-aware out of the box, automatically switching between light and dark styles based on your app's theme.

Another advantage of mapcn is that you own the code since the components are copied into your project rather than being pulled in as an opaque dependency. This means you can edit anything and there's no version lock-in or fighting an abstraction layer to override styles. The library also supports not just MapLibre, but any MapLibre-compatible tile provider, so you can switch providers when needed.

TypeScript users will be pleased to know that mapcn comes with full TypeScript support. If you need more control than the provided components offer, you can always drop down to the raw MapLibre instance.

To get started with mapcn, you just need Tailwind CSS and shadcn/ui set up in your project. Adding the map component is as simple as running the command: pnpm dlx shadcn@latest add @mapcn/map. This installs maplibre-gl and adds the map component into your project, all without any additional configuration.

Using mapcn is as straightforward as using any other shadcn component. Here's an example of how to render a basic map with zoom controls:

```jsx

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

import { Card } from "@/components/ui/card";

export function MyMap() {

return (

<Card className="h-[320px] p-0 overflow-hidden">

<Map

center={[-74.006, 40.7128]}

zoom={11}

/>

<MapControls />

</Card>

);

}

```

This code creates a rendered, interactive, theme-aware map with zoom controls, all without the need for an API key or configuration file.

Under the hood, MapLibre parses map tiles in a Web Worker, which ships as a separate file. mapcn loads this worker from unpkg by default, but you can self-host the worker files in your public/ folder and point MapLibreGL.setWorkerUrl() at them if you're running under a strict Content Security Policy.

The mapcn library also supports markers, popups, and tooltips, allowing you to compose small pieces to create interactive maps. You can use the MapMarker, MarkerContent, MarkerPopup, and MarkerTooltip components to add markers to your map, each with its own styling and functionality.