fixed zoom out on defocus in mobile device

src/App.tsx

@@ -10,9 +10,27 @@ import { Object3D } from "three";
 import { Spinner } from "./Spinner";
 import globalData from "./assets/global.json";
 
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
 export default function App() {
   const [details, setDetails] = useState<any>(null);
   const [isLoaded, onTextureLoaded] = useState(false);
+  const [cameraOptions, setCameraOptions] = useState({
+    maxDistanceRadiusScale: 100,
+    autoRotateSpeed: 0.1,
+    distanceRadiusScale: 100,
+  });
+
+  const [windowDimensions, setWindowDimensions] = useState(
+    getWindowDimensions()
+  );
+
   function getTooltipContent(marker: Marker) {
     return `Location: ${marker.Country} (Active Cases: ${marker.activeCases})`;
   }
@@ -22,13 +40,22 @@ export default function App() {
     markerObject?: Object3D,
     event?: PointerEvent
   ) {
+    zoomOut();
     setDetails(getTooltipContent(marker));
   }
 
   function onDefocus(previousCoordinates: any, event?: PointerEvent) {
     setDetails(null);
   }
 
+  const zoomOut = () => {
+    setTimeout(() => {
+      if (windowDimensions.width <= 500) {
+        setDetails(null);
+      }
+    }, 2000);
+  };
+
   return (
     <React.Fragment>
       <Spinner loaded={isLoaded} />
@@ -43,12 +70,13 @@ export default function App() {
           onMouseOverMarker={onClickMarker}
           onMouseOutMarker={() => setDetails(null)}
           cameraOptions={{
-            maxDistanceRadiusScale: 10,
-            autoRotateSpeed: 1.1,
-            distanceRadiusScale: 10,
+            maxDistanceRadiusScale: 100,
+            autoRotateSpeed: 0.1,
+            distanceRadiusScale: 100,
           }}
           focusOptions={{
-            distanceRadiusScale: 5,
+            distanceRadiusScale: 30,
+            enableDefocus: true,
           }}
           globeOptions={{
             texture: worldTexture,

src/assets/global.json

@@ -1,3 +1,3 @@
 {
-  "totalCount": 1000000
+  "totalCount": 2406984
 }

src/styles.css

@@ -4,9 +4,9 @@ body {
 }
 .globe {
   font-family: sans-serif;
-  height: 80vh;
   position: relative;
   z-index: 0;
+  height: 80vh;
 }
 .header1 {
   font-family: sans-serif;