DBC22-6776: single click on group icon takes user to next zoom level

Author: bcgov-brwang

src/frontend/src/Components/map/handlers/click.js

@@ -1,5 +1,6 @@
 // External imports
 import { fromLonLat } from "ol/proj";
+import { boundingExtent } from 'ol/extent';
 
 // Internal imports
 import { isRestStopClosed } from '../../data/restStops.js';
@@ -582,6 +583,28 @@ export const pointerClickHandler = (
   if (features.length) {
     let clickedFeature = features[0];
 
+    const clusterFeatures = clickedFeature.get('features');
+
+    if (clusterFeatures) {
+      if (clusterFeatures.length > 1) {
+        clusterFeatures.forEach(feature => {
+          feature.set('hovered', false);
+          feature.set('clicked', false);
+          feature.setCameraStyle('static');
+        });
+        
+        mapView.current.animate({
+          center: clickedFeature.getGeometry().getCoordinates(),
+          zoom: mapView.current.getZoom() + 1,
+          duration: 300,
+        });
+
+        return;
+      }
+
+      clickedFeature = clusterFeatures[0];
+    }
+
     if (!clickedFeature.get('type')) {
       clickedFeature = features[0].values_?.features[0];
     }

src/frontend/src/Components/map/layers/camerasLayer.js

@@ -96,9 +96,10 @@ export function getCamerasLayer(cameras, projectionCode, mapContext, referenceDa
             text: String(size),
             font: 'bold 12px BC Sans',
             fill: new Fill({ color: textColor }),
-            offsetX: 2,
+            textAlign: 'center',
+            textBaseline: 'middle',
+            offsetX: 4,
             offsetY: 1,
-            textAlign: 'left',
           }),
         });
         styleCache[cacheKey] = style;