120 lines
4.2 KiB
Markdown
120 lines
4.2 KiB
Markdown
# 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.
|