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

Author: bcgov-brwang

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

@@ -33,6 +33,7 @@ export const resetHoveredStates = (targetFeature, hoveredFeatureRef) => {
     if (!hoveredFeature.getProperties().clicked) {
       switch (hoveredFeature.getProperties()['type']) {
         case 'camera':
+          hoveredFeature.set('hovered', false);
           hoveredFeature.setCameraStyle('static');
           break;
         case 'event': {
@@ -148,15 +149,25 @@ export const pointerMoveHandler = (e, mapRef, hoveredFeature) => {
   });
 
   if (features.length) {
-    const targetFeature = features[0];
-    resetHoveredStates(targetFeature, hoveredFeature);
-    hoveredFeature.current = targetFeature;
+    let targetFeature = features[0];
+    if(targetFeature && !targetFeature.get('type')) {
+      // targetFeature = features[0].values_?.features[0];
+      const clusterFeatures = targetFeature.get('features');
 
-    // Set hover style if feature isn't clicked
-    switch (targetFeature.getProperties()['type']) {
+      if (clusterFeatures && clusterFeatures.length === 1) {
+          targetFeature = clusterFeatures[0];
+      }
+    }
+
+    const realFeature = targetFeature;
+    resetHoveredStates(realFeature, hoveredFeature);
+    hoveredFeature.current = realFeature;
+
+    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, Stroke, Text} 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';
 
-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,63 @@ 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;
+        }
+        else {
+          return cameraStyles.static;
+        }
+      }
+
+      // cluster
+      let style = styleCache[size];
+
+      if (!style) {
+        style = new Style({
+          image: new CircleStyle({
+            radius: 10,
+            stroke: new Stroke({ color: '#fff' }),
+            fill: new Fill({ color: '#3399CC' }),
+          }),
+          text: new Text({
+            text: String(size),
+            fill: new Fill({ color: '#fff' }),
+          }),
+        });
+
+        styleCache[size] = style;
+      }
+
+      return style;
+    },
   });
+
+  layer.getClusterSource = () => clusterSource;
+
+  return layer;
 }
 
 export function updateCamerasLayer(cameras, layer, setLoadingLayers) {
@@ -62,7 +115,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 +133,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,8 @@ export const loadLayer = (mapLayers, mapRef, mapContext, key, dataList, filtered
     mapRef.current.removeLayer(mapLayers.current[key]);
   }
 
+  const view = mapRef.current.getView();
+
   if (dataList) {
     if (!mapLayers.current[key] || key == 'routeLayer') {
       // Generate and add layer if it doesn't exist
@@ -56,7 +58,8 @@ export const loadLayer = (mapLayers, mapRef, mapContext, key, dataList, filtered
         mapContext,
         referenceData,
         updateReferenceFeature,
-        setLoadingLayers
+        setLoadingLayers,
+        50
       );
 
       mapRef.current.addLayer(mapLayers.current[key]);
@@ -70,6 +73,8 @@ export const loadLayer = (mapLayers, mapRef, mapContext, key, dataList, filtered
   }
 }
 
+
+
 export const enableReferencedLayer = (referenceData, mapContext) => {
   // Do nothing if no reference data
   if (!referenceData) return;