Ensure openlayers mapinfo state is immediately updated as soon as com…

…ponent mounted (#1348)
geosolutions-it · Dec 13, 2016 · a02f82f · a02f82f
1 parent e937622
commit a02f82f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 38 deletions.
diff --git a/web/client/components/map/openlayers/Map.jsx b/web/client/components/map/openlayers/Map.jsx
@@ -98,25 +98,10 @@ var OpenlayersMap = React.createClass({
           target: this.props.id,
           view: this.createView(center, Math.round(this.props.zoom), this.props.projection, this.props.mapOptions && this.props.mapOptions.view)
         });
-        map.on('moveend', () => {
-            let view = map.getView();
-            let c = this.normalizeCenter(view.getCenter());
-            let bbox = view.calculateExtent(map.getSize());
-            let size = {
-                width: map.getSize()[0],
-                height: map.getSize()[1]
-            };
-            this.props.onMapViewChanges({x: c[0] || 0.0, y: c[1] || 0.0, crs: 'EPSG:4326'}, view.getZoom(), {
-                bounds: {
-                    minx: bbox[0],
-                    miny: bbox[1],
-                    maxx: bbox[2],
-                    maxy: bbox[3]
-                },
-                crs: view.getProjection().getCode(),
-                rotation: view.getRotation()
-            }, size, this.props.id, this.props.projection);
-        });
+
+        this.map = map;
+
+        map.on('moveend', this.updateMapInfoState);
         map.on('singleclick', (event) => {
             if (this.props.onClick) {
                 let pos = event.coordinate.slice();
@@ -166,7 +151,7 @@ var OpenlayersMap = React.createClass({
             }
         });
 
-        this.map = map;
+        this.updateMapInfoState();
         this.setMousePointer(this.props.mousePointer);
         // NOTE: this re-call render function after div creation to have the map initialized.
         this.forceUpdate();
@@ -294,6 +279,25 @@ var OpenlayersMap = React.createClass({
             </div>
         );
     },
+    updateMapInfoState() {
+        let view = this.map.getView();
+        let c = this.normalizeCenter(view.getCenter());
+        let bbox = view.calculateExtent(this.map.getSize());
+        let size = {
+            width: this.map.getSize()[0],
+            height: this.map.getSize()[1]
+        };
+        this.props.onMapViewChanges({x: c[0] || 0.0, y: c[1] || 0.0, crs: 'EPSG:4326'}, view.getZoom(), {
+            bounds: {
+                minx: bbox[0],
+                miny: bbox[1],
+                maxx: bbox[2],
+                maxy: bbox[3]
+            },
+            crs: view.getProjection().getCode(),
+            rotation: view.getRotation()
+        }, size, this.props.id, this.props.projection);
+    },
     haveResolutionsChanged(newProps) {
         const resolutions = this.props.mapOptions && this.props.mapOptions.view ? this.props.mapOptions.view.resolutions : undefined;
         const newResolutions = newProps.mapOptions && newProps.mapOptions.view ? newProps.mapOptions.view.resolutions : undefined;

diff --git a/web/client/components/map/openlayers/__tests__/Map-test.jsx b/web/client/components/map/openlayers/__tests__/Map-test.jsx
@@ -114,15 +114,16 @@ describe('OpenlayersMap', () => {
         olMap.getView().setZoom(12);
 
         olMap.on('moveend', () => {
-            expect(spy.calls.length).toEqual(1);
-            expect(spy.calls[0].arguments.length).toEqual(6);
-            expect(normalizeFloat(spy.calls[0].arguments[0].y, 1)).toBe(43.9);
-            expect(normalizeFloat(spy.calls[0].arguments[0].x, 1)).toBe(10.3);
-            expect(spy.calls[0].arguments[1]).toBe(12);
-            expect(spy.calls[0].arguments[2].bounds).toExist();
-            expect(spy.calls[0].arguments[2].crs).toExist();
-            expect(spy.calls[0].arguments[3].height).toExist();
-            expect(spy.calls[0].arguments[3].width).toExist();
+            // The first call is triggered as soon as the map component is mounted, the second one is as a result of setZoom
+            expect(spy.calls.length).toEqual(2);
+            expect(spy.calls[1].arguments.length).toEqual(6);
+            expect(normalizeFloat(spy.calls[1].arguments[0].y, 1)).toBe(43.9);
+            expect(normalizeFloat(spy.calls[1].arguments[0].x, 1)).toBe(10.3);
+            expect(spy.calls[1].arguments[1]).toBe(12);
+            expect(spy.calls[1].arguments[2].bounds).toExist();
+            expect(spy.calls[1].arguments[2].crs).toExist();
+            expect(spy.calls[1].arguments[3].height).toExist();
+            expect(spy.calls[1].arguments[3].width).toExist();
             done();
         });
     });
@@ -145,15 +146,16 @@ describe('OpenlayersMap', () => {
         olMap.getView().setCenter(ol.proj.transform([10, 44], 'EPSG:4326', 'EPSG:3857'));
 
         olMap.on('moveend', () => {
-            expect(spy.calls.length).toEqual(1);
-            expect(spy.calls[0].arguments.length).toEqual(6);
-            expect(normalizeFloat(spy.calls[0].arguments[0].y, 1)).toBe(44);
-            expect(normalizeFloat(spy.calls[0].arguments[0].x, 1)).toBe(10);
-            expect(spy.calls[0].arguments[1]).toBe(11);
-            expect(spy.calls[0].arguments[2].bounds).toExist();
-            expect(spy.calls[0].arguments[2].crs).toExist();
-            expect(spy.calls[0].arguments[3].height).toExist();
-            expect(spy.calls[0].arguments[3].width).toExist();
+            // The first call is triggered as soon as the map component is mounted, the second one is as a result of setCenter
+            expect(spy.calls.length).toEqual(2);
+            expect(spy.calls[1].arguments.length).toEqual(6);
+            expect(normalizeFloat(spy.calls[1].arguments[0].y, 1)).toBe(44);
+            expect(normalizeFloat(spy.calls[1].arguments[0].x, 1)).toBe(10);
+            expect(spy.calls[1].arguments[1]).toBe(11);
+            expect(spy.calls[1].arguments[2].bounds).toExist();
+            expect(spy.calls[1].arguments[2].crs).toExist();
+            expect(spy.calls[1].arguments[3].height).toExist();
+            expect(spy.calls[1].arguments[3].width).toExist();
             done();
         });
     });