Reworking the Google layer so that a shared GMap object is used for all Google layers on a single map. This reduces the DOM overhead and gets rid of map resizing issues. Excellent solution by ahocevar. r=me,ahocevar (closes #1797).

git-svn-id: http://svn.openlayers.org/trunk/openlayers@10021 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Layer/Google.js

@@ -121,88 +121,79 @@ OpenLayers.Layer.Google = OpenLayers.Class(
      *     load GMap2, then display a warning message.
      */
     loadMapObject:function() {
+        if (!this.type) {
+            this.type = G_NORMAL_MAP;
+        }
+        var mapObject, termsOfUse, poweredBy;
+        var cache = OpenLayers.Layer.Google.cache[this.map.id];
+        if (cache) {
+            // there are already Google layers added to this map
+            mapObject = cache.mapObject;
+            termsOfUse = cache.termsOfUse;
+            poweredBy = cache.poweredBy;
+            // increment the layer count
+            ++cache.count;
+        } else {
+            // this is the first Google layer for this map
+
+            var container = this.map.viewPortDiv;
+            var div = document.createElement("div");
+            div.id = this.map.id + "_GMap2Container";
+            div.style.position = "absolute";
+            div.style.width = "100%";
+            div.style.height = "100%";
+            container.appendChild(div);
+
+            // create GMap and shuffle elements
+            try {
+                mapObject = new GMap2(div);
+                
+                // move the ToS and branding stuff up to the container div
+                termsOfUse = div.lastChild;
+                container.appendChild(termsOfUse);
+                termsOfUse.style.zIndex = "1100";
+                termsOfUse.style.right = "";
+                termsOfUse.style.bottom = "";
+                termsOfUse.className = "olLayerGoogleCopyright";
+
+                poweredBy = div.lastChild;
+                container.appendChild(poweredBy);
+                poweredBy.style.zIndex = "1100";
+                poweredBy.style.right = "";
+                poweredBy.style.bottom = "";
+                poweredBy.className = "olLayerGooglePoweredBy gmnoprint";
+                
+            } catch (e) {
+                OpenLayers.Console.error(e);
+                return;
+            }
+            // cache elements for use by any other google layers added to
+            // this same map
+            OpenLayers.Layer.Google.cache[this.map.id] = {
+                mapObject: mapObject,
+                termsOfUse: termsOfUse,
+                poweredBy: poweredBy,
+                count: 1
+            };
+        }
+
+        this.mapObject = mapObject;
+        this.termsOfUse = termsOfUse;
+        this.poweredBy = poweredBy;
         
-        //has gmaps library has been loaded?
+        // ensure this layer type is one of the mapObject types
-        try {
+        if (OpenLayers.Util.indexOf(this.mapObject.getMapTypes(),
-            // create GMap, hide nav controls
+                                    this.type) === -1) {
-            this.mapObject = new GMap2( this.div );
+            this.mapObject.addMapType(this.type);
-            
-            //since v 2.93 getDragObject is now available.
-            if(typeof this.mapObject.getDragObject == "function") {
-                this.dragObject = this.mapObject.getDragObject();
-            } else {
-                this.dragPanMapObject = null;
-            }
-
-            // move the ToS and branding stuff up to the container div
-            this.termsOfUse = this.div.lastChild;
-            this.div.removeChild(this.termsOfUse);
-            if (this.isFixed) {
-                this.map.viewPortDiv.appendChild(this.termsOfUse);
-            } else {
-                this.map.layerContainerDiv.appendChild(this.termsOfUse);
-            }
-            this.termsOfUse.style.zIndex = "1100";
-            this.termsOfUse.style.display = this.div.style.display;
-            this.termsOfUse.style.right = "";
-            this.termsOfUse.style.bottom = "";
-            this.termsOfUse.className = "olLayerGoogleCopyright";
-
-            this.poweredBy = this.div.lastChild;
-            this.div.removeChild(this.poweredBy);
-            if (this.isFixed) {
-                this.map.viewPortDiv.appendChild(this.poweredBy);
-            } else {
-                this.map.layerContainerDiv.appendChild(this.poweredBy);
-            }
-            this.poweredBy.style.zIndex = "1100";
-            this.poweredBy.style.display = this.div.style.display;
-            this.poweredBy.style.right = "";
-            this.poweredBy.style.bottom = "";
-            this.poweredBy.className = "olLayerGooglePoweredBy gmnoprint"; 
-
-        } catch (e) {
-            OpenLayers.Console.error(e);
         }
-               
-    },
 
-    /** 
+        //since v 2.93 getDragObject is now available.
-     * APIMethod: setMap
+        if(typeof mapObject.getDragObject == "function") {
-     * Overridden from EventPane because if a map type has been specified, 
+            this.dragObject = mapObject.getDragObject();
-     *     we need to attach a listener for the first moveend -- this is how 
+        } else {
-     *     we will know that the map has been centered. Only once the map has 
+            this.dragPanMapObject = null;
-     *     been centered is it safe to change the gmap object's map type. 
-     * 
-     * Parameters:
-     * map - {<OpenLayers.Map>}
-     */
-    setMap: function(map) {
-        OpenLayers.Layer.EventPane.prototype.setMap.apply(this, arguments);
-
-        if (this.type != null) {
-            this.map.events.register("moveend", this, this.setMapType);
         }
-    },
-    
-    /** 
-     * Method: setMapType
-     * The map has been centered, and a map type was specified, so we 
-     *     set the map type on the gmap object, then unregister the listener
-     *     so that we dont keep doing this every time the map moves.
-     */
-    setMapType: function() {
-        if (this.mapObject.getCenter() != null) {
-            
-            // Support for custom map types.
-            if (OpenLayers.Util.indexOf(this.mapObject.getMapTypes(),
-                                        this.type) == -1) {
-                this.mapObject.addMapType(this.type);
-            }    
 
-            this.mapObject.setMapType(this.type);
-            this.map.events.unregister("moveend", this, this.setMapType);
-        }
     },
 
     /**
@@ -231,16 +222,95 @@ OpenLayers.Layer.Google = OpenLayers.Class(
     },
 
     /**
-     * Method: display
+     * APIMethod: setVisibility
-     * Hide or show the layer
+     * Set the visibility flag for the layer and hide/show & redraw 
-     *
+     *     accordingly. Fire event unless otherwise specified
+     * 
+     * Note that visibility is no longer simply whether or not the layer's
+     *     style.display is set to "block". Now we store a 'visibility' state 
+     *     property on the layer class, this allows us to remember whether or 
+     *     not we *desire* for a layer to be visible. In the case where the 
+     *     map's resolution is out of the layer's range, this desire may be 
+     *     subverted.
+     * 
      * Parameters:
-     * display - {Boolean}
+     * visible - {Boolean} Display the layer (if in range)
      */
-    display: function(display) {
+    setVisibility: function(visible) {
-        OpenLayers.Layer.EventPane.prototype.display.apply(this, arguments);
+        OpenLayers.Layer.EventPane.prototype.setVisibility.apply(this, arguments);
-        this.termsOfUse.style.display = this.div.style.display;
+        this.setGMapVisibility(visible);
-        this.poweredBy.style.display = this.div.style.display;
+    },
+    
+    /**
+     * Method: setGMapVisibility
+     * Display the GMap container and associated elements.
+     * 
+     * Parameters:
+     * visible - {Boolean} Display the GMap elements.
+     */
+    setGMapVisibility: function(visible) {
+        var cache = OpenLayers.Layer.Google.cache[this.map.id];
+        if (cache) {
+            var container = this.mapObject.getContainer();
+            if (visible === true) {
+                this.mapObject.setMapType(this.type);
+                container.style.display = "";
+                this.termsOfUse.style.display = "";
+                this.poweredBy.style.display = "";            
+                cache.displayed = this.id;
+            } else {
+                if (cache.displayed === this.id) {
+                    delete cache.displayed;
+                }
+                if (!cache.displayed) {
+                    container.style.display = "none";
+                    this.termsOfUse.style.display = "none";
+                    this.poweredBy.style.display = "none";
+                }
+            }
+        }
+    },
+    
+    /**
+     * APIMethod: destroy
+     * Clean up this layer.
+     */
+    destroy: function() {
+        /**
+         * We have to override this method because the event pane destroy
+         * deletes the mapObject reference before removing this layer from
+         * the map.
+         */
+        this.setGMapVisibility(false);
+        var cache = OpenLayers.Layer.Google.cache[this.map.id];
+        if (cache && cache.count <= 1) {
+            this.removeGMapElements(false);
+        }
+        OpenLayers.Layer.EventPane.prototype.destroy.apply(this, arguments);
+    },
+    
+    /**
+     * Method: removeGMapElements
+     * Remove all elements added to the dom.  This should only be called if
+     * this is the last of the Google layers for the given map.
+     */
+    removeGMapElements: function() {
+        var cache = OpenLayers.Layer.Google.cache[this.map.id];
+        if (cache) {
+            // remove shared elements from dom
+            var container = this.mapObject && this.mapObject.getContainer();                
+            if (container && container.parentNode) {
+                container.parentNode.removeChild(container);
+            }
+            var termsOfUse = cache.termsOfUse;
+            if (termsOfUse && termsOfUse.parentNode) {
+                termsOfUse.parentNode.removeChild(termsOfUse);
+            }
+            var poweredBy = cache.poweredBy;
+            if (poweredBy && poweredBy.parentNode) {
+                poweredBy.parentNode.removeChild(poweredBy);
+            }
+        }
     },
 
     /**
@@ -251,14 +321,26 @@ OpenLayers.Layer.Google = OpenLayers.Class(
      * map - {<OpenLayers.Map>}
      */
     removeMap: function(map) {
-        if (this.termsOfUse && this.termsOfUse.parentNode) {
+        // hide layer before removing
-            this.termsOfUse.parentNode.removeChild(this.termsOfUse);
+        if (this.visibility && this.mapObject) {
-            this.termsOfUse = null;
+            this.setGMapVisibility(false);
         }
-        if (this.poweredBy && this.poweredBy.parentNode) {
+        // check to see if last Google layer in this map
-            this.poweredBy.parentNode.removeChild(this.poweredBy);
+        var cache = OpenLayers.Layer.Google.cache[map.id];
-            this.poweredBy = null;
+        if (cache) {
+            if (cache.count <= 1) {
+                this.removeGMapElements();
+                delete OpenLayers.Layer.Google.cache[map.id];
+            } else {
+                // decrement the layer count
+                --cache.count;
+            }
         }
+        // remove references to gmap elements
+        delete this.termsOfUse;
+        delete this.poweredBy;
+        delete this.mapObject;
+        delete this.dragObject;
         OpenLayers.Layer.EventPane.prototype.removeMap.apply(this, arguments);
     },
     
@@ -594,3 +676,9 @@ OpenLayers.Layer.Google = OpenLayers.Class(
 
     CLASS_NAME: "OpenLayers.Layer.Google"
 });
+
+/**
+ * Property: OpenLayers.Layer.Google.cache
+ * {Object} Cache for elements that should only be created once per map.
+ */
+OpenLayers.Layer.Google.cache = {};

tests/Layer/Google.html

@@ -85,35 +85,6 @@
         }
     }
 
-    function test_Layer_Google_setMapType (t) {
-        if (validkey) {
-            t.plan(3);
-            var layer = new OpenLayers.Layer.Google('Goog Layer');
-            layer.map = {'events':{'unregister': function() {}}};
-            layer.loadMapObject();
-            layer.mapObject.getCenter= function()  { return true; }
-            layer.mapObject.getMapTypes = function() { return [0, 1]; }
-            layer.mapObject.addMapType = function(type) {
-                t.eq(type, 5, "new map type passed correctly.");
-            }
-            layer.mapObject.setMapType = function(arg) { 
-               t.eq(arg, 5, "got map type"); 
-            }
-            layer.type = 5;
-            layer.setMapType();
-            layer.mapObject.setMapType = function(arg) { 
-               t.eq(arg, 0, "got map type"); 
-            }
-            layer.type = 0
-            layer.setMapType();
-            
-        } else {
-            t.plan(0);
-            t.debug_print("Google tests can't be run from " +
-                          window.location.host);
-        }
-    }
-
     function test_Layer_Google_Translation_pixel (t) {
         if(validkey) {
             t.plan( 4 );