whatisgithub

What is mapcn?

anmolsaini16/mapcn — explained in plain English

Analysis updated 2026-06-24

★ 9,177TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

In one sentence

Ready-to-use React map components built on MapLibre GL that drop into any project with a single command, adding interactive maps with markers, routes, location controls, and light/dark mode support.

Mindmap

mindmap
  root((mapcn))
    What it does
      React map components
      Single command install
    Features
      Markers and popups
      Routes and paths
      Location controls
    Tech Stack
      MapLibre GL
      Tailwind CSS
      shadcn/ui
    Use Cases
      Web apps with maps
      Location features
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add an interactive map with zoom, compass, and full-screen controls to a React app by installing a single package.

USE CASE 2

Place markers with popups and tooltips on a map to show points of interest in a location-based web app.

USE CASE 3

Draw routes or paths on a map to visualize directions or GPS tracking data in a React project.

USE CASE 4

Swap the default CARTO tile source for MapTiler or Stadia Maps tiles to match your project's licensing needs.

What is it built with?

TypeScriptReactMapLibre GLTailwind CSSshadcn/ui

How does it compare?

anmolsaini16/mapcnberty/bertysirmalloc/ccstatusline
Stars9,1779,1809,180
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderateeasy
Complexity2/54/52/5
Audiencedevelopergeneraldeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

mapcn is a collection of pre-built map components for React applications. The goal is to make adding interactive maps to a web project as simple as running a single command, without any extra configuration steps. The components are free to use and open-source. The library is built on top of MapLibre GL, a tool for rendering interactive, tile-based maps in the browser. Styling comes from Tailwind CSS, and the components follow the same conventions as shadcn/ui, a popular set of copy-paste React components. If your project already uses shadcn/ui, these map components drop in using the same patterns. Feature-wise, the library covers what most apps need from a map. You can render a base map with standard controls for zooming, compass orientation, finding your current location, and going full-screen. The library also supports placing markers on the map with popups, tooltips, and labels, and you can draw routes or paths. Everything adapts automatically to light and dark color modes. For map tile data, the project defaults to CARTO Basemaps, which are built on OpenStreetMap data. Non-commercial use is free under CARTO's terms. Commercial use requires a paid CARTO Enterprise license. Developers who need a different tile source can swap in any provider compatible with MapLibre, such as MapTiler, Stadia Maps, or raw OpenStreetMap tiles. The project is MIT-licensed and accepts contributions via pull requests on GitHub.

Copy-paste prompts

Prompt 1
Using mapcn, show me how to add an interactive map with zoom and current-location controls to my React app.
Prompt 2
How do I place a marker with a popup on a mapcn map? Show me the component code and required props.
Prompt 3
I want to draw a route between two coordinates on a mapcn map. What component and props do I use?
Prompt 4
How do I swap mapcn's default CARTO tiles for MapTiler tiles in my React project?

Frequently asked questions

What is mapcn?

Ready-to-use React map components built on MapLibre GL that drop into any project with a single command, adding interactive maps with markers, routes, location controls, and light/dark mode support.

What language is mapcn written in?

Mainly TypeScript. The stack also includes TypeScript, React, MapLibre GL.

What license does mapcn use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is mapcn to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is mapcn for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

What are similar repos?