diff --git a/src/components/ViewToShow/MapView/Map/customHooks/useCreateIconLayer.js b/src/components/ViewToShow/MapView/Map/customHooks/useCreateIconLayer.js index 5a2decbd..ba5105c7 100644 --- a/src/components/ViewToShow/MapView/Map/customHooks/useCreateIconLayer.js +++ b/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: [ { diff --git a/src/components/ViewToShow/MapView/Map/customHooks/useHoverIcon.js b/src/components/ViewToShow/MapView/Map/customHooks/useHoverIcon.js index 9b4dd923..7e28f2b7 100644 --- a/src/components/ViewToShow/MapView/Map/customHooks/useHoverIcon.js +++ b/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); }