diff options
Diffstat (limited to 'src/components/Map.tsx')
| -rw-r--r-- | src/components/Map.tsx | 40 |
1 files changed, 0 insertions, 40 deletions
diff --git a/src/components/Map.tsx b/src/components/Map.tsx deleted file mode 100644 index 1e4038f..0000000 --- a/src/components/Map.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { useEffect } from "react"; -import { MapContainer, TileLayer, Marker, useMap } from "react-leaflet"; -import L from "leaflet"; -import "leaflet/dist/leaflet.css"; - -const KARLSRUHE: [number, number] = [49.0069, 8.4037]; - -const icon = L.divIcon({ - html: `<div style="width:12px;height:12px;background:var(--background);border-radius:50%;border:2px solid var(--foreground);box-shadow:0 0 10px rgba(0,0,0,0.5)"></div>`, - className: "", - iconSize: [12, 12], -}); - -function MapEffects() { - const map = useMap(); - useEffect(() => { - map.flyTo(KARLSRUHE, 14, { duration: 3 }); - }, [map]); - return null; -} - -export default function Map() { - const tileUrl = "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"; - - return ( - <div - className="relative h-[450px] w-full overflow-hidden rounded-xl border border-border z-0" - style={{ - maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)", - WebkitMaskImage: "linear-gradient(to bottom, black 50%, transparent 100%)", - }} - > - <MapContainer center={[49, 8.4]} zoom={10} scrollWheelZoom={false} className="h-full w-full" zoomControl={false} attributionControl={false}> - <TileLayer url={tileUrl} /> - <Marker position={KARLSRUHE} icon={icon} /> - <MapEffects /> - </MapContainer> - </div> - ); -} |
