Fix 3945 zoom to feature for point now zooms correctly (#3946)

* Fix 3945 zoom to feature for point now zooms correctly * fix max zoom default * added a todo for max zoom customization
geosolutions-it · Jul 11, 2019 · 3578a7d · 3578a7d
1 parent 1080a27
commit 3578a7d
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 6 deletions.
diff --git a/web/client/components/map/openlayers/Map.jsx b/web/client/components/map/openlayers/Map.jsx
@@ -16,7 +16,7 @@ const ConfigUtils = require('../../../utils/ConfigUtils');
 const mapUtils = require('../../../utils/MapUtils');
 const projUtils = require('../../../utils/openlayers/projUtils');
 
-const { isEqual, throttle } = require('lodash');
+const { isEqual, throttle, isArray, isNil } = require('lodash');
 
 class OpenlayersMap extends React.Component {
     static propTypes = {
@@ -522,13 +522,18 @@ class OpenlayersMap extends React.Component {
         mapUtils.registerHook(mapUtils.GET_COORDINATES_FROM_PIXEL_HOOK, (pixel) => {
             return this.map.getCoordinateFromPixel(pixel);
         });
-        mapUtils.registerHook(mapUtils.ZOOM_TO_EXTENT_HOOK, (extent, { padding, crs, maxZoom, duration } = {}) => {
+        mapUtils.registerHook(mapUtils.ZOOM_TO_EXTENT_HOOK, (extent, { padding, crs, maxZoom: zoomLevel, duration } = {}) => {
             let bounds = CoordinatesUtils.reprojectBbox(extent, crs, this.props.projection);
-            // if EPSG:4326 with max extent (-90. 180, 180, 90) bounds are 0,0,0,0. In this case zoom to max extent
+            // if EPSG:4326 with max extent (-180, -90, 180, 90) bounds are 0,0,0,0. In this case zoom to max extent
             // TODO: improve this to manage all degenerated bounding boxes.
-            if (bounds && bounds[0] === bounds[2] && bounds[1] === bounds[3]) {
+            if (bounds && bounds[0] === bounds[2] && bounds[1] === bounds[3] &&
+                crs === "EPSG:4326" && isArray(extent) && extent[0] === -180 && extent[1] === -90) {
                 bounds = this.map.getView().getProjection().getExtent();
             }
+            let maxZoom = zoomLevel;
+            if (bounds && bounds[0] === bounds[2] && bounds[1] === bounds[3] && isNil(maxZoom)) {
+                maxZoom = 21; // TODO: allow to this maxZoom to be customizable
+            }
             this.map.getView().fit(bounds, {
                 padding: padding && [padding.top || 0, padding.right || 0, padding.bottom || 0, padding.left || 0],
                 maxZoom,

diff --git a/web/client/components/map/openlayers/__tests__/Map-test.jsx b/web/client/components/map/openlayers/__tests__/Map-test.jsx
@@ -831,9 +831,8 @@ describe('OpenlayersMap', () => {
             expect(spy.calls[1]).toExist();
             expect(spy.calls[1].arguments[0].x).toEqual(0);
             expect(spy.calls[1].arguments[0].y).toEqual(0);
-            expect(spy.calls[1].arguments[0].x).toEqual(0);
-            expect(spy.calls[1].arguments[0].y).toEqual(0);
             // Bbox should be max.
+            expect(spy.calls[1].arguments[1]).toEqual(0);
             expect(spy.calls[1].arguments[2].bounds.maxx).toBeGreaterThan(15654300);
             expect(spy.calls[1].arguments[2].bounds.maxy).toBeGreaterThan(7827150);
             expect(spy.calls[1].arguments[2].bounds.minx).toBeLessThan(-15654300);
@@ -850,6 +849,54 @@ describe('OpenlayersMap', () => {
         expect(spy.calls[0]).toExist(); // first is called by initial render
     });
 
+    it('test ZOOM_TO_EXTENT_HOOK with full extent', (done) => {
+        /*
+         * Converting [-180, -90, 180, 90] in EPSG:3857 caused a bounds array of [0,0,0,0],
+         * and so a zoom to maxZoom in the 0,0 coordinates
+         * To avoid this, zoom to max resolution extent.
+         * TODO: improve this to manage all degenerated bounding boxes.
+         */
+        mapUtils.registerHook(mapUtils.ZOOM_TO_EXTENT_HOOK, undefined);
+
+        const testHandlers = {
+            onMapViewChanges: () => { }
+        };
+        // fix size
+        document.querySelector('#map').setAttribute('style', "width: 200px; height: 200px");
+        const spy = expect.spyOn(testHandlers, 'onMapViewChanges');
+        const map = ReactDOM.render(<OpenlayersMap
+            id="mymap"
+            center={{ y: 0, x: 0 }}
+            zoom={11}
+            registerHooks
+            mapOptions={{ zoomAnimation: false }}
+            onMapViewChanges={testHandlers.onMapViewChanges} />,
+            document.getElementById("map"));
+        const olMap = map.map;
+        olMap.on('moveend', () => {
+            expect(spy.calls[1]).toExist();
+            expect(spy.calls[1].arguments[0].x).toBeGreaterThan(0);
+            expect(spy.calls[1].arguments[0].y).toBeGreaterThan(0);
+            expect(spy.calls[1].arguments[0].x).toBeLessThan(2);
+            expect(spy.calls[1].arguments[0].y).toBeLessThan(2);
+            // Bbox should not be max.
+            expect(spy.calls[1].arguments[1]).toBe(21);
+            expect(spy.calls[1].arguments[2].bounds.maxx).toBeGreaterThan(111319);
+            expect(spy.calls[1].arguments[2].bounds.maxy).toBeGreaterThan(111325);
+            expect(spy.calls[1].arguments[2].bounds.minx).toBeLessThan(111320);
+            expect(spy.calls[1].arguments[2].bounds.miny).toBeLessThan(111326);
+            done();
+
+        });
+        expect(map).toExist();
+        const hook = mapUtils.getHook(mapUtils.ZOOM_TO_EXTENT_HOOK);
+        expect(hook).toExist();
+        hook([1, 1, 1, 1], { crs: "EPSG:4326", duration: 0 });
+        olMap.dispatchEvent('moveend');
+        expect(spy).toHaveBeenCalled();
+        expect(spy.calls[0]).toExist(); // first is called by initial render
+    });
+
     it('create attribution with container', () => {
         let map = ReactDOM.render(<OpenlayersMap id="ol-map" center={{y: 43.9, x: 10.3}} zoom={11} mapOptions={{attribution: {container: 'body'}}}/>, document.getElementById("map"));
         expect(map).toExist();