02 de septiembre de 2026 · Por YasKad
AnmolSaini16/mapcn

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:

  1. Instalar el componente base: npx shadcn@latest add @mapcn/map. El comando instala la pieza y añade el componente al proyecto.

Configuración sin config en un solo comando: una línea de comandos brillante representada por glifos neón abstractos, con una animación de progreso suave y un icono de componente que vuela hacia una estructura de carpetas del proyecto

  1. Importar y usar: desde @/components/ui/map se importan Map, MapControls y el resto de la API.
  2. 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> sin blank → 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 como https://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); un styles explícito anula blank.

Cuatro modos de selección de fondo: un panel muestra teselas de calles por defecto con pines de ubicación, otro un lienzo en blanco transparente con capas GeoJSON personalizadas, otro fronteras de países como contornos simples, y otro un estilo de mapa personalizado con paleta propia

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)

RepositorioEstrellasFrameworkRelación documentada
MariusLang/mapcn-svelte203Svelte«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/flightcn135TypeScriptConjunto 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-native60TypeScriptPuerto a React Native («Beautiful maps, made simple»). Creado el 6 de enero de 2026.
craigderington/netops56TypeScript«A network topology visualizer powered by mapcn and react». Creado el 12 de enero de 2026.
kwasii1/livewire-mapcn24JavaScriptPaquete de Laravel inspirado en mapcn para proyectos con Livewire. Creado el 24 de febrero de 2026.

Ecosistema en expansión con nodos de framework orbitando: puertos abstractos hexagonales inspirados en Svelte, React Native, Vue, Angular, Flutter, Laravel/Livewire, visualización de vuelos en TypeScript y topología de red, todos conectados por líneas de luz al componente de mapa central

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étricaValor
Estrellas11.964
Bifurcaciones701
Suscriptores44
Commits110
Incidencias abiertas indicadas por la API23
Lenguaje principalTypeScript
LicenciaMIT
Creación28 de diciembre de 2025
Último push16 de agosto de 2026
Última actualización de metadatos1 de septiembre de 2026
ReleasesSin 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:

  1. Hacer una bifurcación (fork) del repositorio.
  2. Crear una rama para la funcionalidad: git checkout -b feature/amazing-feature.
  3. Commitear los cambios: git commit -m 'Add some amazing feature'.
  4. Hacer push: git push origin feature/amazing-feature.
  5. 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 propio west_subject contó 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.

Escena de adopción y crítica de la comunidad: un terminal inspirado en Hacker News con un gráfico de puntos y comentarios, un panel de mapa de calor con miles de pines de densidad neón, una tarjeta al estilo Show HN con chips de stack tecnológico, y otro panel mostrando un informe de error sobre el espaciado de clusters con un icono de clúster corregido

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 pitch y bearing al <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 Map monolítico en piezas reutilizables (#11), codificación/decodificación de coordenadas (#37) y uso de useSyncExternalStore donde 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

PropuestaEstrellas (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.

Adaptación automática de tema claro y oscuro en pantalla dividida: a la izquierda un mapa oscuro con fondo azul marino y marcadores neón cian y magenta, a la derecha un mapa claro con fondo gris suave y paneles de control refinados, conectados por un interruptor central

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.

API de mapa componible: bloques neón traslúcidos que se ensamblan como piezas modulares representando Map, MapControls, Markers, Popups, Routes, Arcs, GeoJSON y Clusters, encajando alrededor de un mapa interactivo central

  • Mapa de datos (coroplético): instalar el bloque con npx shadcn@latest add @mapcn/choropleth y 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>.

Panel de registro con ocho tarjetas de bloques de mapa: mapa de analítica, coroplético, tarjeta de analítica, seguidor de entregas, monitor de uptime, mapa de calor, red logística y localizador de tiendas, cada una con una miniatura de visualización con estética de vidrio esmerilado

Configuración esencial

  • center y zoom en <Map> — posición inicial (array [lng, lat]) y nivel de zoom.
  • blank en <Map> — lienzo transparente sin mosaicos de fondo (se añaden capas propias).
  • styles en <Map> — URL u objeto de estilo MapLibre propio (MapTiler, OpenFreeMap, CARTO, autoalojado); anula blank.
  • URL del Web Worker — por defecto desde unpkg; bajo CSP estricto se autoaloja copiando los archivos .mjs a public/ y llamando MapLibreGL.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 mapcn en npm está «robado»: en el registro npm existe un paquete mapcn v0.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 debe npm install mapcn.
  • CSP estricto: el worker de MapLibre necesita entradas script-src y worker-src explícitas, o debe autoalojarse en public/.
  • 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 Map en 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 styles o cambiando el fondo por defecto.
  • Migración desde react-map-gl, react-leaflet o react-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 propio next-maps del 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-monitor y heatmap ofrecen 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> con MapGeoJSON, 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 y flightcn amplí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


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