118 lines
3.3 KiB
TypeScript
118 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import L from "leaflet";
|
|
import { MapContainer, TileLayer, Marker, Popup, ZoomControl } from "react-leaflet";
|
|
|
|
// Import leaflet CSS
|
|
import "leaflet/dist/leaflet.css";
|
|
|
|
// Add declaration for Leaflet's Icon.Default
|
|
declare module 'leaflet' {
|
|
namespace Icon {
|
|
interface Default {
|
|
_getIconUrl?: string;
|
|
}
|
|
}
|
|
}
|
|
|
|
interface CountryData {
|
|
name: string;
|
|
count: number;
|
|
position: [number, number]; // latitude, longitude
|
|
}
|
|
|
|
interface MapComponentProps {
|
|
countries: CountryData[];
|
|
onCountrySelect: (country: string) => void;
|
|
selectedCountry: string | null;
|
|
}
|
|
|
|
// Fix Leaflet default icon path issues
|
|
function fixLeafletIcons() {
|
|
// Delete to prevent duplicate icon definitions
|
|
delete L.Icon.Default.prototype._getIconUrl;
|
|
|
|
// Set paths to the images
|
|
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",
|
|
});
|
|
}
|
|
|
|
export function MapComponent({ countries, onCountrySelect, selectedCountry }: MapComponentProps) {
|
|
const [isClient, setIsClient] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Fix Leaflet icons on client side
|
|
fixLeafletIcons();
|
|
setIsClient(true);
|
|
}, []);
|
|
|
|
// Get custom icon based on count
|
|
const getMarkerIcon = (count: number, isSelected: boolean) => {
|
|
const size = Math.min(Math.max(20, count * 5), 40);
|
|
|
|
return L.divIcon({
|
|
html: `<div style="
|
|
background-color: ${isSelected ? '#3b82f6' : '#ef4444'};
|
|
color: white;
|
|
border-radius: 50%;
|
|
width: ${size}px;
|
|
height: ${size}px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: ${size > 30 ? 14 : 12}px;
|
|
box-shadow: 0 0 0 2px white;
|
|
">${count}</div>`,
|
|
className: '',
|
|
iconSize: [size, size],
|
|
iconAnchor: [size/2, size/2]
|
|
});
|
|
};
|
|
|
|
if (!isClient) {
|
|
return (
|
|
<div className="w-full h-full bg-gray-100 flex items-center justify-center">
|
|
<p className="text-gray-500">Loading map...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<MapContainer
|
|
center={[20, 0]} // Center of the world
|
|
zoom={2}
|
|
style={{ height: '100%', width: '100%' }}
|
|
zoomControl={false}
|
|
key="world-map" // Static key to help with React identity
|
|
>
|
|
<TileLayer
|
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
<ZoomControl position="bottomright" />
|
|
|
|
{countries.map((country) => (
|
|
<Marker
|
|
key={country.name}
|
|
position={country.position}
|
|
icon={getMarkerIcon(country.count, country.name === selectedCountry)}
|
|
eventHandlers={{
|
|
click: () => onCountrySelect(country.name)
|
|
}}
|
|
>
|
|
<Popup>
|
|
<div className="text-center">
|
|
<strong>{country.name}</strong>
|
|
<div>{country.count} news articles</div>
|
|
</div>
|
|
</Popup>
|
|
</Marker>
|
|
))}
|
|
</MapContainer>
|
|
);
|
|
}
|