Aktueller Stand

components/MapPicker.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect } from "react";
+import { MapContainer, Marker, TileLayer, useMapEvents } from "react-leaflet";
+import L from "leaflet";
+
+type LatLng = { lat: number; lng: number };
+
+let iconConfigured = false;
+
+const ensureLeafletIcons = () => {
+  if (iconConfigured) return;
+  delete (L.Icon.Default.prototype as { _getIconUrl?: () => string })._getIconUrl;
+  L.Icon.Default.mergeOptions({
+    iconRetinaUrl:
+      "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+    iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+    shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png"
+  });
+  iconConfigured = true;
+};
+
+function MapClickHandler({ onPick }: { onPick: (coords: LatLng) => void }) {
+  useMapEvents({
+    click(event) {
+      onPick({ lat: event.latlng.lat, lng: event.latlng.lng });
+    }
+  });
+  return null;
+}
+
+export default function MapPicker({
+  value,
+  onChange
+}: {
+  value: LatLng | null;
+  onChange: (coords: LatLng) => void;
+}) {
+  useEffect(() => {
+    ensureLeafletIcons();
+  }, []);
+
+  const center = value || { lat: 52.52, lng: 13.405 };
+
+  return (
+    <div
+      className="h-64 w-full overflow-hidden rounded-xl overscroll-contain"
+      onWheel={(event) => event.stopPropagation()}
+    >
+      <MapContainer
+        center={center}
+        zoom={value ? 14 : 5}
+        scrollWheelZoom
+        className="h-full w-full"
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <MapClickHandler onPick={onChange} />
+        {value && <Marker position={value} />}
+      </MapContainer>
+    </div>
+  );
+}