mapcn: componentes de mapa listos para usar para React
AnmolSaini16/mapcn · 12.116★ · 705 forks
Todo lo que hay que saber sobre AnmolSaini16/mapcn: un registro de estilo shadcn con componentes y bloques de mapa para React, construido sobre MapLibre GL, con Tailwind y pensado para proyectos que ya usan shadcn/ui. A 1 de septiembre de 2026 lleva 11.964 estrellas.
Qué es mapcn
mapcn es un registro de estilo shadcn con componentes y bloques de mapa reutilizables para React. Su descripción oficial es «Beautiful map components. 100% Free, Zero config, one command setup». No es un modelo ni un servicio: son componentes de interfaz que se copian en el proyecto del usuario con un solo comando, siguiendo el mismo modelo de distribución de código por copia de shadcn/ui.
Está construido sobre MapLibre GL, estilizado con Tailwind CSS y pensado para integrarse con shadcn/ui. El README y el llms.txt oficial lo definen como «un registro de estilo shadcn, libre y de código abierto, de componentes y bloques de mapa listos para usar para React». El punto de entrada del registro es el índice https://mapcn.dev/r/registry.json.
En el momento de esta investigación el registro expone 9 elementos: uno de tipo registry:ui (el componente base map) y ocho de tipo registry:block (analytics-map, choropleth, analytics-card, delivery-tracker, uptime-monitor, heatmap, logistics-network y store-locator). El componente base, una vez instalado, expone una API con Map, Controls, Markers, Popups, Routes, Arcs, GeoJSON y Clusters.
El origen: de next-maps al patrón shadcn
El repositorio fue creado el 28 de diciembre de 2025 por Anmoldeep Singh (cuenta AnmolSaini16), cuyo perfil de GitHub y su blog personal anmoldeep.dev lo identifican como ingeniero de software orientado al diseño, empleado de Cloudflare en el equipo de «Design Engineering» (cuenta creada el 30 de septiembre de 2020, 334 seguidores, 36 repositorios públicos, X: @anmold_s).
Su sitio personal lista a mapcn como proyecto principal bajo el lema «Ready to use map components for React. Built on MapLibre. Styled with Tailwind.», junto a otros dos proyectos propios del mismo autor: TableForge (componentes de tabla, 28 estrellas) y Next Maps (452 estrellas). Este último es relevante para la historia: es un componente de mapa «ligero, limpio y bellamente diseñado» construido con Next.js y Mapbox, y su autor publicó un artículo precursor, «Building Modern Maps in Next.js with Mapbox» (abril de 2025). mapcn puede leerse como la evolución de ese proyecto: pasa de Mapbox a MapLibre GL y del componente único al patrón de registro de shadcn.
El lanzamiento público verificable es el envío en Hacker News 46459832 («Mapcn: Beautiful Maps, Made Simple», enviado por handfuloflight el 2 de enero de 2026), cuyo enlace apuntaba entonces a https://mapcn.vercel.app (ahora mapcn.dev). El envío sumó 4 puntos y 0 comentarios.
Filosofía y principios
El README y la documentación expresan un conjunto de decisiones verificables:
- Cero configuración y un solo comando: el componente funciona «out of the box» con valores por defecto sensatos; todo se instala con
npx shadcn@latest add @mapcn/map. - Modelo de copia de shadcn: los componentes se copian en el proyecto (
@/components/ui/map), no se consumen como dependencia cerrada; el usuario posee el código y puede modificarlo. - Sensible al tema: adapta automáticamente el estilo a modo claro/oscuro y los mosaicos de fondo conmutan entre temas sin configuración.
- Composable: se construyen interfaces de mapa complejas con componentes declarativos simples (
Map,MapControls, marcadores, rutas, etc.). - MapLibre como motor: da acceso a las capacidades completas de MapLibre GL; el componente es una capa de abstracción, no un motor propio.
- Honestidad sobre los términos de los mosaicos: el README dedica una sección a los «Basemap Terms of Service», advirtiendo que los mosaicos de fondo por defecto son CARTO Basemaps (basados en datos de OpenStreetMap) y que el uso comercial exige una licencia de CARTO Enterprise.
Cómo funciona
El flujo de uso documentado es directo:
- Instalar el componente base:
npx shadcn@latest add @mapcn/map. El comando instala la pieza y añade el componente al proyecto.

- Importar y usar: desde
@/components/ui/mapse importanMap,MapControlsy el resto de la API. - Añadir bloques (opcional): cada bloque se instala con su propio comando, por ejemplo
npx shadcn@latest add @mapcn/choropleth.
El llms.txt documenta cuatro decisiones de selección de fondo (basemap) que definen el comportamiento:
<Map>sinblank→ mosaicos CARTO gratuitos por defecto (ideal para localizadores, seguimiento de entregas, mapas de direcciones).<Map blank>→ lienzo transparente sin mosaicos; se añaden capas propias (GeoJSON, arcos, marcadores, clusters); ideal para mapas coropléticos, de arcos, de puntos y paneles de datos.<Map blank>+<MapGeoJSON data={WORLD_GEOJSON} />→ solo países o fronteras (se sugiere una fuente Natural Earth comohttps://cdn.jsdelivr.net/gh/nvkelso/natural-earth-vector@v5.1.2/geojson/ne_110m_admin_0_countries.geojson).- Propiedad
styles→ URL u objeto de estilo propio compatible con MapLibre (MapTiler, OpenFreeMap, CARTO o autoalojado); unstylesexplícito anulablank.

Detalles técnicos documentados en la guía de instalación: MapLibre parsea los mosaicos en un Web Worker que se distribuye como archivo separado, y mapcn lo carga desde unpkg fijado a la versión instalada. Bajo un CSP estricto el worker necesita script-src 'self' https://unpkg.com; y worker-src 'self' blob:; para autoalojarlo se copian maplibre-gl-worker.mjs y maplibre-gl-shared.mjs en public/ y se reemplaza la URL de unpkg en el componente con MapLibreGL.setWorkerUrl("/maplibre-gl-worker.mjs").
Estado oficial y semioficial
- Programa OSS de Vercel: el README lleva la insignia «Vercel OSS Program» y el sitio de lanzamiento del proyecto estaba servido desde
mapcn.vercel.app. Esto lo sitúa dentro del programa de soporte para proyectos con código abierto de Vercel. - Ecosistema shadcn: mapcn no es un paquete cerrado, sino un registro que se consume con el CLI de shadcn (
npx shadcn@latest add …). En la práctica funciona como una extensión del catálogo de componentes de shadcn/ui, aunque no hay constancia de que figure en el registro central de shadcn ni de que un proveedor lo «certifique». - Sin designación formal: en las fuentes consultadas no existe un aval de un proveedor ni un estatus de estándar de facto; es un proyecto de una persona, con tracción comunitaria (puertos, videos, adopción en proyectos ajenos) y la adhesión al programa OSS de Vercel.
El ecosistema
Puertos a otros frameworks (independientes)
| Repositorio | Estrellas | Framework | Relación documentada |
|---|---|---|---|
MariusLang/mapcn-svelte | 203 | Svelte | «Based on mapcn by Anmol Saini»; mismo lema y patrón, con shadcn-svelte; sitio mapcn-svelte.dev. Creado el 1 de enero de 2026. |
ridemountainpig/flightcn | 135 | TypeScript | Conjunto de visualización «built for the mapcn ecosystem»: aeródromos, rutas de gran círculo, seguimiento en vivo, redes ponderadas, órbitas satelitales. Creado el 1 de abril de 2026. |
aikenahac/mapcn-react-native | 60 | TypeScript | Puerto a React Native («Beautiful maps, made simple»). Creado el 6 de enero de 2026. |
craigderington/netops | 56 | TypeScript | «A network topology visualizer powered by mapcn and react». Creado el 12 de enero de 2026. |
kwasii1/livewire-mapcn | 24 | JavaScript | Paquete de Laravel inspirado en mapcn para proyectos con Livewire. Creado el 24 de febrero de 2026. |

Puertos y forks menores (búsqueda de repositorios de GitHub)
Además de los anteriores, la búsqueda por el nombre mapcn devolvió varios puertos de bajo alcance: mapcn-vue (versión de Vue, con forks de AdeoluAdeyemi 8 estrellas, bogdan-mihalcea 1, y repos de AnoRebel y SoftCodefr), ng-mapcn (juanvieiraprado99, 4 estrellas, Angular), mapcn_flutter (zietahmed19, 3 estrellas), Beautiful-Places-Mapcn (AndreaEmmi, 5 estrellas) y SaluSL/vue-mapcn (0 estrellas). Estos son puertos no oficiales; no representan una afiliación ni un soporte del autor.
Herramientas vecinas del autor
AnmolSaini16/next-maps(452 estrellas): el precursor Mapbox del mismo autor, del que mapcn se desliga al migrar a MapLibre y al patrón shadcn.AnmolSaini16/table-forge(28 estrellas): componentes de tabla del mismo autor con el mismo estilo de distribución por copia.
Estas cifras provienen de la API de GitHub y de la búsqueda de repositorios durante esta investigación; no son una auditoría de calidad, soporte ni compatibilidad de cada derivado.
Números del repo
Medición: 1 de septiembre de 2026, API de GitHub.
| Métrica | Valor |
|---|---|
| Estrellas | 11.964 |
| Bifurcaciones | 701 |
| Suscriptores | 44 |
| Commits | 110 |
| Incidencias abiertas indicadas por la API | 23 |
| Lenguaje principal | TypeScript |
| Licencia | MIT |
| Creación | 28 de diciembre de 2025 |
| Último push | 16 de agosto de 2026 |
| Última actualización de metadatos | 1 de septiembre de 2026 |
| Releases | Sin releases publicados (endpoint vacío) |
Los principales contribuidores devueltos por la API, por número de contribuciones: AnmolSaini16 (108), jabahm (1) y jamnxdev (1); la actividad está muy concentrada en el autor.
Caveats de la API: open_issues_count (23) puede incluir solicitudes de cambios abiertas; en la consulta directa hay 23 elementos abiertos, de los cuales 8 son PR y 15 incidencias. watchers_count de la respuesta general réplica las estrellas (11.964), por eso se informa por separado subscribers_count (44) como suscriptores reales. El conteo de 110 commits se obtuvo de la página final del enlace de paginación de la API de commits. No hay releases en el endpoint releases, por lo que la versión se gestiona a través del registro de shadcn y del paquete, no por tags de release.
Cómo contribuir
El README documenta un flujo estándar:
- Hacer una bifurcación (fork) del repositorio.
- Crear una rama para la funcionalidad:
git checkout -b feature/amazing-feature. - Commitear los cambios:
git commit -m 'Add some amazing feature'. - Hacer push:
git push origin feature/amazing-feature. - Abrir una solicitud de cambios (Pull Request).
No se recuperó un CONTRIBUTING.md con un proceso más detallado ni un arnés de pruebas/evaluación; la guía de contribución es la anterior. El historial de incidencias muestra PRs y sugerencias de la comunidad que siguen este flujo, por ejemplo la adición de un modo de gran círculo para arcos (PR #73), la corrección de pantalla completa en iOS Safari (PR #70) y la mejora del estilo de styleEpoch (PR #69).
Cómo lo recibió la comunidad
La evidencia recuperada muestra adopción real en proyectos ajenos, presencia activa en YouTube y una crítica concreta y medible:
Hacker News:
- El envío de lanzamiento 46459832 sumó 4 puntos y 0 comentarios (2 de enero de 2026).
- En el Show HN 47394458 («Show HN: Situation Monitor»,
zarathustra333, 16 de marzo de 2026, 2 puntos) el autor declara «Tech Stack: MapCN, NextJS, x API, AI SDK»: una adopción real en una herramienta posterior, no una reseña del proyecto. - La crítica más concreta aparece en el Show HN 48737302 («I made a heatmap of 3400 VCs who are open to cold emails»,
west_subject, 30 de junio de 2026, 25 puntos). En los comentarios, el propiowest_subjectcontó que usó mapcn para generar los pines y que «cuando plotteé 300 puntos, el espaciado se descompuso. Solo el espaciado; todo lo demás funciona»; el usuario baddash respondió «xD creo que es una herramienta muy buena». Es una objeción real sobre el clustering/espaciado con ~300 puntos, acompañada de un elogio.

Incidencias y solicitudes de la comunidad (GitHub):
- Clustering con puntos densos: solicitud de renderizado personalizado de puntos en clusters (#28, #29).
- Controles de cámara: petición de añadir
pitchybearingal<MapControl />(#41, PR #42). - Rutas animadas: petición de reproducción de ruta animada (#10, PR #23).
- Compatibilidad: solicitud de soporte para Swift/iOS (#12) y bug de pantalla completa en iOS Safari (#51, corregido en la PR #70).
- Mantenibilidad: ingeniería para descomponer el componente
Mapmonolítico en piezas reutilizables (#11), codificación/decodificación de coordenadas (#37) y uso deuseSyncExternalStoredonde aplique (#38). - Distribución: petición de instrucciones para instalación manual en lugar de solo vía shadcn (#25), respetar
components.json(#81), añadir un changelog (#79) y endurecer la configuración de ESLint (#80).
Video (búsqueda de YouTube, 1 de septiembre de 2026): mapcn tiene una audiencia verificable en YouTube: «Add Interactive Maps to React Easily» del canal Cand Dev (15.011 vistas, ~7 meses), «mapcn: Beautiful Map Components for React (shadcn-style)» de Prism Labs (479 vistas, ~3 meses) y «mapcn Review: The shadcn/ui of React Maps?» de TechWealth Hub (29 vistas, ~8 días). También «Build a Coffee Finder App with mapcn + OpenStreetMap (100% Free)» de Cand Dev y varios Shorts («mapcn | Beautiful Map Components», 2.1K vistas; «Work faster with mapcn! | #GitHubGems #XerobiLab», 214 vistas). El Short de Syntax «FREE maps for any app - replace Google maps TODAY» (124.715 vistas) trata MapLibre/OpenFreeMap en general y no es una reseña específica de mapcn; se cita solo como contexto del ecosistema MapLibre.
No se recuperó evidencia verificable en Reddit (el sitio no devolvió contenido accesible), ni en X/Twitter (navegación bloqueada), ni en Product Hunt (desafío de Cloudflare); por tanto no se afirman métricas de esas plataformas.
mapcn frente a otras propuestas
| Propuesta | Estrellas (API de GitHub, 1 sep 2026) | Diferencia verificable |
|---|---|---|
visgl/react-map-gl (8.497) | Envoltorio React de Mapbox GL JS. | react-map-gl es una biblioteca de componentes sobre Mapbox GL; mapcn es un registro de estilo shadcn sobre MapLibre GL con bloques de datos listos para usar y el modelo de copia. |
PaulLeCam/react-leaflet (5.597) | Componentes React para mapas de Leaflet. | react-leaflet usa Leaflet como motor; mapcn usa MapLibre GL y se instala con el CLI de shadcn. |
tomchentw/react-google-maps (4.627) | Integración React de Google Maps. | react-google-maps depende de la API (y las tarifas) de Google Maps; mapcn se centra en MapLibre y mosaicos CARTO/OSM gratuitos. |
AnmolSaini16/next-maps (452) | Mapa ligero para Next.js con Mapbox. | Es el precursor del mismo autor, centrado en Mapbox y en un componente; mapcn migra a MapLibre y al patrón de registro shadcn con bloques. |
shadcn-ui/ui (122.714) | Plataforma de distribución de componentes por copia. | mapcn no es un competidor, sino un registro que imita el modelo de distribución de shadcn/ui para el dominio de mapas. |
La comparación más útil no es por popularidad: mapcn destaca cuando se quiere un mapa «de diseño» que se integra sin fricción en un proyecto que ya usa shadcn/ui y MapLibre. react-map-gl, react-leaflet o react-google-maps son preferibles cuando se necesita el motor o el proveedor específico que cada uno envuelve.
Guía rápida de uso
Instalación y primer arranque
Prerrequisitos: un proyecto con Tailwind CSS y shadcn/ui ya configurado.
npx shadcn@latest add @mapcn/map
(la documentación también muestra pnpm dlx shadcn@latest add @mapcn/map). Esto añade el componente de mapa al proyecto. Después se importa desde @/components/ui/map:
import { Map, MapControls } from "@/components/ui/map";
export function MyMap() {
return (
<div className="h-[320px] overflow-hidden rounded-lg">
<Map center={[-74.006, 40.7128]} zoom={11}>
<MapControls />
</Map>
</div>
);
}
En el primer arranque, el mapa usa por defecto los mosaicos CARTO gratuitos y conmuta automáticamente entre tema claro y oscuro. El worker de MapLibre se carga desde unpkg fijado a la versión instalada, sin configuración adicional.

Flujos de trabajo habituales
- Mapa base con controles:
<Map center zoom>+<MapControls />; el resultado es un mapa interactivo con zoom, brújula, geolocalización y pantalla completa.

- Mapa de datos (coroplético): instalar el bloque con
npx shadcn@latest add @mapcn/choroplethy usar<Map blank>con<MapGeoJSON>para que los datos definan la geografía. - Solo fronteras de países:
<Map blank>+<MapGeoJSON data={WORLD_GEOJSON} />(se sugiere una fuente Natural Earth). - Bloques de producto listos: localizador de tiendas, seguidor de entregas, monitor de uptime, heatmap o red logística, cada uno con su comando
npx shadcn@latest add @mapcn/<bloque>.

Configuración esencial
centeryzoomen<Map>— posición inicial (array[lng, lat]) y nivel de zoom.blanken<Map>— lienzo transparente sin mosaicos de fondo (se añaden capas propias).stylesen<Map>— URL u objeto de estilo MapLibre propio (MapTiler, OpenFreeMap, CARTO, autoalojado); anulablank.- URL del Web Worker — por defecto desde
unpkg; bajo CSP estricto se autoaloja copiando los archivos.mjsapublic/y llamandoMapLibreGL.setWorkerUrl(...). - Proveedor de mosaicos — CARTO por defecto; se puede cambiar a mosaicos de OpenStreetMap u otro proveedor compatible con MapLibre.
Trampas frecuentes y soluciones
Según el README, las incidencias y los hilos de la comunidad:
- Uso comercial de los mosaicos: los CARTO Basemaps por defecto requieren licencia de CARTO Enterprise para uso comercial (gratis para beneficiarios de CARTO). Para producción comercial se recomienda cambiar a mosaicos de OpenStreetMap u otro proveedor (MapTiler, Stadia).
- Espaciado con ~300 puntos: en el Show HN 48737302 un usuario reportó que tras plotear 300 puntos el espaciado del clustering se descompuso (todo lo demás funcionaba). Es una limitación documentada con datos densos; hay solicitudes abiertas de renderizado personalizado en clusters (#28, #29).
- El nombre
mapcnen npm está «robado»: en el registro npm existe un paquetemapcnv0.0.1 (creado el 14 de mayo de 2026) cuyo texto es literalmente «npm package name robbery». No es el proyecto real: mapcn se distribuye vía el registro de shadcn (add @mapcn/map), no como dependencia npm normal. No se debenpm install mapcn. - CSP estricto: el worker de MapLibre necesita entradas
script-srcyworker-srcexplícitas, o debe autoalojarse enpublic/. - Pantalla completa en iOS Safari: bug reportado (#51) y corregido en la PR #70; si se usa una versión anterior puede no funcionar en iPhone.
- Componente monolítico: hay una incidencia de ingeniería (#11) para descomponer
Mapen piezas reutilizables; la API base es todavía un componente extenso.
Integraciones y migración
- Con shadcn/ui: los componentes y bloques se copian en el proyecto, por lo que se integran con cualquier app que ya use shadcn; no se añade una dependencia cerrada.
- Con proveedores de mosaicos MapLibre: MapTiler, Stadia Maps, OpenFreeMap, OpenStreetMap o estilos autoalojados, vía la propiedad
styleso cambiando el fondo por defecto. - Migración desde
react-map-gl,react-leafletoreact-google-maps: no hay un conversor documentado; dado que el motor cambia (Mapbox GL / Leaflet / Google → MapLibre), se reimplementan las vistas, aunque las capacidades de capa (marcadores, clusters, GeoJSON, rutas) son equivalentes. Desde el propionext-mapsdel autor, el cambio es de Mapbox a MapLibre y de componente a registro. - Migración desde un mapa de MapLibre manual: mapcn encapsula el mismo motor; el paso consiste en sustituir la inicialización manual de la instancia MapLibre por los componentes
<Map>/<MapControls>.
Casos de uso
- Equipos de producto que ya usan shadcn/ui y necesitan un mapa: instalar un mapa «de diseño» con un comando, sin montar desde cero la integración MapLibre ni gestionar mosaicos; el patrón de copia mantiene el código en el proyecto.
- Desarrolladores que construyen localizadores, seguidor de entregas, paneles logísticos o de uptime: los bloques
store-locator,delivery-tracker,logistics-network,uptime-monitoryheatmapofrecen vistas de datos listas para adaptar, reduciendo el trabajo de diseño de UI. - Proyectos de visualización de datos geoespaciales: el modo
<Map blank>conMapGeoJSON, arcos y clusters permite mapas coropléticos, de flujos y de puntos donde los datos (no los mosaicos) definen la geografía, con mosaicos CARTO/OSM gratuitos para uso no comercial. - Equipos que quieren huir de las tarifas de Google Maps: al basarse en MapLibre GL y mosaicos CARTO/OSM, ofrece una ruta gratuita o de bajo coste para el uso no comercial, siempre teniendo en cuenta los términos de uso de los mosaicos para producción comercial.
- Comunidad de otros frameworks: los puertos
mapcn-svelte,mapcn-react-native,livewire-mapcn, los puertos Vue yflightcnamplían el patrón más allá de React, útil para equipos que comparten el mismo estilo de mapa entre distintos stacks. - Personas que evalúan componentes de mapa para React: el componente base, la documentación (
llms.txt, API Reference) y los bloques de ejemplo sirven como referencia del patrón shadcn aplicado a mapas.
Recursos
- Repositorio: https://github.com/AnmolSaini16/mapcn
- Sitio y documentación oficial: https://mapcn.dev (documentación: https://mapcn.dev/docs)
llms.txtoficial (para agentes de IA): https://mapcn.dev/llms.txt- Índice del registro de shadcn: https://mapcn.dev/r/registry.json
- Instalación: https://mapcn.dev/docs/installation
- Blog del autor (anmoldeep.dev, con el artículo precursor sobre mapas en Next.js): https://anmoldeep.dev
- Lanzamiento en Hacker News (4 puntos, 0 comentarios): https://news.ycombinator.com/item?id=46459832
- Show HN con adopción (Situation Monitor): https://news.ycombinator.com/item?id=47394458
- Hilo con crítica concreta de clustering (~300 puntos, 25 puntos): https://news.ycombinator.com/item?id=48737302
- Puerto Svelte: https://github.com/MariusLang/mapcn-svelte · React Native: https://github.com/aikenahac/mapcn-react-native · flightcn: https://github.com/ridemountainpig/flightcn · netops: https://github.com/craigderington/netops · livewire-mapcn: https://github.com/kwasii1/livewire-mapcn
- Precursor del autor (Mapbox): https://github.com/AnmolSaini16/next-maps
- Videos: «Add Interactive Maps to React Easily» — Cand Dev (15.011 vistas): https://www.youtube.com/watch?v=M0p7EqjGgH4 · «mapcn: Beautiful Map Components for React (shadcn-style)» — Prism Labs (479 vistas): https://www.youtube.com/watch?v=BCtDw7MeVpM · «mapcn Review: The shadcn/ui of React Maps?» — TechWealth Hub (29 vistas): https://www.youtube.com/watch?v=oXQF7A1nRWM · «Build a Coffee Finder App with mapcn + OpenStreetMap (100% Free)» — Cand Dev: https://www.youtube.com/watch?v=70r94qnG_nA
- Contexto del ecosistema MapLibre (no es una reseña de mapcn): «FREE maps for any app - replace Google maps TODAY» — Syntax (124.715 vistas): https://www.youtube.com/watch?v=UAQogFwyna0
Nota: este artículo combina el README, el llms.txt y la documentación oficial de mapcn, la API de GitHub (repositorio, contribuidores, commits, forks, búsqueda de repositorios), el perfil y el blog del autor, hilos de Hacker News, el registro npm y resultados de YouTube consultados el 1 de septiembre de 2026. Las cifras cambian con el tiempo. No se pudieron verificar fuentes en Reddit, X/Twitter ni Product Hunt durante esta investigación.
Comentarios