Correct Map3D layer readout alignment (#883)

* Correct Map3D layer readout alignment
Changed Icon
Fix #829

* Changed icon

* Use property value range instead of color range

Co-authored-by: Shadab Khan <[email protected]>
Co-authored-by: Håvard Bjerke <[email protected]>

Author: 3 people

react/src/lib/components/DeckGLMap/layers/terrain/terrainMapLayer.ts

@@ -6,6 +6,7 @@ import GL from "@luma.gl/constants";
 import { Texture2D } from "@luma.gl/core";
 import { DeckGLLayerContext } from "../../components/Map";
 import { colorTablesArray, rgbValues } from "@emerson-eps/color-tables/";
+import { createPropertyData, PropertyDataType } from "../utils/layerTools";
 
 const DEFAULT_TEXTURE_PARAMETERS = {
     [GL.TEXTURE_MIN_FILTER]: GL.LINEAR_MIPMAP_LINEAR,
@@ -177,27 +178,41 @@ export default class TerrainMapLayer extends SimpleMeshLayer<
         const r = info.color[0] * DECODER.rScaler;
         const g = info.color[1] * DECODER.gScaler;
         const b = info.color[2] * DECODER.bScaler;
+        const value = r + g + b;
 
-        const floatScaler = 1.0 / (256.0 * 256.0 * 256.0 - 1.0);
+        let depth = undefined;
+        const layer_properties: PropertyDataType[] = [];
 
-        const isPropertyReadout = !this.props.isReadoutDepth; // Either map properties or map depths are encoded here.
-        let value = (r + g + b) * (isPropertyReadout ? floatScaler : 1.0);
-
-        if (isPropertyReadout) {
-            // Remap the [0, 1] decoded value to property value range.
-            const [min, max] = this.props.propertyValueRange;
-            value = value * (max - min) + min;
-        }
-
-        const valueString =
-            (isPropertyReadout ? "Property: " : "Depth: ") + value.toFixed(1);
+        // Either map properties or map depths are encoded here.
+        if (this.props.isReadoutDepth) depth = value.toFixed(2);
+        else
+            layer_properties.push(
+                getMapProperty(value, this.props.propertyValueRange)
+            );
 
         return {
             ...info,
-            propertyValue: valueString,
+            properties: layer_properties,
+            propertyValue: depth,
         };
     }
 }
 
 TerrainMapLayer.layerName = "TerrainMapLayer";
 TerrainMapLayer.defaultProps = defaultProps;
+
+//================= Local help functions. ==================
+
+function getMapProperty(
+    value: number,
+    value_range: [number, number]
+): PropertyDataType {
+    // Remap the [0, 1] decoded value to property value range.
+    const [min, max] = value_range;
+
+    const floatScaler = 1.0 / (256.0 * 256.0 * 256.0 - 1.0);
+    const scaled_value = value * floatScaler;
+
+    value = scaled_value * (max - min) + min;
+    return createPropertyData("Property", value);
+}

react/src/lib/components/DeckGLMap/redux/types.ts

@@ -1,5 +1,6 @@
 import { Icon } from "@equinor/eds-core-react";
 import {
+    map,
     well,
     brush,
     fault,
@@ -11,6 +12,7 @@ import {
 
 // (this needs only be done once)
 Icon.add({
+    map,
     well,
     brush,
     fault,
@@ -82,7 +84,7 @@ export const LayerIcons = {
     ColormapLayer: "surface_layer",
     Hillshading2DLayer: "hill_shading",
     WellsLayer: "well",
-    Map3DLayer: "fault",
+    Map3DLayer: "map",
     PieChartLayer: "pie_chart",
     GridLayer: "grid_layer",
     FaultPolygonsLayer: "fault",