From ef8f885bef1ee1393b3a285b9daa1682d23cd82d Mon Sep 17 00:00:00 2001
From: mahmoudadel54 <mahmoodmadel@gmail.com>
Date: Mon, 8 Jul 2024 10:57:02 +0300
Subject: [PATCH] #9018: Dashboard - Zoom in/out on maps connected to a 3D map
 Description: - fix inconsistently issue of zoom in/out that happens in 3d map
 sync with another map [2d or 3d]

---
 web/client/components/map/cesium/Map.jsx     | 10 +++++-----
 web/client/components/map/openlayers/Map.jsx |  3 ++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/web/client/components/map/cesium/Map.jsx b/web/client/components/map/cesium/Map.jsx
index 93d535eb04..8b93041333 100644
--- a/web/client/components/map/cesium/Map.jsx
+++ b/web/client/components/map/cesium/Map.jsx
@@ -486,7 +486,7 @@ class CesiumMap extends React.Component {
                 return false;
             }
             // avoid errors like 44.40641479 !== 44.40641478999999
-            return a.toFixed(12) - b.toFixed(12) <= 0.000000000001;
+            return Math.abs(a.toFixed(12) - b.toFixed(12)) <= 0.000000000001;       // using Math.abs to include negative values
         };
 
         // there are some transition cases where the center is not defined
@@ -497,15 +497,15 @@ class CesiumMap extends React.Component {
 
         const centerIsUpdate = !isNearlyEqual(newProps.center.x, currentCenter.longitude) ||
                                !isNearlyEqual(newProps.center.y, currentCenter.latitude);
-        const zoomChanged = newProps.zoom !== currentZoom;
+        const zoomChanged = Math.round(newProps.zoom) !== Math.round(currentZoom);      // round both to ignore the small tolerance due to calc zoom from hight
 
         // Do the change at the same time, to avoid glitches
         if (centerIsUpdate || zoomChanged) {
             const position = {
                 destination: Cesium.Cartesian3.fromDegrees(
-                    newProps.viewerOptions?.cameraPosition?.longitude ?? newProps.center.x,
-                    newProps.viewerOptions?.cameraPosition?.latitude ?? newProps.center.y,
-                    newProps.viewerOptions?.cameraPosition?.height ?? this.getHeightFromZoom(newProps.zoom ?? 0)
+                    newProps.mapStateSource !== this.props.id ? newProps?.center?.x ?? newProps.viewerOptions?.cameraPosition?.longitude : newProps.viewerOptions?.cameraPosition?.longitude ?? newProps.center.x,
+                    newProps.mapStateSource !== this.props.id ? newProps?.center?.y ?? newProps.viewerOptions?.cameraPosition?.latitude : newProps.viewerOptions?.cameraPosition?.latitude ?? newProps.center.y,
+                    newProps.mapStateSource !== this.props.id ? this.getHeightFromZoom(newProps.zoom ?? 0) ?? newProps.viewerOptions?.cameraPosition?.height : newProps.viewerOptions?.cameraPosition?.height ?? this.getHeightFromZoom(newProps.zoom ?? 0)
                 ),
                 orientation: newProps.viewerOptions?.orientation
             };
diff --git a/web/client/components/map/openlayers/Map.jsx b/web/client/components/map/openlayers/Map.jsx
index c1a2fcb233..bcee904767 100644
--- a/web/client/components/map/openlayers/Map.jsx
+++ b/web/client/components/map/openlayers/Map.jsx
@@ -537,6 +537,7 @@ class OpenlayersMap extends React.Component {
     _updateMapPositionFromNewProps = (newProps) => {
         var view = this.map.getView();
         const currentCenter = this.props.center;
+
         const centerIsUpdated = newProps.center.y === currentCenter.y &&
             newProps.center.x === currentCenter.x;
 
@@ -545,7 +546,7 @@ class OpenlayersMap extends React.Component {
             let center = reproject({ x: newProps.center.x, y: newProps.center.y }, 'EPSG:4326', newProps.projection, true);
             view.setCenter([center.x, center.y]);
         }
-        if (Math.round(newProps.zoom) !== this.props.zoom) {
+        if (Math.round(newProps.zoom) !== Math.round(this.props.zoom)) {
             view.setZoom(Math.round(newProps.zoom));
         }
         if (newProps.bbox && newProps.bbox.rotation !== undefined || this.bbox && this.bbox.rotation !== undefined && newProps.bbox.rotation !== this.props.bbox.rotation) {