mapcn: sofort einsatzbereite Kartenkomponenten für React

Alles Wissenswerte über AnmolSaini16/mapcn: ein Registry im shadcn-Stil mit Kartenkomponenten und -blöcken für React, aufgebaut auf MapLibre GL, gestylt mit Tailwind und für Projekte gedacht, die bereits shadcn/ui verwenden. Am 1. September 2026 stand es bei 11.964 Sternen.

---

Was mapcn ist

mapcn ist ein Registry im shadcn-Stil mit wiederverwendbaren Kartenkomponenten und -blöcken für React. Die offizielle Beschreibung lautet „Beautiful map components. 100% Free, Zero config, one command setup”. Es ist kein Modell und kein Dienst: es sind UI-Komponenten, die mit einem einzigen Befehl in das Projekt des Nutzers kopiert werden, nach demselben kopierbasierten Code-Verteilungsmodell wie shadcn/ui.

Es basiert auf MapLibre GL, ist mit Tailwind CSS gestylt und für die Integration mit shadcn/ui gedacht. Das README und das offizielle llms.txt definieren es als „ein kostenloses, quelloffenes Registry im shadcn-Stil mit sofort einsatzbereiten Kartenkomponenten und -blöcken für React”. Der Einstiegspunkt des Registrys ist der Index unter https://mapcn.dev/r/registry.json.

Zum Zeitpunkt dieser Recherche stellt das Registry 9 Elemente bereit: eines vom Typ registry:ui (die Basiskomponente map) und acht vom Typ registry:block (analytics-map, choropleth, analytics-card, delivery-tracker, uptime-monitor, heatmap, logistics-network und store-locator). Die Basiskomponente stellt nach der Installation eine API mit Map, Controls, Markers, Popups, Routes, Arcs, GeoJSON und Clusters bereit.

Der Ursprung: von next-maps zum shadcn-Muster

Das Repository wurde am 28. Dezember 2025 von Anmoldeep Singh erstellt (Konto AnmolSaini16), dessen GitHub-Profil und persönlicher Blog anmoldeep.dev ihn als designorientierten Software-Ingenieur ausweisen, angestellt bei Cloudflare im Team „Design Engineering” (Konto erstellt am 30. September 2020, 334 Follower, 36 öffentliche Repositories, X: @anmold_s).

Seine persönliche Website führt mapcn als Hauptprojekt unter dem Motto „Ready to use map components for React. Built on MapLibre. Styled with Tailwind.” auf, zusammen mit zwei weiteren eigenen Projekten desselben Autors: TableForge (Tabellenkomponenten, 28 Sterne) und Next Maps (452 Sterne). Letzteres ist für die Geschichte relevant: es ist eine „leichte, saubere und schön gestaltete” Kartenkomponente, gebaut mit Next.js und Mapbox, und der Autor veröffentlichte einen Vorläuferartikel, „Building Modern Maps in Next.js with Mapbox” (April 2025). mapcn lässt sich als Weiterentwicklung dieses Projekts lesen: es wechselt von Mapbox zu MapLibre GL und von der einzelnen Komponente zum Registry-Muster von shadcn.

Der überprüfbare öffentliche Launch ist der Hacker-News-Beitrag 46459832 („Mapcn: Beautiful Maps, Made Simple”, eingereicht von handfuloflight am 2. Januar 2026), dessen Link damals auf https://mapcn.vercel.app zeigte (heute mapcn.dev). Der Beitrag erhielt 4 Punkte und 0 Kommentare.

Philosophie und Prinzipien

Das README und die Dokumentation drücken eine Reihe überprüfbarer Entscheidungen aus:

• Null Konfiguration und ein Befehl: die Komponente funktioniert „out of the box” mit sinnvollen Standardwerten; alles wird mit npx shadcn@latest add @mapcn/map installiert.
• Kopiermodell von shadcn: die Komponenten werden ins Projekt kopiert (@/components/ui/map), nicht als geschlossene Abhängigkeit konsumiert; der Nutzer besitzt den Code und kann ihn ändern.
• Themasensibel: passt den Stil automatisch an Hell-/Dunkelmodus an, und die Hintergrundkacheln wechseln ohne Konfiguration zwischen den Themes.
• Komponierbar: komplexe Kartenoberflächen werden mit einfachen deklarativen Komponenten aufgebaut (Map, MapControls, Marker, Routen usw.).
• MapLibre als Engine: gewährt Zugriff auf die vollen Fähigkeiten von MapLibre GL; die Komponente ist eine Abstraktionsschicht, keine eigene Engine.
• Ehrlichkeit bei den Kachel-Bedingungen: das README widmet den „Basemap Terms of Service” einen eigenen Abschnitt und weist darauf hin, dass die standardmäßigen Hintergrundkacheln CARTO Basemaps sind (basierend auf OpenStreetMap-Daten) und dass kommerzielle Nutzung eine CARTO-Enterprise-Lizenz erfordert.

Wie es funktioniert

Der dokumentierte Nutzungsablauf ist direkt:

1. Die Basiskomponente installieren: npx shadcn@latest add @mapcn/map. Der Befehl installiert das Stück und fügt die Komponente zum Projekt hinzu.

2. Importieren und nutzen: Map, MapControls und der Rest der API werden aus @/components/ui/map importiert.
3. Blöcke hinzufügen (optional): jeder Block wird mit seinem eigenen Befehl installiert, z. B. npx shadcn@latest add @mapcn/choropleth.

Das llms.txt dokumentiert vier Entscheidungen zur Hintergrundauswahl (basemap), die das Verhalten definieren:

• <Map> ohne blank → kostenlose CARTO-Kacheln standardmäßig (ideal für Locator, Lieferverfolgung, Adresskarten).
• <Map blank> → eine transparente Leinwand ohne Kacheln; eigene Ebenen werden hinzugefügt (GeoJSON, Bögen, Marker, Cluster); ideal für choroplethische, Bogen-, Punkt- und Datenpanel-Karten.
• <Map blank> + <MapGeoJSON data={WORLD_GEOJSON} /> → nur Länder oder Grenzen (eine Natural-Earth-Quelle wird vorgeschlagen, z. B. https://cdn.jsdelivr.net/gh/nvkelso/natural-earth-vector@v5.1.2/geojson/ne_110m_admin_0_countries.geojson).
• Die Eigenschaft styles → eine eigene, mit MapLibre kompatible Stil-URL oder ein Objekt (MapTiler, OpenFreeMap, CARTO oder selbst gehostet); ein explizites styles überschreibt blank.

Technische Details aus dem Installationsleitfaden: MapLibre parst die Kacheln in einem Web Worker, der als separate Datei ausgeliefert wird, und mapcn lädt ihn von unpkg, fixiert auf die installierte Version. Unter einer strengen CSP benötigt der Worker script-src 'self' https://unpkg.com; und worker-src 'self' blob:; um ihn selbst zu hosten, werden maplibre-gl-worker.mjs und maplibre-gl-shared.mjs nach public/ kopiert und die unpkg-URL in der Komponente durch MapLibreGL.setWorkerUrl("/maplibre-gl-worker.mjs") ersetzt.

Offizieller und halboffizieller Status

• Vercel-OSS-Programm: das README trägt das Abzeichen „Vercel OSS Program”, und die Launch-Website des Projekts wurde von mapcn.vercel.app ausgeliefert. Das ordnet es dem Unterstützungsprogramm von Vercel für Open-Source-Projekte zu.
• shadcn-Ökosystem: mapcn ist kein geschlossenes Paket, sondern ein Registry, das über die shadcn-CLI konsumiert wird (npx shadcn@latest add …). In der Praxis fungiert es als Erweiterung des Komponentenkatalogs von shadcn/ui, wobei es keinen Beleg dafür gibt, dass es im zentralen Register von shadcn gelistet oder formal von einem Anbieter „zertifiziert” ist.
• Keine formale Bezeichnung: in den konsultierten Quellen existiert weder eine Empfehlung eines Anbieters noch ein De-facto-Standardstatus; es ist ein Ein-Personen-Projekt mit Community-Zugkraft (Ports, Videos, Adoption in fremden Projekten) und der Teilnahme am OSS-Programm von Vercel.

Das Ökosystem

Ports zu anderen Frameworks (unabhängig)

Repository	Sterne	Framework	Dokumentierte Beziehung
MariusLang/mapcn-svelte	203	Svelte	„Based on mapcn by Anmol Saini”; gleiches Motto und Muster, mit shadcn-svelte; Website mapcn-svelte.dev. Erstellt am 1. Januar 2026.
ridemountainpig/flightcn	135	TypeScript	Ein Visualisierungsset, „built for the mapcn ecosystem”: Flugplätze, Großkreisrouten, Live-Tracking, gewichtete Netzwerke, Satellitenumlaufbahnen. Erstellt am 1. April 2026.
aikenahac/mapcn-react-native	60	TypeScript	Ein Port zu React Native („Beautiful maps, made simple”). Erstellt am 6. Januar 2026.
craigderington/netops	56	TypeScript	„A network topology visualizer powered by mapcn and react”. Erstellt am 12. Januar 2026.
kwasii1/livewire-mapcn	24	JavaScript	Ein von mapcn inspiriertes Laravel-Paket für Livewire-Projekte. Erstellt am 24. Februar 2026.

Kleinere Ports und Forks (GitHub-Repository-Suche)

Zusätzlich zu den obigen lieferte eine Suche nach dem Namen mapcn mehrere kleinere Ports: mapcn-vue (eine Vue-Version, mit Forks von AdeoluAdeyemi mit 8 Sternen, bogdan-mihalcea mit 1, sowie Repos von AnoRebel und SoftCodefr), ng-mapcn (juanvieiraprado99, 4 Sterne, Angular), mapcn_flutter (zietahmed19, 3 Sterne), Beautiful-Places-Mapcn (AndreaEmmi, 5 Sterne) und SaluSL/vue-mapcn (0 Sterne). Dies sind inoffizielle Ports; sie stellen keine Zugehörigkeit oder Unterstützung durch den Autor dar.

Benachbarte Werkzeuge des Autors

• AnmolSaini16/next-maps (452 Sterne): der Mapbox-Vorläufer desselben Autors, von dem sich mapcn durch den Wechsel zu MapLibre und dem shadcn-Muster löst.
• AnmolSaini16/table-forge (28 Sterne): Tabellenkomponenten desselben Autors mit demselben kopierbasierten Verteilungsstil.

Diese Zahlen stammen aus der GitHub-API und der während dieser Recherche durchgeführten Repository-Suche; sie sind keine Qualitäts-, Support- oder Kompatibilitätsprüfung jedes einzelnen Ablegers.

Repo-Kennzahlen

Messung: 1. September 2026, GitHub-API.

Kennzahl	Wert
Sterne	11.964
Forks	701
Abonnenten	44
Commits	110
Von der API angegebene offene Issues	23
Hauptsprache	TypeScript
Lizenz	MIT
Erstellung	28. Dezember 2025
Letzter Push	16. August 2026
Letzte Metadaten-Aktualisierung	1. September 2026
Releases	Keine veröffentlicht (leerer Endpunkt)

Die wichtigsten Beitragenden laut API, nach Anzahl der Beiträge: AnmolSaini16 (108), jabahm (1) und jamnxdev (1); die Aktivität ist stark auf den Autor konzentriert.

Vorbehalte der API: open_issues_count (23) kann offene Pull Requests einschließen; eine direkte Abfrage zeigt 23 offene Elemente, von denen 8 PRs und 15 Issues sind. watchers_count der allgemeinen Antwort spiegelt die Sternzahl wider (11.964), weshalb subscribers_count (44) separat als reale Abonnentenzahl angegeben wird. Der Commit-Zähler von 110 wurde von der letzten Seite des Paginierungslinks der Commits-API ermittelt. Es gibt keine Releases im releases-Endpunkt, sodass die Versionierung über das shadcn-Register und das Paket erfolgt, nicht über Release-Tags.

Wie man beiträgt

Das README dokumentiert einen Standardablauf:

1. Das Repository forken.
2. Einen Feature-Branch erstellen: git checkout -b feature/amazing-feature.
3. Die Änderungen committen: git commit -m 'Add some amazing feature'.
4. Pushen: git push origin feature/amazing-feature.
5. Eine Pull Request öffnen.

Es wurde keine CONTRIBUTING.md mit einem detaillierteren Prozess und kein Test-/Evaluierungs-Framework gefunden; der obige Ablauf ist der Beitragsleitfaden. Der Issue-Verlauf zeigt Community-PRs und -Vorschläge, die diesem Ablauf folgen, zum Beispiel das Hinzufügen eines Großkreis-Modus für Bögen (PR #73), die Korrektur des iOS-Safari-Vollbilds (PR #70) und die Verbesserung des styleEpoch-Stylings (PR #69).

Wie die Community reagierte

Die abgerufenen Belege zeigen reale Adoption in fremden Projekten, aktive YouTube-Präsenz und eine konkrete, messbare Kritik:

Hacker News:

• Die Launch-Einreichung 46459832 erhielt 4 Punkte und 0 Kommentare (2. Januar 2026).
• Im Show HN 47394458 („Show HN: Situation Monitor”, zarathustra333, 16. März 2026, 2 Punkte) erklärt der Autor „Tech Stack: MapCN, NextJS, x API, AI SDK” — eine reale Adoption in einem nachgelagerten Werkzeug, keine Rezension des Projekts.
• Die konkreteste Kritik erscheint im Show HN 48737302 („I made a heatmap of 3400 VCs who are open to cold emails”, west_subject, 30. Juni 2026, 25 Punkte). In den Kommentaren erzählte west_subject selbst, mapcn zur Erzeugung der Pins genutzt zu haben und dass „beim Plotten von 300 Punkten der Abstand kaputtging. Nur der Abstand; alles andere funktioniert”; Nutzer baddash antwortete „xD ich finde, das ist ein wirklich gutes Werkzeug”. Es handelt sich um einen echten Einwand zum Clustering/Abstand bei ~300 Punkten, begleitet von Lob.

Issues und Anfragen der Community (GitHub):

• Clustering mit dichten Punkten: eine Anfrage für benutzerdefiniertes Rendering von Punkten innerhalb von Clustern (#28, #29).
• Kamerasteuerung: eine Anfrage, pitch und bearing zu <MapControl /> hinzuzufügen (#41, PR #42).
• Animierte Routen: eine Anfrage für animierte Routenwiedergabe (#10, PR #23).
• Kompatibilität: eine Anfrage nach Swift/iOS-Unterstützung (#12) und ein iOS-Safari-Vollbild-Bug (#51, behoben in PR #70).
• Wartbarkeit: Ingenieursarbeit, um die monolithische Map-Komponente in wiederverwendbare Teile zu zerlegen (#11), Koordinaten-Kodierung/-Dekodierung (#37) und die Nutzung von useSyncExternalStore, wo anwendbar (#38).
• Verteilung: eine Anfrage nach Anleitungen zur manuellen Installation statt nur über shadcn (#25), die Beachtung von components.json (#81), das Hinzufügen eines Changelogs (#79) und die Verschärfung der ESLint-Konfiguration (#80).

Video (YouTube-Suche, 1. September 2026): mapcn hat ein nachweisbares YouTube-Publikum: „Add Interactive Maps to React Easily” vom Kanal Cand Dev (15.011 Aufrufe, ~7 Monate), „mapcn: Beautiful Map Components for React (shadcn-style)” von Prism Labs (479 Aufrufe, ~3 Monate) und „mapcn Review: The shadcn/ui of React Maps?” von TechWealth Hub (29 Aufrufe, ~8 Tage). Außerdem „Build a Coffee Finder App with mapcn + OpenStreetMap (100% Free)” von Cand Dev sowie mehrere Shorts („mapcn | Beautiful Map Components”, 2,1K Aufrufe; „Work faster with mapcn! | #GitHubGems #XerobiLab”, 214 Aufrufe). Der Short von Syntax „FREE maps for any app - replace Google maps TODAY” (124.715 Aufrufe) behandelt MapLibre/OpenFreeMap allgemein und ist keine mapcn-spezifische Rezension; er wird nur als Kontext des MapLibre-Ökosystems zitiert.

Es wurden keine überprüfbaren Belege auf Reddit gefunden (die Website lieferte keinen zugänglichen Inhalt), ebenso wenig auf X/Twitter (Navigation blockiert) oder Product Hunt (Cloudflare-Challenge); daher werden keine Kennzahlen dieser Plattformen behauptet.

mapcn im Vergleich zu anderen Ansätzen

Ansatz	Sterne (GitHub-API, 1. Sept. 2026)	Verifizierbarer Unterschied
visgl/react-map-gl (8.497)	Ein React-Wrapper für Mapbox GL JS.	react-map-gl ist eine Komponentenbibliothek über Mapbox GL; mapcn ist ein Registry im shadcn-Stil über MapLibre GL mit fertigen Datenblöcken und dem Kopiermodell.
PaulLeCam/react-leaflet (5.597)	React-Komponenten für Leaflet-Karten.	react-leaflet nutzt Leaflet als Engine; mapcn nutzt MapLibre GL und wird über die shadcn-CLI installiert.
tomchentw/react-google-maps (4.627)	React-Integration für Google Maps.	react-google-maps hängt von der API (und den Gebühren) von Google Maps ab; mapcn konzentriert sich auf MapLibre und kostenlose CARTO/OSM-Kacheln.
AnmolSaini16/next-maps (452)	Eine leichte Next.js-Karte mit Mapbox.	Es ist der Vorläufer desselben Autors, fokussiert auf Mapbox und eine einzelne Komponente; mapcn wandert zu MapLibre und dem shadcn-Registry-Muster mit Blöcken.
shadcn-ui/ui (122.714)	Eine kopierbasierte Komponentenverteilungsplattform.	mapcn ist kein Konkurrent, sondern ein Registry, das das Verteilungsmodell von shadcn/ui für die Kartendomäne nachahmt.

Der nützlichste Vergleich erfolgt nicht nach Popularität: mapcn sticht hervor, wenn eine „designte” Karte gewünscht wird, die sich reibungslos in ein Projekt integriert, das bereits shadcn/ui und MapLibre nutzt. react-map-gl, react-leaflet oder react-google-maps sind vorzuziehen, wenn die spezifische Engine oder der Anbieter benötigt wird, den jeweils eingebunden wird.

Schnellstart-Anleitung

Installation und erster Start

Voraussetzungen: ein Projekt mit bereits konfiguriertem Tailwind CSS und shadcn/ui.

npx shadcn@latest add @mapcn/map

(die Dokumentation zeigt auch pnpm dlx shadcn@latest add @mapcn/map). Das fügt die Kartenkomponente zum Projekt hinzu. Danach wird sie aus @/components/ui/map importiert:

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>
  );
}

Beim ersten Start nutzt die Karte standardmäßig die kostenlosen CARTO-Kacheln und wechselt automatisch zwischen hellem und dunklem Thema. Der MapLibre-Worker wird ohne zusätzliche Konfiguration von unpkg, fixiert auf die installierte Version, geladen.

Typische Arbeitsabläufe

• Basiskarte mit Steuerelementen: <Map center zoom> + <MapControls />; das Ergebnis ist eine interaktive Karte mit Zoom, Kompass, Geolokalisierung und Vollbild.

• Datenkarte (choroplethisch): den Block mit npx shadcn@latest add @mapcn/choropleth installieren und <Map blank> mit <MapGeoJSON> nutzen, damit die Daten die Geografie definieren.
• Nur Ländergrenzen: <Map blank> + <MapGeoJSON data={WORLD_GEOJSON} /> (eine Natural-Earth-Quelle wird vorgeschlagen).
• Fertige Produktblöcke: Store-Locator, Lieferverfolgung, Uptime-Monitor, Heatmap oder logistisches Netzwerk, jeweils mit eigenem Befehl npx shadcn@latest add @mapcn/<block>.

Wesentliche Konfiguration

• center und zoom in <Map> — Anfangsposition (Array [lng, lat]) und Zoomstufe.
• blank in <Map> — eine transparente Leinwand ohne Hintergrundkacheln (eigene Ebenen werden hinzugefügt).
• styles in <Map> — eine eigene MapLibre-Stil-URL oder ein Objekt (MapTiler, OpenFreeMap, CARTO, selbst gehostet); überschreibt blank.
• Die Web-Worker-URL — standardmäßig von unpkg; unter strenger CSP wird sie selbst gehostet, indem die .mjs-Dateien nach public/ kopiert und MapLibreGL.setWorkerUrl(...) aufgerufen wird.
• Kachel-Anbieter — standardmäßig CARTO; kann auf OpenStreetMap-Kacheln oder einen anderen MapLibre-kompatiblen Anbieter umgestellt werden.

Häufige Stolperfallen und Lösungen

Laut README, Issues und Community-Threads:

• Kommerzielle Nutzung der Kacheln: die standardmäßigen CARTO Basemaps erfordern für kommerzielle Nutzung eine CARTO-Enterprise-Lizenz (kostenlos für CARTO-Begünstigte). Für die kommerzielle Produktion wird empfohlen, zu OpenStreetMap-Kacheln oder einem anderen Anbieter (MapTiler, Stadia) zu wechseln.
• Abstand bei ~300 Punkten: im Show HN 48737302 meldete ein Nutzer, dass nach dem Plotten von 300 Punkten der Cluster-Abstand zusammenbrach (alles andere funktionierte). Das ist eine dokumentierte Einschränkung bei dichten Daten; es gibt offene Anfragen für benutzerdefiniertes Cluster-Rendering (#28, #29).
• Der Name mapcn auf npm ist „gestohlen”: im npm-Register existiert ein Paket mapcn v0.0.1 (erstellt am 14. Mai 2026), dessen Beschreibung wörtlich „npm package name robbery” lautet. Es ist nicht das echte Projekt: mapcn wird über das shadcn-Register verteilt (add @mapcn/map), nicht als normale npm-Abhängigkeit. npm install mapcn sollte nicht ausgeführt werden.
• Strenge CSP: der MapLibre-Worker benötigt explizite script-src- und worker-src-Einträge, oder er muss aus public/ selbst gehostet werden.
• Vollbild in iOS Safari: ein gemeldeter Bug (#51), behoben in PR #70; bei einer älteren Version kann es auf dem iPhone nicht funktionieren.
• Monolithische Komponente: es gibt ein Ingenieurs-Issue (#11), um Map in wiederverwendbare Teile zu zerlegen; die Basis-API ist noch eine umfangreiche Komponente.

Integrationen und Migration

• Mit shadcn/ui: Komponenten und Blöcke werden ins Projekt kopiert und lassen sich so in jede App integrieren, die bereits shadcn nutzt; es wird keine geschlossene Abhängigkeit hinzugefügt.
• Mit MapLibre-Kachelanbietern: MapTiler, Stadia Maps, OpenFreeMap, OpenStreetMap oder selbst gehostete Stile, über die Eigenschaft styles oder durch Ändern des Standardhintergrunds.
• Migration von react-map-gl, react-leaflet oder react-google-maps: es existiert kein dokumentierter Konverter; da sich die Engine ändert (Mapbox GL / Leaflet / Google → MapLibre), werden die Ansichten neu implementiert, wobei die Ebenenfähigkeiten (Marker, Cluster, GeoJSON, Routen) gleichwertig sind. Vom eigenen next-maps des Autors aus besteht der Wechsel von Mapbox zu MapLibre und von einer Komponente zu einem Registry.
• Migration von einer manuellen MapLibre-Karte: mapcn kapselt dieselbe Engine; der Schritt besteht darin, die manuelle Initialisierung der MapLibre-Instanz durch die Komponenten <Map>/<MapControls> zu ersetzen.

Anwendungsfälle

• Produktteams, die bereits shadcn/ui nutzen und eine Karte benötigen: eine „designte” Karte mit einem Befehl installieren, ohne die MapLibre-Integration oder das Kachelmanagement von Grund auf aufzubauen; das Kopiermuster hält den Code im Projekt.
• Entwickler, die Locators, Lieferverfolgung, logistische oder Uptime-Panels bauen: die Blöcke store-locator, delivery-tracker, logistics-network, uptime-monitor und heatmap bieten fertig anpassbare Datenansichten und reduzieren den UI-Design-Aufwand.
• Projekte zur Visualisierung geografischer Daten: der Modus <Map blank> mit MapGeoJSON, Bögen und Clustern ermöglicht choroplethische, Fluss- und Punktkarten, bei denen die Daten — nicht die Kacheln — die Geografie definieren, mit kostenlosen CARTO/OSM-Kacheln für nicht kommerzielle Nutzung.
• Teams, die den Gebühren von Google Maps entkommen wollen: durch die Basis auf MapLibre GL und CARTO/OSM-Kacheln bietet es einen kostenlosen oder kostengünstigen Weg für nicht kommerzielle Nutzung, stets unter Beachtung der Nutzungsbedingungen der Kacheln für die kommerzielle Produktion.
• Community anderer Frameworks: die Ports mapcn-svelte, mapcn-react-native, livewire-mapcn, die Vue-Ports und flightcn erweitern das Muster über React hinaus, nützlich für Teams, die denselben Kartenstil über verschiedene Stacks hinweg teilen.
• Personen, die Kartenkomponenten für React evaluieren: die Basiskomponente, die Dokumentation (llms.txt, API-Referenz) und die Beispielblöcke dienen als Referenz für das auf Karten angewandte shadcn-Muster.

Ressourcen

• Repository: https://github.com/AnmolSaini16/mapcn
• Offizielle Website und Dokumentation: https://mapcn.dev (Dokumentation: https://mapcn.dev/docs)
• Offizielles llms.txt (für KI-Agenten): https://mapcn.dev/llms.txt
• Index des shadcn-Registers: https://mapcn.dev/r/registry.json
• Installation: https://mapcn.dev/docs/installation
• Blog des Autors (anmoldeep.dev, mit dem Vorläuferartikel über Karten in Next.js): https://anmoldeep.dev
• Launch auf Hacker News (4 Punkte, 0 Kommentare): https://news.ycombinator.com/item?id=46459832
• Show HN mit Adoption (Situation Monitor): https://news.ycombinator.com/item?id=47394458
• Thread mit konkreter Clustering-Kritik (~300 Punkte, 25 Punkte): https://news.ycombinator.com/item?id=48737302
• Svelte-Port: 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
• Vorläufer des Autors (Mapbox): https://github.com/AnmolSaini16/next-maps
• Videos: „Add Interactive Maps to React Easily” — Cand Dev (15.011 Aufrufe): https://www.youtube.com/watch?v=M0p7EqjGgH4 · „mapcn: Beautiful Map Components for React (shadcn-style)” — Prism Labs (479 Aufrufe): https://www.youtube.com/watch?v=BCtDw7MeVpM · „mapcn Review: The shadcn/ui of React Maps?” — TechWealth Hub (29 Aufrufe): 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
• Kontext des MapLibre-Ökosystems (keine mapcn-Rezension): „FREE maps for any app - replace Google maps TODAY” — Syntax (124.715 Aufrufe): https://www.youtube.com/watch?v=UAQogFwyna0

---

Hinweis: dieser Artikel stützt sich auf das README, das llms.txt und die offizielle Dokumentation von mapcn, die GitHub-API (Repository, Contributors, Commits, Forks, Repository-Suche), das Profil und den Blog des Autors, Hacker-News-Threads, das npm-Register und YouTube-Ergebnisse, konsultiert am 1. September 2026. Zahlen ändern sich mit der Zeit. Quellen auf Reddit, X/Twitter und Product Hunt konnten während dieser Recherche nicht verifiziert werden.