forked from Transparency/kgroad-frontend2
109 lines
2.9 KiB
TypeScript
109 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import "./ReportMap.scss";
|
|
import "leaflet/dist/leaflet.css";
|
|
import {
|
|
MapContainer,
|
|
Marker,
|
|
Polyline,
|
|
Popup,
|
|
TileLayer,
|
|
} from "react-leaflet";
|
|
import geo_green_icon from "./icons/geo-green.svg";
|
|
import geo_orange_icon from "./icons/geo-orange.svg";
|
|
import geo_pink_icon from "./icons/geo-pink.svg";
|
|
import geo_purple_icon from "./icons/geo-purple.svg";
|
|
import geo_red_icon from "./icons/geo-red.svg";
|
|
import geo_yellow_icon from "./icons/geo-yellow.svg";
|
|
import { DivIcon, Icon, LatLngTuple } from "leaflet";
|
|
import { StaticImageData } from "next/image";
|
|
import { ILocation } from "@/shared/types/location-type";
|
|
import { Link } from "@/shared/config/navigation";
|
|
import { useReportStore } from "../reportStore";
|
|
|
|
interface IReportMapProps {
|
|
location: ILocation[];
|
|
category: number;
|
|
}
|
|
|
|
const ReportMap: React.FC<IReportMapProps> = ({
|
|
location,
|
|
category,
|
|
}: IReportMapProps) => {
|
|
const { showMap } = useReportStore();
|
|
const createCustomIcon = (icon: StaticImageData) => {
|
|
const customIcon = new Icon({
|
|
iconUrl: icon.src,
|
|
iconSize: [32, 32],
|
|
});
|
|
|
|
return customIcon;
|
|
};
|
|
|
|
const icons: Record<string, DivIcon> = {
|
|
1: createCustomIcon(geo_red_icon),
|
|
2: createCustomIcon(geo_pink_icon),
|
|
3: createCustomIcon(geo_purple_icon),
|
|
4: createCustomIcon(geo_orange_icon),
|
|
5: createCustomIcon(geo_yellow_icon),
|
|
6: createCustomIcon(geo_green_icon),
|
|
};
|
|
|
|
const categoryToPolyline: Record<number, { color: string }> = {
|
|
1: { color: "rgba(230, 68, 82, 0.8)" },
|
|
2: { color: "rgba(198, 152, 224, 0.8)" },
|
|
3: { color: "rgba(135, 40, 157, 0.8)" },
|
|
4: { color: "rgba(247, 181, 84, 0.8)" },
|
|
5: { color: "rgba(254, 211, 99, 0.8)" },
|
|
6: { color: "rgba(158, 221, 128, 0.8)" },
|
|
};
|
|
const position = {
|
|
lat: +location[0].latitude,
|
|
lng: +location[0].longitude,
|
|
};
|
|
|
|
return showMap ? (
|
|
<MapContainer
|
|
center={position}
|
|
zoom={14}
|
|
scrollWheelZoom={false}
|
|
className="report-map"
|
|
>
|
|
<TileLayer
|
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
{location.length === 2 ? (
|
|
<Polyline
|
|
pathOptions={categoryToPolyline[category]}
|
|
positions={[
|
|
[
|
|
parseFloat(location[0].latitude),
|
|
parseFloat(location[0].longitude),
|
|
],
|
|
[
|
|
parseFloat(location[1].latitude),
|
|
parseFloat(location[1].longitude),
|
|
],
|
|
]}
|
|
/>
|
|
) : null}
|
|
{location.map((marker) => (
|
|
<Marker
|
|
key={marker.id}
|
|
icon={icons[category]}
|
|
position={
|
|
[+marker.latitude, +marker.longitude] as LatLngTuple
|
|
}
|
|
>
|
|
<Popup>
|
|
<p>{marker.address}</p>
|
|
</Popup>
|
|
</Marker>
|
|
))}
|
|
</MapContainer>
|
|
) : null;
|
|
};
|
|
|
|
export default ReportMap;
|