feat: Highlight selected feature in map-view

Refs: LIIK-784

Author: jforsman

map-view/src/App.tsx

@@ -71,10 +71,12 @@ class App extends React.Component<AppProps, AppState> {
             <FeatureInfo
               features={features}
               mapConfig={mapConfig}
-              onSelectFeature={(feature: Feature) => Map.showPlanOfRealDevice(feature, mapConfig)}
+              onSelectFeatureShowPlan={(feature: Feature) => Map.showPlanOfRealDevice(feature, mapConfig)}
+              onSelectFeatureHighLight={(feature: Feature) => Map.highlightFeature(feature, mapConfig)}
               onClose={() => {
                 this.setState({ features: [] });
                 Map.clearPlanOfRealVectorLayer();
+                Map.clearHighlightLayer();
               }}
             />
           )}

map-view/src/common/Map.ts

@@ -24,7 +24,7 @@ import { FeatureLike } from "ol/Feature";
 import { Cluster } from "ol/source";
 import BaseObject from "ol/Object";
 import { getCenter } from "ol/extent";
-import { getSinglePointStyle, isCoordinateInsideFeature, isLayerClustered } from "./MapUtils";
+import { getHighlightStyle, getSinglePointStyle, isCoordinateInsideFeature, isLayerClustered } from "./MapUtils";
 import Static from "ol/source/ImageStatic";
 
 class Map {
@@ -70,6 +70,11 @@ class Map {
    */
   private planOfRealVectorLayer: VectorLayer<VectorSource>;
 
+  /**
+   * A layer to draw highlighted feature (when active in FeatureInfo dialog)
+   */
+  private highLightedFeatureLayer: VectorLayer<VectorSource>;
+
   /**
    * Callback function to process features returned from GetFeatureInfo requests
    *
@@ -90,6 +95,7 @@ class Map {
     const nonClusteredOverlayLayerGroup = this.createNonClusteredOverlayLayerGroup(mapConfig);
     this.planRealDiffVectorLayer = Map.createPlanRealDiffVectorLayer();
     this.planOfRealVectorLayer = Map.createPlanOfRealVectorLayer();
+    this.highLightedFeatureLayer = Map.createHighLightLayer();
 
     const resolutions = [256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25, 0.125, 0.0625];
     const projection = this.getProjection();
@@ -109,11 +115,12 @@ class Map {
         nonClusteredOverlayLayerGroup,
         this.planRealDiffVectorLayer,
         this.planOfRealVectorLayer,
+        this.highLightedFeatureLayer,
       ],
       controls: this.getControls(),
       view,
     });
-
+    this.highLightedFeatureLayer.setVisible(true);
     this.overViewMap = new OverviewMap({
       className: "ol-overviewmap",
       layers: [
@@ -266,6 +273,21 @@ class Map {
     });
   }
 
+  /**
+   *
+   * @param feature Target feature to be highlighted
+   */
+  highlightFeature(feature: Feature, mapConfig: MapConfig) {
+    this.clearHighlightLayer();
+    const olFeature = new OlFeature({
+      geometry: feature.getProperties().geometry,
+      name: "HiglightedFeature",
+    });
+
+    this.highLightedFeatureLayer.setStyle(getHighlightStyle(feature, mapConfig));
+    this.highLightedFeatureLayer.getSource()?.addFeature(olFeature);
+  }
+
   showAllPlanAndRealDifferences(realLayer: VectorLayer<VectorSource>, planLayer: VectorLayer<VectorSource>) {
     let realFeatures: FeatureLike[],
       planFeatures: FeatureLike[] = [];
@@ -322,10 +344,17 @@ class Map {
     }
   }
 
+  private static createHighLightLayer() {
+    const highLightLayerSource = new VectorSource({});
+    return new VectorLayer({
+      source: highLightLayerSource,
+    });
+  }
+
   private static createPlanRealDiffVectorLayer() {
-    const planRealDiffVectorLayer = new VectorSource({});
+    const planRealDiffVectorLayerSource = new VectorSource({});
     return new VectorLayer({
-      source: planRealDiffVectorLayer,
+      source: planRealDiffVectorLayerSource,
       // Point style
       style: new Style({
         image: new Circle({
@@ -348,9 +377,9 @@ class Map {
   }
 
   private static createPlanOfRealVectorLayer() {
-    const planOfRealVectorLayer = new VectorSource({});
+    const planOfRealVectorLayerSource = new VectorSource({});
     return new VectorLayer({
-      source: planOfRealVectorLayer,
+      source: planOfRealVectorLayerSource,
       // Point style
       style: new Style({
         image: new Circle({
@@ -406,6 +435,10 @@ class Map {
     this.planOfRealVectorLayer.getSource()!.clear();
   }
 
+  clearHighlightLayer() {
+    this.highLightedFeatureLayer.getSource()!.clear();
+  }
+
   applyProjectFilters(overlayConfig: LayerConfig, projectId: string) {
     const { sourceUrl } = overlayConfig;
     const filter_field = "responsible_entity_name";

map-view/src/common/MapUtils.ts

@@ -3,7 +3,7 @@ import { Fill, Icon, Stroke, Style, Circle as CircleStyle } from "ol/style";
 import { FeatureLike } from "ol/Feature";
 import RenderFeature from "ol/render/Feature";
 import { Coordinate } from "ol/coordinate";
-import { Feature, LayerConfig } from "../models";
+import { Feature, LayerConfig, MapConfig } from "../models";
 import VectorLayer from "ol/layer/Vector";
 import { Cluster } from "ol/source";
 
@@ -73,6 +73,49 @@ const geometryStyles = {
   }),
 };
 
+const highLightStyle = new Style({
+  fill: new Fill({ color: "yellow" }),
+  image: new CircleStyle({
+    radius: 5,
+    fill: new Fill({ color: "yellow" }),
+    stroke: defaultStroke,
+  }),
+  stroke: new Stroke({
+    color: "yellow",
+    width: 2,
+  }),
+});
+
+function getIconStyle(
+  iconsUrl: string,
+  iconType: string,
+  iconScale: number,
+  deviceTypeCode: string,
+  deviceTypeIcon: string,
+) {
+  return new Style({
+    image: new Icon({
+      src: getIconSrc(iconsUrl, iconType, deviceTypeCode, deviceTypeIcon),
+      scale: iconScale,
+    }),
+  });
+}
+
+export function getHighlightStyle(feature: Feature, mapConfig: MapConfig) {
+  const { traffic_sign_icons_url, icon_type, icon_scale, overlayConfig } = mapConfig;
+  const dtCode = feature.getProperties().device_type_code;
+  if (trafficSignIconsEnabled(feature, overlayConfig) && dtCode) {
+    return getIconStyle(
+      traffic_sign_icons_url,
+      icon_type,
+      icon_scale,
+      dtCode,
+      feature.getProperties().device_type_icon,
+    );
+  }
+  return highLightStyle;
+}
+
 export function getSinglePointStyle(
   feature: FeatureLike,
   use_traffic_sign_icons: boolean,
@@ -82,17 +125,13 @@ export function getSinglePointStyle(
 ) {
   if (use_traffic_sign_icons && feature.get("device_type_code") !== null) {
     // Traffic sign style
-    return new Style({
-      image: new Icon({
-        src: getIconSrc(
-          traffic_sign_icons_url,
-          icon_type,
-          feature.get("device_type_code"),
-          feature.get("device_type_icon"),
-        ),
-        scale: icon_scale,
-      }),
-    });
+    return getIconStyle(
+      traffic_sign_icons_url,
+      icon_type,
+      icon_scale,
+      feature.get("device_type_code"),
+      feature.get("device_type_icon"),
+    );
   }
 
   const geometry = feature.getGeometry();
@@ -194,3 +233,8 @@ function getFeatureLayer(featureType: string, overlayConfig: LayerConfig) {
 function getFeatureType(feature: Feature) {
   return feature["id_"].split(".")[0];
 }
+
+function trafficSignIconsEnabled(feature: Feature, overlayConfig: LayerConfig) {
+  const layer = getFeatureLayer(getFeatureType(feature), overlayConfig);
+  return layer?.use_traffic_sign_icons;
+}

map-view/src/components/FeatureInfo.test.tsx

@@ -29,7 +29,8 @@ test("renders feature info", () => {
       features={mockFeatures}
       mapConfig={mockMapConfig}
       onClose={() => {}}
-      onSelectFeature={(feature = mockFeatures[0]) => new Promise((resolve) => resolve(0))}
+      onSelectFeatureShowPlan={(feature = mockFeatures[0]) => new Promise((resolve) => resolve(0))}
+      onSelectFeatureHighLight={(feature = mockFeatures[0]) => undefined}
     />,
   );
   const featureInfoTitle = getByText("Overlay 1");

map-view/src/components/FeatureInfo.tsx

@@ -39,7 +39,8 @@ const styles = (theme: Theme) =>
 interface FeatureInfoProps extends WithStyles<typeof styles>, WithTranslation {
   features: Feature[];
   mapConfig: MapConfig;
-  onSelectFeature: (feature: Feature) => Promise<any>;
+  onSelectFeatureShowPlan: (feature: Feature) => Promise<any>;
+  onSelectFeatureHighLight: (feature: Feature) => void;
   onClose: () => void;
 }
 
@@ -87,9 +88,12 @@ class FeatureInfo extends React.Component<FeatureInfoProps, FeatureInfoState> {
   }
 
   runOnSelectFeature(featureIndex: number) {
-    const { features, onSelectFeature } = this.props;
+    const { features, onSelectFeatureShowPlan, onSelectFeatureHighLight } = this.props;
     const feature = features[featureIndex];
-    onSelectFeature(feature).then((distance: number) => this.setState({ realPlanDistance: distance }));
+    onSelectFeatureShowPlan(feature).then(
+      (distance: number) => distance && this.setState({ realPlanDistance: distance }),
+    );
+    onSelectFeatureHighLight(feature);
   }
 
   setFeatureIndex(featureIndex: number) {