geosolutions-it#10521 - Update center comparison in OL map component (g…

…eosolutions-it#10525)
MV88 · Aug 30, 2024 · 842b59b · 842b59b
1 parent 4985551
commit 842b59b
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/web/client/components/map/openlayers/Map.jsx b/web/client/components/map/openlayers/Map.jsx
@@ -534,11 +534,23 @@ class OpenlayersMap extends React.Component {
         return new View(viewOptions);
     };
 
+    isNearlyEqual = (a, b) => {
+        /**
+         * this implementation will update the map only if the movement
+         * between 8 decimals (coordinate precision in mm) in the reference system
+         * to avoid rounded value changes due to float mathematic operations or transformed value
+        */
+        if (a === undefined || b === undefined) {
+            return false;
+        }
+        return a.toFixed(8) - b.toFixed(8) <= 0.00000001;
+    };
+
     _updateMapPositionFromNewProps = (newProps) => {
         var view = this.map.getView();
         const currentCenter = this.props.center;
-        const centerIsUpdated = newProps.center.y === currentCenter.y &&
-            newProps.center.x === currentCenter.x;
+        const centerIsUpdated = this.isNearlyEqual(newProps.center.y, currentCenter.y) &&
+            this.isNearlyEqual(newProps.center.x, currentCenter.x);
 
         if (!centerIsUpdated) {
             // let center = ol.proj.transform([newProps.center.x, newProps.center.y], 'EPSG:4326', newProps.projection);

diff --git a/web/client/components/map/openlayers/__tests__/Map-test.jsx b/web/client/components/map/openlayers/__tests__/Map-test.jsx
@@ -1489,4 +1489,40 @@ describe('OpenlayersMap', () => {
             expect(customHooRegister.getHook(MapUtils.ZOOM_TO_EXTENT_HOOK)).toBeTruthy();
         });
     });
+    it('update map position center based on nearly equal match when receiving new props', () => {
+        let map = ReactDOM.render(
+            <OpenlayersMap
+                center={{y: 43.9323233378, x: 10.3346776780}}
+                zoom={1}
+                projection="EPSG:4326"
+                measurement={{}}
+            />
+            , document.getElementById("map"));
+        map = ReactDOM.render(
+            <OpenlayersMap
+                center={{y: 43.9323233388, x: 10.3346776790}}
+                zoom={1}
+                measurement={{}}
+                projection="EPSG:4326"
+                mapOptions={undefined}
+            />
+            , document.getElementById("map")
+        );
+        expect(map).toBeTruthy();
+        // center is not modified
+        expect(map.map.getView().getCenter()).toEqual([10.3346776780, 43.9323233378]);
+
+        map = ReactDOM.render(
+            <OpenlayersMap
+                center={{y: 43.9323234388, x: 10.3346773790}}
+                zoom={1}
+                measurement={{}}
+                projection="EPSG:4326"
+                mapOptions={undefined}
+            />
+            , document.getElementById("map")
+        );
+        // center is modified
+        expect(map.map.getView().getCenter()).toEqual([10.3346773790, 43.9323234388]);
+    });
 });