draft 1

draft 2

draft 3

draft 4

draft 5

draft 6

DBC22-6776: fixed broken test cases

removed commented out code

DBC22-6776: switch to fixed pixels to cluster icons

DBC22-6776: removed variables not used

DBC22-6776: updated grouped icons styling

DBC22-6776: updated grouped icon text color

Author: bcgov-brwang

src/frontend/src/Components/data/featureStyleDefinitions.js

@@ -7,6 +7,9 @@ import cameraIconHover from '../../images/mapIcons/camera-hover.png';
 import cameraIconStatic from '../../images/mapIcons/camera-static.png';
 import cameraIconHoverUnread from '../../images/mapIcons/camera-hover-unread.png';
 import cameraIconStaticUnread from '../../images/mapIcons/camera-static-unread.png';
+import cameraGroupedIconActive from '../../images/mapIcons/camera-grouped-active.png';
+import cameraGroupedIconHover from '../../images/mapIcons/camera-grouped-hover.png';
+import cameraGroupedIconStatic from '../../images/mapIcons/camera-grouped-static.png';
 
 // Ferries
 import ferryIconActive from '../../images/mapIcons/ferry-active.png';
@@ -209,6 +212,28 @@ export const cameraStyles = {
   }),
 };
 
+// Camera icon styles
+export const cameraGroupedStyles = {
+  static: new Style({
+    image: new Icon({
+      scale: 0.25,
+      src: cameraGroupedIconStatic,
+    }),
+  }),
+  hover: new Style({
+    image: new Icon({
+      scale: 0.25,
+      src: cameraGroupedIconHover,
+    }),
+  }),
+  active: new Style({
+    image: new Icon({
+      scale: 0.25,
+      src: cameraGroupedIconActive,
+    }),
+  }),
+};
+
 export const unreadCameraStyles = {
   static: new Style({
     image: new Icon({

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

@@ -257,6 +257,7 @@ const camClickHandler = (
   feature.setCameraStyle('active');
   feature.set('clicked', true, true);
   feature.set('unread', false);
+  feature.set('hovered', false);
 
   if (isCamDetail) {
     // Do not auto center on feature on cam details page
@@ -580,8 +581,14 @@ export const pointerClickHandler = (
   mapContext
 ) => {
   if (features.length) {
-    const clickedFeature = features[0];
-    switch (clickedFeature.getProperties()['type']) {
+    let clickedFeature = features[0];
+
+    if (!clickedFeature.get('type')) {
+      clickedFeature = features[0].values_?.features[0];
+    }
+
+
+    switch (clickedFeature?.getProperties()['type']) {
       case 'camera':
         trackEvent(
           'click',

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

@@ -30,9 +30,22 @@ export const resetHoveredStates = (targetFeature, hoveredFeatureRef) => {
 
   // Reset feature if target isn't clicked
   if (hoveredFeature && targetFeature != hoveredFeature) {
+
+    const clusterFeatures = hoveredFeature.get('features');
+    if (clusterFeatures && clusterFeatures.length > 1) {
+      clusterFeatures.forEach((f) => {
+        if (!f.get('clicked')) {
+          f.set('hovered', false);
+        }
+      });
+    } else
+
+
+
     if (!hoveredFeature.getProperties().clicked) {
       switch (hoveredFeature.getProperties()['type']) {
         case 'camera':
+          hoveredFeature.set('hovered', false);
           hoveredFeature.setCameraStyle('static');
           break;
         case 'event': {
@@ -148,15 +161,34 @@ export const pointerMoveHandler = (e, mapRef, hoveredFeature) => {
   });
 
   if (features.length) {
-    const targetFeature = features[0];
-    resetHoveredStates(targetFeature, hoveredFeature);
-    hoveredFeature.current = targetFeature;
+    let targetFeature = features[0];
+    let clusterFeatures = targetFeature?.get('features');
+    if(targetFeature && !targetFeature.get('type')) {
 
-    // Set hover style if feature isn't clicked
-    switch (targetFeature.getProperties()['type']) {
+      if (clusterFeatures && clusterFeatures.length === 1) {
+          targetFeature = clusterFeatures[0];
+          clusterFeatures = null;
+      }
+    }
+
+    const realFeature = targetFeature;
+    resetHoveredStates(realFeature, hoveredFeature);
+    hoveredFeature.current = realFeature;
+
+    if (clusterFeatures && clusterFeatures.length > 1) {
+      clusterFeatures.forEach((f) => {
+        if (!f.get('clicked')) {
+          f.set('hovered', true);
+        }
+      });
+      return;
+    }
+
+    switch (realFeature?.get('type')) {
       case 'camera':
-        if (!targetFeature.get('clicked')) {
-          targetFeature.setCameraStyle('hover');
+        if (!realFeature.get('clicked')) {
+          realFeature.setCameraStyle('hover');
+          realFeature.set('hovered', true);
         }
         return;
       case 'event':

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

@@ -1,14 +1,16 @@
 // OpenLayers
 import { Point } from 'ol/geom';
-import { Style } from 'ol/style';
+import {Style, Fill, Text, Icon} from 'ol/style';
 import * as ol from 'ol';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
+import Cluster from 'ol/source/Cluster.js';
+// import CircleStyle from 'ol/style/Circle.js';
 
 // Styling
-import { cameraStyles, unreadCameraStyles } from '../../data/featureStyleDefinitions.js';
+import { cameraStyles, cameraGroupedStyles, unreadCameraStyles } from '../../data/featureStyleDefinitions.js';
 
-export function getCamerasLayer(cameras, projectionCode, mapContext, referenceData, updateReferenceFeature, setLoadingLayers) {
+export function getCamerasLayer(cameras, projectionCode, mapContext, referenceData, updateReferenceFeature, setLoadingLayers, pixelDistance) {
   const vectorSource = new VectorSource();
 
   cameras.forEach(camera => {
@@ -47,12 +49,68 @@ export function getCamerasLayer(cameras, projectionCode, mapContext, referenceDa
     }
   });
 
-  return new VectorLayer({
+  const clusterSource = new Cluster({
+    distance: pixelDistance,
+    source: vectorSource,
+  });
+
+  const styleCache = {};
+
+  const layer = new VectorLayer({
     classname: 'webcams',
     visible: mapContext.visible_layers.highwayCams,
-    source: vectorSource,
-    style: () => null
+    source: clusterSource,
+
+    style: function (feature) {
+      const features = feature.get('features');
+      const size = features.length;
+
+      // single camera
+      if (size === 1) {
+        const cam = features[0];
+        if (cam.get('clicked')) return cameraStyles.active;
+        if (cam.get('hovered')) return cameraStyles.hover;
+        return cameraStyles.static;
+      }
+
+      const cam = features[0];
+      let state = 'static';
+      if (cam.get('clicked')) {
+        state = 'active';
+      } else if (cam.get('hovered')) {
+        state = 'hover';
+      }
+
+      const cacheKey = `${state}_${size}`;
+      let style = styleCache[cacheKey];
+
+      if (!style) {
+        const textColor = state === 'static' ? '#255A90' : '#fff';
+
+        style = new Style({
+          image: new Icon({
+            scale: 0.25,
+            src: cameraGroupedStyles[state].getImage().getSrc(),
+          }),
+          text: new Text({
+            text: String(size),
+            font: 'bold 12px sans-serif',
+            fill: new Fill({ color: textColor }),
+            offsetX: 2,
+            offsetY: 1,
+            textAlign: 'left',
+          }),
+        });
+        styleCache[cacheKey] = style;
+      }
+
+      return style;
+    },
   });
+
+  layer.getClusterSource = () => clusterSource;
+
+  return layer;
 }
 
 export function updateCamerasLayer(cameras, layer, setLoadingLayers) {
@@ -62,7 +120,11 @@ export function updateCamerasLayer(cameras, layer, setLoadingLayers) {
   }, {});
 
   for (const feature of layer.getSource().getFeatures()) {
-    const camera = camerasLookup[feature.getId()];
+    let camera = camerasLookup[feature.getId()];
+    if (!camera) {
+      camera = camerasLookup[feature.values_.features[0].getId()];
+    }
+    
 
     if (!camera) {  // camera no longer in list from API
       feature.setStyle(new Style(null));
@@ -76,12 +138,16 @@ export function updateCamerasLayer(cameras, layer, setLoadingLayers) {
     feature.setProperties(camera); // update feature with latest API data.
 
     if (feature.get('clicked')) { continue; }
-
-    feature.setCameraStyle('static');
+    try {
+      feature.setCameraStyle('static');
+    }
+    catch {
+      feature.values_.features[0].setCameraStyle('static');
+    }
   }
 
   setLoadingLayers(prevState => ({
     ...prevState,
     cameras: false
   }));
-}
+}

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

@@ -47,6 +47,7 @@ export const loadLayer = (mapLayers, mapRef, mapContext, key, dataList, filtered
     mapRef.current.removeLayer(mapLayers.current[key]);
   }
 
+
   if (dataList) {
     if (!mapLayers.current[key] || key == 'routeLayer') {
       // Generate and add layer if it doesn't exist
@@ -56,7 +57,8 @@ export const loadLayer = (mapLayers, mapRef, mapContext, key, dataList, filtered
         mapContext,
         referenceData,
         updateReferenceFeature,
-        setLoadingLayers
+        setLoadingLayers,
+        50
       );
 
       mapRef.current.addLayer(mapLayers.current[key]);
@@ -70,6 +72,8 @@ export const loadLayer = (mapLayers, mapRef, mapContext, key, dataList, filtered
   }
 }
 
+
+
 export const enableReferencedLayer = (referenceData, mapContext) => {
   // Do nothing if no reference data
   if (!referenceData) return;