explaingit

anmolsaini16/mapcn

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

TLDR

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

Things people build with this

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.

Tech stack

TypeScriptReactMapLibre GLTailwind CSSshadcn/ui

Getting 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.

In plain English

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?
Open on GitHub → Explain another repo

← anmolsaini16 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.