1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<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>
|
