Fix/zoom feature

src/@/country/effects/tests/zoomToCountryFx.test.ts

@@ -9,6 +9,7 @@ describe('zoomToCountryFx', () => {
     map = {
       flyTo: jest.fn(),
       fitBounds: jest.fn(),
+      getZoom: jest.fn(),
     }
   })
 
@@ -19,14 +20,27 @@ describe('zoomToCountryFx', () => {
 
   test('should zoom to school focus when provided', async () => {
     const schoolFocusLatLng = [10, 20]
+    map.getZoom.mockReturnValue(7)
     const result = await zoomToCountryFx({ map, schoolFocusLatLng, levelsCode: ['US'] } as any)
     expect(map.flyTo).toHaveBeenCalledWith({
       center: schoolFocusLatLng,
       zoom: 10,
+      offset: [0, -180],
     })
     expect(result).toBe(schoolFocusLatLng.toString())
   })
 
+  test('should keep current zoom when already above school focus zoom', async () => {
+    const schoolFocusLatLng = [10, 20]
+    map.getZoom.mockReturnValue(13)
+    await zoomToCountryFx({ map, schoolFocusLatLng, levelsCode: ['US'] } as any)
+    expect(map.flyTo).toHaveBeenCalledWith({
+      center: schoolFocusLatLng,
+      zoom: 13,
+      offset: [0, -180],
+    })
+  })
+
   test('should return zoomedCountryCode when it matches adminCode', async () => {
     const zoomedCountryCode = 'US'
     const result = await zoomToCountryFx({ map, zoomedCountryCode, levelsCode: ['US'] } as any)

src/@/country/effects/zoom-to-country-fx.ts

@@ -21,9 +21,10 @@ export const zoomToCountryFx = createEffect(
 
     // check for school center;
     if (schoolFocusLatLng) {
+      const currentZoom = map.getZoom?.() ?? defaultZoom;
       map.flyTo({
         center: schoolFocusLatLng as LngLatLike,
-        zoom: 10,
+        zoom: Math.max(10, currentZoom),
         offset: [0, -180]
       });
       return schoolFocusLatLng.toString();

src/@/map/effects/add-layers-utils.ts

@@ -77,7 +77,10 @@ export const createAndUpdateMapLayer = ({ map, mapRoute, connectivitySpeedFilter
   // create selected layer;
   if (isSourceAvailable && selectedLayerId) {
     if (isLive) {
+      cancelAnimationFrame(animateCircleHandler.requestId);
       animateCircleHandler = animateCircles({ map, id: getMapId(selectedLayerId) });
+    } else {
+      cancelAnimationFrame(animateCircleHandler.requestId);
     }
     createSelectedLayer(map, {
       id: getMapId(selectedLayerId),

src/@/map/effects/tests/time-player.fx.test.ts

@@ -121,7 +121,10 @@ describe('timePlayerFx', () => {
           4, 4,
           5, 5,
           8, 10,
-          10, 12
+          10, 12,
+          14, 18,
+          18, 26,
+          24, 36
         ],
       }
     });

src/@/map/map.constant.ts

@@ -199,7 +199,10 @@ export const mapPaintData = {
       4, 1.5,
       5, 2,
       8, 3,
-      10, 4
+      10, 4,
+      14, 7,
+      18, 11,
+      24, 18
     ],
     "circle-color": [
       "match",
@@ -217,7 +220,10 @@ export const mapPaintData = {
       4, 1.975,
       5, 2.66,
       8, 4,
-      10, 5.32
+      10, 5.32,
+      14, 8.5,
+      18, 13,
+      24, 20
     ],
     "circle-color": [
       "match",
@@ -234,7 +240,10 @@ export const mapPaintData = {
       4, 4,
       5, 5,
       8, 10,
-      10, 12
+      10, 12,
+      14, 18,
+      18, 26,
+      24, 36
     ],
     "circle-color": [
       'case',
@@ -250,7 +259,10 @@ export const mapPaintData = {
       4, 1,
       5, 1.5,
       8, 6,
-      10, 8
+      10, 8,
+      14, 12,
+      18, 18,
+      24, 26
     ],
   }
 }
@@ -283,7 +295,8 @@ export const animateCircleConfig = {
   startRadiusPortion: 2,
   maxRadius: 12,
   opacityMax: 1,
-  opacityMin: 0.2,
+  // Keep pulse visible without revealing underlying unknown (blue) dots.
+  opacityMin: 0.65,
   zoomDivisible: []
 }
 
@@ -306,7 +319,10 @@ export const CountryPaintData = {
         4, 1,
         6, 1.4,
         8, 1.8,
-        10, 4
+        10, 4,
+        14, 6.5,
+        18, 9.5,
+        24, 15
       ]
     },
     coverage: {
@@ -317,7 +333,10 @@ export const CountryPaintData = {
         4, 1.275,
         5, 1.66,
         8, 4,
-        10, 5.32
+        10, 5.32,
+        14, 8.2,
+        18, 12,
+        24, 18
       ]
     },
     connectivity: {
@@ -327,7 +346,10 @@ export const CountryPaintData = {
         2, 0.85,
         4, 1.275,
         8, 4,
-        10, 5.32
+        10, 5.32,
+        14, 8.2,
+        18, 12,
+        24, 18
       ],
     },
     animatedCircle: {

src/@/map/utils.ts

@@ -112,7 +112,10 @@ export function animateCircles({ map, id: layer }: { map: Map; id: string }) {
   const getMaxRadius = setCurrentRadius();
   function animateFrame(time: number) {
     if (!map.getLayer(layer)) {
-      return; // reset value if require;
+      // During zoom/source refresh, the layer can be recreated briefly.
+      // Keep the loop alive so pulsing resumes as soon as the layer exists again.
+      animationFrameData.requestId = requestAnimationFrame(animateFrame);
+      return;
     }
     const zoom = Number(map.getZoom().toFixed(1));
     const [startRadius, maxRadius] = getMaxRadius(zoom);