From 7606e9709b4af7549163a9873131f5395d43431f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 16 Jan 2026 20:19:38 +0100
Subject: [PATCH] feat: update default view to map and adjust map
 zoom/projection

---
 components/dashboard/Countries.tsx |  2 +-
 components/dashboard/WorldMap.tsx  | 70 +++++++++++++++---------------
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/components/dashboard/Countries.tsx b/components/dashboard/Countries.tsx
index 7fa7ffc..d416820 100644
--- a/components/dashboard/Countries.tsx
+++ b/components/dashboard/Countries.tsx
@@ -13,7 +13,7 @@ interface LocationProps {
 type Tab = 'map' | 'countries' | 'cities'
 
 export default function Locations({ countries, cities }: LocationProps) {
-  const [activeTab, setActiveTab] = useState<Tab>('countries')
+  const [activeTab, setActiveTab] = useState<Tab>('map')
 
   const getFlagComponent = (countryCode: string) => {
     if (!countryCode || countryCode === 'Unknown') return null
diff --git a/components/dashboard/WorldMap.tsx b/components/dashboard/WorldMap.tsx
index d28624d..5e37fca 100644
--- a/components/dashboard/WorldMap.tsx
+++ b/components/dashboard/WorldMap.tsx
@@ -45,43 +45,45 @@ const WorldMap = ({ data }: WorldMapProps) => {
   
   return (
     <div className="relative w-full h-[300px] bg-neutral-50 dark:bg-neutral-900/50 rounded-lg overflow-hidden border border-neutral-100 dark:border-neutral-800">
-      <ComposableMap projectionConfig={{ rotate: [-10, 0, 0], scale: 147 }}>
-        <ZoomableGroup>
+      <ComposableMap projectionConfig={{ rotate: [-10, 0, 0], scale: 160, center: [0, 15] }}>
+        <ZoomableGroup maxZoom={1}>
           <Geographies geography={geoUrl}>
             {({ geographies }) =>
-              geographies.map((geo) => {
-                // Ensure ID is padded to 3 digits as standard ISO numeric
-                const id = String(geo.id).padStart(3, '0')
-                const count = processedData.map.get(id) || 0
+              geographies
+                .filter(geo => geo.id !== "010") // Remove Antarctica
+                .map((geo) => {
+                  // Ensure ID is padded to 3 digits as standard ISO numeric
+                  const id = String(geo.id).padStart(3, '0')
+                  const count = processedData.map.get(id) || 0
                 
-                return (
-                  <Geography
-                    key={geo.rsmKey}
-                    geography={geo}
-                    fill={count > 0 ? colorScale(count) : defaultFill}
-                    stroke={defaultStroke}
-                    strokeWidth={0.5}
-                    style={{
-                      default: { outline: "none", transition: "all 250ms" },
-                      hover: { fill: "#FD5E0F", outline: "none", cursor: 'pointer' },
-                      pressed: { outline: "none" },
-                    }}
-                    onMouseEnter={(evt) => {
-                       const { name } = geo.properties
-                       setTooltipContent({
-                         content: `${name}: ${count} visitors`,
-                         x: evt.clientX,
-                         y: evt.clientY
-                       })
-                    }}
-                    onMouseLeave={() => {
-                      setTooltipContent(null)
-                    }}
-                    onMouseMove={(evt) => {
-                       setTooltipContent(prev => prev ? { ...prev, x: evt.clientX, y: evt.clientY } : null)
-                    }}
-                  />
-                )
+                  return (
+                    <Geography
+                      key={geo.rsmKey}
+                      geography={geo}
+                      fill={count > 0 ? colorScale(count) : defaultFill}
+                      stroke={defaultStroke}
+                      strokeWidth={0.5}
+                      style={{
+                        default: { outline: "none", transition: "all 250ms" },
+                        hover: { fill: "#FD5E0F", outline: "none", cursor: 'pointer' },
+                        pressed: { outline: "none" },
+                      }}
+                      onMouseEnter={(evt) => {
+                         const { name } = geo.properties
+                         setTooltipContent({
+                           content: `${name}: ${count} visitors`,
+                           x: evt.clientX,
+                           y: evt.clientY
+                         })
+                      }}
+                      onMouseLeave={() => {
+                        setTooltipContent(null)
+                      }}
+                      onMouseMove={(evt) => {
+                         setTooltipContent(prev => prev ? { ...prev, x: evt.clientX, y: evt.clientY } : null)
+                      }}
+                    />
+                  )
               })
             }
           </Geographies>