1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
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>
);
}
|
