update viewers page

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 (
     <div className="p-5">
@@ -2551,7 +2539,7 @@ function LocationSignalMap({ countries, locations }) {
 
       {!countries.length && !locations.length ? (
         <p className="mt-4 text-sm text-text-soft">
-          No country or timezone location signals have been shared yet.
+          No Cloudflare location signals have been shared yet.
         </p>
       ) : null}
     </div>