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
This commit is contained in:
Tim Schaub
@@ -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?
|
||||
try {
|
||||
// create GMap, hide nav controls
|
||||
this.mapObject = new GMap2( this.div );
|
||||
|
||||
//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);
|
||||
// ensure this layer type is one of the mapObject types
|
||||
if (OpenLayers.Util.indexOf(this.mapObject.getMapTypes(),
|
||||
this.type) === -1) {
|
||||
this.mapObject.addMapType(this.type);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: setMap
|
||||
* Overridden from EventPane because if a map type has been specified,
|
||||
* we need to attach a listener for the first moveend -- this is how
|
||||
* we will know that the map has been centered. Only once the map has
|
||||
* 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);
|
||||
//since v 2.93 getDragObject is now available.
|
||||
if(typeof mapObject.getDragObject == "function") {
|
||||
this.dragObject = mapObject.getDragObject();
|
||||
} else {
|
||||
this.dragPanMapObject = null;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 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
|
||||
* Hide or show the layer
|
||||
*
|
||||
* APIMethod: setVisibility
|
||||
* 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) {
|
||||
OpenLayers.Layer.EventPane.prototype.display.apply(this, arguments);
|
||||
this.termsOfUse.style.display = this.div.style.display;
|
||||
this.poweredBy.style.display = this.div.style.display;
|
||||
setVisibility: function(visible) {
|
||||
OpenLayers.Layer.EventPane.prototype.setVisibility.apply(this, arguments);
|
||||
this.setGMapVisibility(visible);
|
||||
},
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
this.termsOfUse.parentNode.removeChild(this.termsOfUse);
|
||||
this.termsOfUse = null;
|
||||
// hide layer before removing
|
||||
if (this.visibility && this.mapObject) {
|
||||
this.setGMapVisibility(false);
|
||||
}
|
||||
if (this.poweredBy && this.poweredBy.parentNode) {
|
||||
this.poweredBy.parentNode.removeChild(this.poweredBy);
|
||||
this.poweredBy = null;
|
||||
// check to see if last Google layer in this map
|
||||
var cache = OpenLayers.Layer.Google.cache[map.id];
|
||||
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 = {};
|
||||
|
||||
Reference in New Issue
Block a user