Easily receive support and donations from your audience for your creative work.
Buy Me a Coffee logo
mapcn Logo EDITORS' CHOICE

mapcn

EDITORS' CHOICE

Add customizable, interactive maps to React applications with ready-to-use components.

Try mapcn
mapcn Website Screenshot

What is mapcn?

Try mapcn

mapcn is a free, open-source collection of customizable map components for React developers. Built on MapLibre GL, styled with Tailwind CSS, and designed to integrate with shadcn/ui, it makes adding interactive maps to web applications easier without building everything from scratch.

Following the shadcn approach, mapcn provides copy-and-paste components that developers can install directly into their projects and fully customize. Unlike traditional hosted map services, the components become part of your own codebase, giving you control over their appearance and behavior without vendor lock-in.

Features:

  1. Interactive Map Components: Add customizable maps with zooming, panning, viewport control, and different map styles.
  2. Markers & Popups: Place interactive markers on maps with custom labels, tooltips, popups, and draggable positioning.
  3. Map Controls: Add zoom buttons, compass, location detection, and fullscreen controls.
  4. GeoJSON & Data Visualization: Display geographic boundaries, custom map layers, choropleth maps, and data-driven visualizations.
  5. Routes & Clustering: Visualize routes, connecting arcs, and grouped location markers for maps containing many points.
  6. Ready-to-Use Map Blocks: Copy complete map layouts for analytics dashboards, delivery tracking, uptime monitoring, logistics networks, choropleth maps, and store locators.
Published on Nov. 8, 2026