draft 1

draft 2

draft 3

draft 4

draft 5

draft 6

DBC22-6776: fixed broken test cases

Author: bcgov-brwang

src/backend/apps/event/tests/test_data/event_feed_list_of_one.json

@@ -24,6 +24,7 @@
               49.50658
           ]
       },
+      "location_description": "Quesnel-Hixon Road, in both directions. Landslide at Cottonwood bridge.",
       "route_at": "Highway 3",
       "route_from": "Pritchard Rd",
       "route_to": "",

src/backend/apps/event/tests/test_data/event_parsed_feed.py

@@ -28,6 +28,7 @@
         [-120.526853, 49.451003],
         [-120.526427, 49.451752]
     ])),
+    ("location_description", "Highway 3 between Bromley Pl and Frontage Rd"),
     ("first_created", datetime.datetime(
         2023, 5, 19, 14, 29, 20, tzinfo=zoneinfo.ZoneInfo(key="America/Vancouver")
     )),
@@ -54,6 +55,7 @@
     ("route_to", "Frontage Rd"),
     ("direction", "NONE"),
     ("location", Point(-120.526427, 49.451752)),
+    ("location_description", "Highway 3 between Bromley Pl and Frontage Rd"),
     # ("location", {"coordinates": [-120.526427, 49.451752]})
     ("coordinates", [-120.526427, 49.451752]),
     ("first_created", datetime.datetime(

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

@@ -254,6 +254,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
@@ -574,8 +575,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': {
@@ -145,15 +146,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,17 @@
 // OpenLayers
 import { Point } from 'ol/geom';
-import { Style } from 'ol/style';
+// 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 +50,80 @@ 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;
+    },
   });
+
+
+  
+  // expose clusterSource so we can control zoom behavior
+  layer.getClusterSource = () => clusterSource;
+
+  
+
+  return layer;
+
+
+
+  // return new VectorLayer({
+  //   classname: 'webcams',
+  //   visible: mapContext.visible_layers.highwayCams,
+  //   source: vectorSource,
+  //   style: () => null
+  // });
+
+
+
 }
 
 export function updateCamerasLayer(cameras, layer, setLoadingLayers) {
@@ -62,7 +133,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 +151,17 @@ 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');
+    }
+    // feature.setCameraStyle('static');
   }
 
   setLoadingLayers(prevState => ({
     ...prevState,
     cameras: false
   }));
-}
+}

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

@@ -41,12 +41,26 @@ const layerUpdateFuncMap = {
   dms: updateDmsLayer,
 }
 
+const CLUSTER_DISTANCE_METERS = 178571; // 178 km converted to about 50 pixel on the map has the best effect when zoom in/out
+let pixelDistance = 50; // defalt pixel 50 has the best effect
+
 export const loadLayer = (mapLayers, mapRef, mapContext, key, dataList, filteredDataList, zIndex, referenceData, updateReferenceFeature, setLoadingLayers) => {
   // Always remove and regenerate route layer
   if (key == 'routeLayer') {
     mapRef.current.removeLayer(mapLayers.current[key]);
   }
 
+  const view = mapRef.current.getView();
+  
+  function updateClusterDistance() {
+    const resolution = view.getResolution(); // meters per pixel
+    // Convert meters to pixels
+    pixelDistance = CLUSTER_DISTANCE_METERS / resolution;
+  }
+
+  view.on('change:resolution', updateClusterDistance);
+  updateClusterDistance();
+
   if (dataList) {
     if (!mapLayers.current[key] || key == 'routeLayer') {
       // Generate and add layer if it doesn't exist
@@ -56,7 +70,8 @@ export const loadLayer = (mapLayers, mapRef, mapContext, key, dataList, filtered
         mapContext,
         referenceData,
         updateReferenceFeature,
-        setLoadingLayers
+        setLoadingLayers,
+        pixelDistance
       );
 
       mapRef.current.addLayer(mapLayers.current[key]);
@@ -70,6 +85,8 @@ export const loadLayer = (mapLayers, mapRef, mapContext, key, dataList, filtered
   }
 }
 
+
+
 export const enableReferencedLayer = (referenceData, mapContext) => {
   // Do nothing if no reference data
   if (!referenceData) return;