77ffdf7248
git-svn-id: http://svn.openlayers.org/trunk/openlayers@10020 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
135 lines
5.5 KiB
HTML
135 lines
5.5 KiB
HTML
<html>
|
|
<head>
|
|
<title>Multiple Google Layers Acceptance Test</title>
|
|
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ"></script>
|
|
<script src="../../lib/OpenLayers.js"></script>
|
|
<link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
|
|
<link rel="stylesheet" href="../../theme/default/google.css" type="text/css" />
|
|
<style>
|
|
.col {
|
|
position: relative;
|
|
width: 50%;
|
|
}
|
|
#col1 {
|
|
float: left;
|
|
}
|
|
#col2 {
|
|
float: right;
|
|
}
|
|
.map {
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
.wrap {
|
|
position: relative;
|
|
padding: 10px;
|
|
}
|
|
ul {
|
|
padding: 0;
|
|
}
|
|
ul li {
|
|
list-style: none;
|
|
}
|
|
p.clear {
|
|
clear: both;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="col1" class="col">
|
|
<div class="wrap">
|
|
<div id="map1" class="map"></div>
|
|
layers for map1
|
|
<ul>
|
|
<li><input type="checkbox" checked="checked" name="streets1" id="streets1"><label for="streets1">streets</label></li>
|
|
<li><input type="checkbox" checked="checked" name="sat1" id="sat1"><label for="sat1">imagery</label></li>
|
|
<li><input type="checkbox" checked="checked" name="topo1" id="topo1"><label for="topo1">topography</label></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="col2" class="col">
|
|
<div class="wrap">
|
|
<div id="map2" class="map"></div>
|
|
layers for map2
|
|
<ul>
|
|
<li><input type="checkbox" name="streets2" id="streets2"><label for="streets2">streets</label></li>
|
|
<li><input type="checkbox" name="sat2" id="sat2"><label for="sat2">imagery</label></li>
|
|
<li><input type="checkbox" name="topo2" id="topo2"><label for="topo2">topography</label></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<p class="clear">
|
|
This example is used to confirm that resizable maps with multiple
|
|
Google layers work properly. Click the checkboxes to add/remove
|
|
layers from the maps. Use the layer switcher to change the map's
|
|
base layer. You should be able to confirm the following:
|
|
<ol>
|
|
<li>Adding and removing layers doesn't raise any errors
|
|
(regardless of how many times the same layer is added/removed).</li>
|
|
<li>The Google "Powered By" link is always visible and clickable
|
|
when a Google layer is displayed.</li>
|
|
<li>The Google "Terms of Use" link is always visible and clickable
|
|
when a Google layer is displayed.</li>
|
|
<li>Resizing a map (by resizing the browser window) and then
|
|
changing base layer works well. That is, the center & scale are
|
|
preserved and all tiles are well aligned.</li>
|
|
<li>Setting the base layer to the "Dummy Layer" hides all other
|
|
Google base layers, "Powered By" link, and "Terms of Use" link.</li>
|
|
</ol>
|
|
</p>
|
|
<script>
|
|
|
|
var map1 = new OpenLayers.Map("map1");
|
|
var streets1 = new OpenLayers.Layer.Google("Streets", {
|
|
type: G_NORMAL_MAP
|
|
});
|
|
var sat1 = new OpenLayers.Layer.Google("Imagery", {
|
|
type: G_SATELLITE_MAP
|
|
});
|
|
var topo1 = new OpenLayers.Layer.Google("Topography", {
|
|
type: G_PHYSICAL_MAP
|
|
});
|
|
var dummy1 = new OpenLayers.Layer("Dummy Layer", {
|
|
isBaseLayer: true
|
|
});
|
|
map1.addLayers([streets1, sat1, topo1, dummy1]);
|
|
map1.addControl(new OpenLayers.Control.LayerSwitcher);
|
|
map1.zoomToMaxExtent();
|
|
|
|
var map2 = new OpenLayers.Map("map2");
|
|
var streets2 = new OpenLayers.Layer.Google("Streets", {
|
|
type: G_NORMAL_MAP
|
|
});
|
|
var sat2 = new OpenLayers.Layer.Google("Imagery", {
|
|
type: G_SATELLITE_MAP
|
|
});
|
|
var topo2 = new OpenLayers.Layer.Google("Topography", {
|
|
type: G_PHYSICAL_MAP
|
|
});
|
|
var dummy2 = new OpenLayers.Layer("Dummy Layer", {
|
|
isBaseLayer: true
|
|
});
|
|
map2.addLayer(dummy2);
|
|
map2.addControl(new OpenLayers.Control.LayerSwitcher);
|
|
map2.zoomToMaxExtent();
|
|
|
|
// add behavior to checkboxes
|
|
var check, inputs = document.getElementsByTagName("input");
|
|
for (var i=0, len=inputs.length; i<len; ++i) {
|
|
check = inputs[i];
|
|
check.onclick = function() {
|
|
var name = this.name;
|
|
var num = name.match(/\d$/)[0];
|
|
var layer = window[name];
|
|
var map = window["map" + num];
|
|
if (this.checked) {
|
|
map.addLayer(layer);
|
|
} else {
|
|
map.removeLayer(layer);
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |