"use client";
// Types
import { TournamentDataProps } from "@/types";
import { LatLngLiteral } from "leaflet";
// Leaflet + icon fixes
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import L from "leaflet";
import "leaflet-defaulticon-compatibility";
import { MapContainer, TileLayer, LayersControl, useMap } from "react-leaflet";
import { createLayerGroups } from "@/utils/layerGroups";
import { useEffect } from "react";
export default function TournamentMap({ tournamentData }: TournamentDataProps) {
const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
const classicalMarkers = createLayerGroups("Cadence Lente", "green", {
tournamentData,
});
const rapidMarkers = createLayerGroups("Rapide", "blue", { tournamentData });
const blitzMarkers = createLayerGroups("Blitz", "yellow", { tournamentData });
const otherMarkers = createLayerGroups("1h KO", "red", { tournamentData });
// TODO move into its own hook
function Legend() {
const map = useMap();
useEffect(() => {
if (map) {
const legend = L.control({ position: "bottomleft" });
legend.onAdd = () => {
const div = L.DomUtil.create("div", "map-legend");
div.style =
"background: white; color: black; border: 2px solid grey; border-radius: 6px; padding: 10px;";
div.innerHTML = `
- Cadence Lente
- Rapide
- Blitz
- 1h KO
`;
return div;
};
legend.addTo(map);
}
}, [map]);
return null;
}
return (
{classicalMarkers}
{rapidMarkers}
{blitzMarkers}
{otherMarkers}
);
}