Diffline with multiple active layers

map-view/src/App.tsx

@@ -101,10 +101,10 @@ class App extends React.Component<AppProps, AppState> {
               <LayerSwitcher
                 mapConfig={mapConfig}
                 onClose={() => this.setState({ open: false })}
-                onOverlayToggle={(checked) => {
+                onOverlayToggle={(checked, diffLayerIdentifier) => {
                   if (!checked) {
                     this.setState({ features: [] });
-                    Map.clearPlanRealDiffVectorLayer();
+                    Map.clearPlanRealDiffVectorLayer(diffLayerIdentifier);
                   }
                 }}
               />

map-view/src/common/Map.ts

@@ -24,7 +24,14 @@ import { FeatureLike } from "ol/Feature";
 import { Cluster } from "ol/source";
 import BaseObject from "ol/Object";
 import { getCenter } from "ol/extent";
-import { getHighlightStyle, getSinglePointStyle, isCoordinateInsideFeature, isLayerClustered } from "./MapUtils";
+import {
+  getDiffLayerIdentifier,
+  getDiffLayerIdentifierFromFeature,
+  getHighlightStyle,
+  getSinglePointStyle,
+  isCoordinateInsideFeature,
+  isLayerClustered,
+} from "./MapUtils";
 import Static from "ol/source/ImageStatic";
 
 class Map {
@@ -61,9 +68,9 @@ class Map {
    */
   private nonClusteredOverlayLayers: { [identifier: string]: VectorLayer<VectorSource> } = {};
   /**
-   * A layer to draw temporary vector features on the map
+   * Layers for drawing difference lines between reals and plans
    */
-  private planRealDiffVectorLayer: VectorLayer<VectorSource>;
+  private planRealDiffVectorLayers: { [identifier: string]: VectorLayer<VectorSource> } = {};
 
   /**
    * A layer to draw plan of selected feature (from FeatureInfo)
@@ -82,6 +89,11 @@ class Map {
    */
   private featureInfoCallback: (features: Feature[]) => void = (features: Feature[]) => {};
 
+  /**
+   * mapConfig passed to this instance
+   */
+  private mapConfig: MapConfig;
+
   /**
    * Initialize map on target element
    *
@@ -90,12 +102,13 @@ class Map {
    */
   initialize(target: string, mapConfig: MapConfig) {
     const { basemapConfig, overlayConfig, overviewConfig } = mapConfig;
+    this.mapConfig = mapConfig;
     const basemapLayerGroup = this.createBasemapLayerGroup(basemapConfig);
     const clusteredOverlayLayerGroup = this.createClusteredOverlayLayerGroup(mapConfig);
     const nonClusteredOverlayLayerGroup = this.createNonClusteredOverlayLayerGroup(mapConfig);
-    this.planRealDiffVectorLayer = Map.createPlanRealDiffVectorLayer();
     this.planOfRealVectorLayer = Map.createPlanOfRealVectorLayer();
     this.highLightedFeatureLayer = Map.createHighLightLayer();
+    const planRealDiffVectorLayerGroup = this.createPlanRealDiffVectorLayerGroup(mapConfig);
 
     const resolutions = [256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25, 0.125, 0.0625];
     const projection = this.getProjection();
@@ -113,9 +126,9 @@ class Map {
         basemapLayerGroup,
         clusteredOverlayLayerGroup,
         nonClusteredOverlayLayerGroup,
-        this.planRealDiffVectorLayer,
-        this.planOfRealVectorLayer,
+        planRealDiffVectorLayerGroup,
         this.highLightedFeatureLayer,
+        this.planOfRealVectorLayer,
       ],
       controls: this.getControls(),
       view,
@@ -221,15 +234,18 @@ class Map {
   /**
    * Draw a line to planRealDiffVectorLayer between two features
    */
-  drawLineBetweenFeatures(feature1: Feature | FeatureLike, feature2: Feature | FeatureLike, layer: VectorLayer) {
+  drawLineBetweenFeatures(feature1: Feature | FeatureLike, feature2: Feature | FeatureLike) {
     const location1 = feature1.getProperties().geometry.getFlatCoordinates();
     const location2 = feature2.getProperties().geometry.getFlatCoordinates();
     const lineString = new LineString([location1, location2]);
     const olFeature = new OlFeature({
       geometry: lineString,
       name: "Line",
     });
-    layer.getSource()!.addFeature(olFeature);
+    const diffLayerIdentifier = getDiffLayerIdentifierFromFeature(feature1, this.mapConfig.overlayConfig);
+    if (diffLayerIdentifier) {
+      this.planRealDiffVectorLayers[diffLayerIdentifier].getSource()!.addFeature(olFeature);
+    }
   }
 
   /**
@@ -260,7 +276,7 @@ class Map {
           vectorSource.on("featuresloadend", (featureEvent) => {
             const features = featureEvent.features;
             if (features) {
-              this.drawLineBetweenFeatures(feature, features[0], this.planOfRealVectorLayer);
+              this.drawLineBetweenFeatures(feature, features[0]);
 
               // Return distance between Real and Plan
               resolve(getDistanceBetweenFeatures(feature, features[0]));
@@ -315,7 +331,7 @@ class Map {
           if (device_plan_id) {
             const planFeature = byPlanId[device_plan_id];
             if (planFeature) {
-              this.drawLineBetweenFeatures(realFeature, planFeature, this.planRealDiffVectorLayer);
+              this.drawLineBetweenFeatures(realFeature, planFeature);
             }
           }
         }
@@ -324,11 +340,6 @@ class Map {
   }
 
   handleShowAllPlanAndRealDifferences() {
-    // Make sure plan/real difference setting is enabled
-    if (!this.planRealDiffVectorLayer.getVisible()) {
-      return;
-    }
-
     // Get only visible layers
     const visibleLayers = Object.fromEntries(
       Object.entries({ ...this.clusteredOverlayLayers, ...this.nonClusteredOverlayLayers }).filter(([key, layer]) =>
@@ -419,16 +430,21 @@ class Map {
     }
   }
 
-  setPlanRealDiffVectorLayerVisible(visible: boolean) {
-    this.planRealDiffVectorLayer.setVisible(visible);
+  /**
+   * This is called from settings in LayerSwitcher to show or hide all difference layers
+   * @param visible
+   * @param identifier
+   */
+  setPlanRealDiffVectorLayersVisible(visible: boolean) {
+    Object.values(this.planRealDiffVectorLayers).forEach((layer) => layer.setVisible(visible));
 
     if (visible) {
       this.handleShowAllPlanAndRealDifferences();
     }
   }
 
-  clearPlanRealDiffVectorLayer() {
-    this.planRealDiffVectorLayer.getSource()!.clear();
+  clearPlanRealDiffVectorLayer(identifier: string) {
+    this.planRealDiffVectorLayers[identifier].getSource()!.clear();
   }
 
   clearPlanOfRealVectorLayer() {
@@ -482,6 +498,19 @@ class Map {
     });
   }
 
+  private createPlanRealDiffVectorLayerGroup(mapConfig: MapConfig) {
+    const { overlayConfig } = mapConfig;
+    const { layers } = overlayConfig;
+    this.planRealDiffVectorLayers = Object.fromEntries(
+      layers
+        .filter((layer) => layer.identifier.includes("real"))
+        .map((layer) => {
+          return [getDiffLayerIdentifier(layer), Map.createPlanRealDiffVectorLayer()];
+        }),
+    );
+    return new LayerGroup({ layers: Object.values(this.planRealDiffVectorLayers) });
+  }
+
   private createNonClusteredOverlayLayerGroup(mapConfig: MapConfig) {
     const { overlayConfig, traffic_sign_icons_url, icon_scale, icon_type } = mapConfig;
     const { layers, sourceUrl } = overlayConfig;
@@ -529,7 +558,6 @@ class Map {
         const styleCache: { [key: string]: Style } = {};
         const getCachedStyle = (feature: FeatureLike) => {
           const features = feature.get("features");
-
           if (features !== undefined && features.length > 1) {
             return styleCache[features.length.toString()];
           }

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, MapConfig } from "../models";
+import { Feature, Layer, LayerConfig, MapConfig } from "../models";
 import VectorLayer from "ol/layer/Vector";
 import { Cluster } from "ol/source";
 
@@ -226,6 +226,19 @@ export function isLayerClustered(layer: VectorLayer) {
   return layer.getSource() instanceof Cluster;
 }
 
+export function getDiffLayerIdentifier(layer: Layer) {
+  return getDiffLayerIdentifierFromLayerIdentifier(layer.identifier);
+}
+
+export function getDiffLayerIdentifierFromLayerIdentifier(identifier: string) {
+  return identifier.replace("real", "").replace("plan", "");
+}
+
+export function getDiffLayerIdentifierFromFeature(feature: Feature | FeatureLike, overlayConfig: LayerConfig) {
+  const featureLayer = getFeatureLayer(getFeatureType(feature as Feature), overlayConfig);
+  return featureLayer ? getDiffLayerIdentifier(featureLayer) : null;
+}
+
 function getFeatureLayer(featureType: string, overlayConfig: LayerConfig) {
   return overlayConfig["layers"].find((l) => l.identifier === featureType);
 }

map-view/src/components/LayerSwitcher.tsx

@@ -15,6 +15,7 @@ import React from "react";
 import Map from "../common/Map";
 import { MapConfig } from "../models";
 import { withTranslation, WithTranslation } from "react-i18next";
+import { getDiffLayerIdentifierFromLayerIdentifier } from "../common/MapUtils";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -29,7 +30,7 @@ const styles = (theme: Theme) =>
 interface LayerSwitcherProps extends WithStyles<typeof styles>, WithTranslation {
   mapConfig: MapConfig;
   onClose: () => void;
-  onOverlayToggle: (checked: boolean) => void;
+  onOverlayToggle: (checked: boolean, diffLayerIdentifier: string) => void;
 }
 
 interface LayerSwitcherStates {
@@ -91,7 +92,7 @@ class LayerSwitcher extends React.Component<LayerSwitcherProps, LayerSwitcherSta
     const changeOverlayVisibility = (event: React.ChangeEvent<HTMLInputElement>) => {
       const identifier = event.target.name;
       const checked = event.target.checked;
-      onOverlayToggle(checked);
+      onOverlayToggle(checked, getDiffLayerIdentifierFromLayerIdentifier(identifier));
       visibleOverlays[identifier] = checked;
       Map.setOverlayVisible(identifier, checked);
       this.setState({ visibleOverlays });
@@ -124,7 +125,7 @@ class LayerSwitcher extends React.Component<LayerSwitcherProps, LayerSwitcherSta
 
     const changeOverlayVisibility = (event: React.ChangeEvent<HTMLInputElement>) => {
       const checked: boolean = event.target.checked;
-      Map.setPlanRealDiffVectorLayerVisible(checked);
+      Map.setPlanRealDiffVectorLayersVisible(checked);
       this.setState({ displayRealPlanDifference: checked });
     };