mapcn
EDITORS' CHOICEAdd customizable, interactive maps to React applications with ready-to-use components.
Try mapcn
What is mapcn?
Try mapcnmapcn 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:
- Interactive Map Components: Add customizable maps with zooming, panning, viewport control, and different map styles.
- Markers & Popups: Place interactive markers on maps with custom labels, tooltips, popups, and draggable positioning.
- Map Controls: Add zoom buttons, compass, location detection, and fullscreen controls.
- GeoJSON & Data Visualization: Display geographic boundaries, custom map layers, choropleth maps, and data-driven visualizations.
- Routes & Clustering: Visualize routes, connecting arcs, and grouped location markers for maps containing many points.
- 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

