[Feat] use fixed height in geojson layer (#2533)

- Added a toggle to render absolute height without domain-based scaling. Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
keplergl · Mar 7, 2024 · 4932e76 · 4932e76
1 parent 400120f
commit 4932e76
Show file tree

Hide file tree

Showing 13 changed files with 38 additions and 12 deletions.
diff --git a/src/components/src/side-panel/layer-panel/layer-configurator.tsx b/src/components/src/side-panel/layer-panel/layer-configurator.tsx
@@ -836,7 +836,7 @@ export default function LayerConfiguratorFactory(
                   {...layerChannelConfigProps}
                 />
                 <VisConfigSwitch
-                  {...layer.visConfigSettings.enableElevationZoomFactor}
+                  {...layer.visConfigSettings.fixedHeight}
                   {...visConfiguratorProps}
                 />
                 <VisConfigSwitch {...visConfiguratorProps} {...layer.visConfigSettings.wireframe} />

diff --git a/src/constants/src/layers.ts b/src/constants/src/layers.ts
@@ -125,6 +125,14 @@ export const LAYER_VIS_CONFIGS: LayerVisConfigSettings = {
     group: PROPERTY_GROUPS.radius,
     property: 'fixedRadius'
   },
+  fixedHeight: {
+    defaultValue: false,
+    type: 'boolean',
+    label: 'layerVisConfigs.fixedHeight',
+    description: 'layerVisConfigs.fixedHeightDescription',
+    group: PROPERTY_GROUPS.height,
+    property: 'fixedHeight'
+  },
   radiusRange: {
     type: 'number',
     defaultValue: [0, 50],

diff --git a/src/layers/src/geojson-layer/geojson-layer.ts b/src/layers/src/geojson-layer/geojson-layer.ts
@@ -66,11 +66,11 @@ export const geojsonVisConfigs: {
   radiusRange: 'radiusRange';
   heightRange: 'elevationRange';
   elevationScale: 'elevationScale';
-  enableElevationZoomFactor: 'enableElevationZoomFactor';
   stroked: 'stroked';
   filled: 'filled';
   enable3d: 'enable3d';
   wireframe: 'wireframe';
+  fixedHeight: 'fixedHeight';
 } = {
   opacity: 'opacity',
   strokeOpacity: {
@@ -90,11 +90,11 @@ export const geojsonVisConfigs: {
   radiusRange: 'radiusRange',
   heightRange: 'elevationRange',
   elevationScale: 'elevationScale',
-  enableElevationZoomFactor: 'enableElevationZoomFactor',
   stroked: 'stroked',
   filled: 'filled',
   enable3d: 'enable3d',
-  wireframe: 'wireframe'
+  wireframe: 'wireframe',
+  fixedHeight: 'fixedHeight'
 };
 
 export type GeoJsonVisConfigSettings = {
@@ -110,7 +110,7 @@ export type GeoJsonVisConfigSettings = {
   radiusRange: VisConfigRange;
   heightRange: VisConfigRange;
   elevationScale: VisConfigNumber;
-  enableElevationZoomFactor: VisConfigBoolean;
+  fixedHeight: VisConfigBoolean;
   stroked: VisConfigBoolean;
   filled: VisConfigBoolean;
   enable3d: VisConfigBoolean;
@@ -134,11 +134,11 @@ export type GeoJsonLayerVisConfig = {
   radiusRange: [number, number];
   heightRange: [number, number];
   elevationScale: number;
-  enableElevationZoomFactor: boolean;
   stroked: boolean;
   filled: boolean;
   enable3d: boolean;
   wireframe: boolean;
+  fixedHeight: boolean;
 };
 
 type GeoJsonLayerVisualChannelConfig = LayerColorConfig &
@@ -266,6 +266,7 @@ export default class GeoJsonLayer extends Layer {
         domain: 'heightDomain',
         range: 'heightRange',
         key: 'height',
+        fixed: 'fixedHeight',
         channelScaleType: CHANNEL_SCALES.size,
         accessor: 'getElevation',
         condition: config => config.visConfig.enable3d,
@@ -496,6 +497,10 @@ export default class GeoJsonLayer extends Layer {
       : super.hasHoveredObject(objectInfo);
   }
 
+  getElevationZoomFactor({zoom, zoomOffset = 0}) {
+    return this.config.visConfig.fixedHeight ? 1 : Math.pow(2, Math.max(8 - zoom + zoomOffset, 0));
+  }
+
   renderLayer(opts) {
     const {data: dataProps, gpuFilter, objectHovered, mapState, interactionConfig} = opts;
 

diff --git a/src/localization/src/translations/ca.ts b/src/localization/src/translations/ca.ts
@@ -147,7 +147,9 @@ export default {
     weightIntensity: 'Intensitat de pes',
     zoomScale: 'Escala de zoom',
     heightRange: 'Rang alçada',
-    heightMultiplier: "Multiplicador d'alçada"
+    heightMultiplier: "Multiplicador d'alçada",
+    fixedHeight: 'Alçada fixa',
+    fixedHeightDescription: "Utilitzeu l'alçada sense modificacions"
   },
   layerManager: {
     addData: 'Afegeix Dades',

diff --git a/src/localization/src/translations/en.ts b/src/localization/src/translations/en.ts
@@ -154,6 +154,8 @@ export default {
     weightIntensity: 'Weight Intensity',
     zoomScale: 'Zoom Scale',
     heightRange: 'Height Range',
+    fixedHeight: 'Fixed height',
+    fixedHeightDescription: 'Use height without modifications',
     heightMultiplier: 'Height Multiplier',
     darkModeEnabled: 'Dark base map'
   },

diff --git a/src/localization/src/translations/es.ts b/src/localization/src/translations/es.ts
@@ -148,6 +148,8 @@ export default {
     weightIntensity: 'Intensidad de peso',
     zoomScale: 'Escala de zoom',
     heightRange: 'Rango de alturas',
+    fixedHeight: 'Altura fija',
+    fixedHeightDescription: 'Usar altura sin modificaciones',
     heightMultiplier: 'Multiplicador de altura'
   },
   layerManager: {

diff --git a/src/localization/src/translations/fi.ts b/src/localization/src/translations/fi.ts
@@ -145,6 +145,8 @@ export default {
     weightIntensity: 'Painotuksen intensiteetti',
     zoomScale: 'Zoomausskaala',
     heightRange: 'Korkeuden rajat',
+    fixedHeight: 'Kiinteä korkeus',
+    fixedHeightDescription: 'Käytä korkeutta ilman muutoksia',
     heightMultiplier: 'Korkeuskerroin'
   },
   layerManager: {

diff --git a/src/localization/src/translations/ja.ts b/src/localization/src/translations/ja.ts
@@ -144,6 +144,8 @@ export default {
     weightIntensity: '重みづけの強さ',
     zoomScale: 'ズームのスケール',
     heightRange: '高さの範囲',
+    fixedHeight: '固定高さ',
+    fixedHeightDescription: '高さを変更せずに使用する',
     heightMultiplier: '高さ乗数'
   },
   layerManager: {

diff --git a/src/localization/src/translations/pt.ts b/src/localization/src/translations/pt.ts
@@ -146,6 +146,8 @@ export default {
     weightIntensity: 'Intensidade da Espessura',
     zoomScale: 'Escala do Zoom',
     heightRange: 'Alcance da Altura',
+    fixedHeight: 'Altura fixa',
+    fixedHeightDescription: 'Use a altura sem modificações',
     heightMultiplier: 'Multiplicador de altura'
   },
   layerManager: {

diff --git a/src/types/layers.d.ts b/src/types/layers.d.ts
@@ -213,6 +213,7 @@ export type LayerVisConfigSettings = {
   weight: VisConfigNumber;
   heatmapRadius: VisConfigNumber;
   darkBaseMapEnabled: VisConfigBoolean;
+  fixedHeight: VisConfigBoolean;
 };
 
 // TODO: Move this to individual layers

diff --git a/test/fixtures/state-saved-v0.js b/test/fixtures/state-saved-v0.js
@@ -1377,7 +1377,7 @@ mergedLayer4.config = {
     radiusRange: [0, 50],
     heightRange: [0, 500],
     elevationScale: 5,
-    enableElevationZoomFactor: true,
+    fixedHeight: false,
     stroked: false,
     filled: true,
     enable3d: false,

diff --git a/test/fixtures/state-saved-v1-1.js b/test/fixtures/state-saved-v1-1.js
@@ -953,7 +953,7 @@ mergedLayer0.config = {
     radiusRange: [0, 50],
     heightRange: [0, 500],
     elevationScale: 18,
-    enableElevationZoomFactor: true,
+    fixedHeight: false,
     stroked: true,
     filled: true,
     strokeColor: [181, 18, 65],
@@ -2740,7 +2740,7 @@ mergedLayer1.config = {
     radiusRange: [0, 50],
     heightRange: [0, 500],
     elevationScale: 5,
-    enableElevationZoomFactor: true,
+    fixedHeight: false,
     stroked: true,
     filled: false,
     enable3d: false,

diff --git a/test/helpers/mock-state.js b/test/helpers/mock-state.js
@@ -818,7 +818,7 @@ export const expectedSavedLayer2 = {
       radiusRange: [0, 50],
       heightRange: [0, 500],
       elevationScale: 5,
-      enableElevationZoomFactor: true,
+      fixedHeight: false,
       stroked: true,
       filled: true,
       enable3d: false,
@@ -866,7 +866,7 @@ export const expectedLoadedLayer2 = {
       radiusRange: [0, 50],
       heightRange: [0, 500],
       elevationScale: 5,
-      enableElevationZoomFactor: true,
+      fixedHeight: false,
       stroked: true,
       filled: true,
       enable3d: false,