54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { MapContainer, TileLayer, Polyline, Marker } from "react-leaflet";
|
|
import "leaflet/dist/leaflet.css";
|
|
import L from "leaflet";
|
|
|
|
interface PortRouteMapProps {
|
|
portA: { lat: number; lng: number };
|
|
portB: { lat: number; lng: number };
|
|
height?: string;
|
|
}
|
|
|
|
// Fix Leaflet marker icons
|
|
const DefaultIcon = L.icon({
|
|
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",
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
});
|
|
L.Marker.prototype.options.icon = DefaultIcon;
|
|
|
|
export default function PortRouteMap({ portA, portB, height = "500px" }: PortRouteMapProps) {
|
|
const center = {
|
|
lat: (portA.lat + portB.lat) / 2,
|
|
lng: (portA.lng + portB.lng) / 2,
|
|
};
|
|
|
|
const positions: [number, number][] = [
|
|
[portA.lat, portA.lng],
|
|
[portB.lat, portB.lng],
|
|
];
|
|
|
|
return (
|
|
<div style={{ height }}>
|
|
<MapContainer
|
|
center={[center.lat, center.lng]}
|
|
zoom={4}
|
|
style={{ height: "100%", width: "100%" }}
|
|
scrollWheelZoom={false}
|
|
>
|
|
<TileLayer
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
/>
|
|
|
|
<Marker position={[portA.lat, portA.lng]} />
|
|
<Marker position={[portB.lat, portB.lng]} />
|
|
|
|
<Polyline positions={positions} pathOptions={{ color: "#2563eb", weight: 3, opacity: 0.7 }} />
|
|
</MapContainer>
|
|
</div>
|
|
);
|
|
}
|