83 lines
3.6 KiB
TypeScript
83 lines
3.6 KiB
TypeScript
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
|
|
import L from "leaflet";
|
|
import "leaflet/dist/leaflet.css";
|
|
import type { Plext } from "../types";
|
|
|
|
// Fix Leaflet marker icons
|
|
delete (L.Icon.Default.prototype as any)._getIconUrl;
|
|
L.Icon.Default.mergeOptions({
|
|
iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
|
|
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",
|
|
});
|
|
|
|
interface PlayerMapProps {
|
|
plexts: Plext[];
|
|
}
|
|
|
|
export function PlayerMap({ plexts }: PlayerMapProps) {
|
|
// Get player locations from plexts
|
|
const playerLocations = plexts
|
|
.map((plext) => {
|
|
const player = plext.markup.find((item) => item.type === "PLAYER");
|
|
if (player && player.plain && plext.coordinates && plext.coordinates.coordinates) {
|
|
return {
|
|
name: player.plain,
|
|
team: player.team || "NEUTRAL",
|
|
coordinates: [plext.coordinates.coordinates[1], plext.coordinates.coordinates[0]] as [number, number], // [lat, lon]
|
|
eventType: plext.event_type,
|
|
timestamp: plext.timestamp,
|
|
};
|
|
}
|
|
return null;
|
|
})
|
|
.filter(Boolean);
|
|
|
|
return (
|
|
<div className="map-container" style={{ height: "600px", width: "100%" }}>
|
|
<MapContainer
|
|
center={[45.57, 12.36]} // Default to Veneto region
|
|
zoom={12}
|
|
style={{ height: "100%", width: "100%" }}
|
|
scrollWheelZoom={true}
|
|
>
|
|
<TileLayer
|
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
{playerLocations.map((location, index) => {
|
|
if (!location) return null;
|
|
|
|
const markerColor = location.team === "RESISTANCE" ? "blue" : "green";
|
|
|
|
return (
|
|
<Marker
|
|
key={index}
|
|
position={location.coordinates}
|
|
icon={new L.Icon({
|
|
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${markerColor}.png`,
|
|
shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
shadowSize: [41, 41],
|
|
})}
|
|
>
|
|
<Popup>
|
|
<div className="marker-popup">
|
|
<h4 style={{ color: location.team === "RESISTANCE" ? "#0066ff" : "#00cc00" }}>
|
|
{location.name}
|
|
</h4>
|
|
<p><strong>Team:</strong> {location.team}</p>
|
|
<p><strong>Event:</strong> {location.eventType}</p>
|
|
<p><strong>Time:</strong> {new Date(location.timestamp).toLocaleString()}</p>
|
|
</div>
|
|
</Popup>
|
|
</Marker>
|
|
);
|
|
})}
|
|
</MapContainer>
|
|
</div>
|
|
);
|
|
}
|