Fixes geosolutions-it#1111: google maps tiles are always loading, eve…

…n if no google background is active
mbarto · Oct 10, 2016 · 1545e9e · 1545e9e
1 parent 436b19e
commit 1545e9e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/web/client/components/map/openlayers/Layer.jsx b/web/client/components/map/openlayers/Layer.jsx
@@ -118,7 +118,9 @@ const OpenlayersLayer = React.createClass({
             this.props.type,
             this.layer,
             this.generateOpts(newProps.options, newProps.position, newProps.srs),
-            this.generateOpts(oldProps.options, oldProps.position, oldProps.srs));
+            this.generateOpts(oldProps.options, oldProps.position, oldProps.srs),
+            this.props.map,
+            this.props.mapId);
     },
     addLayer(options) {
         if (this.isValid()) {

diff --git a/web/client/components/map/openlayers/plugins/GoogleLayer.js b/web/client/components/map/openlayers/plugins/GoogleLayer.js
@@ -17,10 +17,11 @@ var isTouchSupported = 'ontouchstart' in window;
 var startEvent = isTouchSupported ? 'touchstart' : 'mousedown';
 var moveEvent = isTouchSupported ? 'touchmove' : 'mousemove';
 var endEvent = isTouchSupported ? 'touchend' : 'mouseup';
+let google = window.google;
 
 Layers.registerType('google', {
     create: (options, map, mapId) => {
-        let google = window.google;
+
         if (!layersMap) {
             layersMap = {
                'HYBRID': google.maps.MapTypeId.HYBRID,
@@ -41,12 +42,17 @@ Layers.registerType('google', {
         }
         gmaps[mapId].setMapTypeId(layersMap[options.name]);
         let view = map.getView();
+        let mapContainer = document.getElementById(mapId + 'gmaps');
         let setCenter = function() {
-            var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
-            gmaps[mapId].setCenter(new google.maps.LatLng(center[1], center[0]));
+            if (mapContainer.style.visibility !== 'hidden') {
+                const center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
+                gmaps[mapId].setCenter(new google.maps.LatLng(center[1], center[0]));
+            }
         };
         let setZoom = function() {
-            gmaps[mapId].setZoom(view.getZoom());
+            if (mapContainer.style.visibility !== 'hidden') {
+                gmaps[mapId].setZoom(view.getZoom());
+            }
         };
 
         /**
@@ -97,11 +103,12 @@ Layers.registerType('google', {
         };
 
         let setRotation = function() {
-            var rotation = view.getRotation() * 180 / Math.PI;
-            let mapContainer = document.getElementById(mapId + 'gmaps');
+            if (mapContainer.style.visibility !== 'hidden') {
+                const rotation = view.getRotation() * 180 / Math.PI;
 
-            mapContainer.style.transform = "rotate(" + rotation + "deg)";
-            google.maps.event.trigger(gmaps[mapId], "resize");
+                mapContainer.style.transform = "rotate(" + rotation + "deg)";
+                google.maps.event.trigger(gmaps[mapId], "resize");
+            }
         };
 
         view.on('change:center', setCenter);
@@ -122,7 +129,6 @@ Layers.registerType('google', {
             let degrees = /[\+\-]?\d+\.?\d*/i;
             let newTrans = document.getElementById(mapId + 'gmaps').style.transform;
             if (newTrans !== oldTrans && newTrans.indexOf('rotate') !== -1) {
-                let mapContainer = document.getElementById(mapId + 'gmaps');
                 let rotation = parseFloat(newTrans.match(degrees)[0]);
                 let size = calculateRotatedSize(-rotation, map.getSize());
                 mapContainer.style.width = size.width + 'px';
@@ -179,6 +185,14 @@ Layers.registerType('google', {
             return <div id={mapId + "gmaps"} className="fill" style={gmapsStyle}></div>;
         }
         return null;
+    },
+    update(layer, newOptions, oldOptions, map, mapId) {
+        if (!oldOptions.visibility && newOptions.visibility) {
+            let view = map.getView();
+            const center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
+            gmaps[mapId].setCenter(new google.maps.LatLng(center[1], center[0]));
+            gmaps[mapId].setZoom(view.getZoom());
+        }
     }
 
 });
diff --git a/web/client/utils/openlayers/Layers.js b/web/client/utils/openlayers/Layers.js
@@ -21,10 +21,10 @@ var Layers = {
         }
         return null;
     },
-    updateLayer: function(type, layer, newOptions, oldOptions) {
+    updateLayer: function(type, layer, newOptions, oldOptions, map, mapId) {
         var layerCreator = layerTypes[type];
         if (layerCreator && layerCreator.update) {
-            return layerCreator.update(layer, newOptions, oldOptions);
+            return layerCreator.update(layer, newOptions, oldOptions, map, mapId);
         } else if (oldOptions && layer && layer.getSource() && layer.getSource().updateParams) {
             // old method, keept for compatibility.
             // TODO move it in specific layerCreator where possibile