Add extra icons for tram disruptions affecting stops

src/components/ViewToShow/MapView/Map/customHooks/useCreateIconLayer.js

@@ -73,6 +73,33 @@ const useCreateIconLayer = (view) => {
           return '';
         })();
 
+        if (mode === 'tram' && stopsAffected?.length > 0) {
+          return stopsAffected.map(
+            (stop) =>
+              new Graphic({
+                attributes: {
+                  id,
+                  title,
+                  mode,
+                  disruptionSeverity,
+                  mapIcon: `${mode}-${disruptionSeverity}`,
+                  servicesAffected: affectedIds,
+                  startDate,
+                  endDate,
+                },
+                geometry: {
+                  type: 'point',
+                  // If no lat/long then default to Birmingham city centre
+                  longitude: stop.lon || -1.8960335,
+                  latitude: stop.lat || 52.481755,
+                  spatialreference: {
+                    wkid: 4326,
+                  },
+                },
+              })
+          );
+        }
+
         return new Graphic({
           attributes: {
             id,
@@ -98,7 +125,7 @@ const useCreateIconLayer = (view) => {
 
       const iconLayer = new FeatureLayer({
         id: 'disruptions',
-        source: disruptionGraphics,
+        source: disruptionGraphics.flat(Infinity),
         objectIdField: 'oid', // This must be defined when creating a layer from `Graphic` objects
         fields: [
           {

src/components/ViewToShow/MapView/Map/customHooks/useHoverIcon.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 /* eslint-disable no-console */
 import { useState, useCallback, useContext, useEffect } from 'react';
 import { AutoCompleteContext } from 'globalState';
@@ -58,33 +59,35 @@ const useHoverIcon = (view, isIconLayerCreated) => {
 
       if (!features.length) return;
 
-      const featureToHover = features.filter(
-        (feature) => feature.attributes.id === disruptionId
-      )[0];
+      const featuresToHover = features.filter((feature) => feature.attributes.id === disruptionId);
 
-      const featureToUnhover = features.filter((feature) =>
+      const featuresToUnhover = features.filter((feature) =>
         feature.attributes.mapIcon.includes('hover')
-      )[0];
+      );
+      const hoveredFeatureIds = featuresToUnhover.map((hovered) => hovered?.attributes?.id);
 
-      const isAlreadyHovered = featureToHover?.attributes?.id === featureToUnhover?.attributes?.id;
-      if (isAlreadyHovered) return;
+      const isIdAlreadyHovered = featuresToHover.some((feature) => {
+        return hoveredFeatureIds.includes(feature?.attributes?.id);
+      });
+      if (isIdAlreadyHovered) return;
 
       const updateFeatures = [];
-      if (featureToUnhover) {
-        featureToUnhover.attributes.mapIcon = featureToUnhover.attributes.mapIcon.replace(
-          '-hover',
-          ''
-        );
-        updateFeatures.push(featureToUnhover);
+      if (featuresToUnhover) {
+        featuresToUnhover.forEach((feature) => {
+          feature.attributes.mapIcon = feature.attributes.mapIcon.replace('-hover', '');
+        });
+        updateFeatures.push(featuresToUnhover);
       }
 
-      if (featureToHover) {
-        featureToHover.attributes.mapIcon = `${featureToHover.attributes.mapIcon}-hover`;
-        updateFeatures.push(featureToHover);
+      if (featuresToHover.length) {
+        featuresToHover.forEach((feature) => {
+          feature.attributes.mapIcon = `${feature.attributes.mapIcon}-hover`;
+        });
+        updateFeatures.push(featuresToHover);
       }
 
       try {
-        await disruptionsFeatureLayer.applyEdits({ updateFeatures });
+        await disruptionsFeatureLayer.applyEdits({ updateFeatures: updateFeatures.flat() });
       } catch (error) {
         console.log('Error applying disruption feature layer edits:', error);
       }