drtittel/.kilo/plans/1779906112073-kind-falcon.md

MapCN auf Kontaktseite integrieren (statt Google-Maps-Link)

Ziel

Die Platzhalter-Box auf der Kontaktseite (/kontakt) soll durch eine echte, interaktive Karte mit mapcn ersetzt werden. Die Karte zeigt den Praxisstandort inklusive Marker und optionalem Popup.

Ist-Zustand

• src/pages/kontakt.astro enthält aktuell nur einen statischen Map-Placeholder mit Link zu Google Maps.
• React ist im Projekt bereits aktiviert (@astrojs/react in astro.config.mjs).
• Shadcn-Struktur ist vorhanden (components.json, src/components/ui/button.tsx).
• Es gibt noch keine Kartenkomponenten im Projekt.

Empfohlener Ansatz

mapcn per shadcn-Registry hinzufügen und eine kleine, dedizierte React-Komponente für die Kontaktkarte bauen. Diese wird als Astro-Client-Island (client:visible) in kontakt.astro eingebunden.

Warum dieser Ansatz:

• Sauber gekapselte Kartenlogik (statt JSX direkt in .astro).
• Gute Performance (Hydration erst bei Sichtbarkeit).
• Einfache Wiederverwendung für Footer/Standortseiten später.

Umsetzungsplan

1) MapCN-Komponente ins Projekt holen

Änderungen: Abhängig von shadcn-Generator-Ausgabe

• Command (im Implementierungsschritt):
  • bunx shadcn@latest add @mapcn/map (alternativ npx shadcn@latest add @mapcn/map)
• Erwartete Ergebnisse:
  • Neue Datei src/components/ui/map.tsx (oder äquivalent)
  • Neue Dependency maplibre-gl in package.json
  • Falls vom Generator benötigt: ergänzende CSS-Regeln/Imports (z. B. MapLibre-CSS)

Prüfpunkte:

• Map-Komponente ist importierbar aus @/components/ui/map
• Keine TypeScript- oder Build-Fehler nach dem Add

2) Reusable Praxis-Map als React-Komponente erstellen

Neue Datei: src/components/maps/PracticeMap.tsx

Inhalt:

• Import aus @/components/ui/map:
  • Map
  • MapControls (optional, aber sinnvoll)
  • MapMarker, MarkerContent, MarkerLabel (für Standortpin)
• Container mit fester Höhe und Rounded Corners passend zur bestehenden Kontaktseite
• Initiales Viewport-Center auf Praxisadresse
  • Empfohlene Koordinaten (OSM/Nominatim): lon 12.3849586, lat 50.8203324
• Zoom ca. 14–15
• Markerlabel z. B. „Zahnarztpraxis Dr. Tittel“
• Optional: kleines Popup mit Adresse

Hinweis:

• Falls die generierte Map-Komponente children voll unterstützt, Marker/Controls direkt als Children.
• Falls nicht, Minimalvariante nur mit Map center/zoom und Controls weglassen.

3) Kontaktseite umbauen

Datei: src/pages/kontakt.astro

Geplante Änderungen:

• Import der neuen Komponente PracticeMap.
• Bestehenden Placeholder-Block (Zeilenbereich um „Map placeholder“) entfernen/ersetzen.
• Neue Einbindung:
  • <PracticeMap client:visible />
• Karte visuell im selben Card-Stil belassen:
  • rounded-2xl border border-border overflow-hidden

Optionaler UX-Zusatz unter der Karte:

• Externer OpenStreetMap-/Google-Maps-Link als Fallback/Navigation beibehalten.

4) (Optional, aber empfohlen) Standortdaten zentralisieren

Datei: src/data/site.ts

• siteConfig um location erweitern, z. B.:
  • latitude
  • longitude
• PracticeMap nutzt diese Werte statt hardcodierter Koordinaten.

Vorteil:

• Keine doppelten Daten, spätere Änderungen an einer Stelle.

5) Validierung

Nach der Implementierung ausführen:

• bun run typecheck
• bun run build

Manuelle Sichtprüfung:

• /kontakt lädt ohne Console-Errors
• Karte rendert korrekt auf Desktop und Mobile
• Marker steht an plausibler Position (Bodelschwinghstraße 1, 08451 Crimmitschau)
• Seite bleibt performant (Hydration nur beim Scrollen in Sichtbereich)

Risiken / Stolpersteine

• maplibre-gl benötigt ggf. CSS-Import; ohne den wirkt die Karte/Controls fehlerhaft.
• In Astro muss React-Komponente mit client:* eingebunden werden, sonst keine Interaktivität.
• Falls CSP/Cookie-Hinweise im Projekt strikt sind, muss Text „Karte wird nach Cookie-Einwilligung geladen“ angepasst/entfernt werden, da diese Map nicht dem bisherigen Google-Maps-Flow entspricht.

Definition of Done

• Kontaktseite zeigt eine funktionierende mapcn-Karte statt Placeholder.
• Marker auf Praxisstandort vorhanden.
• Projekt baut und typcheckt fehlerfrei.
• Styling integriert sich in bestehendes Design ohne Layout-Bruch.