diff --git a/src/App.jsx b/src/App.jsx index 1254b6d..c29e1f4 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2037,32 +2037,6 @@ const countryNames = { ZA: 'South Africa', } -const countryMapPoints = { - AR: [-64, -34], - AU: [134, -25], - BR: [-51, -10], - CA: [-106, 56], - CL: [-71, -30], - CN: [104, 35], - DE: [10, 51], - ES: [-4, 40], - FR: [2, 46], - GB: [-2, 54], - ID: [118, -2], - IN: [78, 22], - IT: [12, 43], - JP: [138, 37], - KR: [128, 36], - MX: [-102, 23], - NL: [5, 52], - PL: [19, 52], - RU: [90, 60], - SE: [15, 62], - SG: [104, 1], - US: [-98, 39], - ZA: [24, -29], -} - function filledLast30Days(rows) { const byDate = new Map(rows.map((row) => [row.date, row])) return Array.from({ length: 30 }, (_, index) => { @@ -2431,35 +2405,50 @@ function LocationSignalMap({ countries, locations }) { const mapRef = useRef(null) const markersRef = useRef(null) const maxCountryVisitors = Math.max(1, ...countries.map((country) => Number(country.visitors || 0))) - const maxLocationVisitors = Math.max(1, ...locations.map((location) => Number(location.visitors || 0))) - const fallbackLocations = locations.filter((location) => !location.country) const countryMarkers = countries .map((country) => { - const coordinates = countryMapPoints[country.country] - if (!coordinates) return null + const lat = Number(country.latitude) + const lon = Number(country.longitude) + if (!Number.isFinite(lat) || !Number.isFinite(lon)) return null return { ...country, - lat: coordinates[1], - lon: coordinates[0], + lat, + lon, label: countryNames[country.country] || country.country, } }) .filter(Boolean) - const topLocations = countries.length - ? countries.slice(0, 8).map((country) => ({ + const cityMarkers = locations + .map((location) => { + const lat = Number(location.latitude) + const lon = Number(location.longitude) + if (!Number.isFinite(lat) || !Number.isFinite(lon)) return null + const place = [location.city, location.region, countryNames[location.country] || location.country] + .filter(Boolean) + .join(', ') + return { + ...location, + lat, + lon, + label: place || location.country || location.timezone || 'Unknown location', + } + }) + .filter(Boolean) + const topLocations = cityMarkers.length + ? cityMarkers.slice(0, 8).map((location) => ({ + key: `${location.country}-${location.region}-${location.city}-${location.lat}-${location.lon}`, + label: location.label, + detail: 'Cloudflare edge location', + visitors: location.visitors, + events: location.events, + })) + : countries.slice(0, 8).map((country) => ({ key: country.country, label: countryNames[country.country] || country.country, detail: 'country signal', visitors: country.visitors, events: country.events, })) - : locations.slice(0, 8).map((location) => ({ - key: `${location.timezone}-${location.language}`, - label: location.timezone, - detail: location.language || 'unknown language', - visitors: location.visitors, - events: location.events, - })) useEffect(() => { if (!mapRef.current || markersRef.current) return undefined @@ -2512,10 +2501,9 @@ function LocationSignalMap({ countries, locations }) { .addTo(layer) }) - fallbackLocations.forEach((location) => { - const [lat, lon] = timezonePoint(location.timezone) - const radius = 7 + (Number(location.visitors || 0) / maxLocationVisitors) * 16 - L.circleMarker([lat, lon], { + cityMarkers.forEach((location) => { + const radius = 7 + (Number(location.visitors || 0) / maxCountryVisitors) * 16 + L.circleMarker([location.lat, location.lon], { color: '#000000', fillColor: '#000000', fillOpacity: 0.4, @@ -2523,13 +2511,13 @@ function LocationSignalMap({ countries, locations }) { radius, stroke: false, }) - .bindTooltip(`${location.timezone}: ${formatNumber(location.visitors)} visitors`, { + .bindTooltip(`${location.label}: ${formatNumber(location.visitors)} visitors`, { direction: 'top', opacity: 0.95, }) .addTo(layer) }) - }, [countryMarkers, fallbackLocations, maxCountryVisitors, maxLocationVisitors]) + }, [cityMarkers, countryMarkers, maxCountryVisitors]) return (
@@ -2551,7 +2539,7 @@ function LocationSignalMap({ countries, locations }) { {!countries.length && !locations.length ? (

- No country or timezone location signals have been shared yet. + No Cloudflare location signals have been shared yet.

) : null}