Google layer improvements for maps with allOverlays set to true. r=tschaub (closes #2758)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@10550 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
28
examples/google-v3-alloverlays.html
Normal file
28
examples/google-v3-alloverlays.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers Google (v3) Layer Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script src="google-v3-alloverlays.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Google (v3) allOverlays Layer Example</h1>
|
||||
<p id="shortdesc">
|
||||
Demonstrate use the Google Maps v3 API with allOverlays set to true on the map.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<div id="docs">
|
||||
<p>
|
||||
You can also use Google layers as overlays, e.g. in a map with
|
||||
allOverlays set to true. Note some of the layers disappear as
|
||||
you zoom in to levels that are not supported by all layers. See the
|
||||
<a href="google-v3-alloverlays.js" target="_blank">google-v3-alloverlays.js source</a>
|
||||
to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
examples/google-v3-alloverlays.js
Normal file
35
examples/google-v3-alloverlays.js
Normal file
@@ -0,0 +1,35 @@
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map('map', {allOverlays: true});
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
|
||||
// the SATELLITE layer has all 22 zoom level, so we add it first to
|
||||
// become the internal base layer that determines the zoom levels of the
|
||||
// map.
|
||||
var gsat = new OpenLayers.Layer.Google(
|
||||
"Google Satellite",
|
||||
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
|
||||
);
|
||||
var gphy = new OpenLayers.Layer.Google(
|
||||
"Google Physical",
|
||||
{type: google.maps.MapTypeId.TERRAIN, visibility: false}
|
||||
);
|
||||
var gmap = new OpenLayers.Layer.Google(
|
||||
"Google Streets", // the default
|
||||
{numZoomLevels: 20, visibility: false}
|
||||
);
|
||||
var ghyb = new OpenLayers.Layer.Google(
|
||||
"Google Hybrid",
|
||||
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 22, visibility: false}
|
||||
);
|
||||
|
||||
map.addLayers([gsat, gphy, gmap, ghyb]);
|
||||
|
||||
// Google.v3 uses EPSG:900913 as projection, so we have to
|
||||
// transform our coordinates
|
||||
map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform(
|
||||
new OpenLayers.Projection("EPSG:4326"),
|
||||
map.getProjectionObject()
|
||||
), 5);
|
||||
}
|
||||
@@ -156,13 +156,41 @@ OpenLayers.Layer.Google = OpenLayers.Class(
|
||||
* visible - {Boolean} Display the layer (if in range)
|
||||
*/
|
||||
setVisibility: function(visible) {
|
||||
this.setGMapVisibility(visible);
|
||||
// sharing a map container, opacity has to be set per layer
|
||||
var opacity = this.opacity == null ? 1 : this.opacity;
|
||||
OpenLayers.Layer.EventPane.prototype.setVisibility.apply(this, arguments);
|
||||
this.setOpacity(opacity);
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: display
|
||||
* Hide or show the Layer
|
||||
*
|
||||
* Parameters:
|
||||
* display - {Boolean}
|
||||
*/
|
||||
display: function(visible) {
|
||||
if (!this._dragging) {
|
||||
this.setGMapVisibility(visible);
|
||||
}
|
||||
OpenLayers.Layer.EventPane.prototype.display.apply(this, arguments);
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: moveTo
|
||||
*
|
||||
* Parameters:
|
||||
* bound - {<OpenLayers.Bounds>}
|
||||
* zoomChanged - {Boolean} Tells when zoom has changed, as layers have to
|
||||
* do some init work in that case.
|
||||
* dragging - {Boolean}
|
||||
*/
|
||||
moveTo: function(bounds, zoomChanged, dragging) {
|
||||
this._dragging = dragging;
|
||||
OpenLayers.Layer.EventPane.prototype.moveTo.apply(this, arguments);
|
||||
delete this._dragging;
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: setOpacity
|
||||
* Sets the opacity for the entire layer (all images)
|
||||
|
||||
@@ -181,11 +181,25 @@ OpenLayers.Layer.Google.v3 = {
|
||||
* visible - {Boolean} Display the GMap elements.
|
||||
*/
|
||||
setGMapVisibility: function(visible) {
|
||||
var type = this.type;
|
||||
|
||||
var layers = this.map.getLayersByClass("OpenLayers.Layer.Google");
|
||||
var index = OpenLayers.Util.indexOf(layers, this);
|
||||
var layer;
|
||||
for (var i=layers.length-1; i>=0; --i) {
|
||||
layer = layers[i];
|
||||
if (layer.visibility === true && layer.inRange === true) {
|
||||
type = layer.type;
|
||||
visible = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
var cache = OpenLayers.Layer.Google.cache[this.map.id];
|
||||
if (cache) {
|
||||
var container = this.mapObject.getDiv();
|
||||
if (visible === true) {
|
||||
this.mapObject.setMapTypeId(this.type);
|
||||
this.mapObject.setMapTypeId(type);
|
||||
container.style.left = "";
|
||||
if (cache.termsOfUse && cache.termsOfUse.style) {
|
||||
cache.termsOfUse.style.left = "";
|
||||
@@ -194,21 +208,17 @@ OpenLayers.Layer.Google.v3 = {
|
||||
}
|
||||
cache.displayed = this.id;
|
||||
} else {
|
||||
if (cache.displayed === this.id) {
|
||||
delete cache.displayed;
|
||||
}
|
||||
if (!cache.displayed) {
|
||||
container.style.left = "-9999px";
|
||||
if (cache.termsOfUse && cache.termsOfUse.style) {
|
||||
cache.termsOfUse.style.display = "none";
|
||||
// move ToU far to the left in addition to setting
|
||||
// display to "none", because at the end of the GMap
|
||||
// load sequence, display: none will be unset and ToU
|
||||
// would be visible after loading a map with a google
|
||||
// layer that is initially hidden.
|
||||
cache.termsOfUse.style.left = "-9999px";
|
||||
cache.poweredBy.style.display = "none";
|
||||
}
|
||||
delete cache.displayed;
|
||||
container.style.left = "-9999px";
|
||||
if (cache.termsOfUse && cache.termsOfUse.style) {
|
||||
cache.termsOfUse.style.display = "none";
|
||||
// move ToU far to the left in addition to setting
|
||||
// display to "none", because at the end of the GMap
|
||||
// load sequence, display: none will be unset and ToU
|
||||
// would be visible after loading a map with a google
|
||||
// layer that is initially hidden.
|
||||
cache.termsOfUse.style.left = "-9999px";
|
||||
cache.poweredBy.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user