#10225: Enhance UX for simple 3D navigation in touch devices [Impleme…

…ntation via Config-level] (#10261) (#10350)
geosolutions-it · May 22, 2024 · a57fe67 · a57fe67
1 parent 9d8d81f
commit a57fe67
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 8 deletions.
diff --git a/web/client/components/buttons/ZoomToMaxExtentButton.jsx b/web/client/components/buttons/ZoomToMaxExtentButton.jsx
@@ -119,7 +119,7 @@ class ZoomToMaxExtentButton extends React.Component {
         // zooming to the initial extent based on initial map configuration
         var mapConfig = this.props.mapInitialConfig;
         let bbox = getBbox(mapConfig.center, mapConfig.zoom, this.props.mapConfig.size);
-        this.props.changeMapView(mapConfig.center, mapConfig.zoom, bbox, this.props.mapConfig.size, null, this.props.mapConfig.projection);
+        this.props.changeMapView(mapConfig.center, mapConfig.zoom, bbox, this.props.mapConfig.size, null, this.props.mapConfig.projection, mapConfig?.viewerOptions);
     };
 }
 

diff --git a/web/client/components/buttons/__tests__/ZoomToMaxExtentButton-test.jsx b/web/client/components/buttons/__tests__/ZoomToMaxExtentButton-test.jsx
@@ -204,7 +204,7 @@ describe('This test for ZoomToMaxExtentButton', () => {
             componentSpy.restore();
 
             expect(actionsSpy.calls.length).toBe(1);
-            expect(actionsSpy.calls[0].arguments.length).toBe(6);
+            expect(actionsSpy.calls[0].arguments.length).toBe(7);
             expect(actionsSpy.calls[0].arguments[0]).toExist();
             expect(actionsSpy.calls[0].arguments[1]).toExist();
             // the bbox is null since no hook was registered

diff --git a/web/client/components/map/cesium/Map.jsx b/web/client/components/map/cesium/Map.jsx
@@ -180,6 +180,17 @@ class CesiumMap extends React.Component {
 
         // this is needed to display correctly intersection between terrain and primitives
         scene.globe.depthTestAgainstTerrain = this.props.mapOptions?.depthTestAgainstTerrain ?? false;
+        // set zoom limits if found
+        if (this.props.mapOptions?.minimumZoomDistance || this.props.mapOptions?.maximumZoomDistance) {
+            const minZoomLevel = this.props.mapOptions?.minimumZoomDistance;
+            const maxZoomLevel = this.props.mapOptions?.maximumZoomDistance;
+            if (minZoomLevel) {
+                map.scene.screenSpaceCameraController.minimumZoomDistance = minZoomLevel;
+            }
+            if (maxZoomLevel) {
+                map.scene.screenSpaceCameraController.maximumZoomDistance = maxZoomLevel;
+            }
+        }
 
         this.forceUpdate();
         map.scene.requestRender();

diff --git a/web/client/plugins/Map.jsx b/web/client/plugins/Map.jsx
@@ -160,6 +160,8 @@ import {getHighlightLayerOptions} from "../utils/HighlightUtils";
  * @prop {boolean} mapOptions.cesium.showGroundAtmosphere enable ground atmosphere of the globe (default false)
  * @prop {boolean} mapOptions.cesium.enableFog enable fog in the view (default false)
  * @prop {boolean} mapOptions.cesium.depthTestAgainstTerrain if true all primitive 3d features will be tested against the terrain while if false they will be drawn on top of the terrain even if hidden by it (default true)
+ * @prop {number} mapOptions.cesium.maximumZoomDistance max zoom limit (in meter unit) to restrict the zoom out operation based on it
+ * @prop {number} mapOptions.cesium.minimumZoomDistance  min zoom limit (in meter unit) to restrict the zoom in operation based on it
  * @static
  * @example
  * // Adding a layer to be used as a source for the elevation (shown in the MousePosition plugin configured with showElevation = true)

diff --git a/web/client/translations/data.de-DE.json b/web/client/translations/data.de-DE.json
@@ -1112,7 +1112,7 @@
         "zoombuttons": {
             "zoomInTooltip": "Zoom vergrößern",
             "zoomOutTooltip": "Zoom verringern",
-            "zoomAllTooltip": "Zoom auf maximale Ausdehnung"
+            "zoomAllTooltip": "Zoom auf zur Anfangsansicht"
         },
         "fullscreen": {
             "tooltipActivate": "Umschalten auf Vollbild",

diff --git a/web/client/translations/data.en-US.json b/web/client/translations/data.en-US.json
@@ -1073,7 +1073,7 @@
         "zoombuttons": {
             "zoomInTooltip": "Increase zoom",
             "zoomOutTooltip": "Decrease zoom",
-            "zoomAllTooltip": "Zoom to max extent"
+            "zoomAllTooltip": "Zoom to initial view"
         },
         "fullscreen": {
             "tooltipActivate": "Switch to full screen",

diff --git a/web/client/translations/data.es-ES.json b/web/client/translations/data.es-ES.json
@@ -1073,7 +1073,7 @@
         "zoombuttons": {
             "zoomInTooltip": "Acercar",
             "zoomOutTooltip": "Alejar",
-            "zoomAllTooltip": "Ajustar a la máxima extensión"
+            "zoomAllTooltip": "Ajustar a la vista inicial"
         },
         "fullscreen": {
             "tooltipActivate": "Cambiar a pantalla completa",

diff --git a/web/client/translations/data.fr-FR.json b/web/client/translations/data.fr-FR.json
@@ -1073,7 +1073,7 @@
         "zoombuttons": {
             "zoomInTooltip": "Zoomer vers l'avant",
             "zoomOutTooltip": "Zoomer vers l'arrière",
-            "zoomAllTooltip": "Agrandir à l'extension maximale"
+            "zoomAllTooltip": "Agrandir à la vue initiale"
         },
         "fullscreen": {
             "tooltipActivate": "Passer en plein écran",

diff --git a/web/client/translations/data.is-IS.json b/web/client/translations/data.is-IS.json
@@ -1015,7 +1015,7 @@
     "zoombuttons": {
       "zoomInTooltip": "Increase zoom",
       "zoomOutTooltip": "Decrease zoom",
-      "zoomAllTooltip": "Zoom to max extent"
+      "zoomAllTooltip": "Zoom to initial view"
     },
     "fullscreen": {
       "tooltipActivate": "Switch to full screen",

diff --git a/web/client/translations/data.it-IT.json b/web/client/translations/data.it-IT.json
@@ -1073,7 +1073,7 @@
         "zoombuttons": {
             "zoomInTooltip": "Aumenta Zoom",
             "zoomOutTooltip": "Diminuisci Zoom",
-            "zoomAllTooltip": "Zoom Alla Massima Estensione"
+            "zoomAllTooltip": "Zoom Alla vista iniziale"
         },
         "fullscreen": {
             "tooltipActivate":  "Passa a schermo intero",