-
Notifications
You must be signed in to change notification settings - Fork 0
/
Map.tsx
44 lines (34 loc) · 1.21 KB
/
Map.tsx
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
41
42
43
44
"use client";
import L from "leaflet";
import { MapContainer, Marker, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import markerIcon2x from "leaflet/dist/images/marker-icon-2x.png";
import markerIcon from "leaflet/dist/images/marker-icon.png";
import markerShadow from "leaflet/dist/images/marker-shadow.png";
// @ts-ignore
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconUrl: markerIcon.src,
iconRetinaUrl: markerIcon2x.src,
shadowUrl: markerShadow.src,
});
interface MapProps {
center?: number[];
}
const url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const attribution =
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
const Map: React.FC<MapProps> = ({ center }) => {
return (
<MapContainer
center={(center as L.LatLngExpression) || [36.031493, 9.552246]}
zoom={center ? 8 : 4}
scrollWheelZoom={false}
className="h-[35vh] rounded-lg"
>
<TileLayer url={url} attribution={attribution} />
{center && <Marker position={center as L.LatLngExpression} />}
</MapContainer>
);
};
export default Map;