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
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Panning Acceptance Test</title>
<style type="text/css">
body {
font-size: 0.8em;
}
p {
padding-top: 1em;
}
#evenmap {
margin: 1em;
float: left;
width: 256px;
height: 256px;
}
#oddmap {
margin: 1em;
float: left;
width: 255px;
height: 255px;
}
/* avoid pink tiles */
.olImageLoadError {
background-color: transparent !important;
}
</style>
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
<script src="../../lib/OpenLayers.js"></script>
<script type="text/javascript">
var evenmap, oddmap;
// increase reload attempts
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
function init(){
evenmap = new OpenLayers.Map('evenmap');
var evenlayer = new OpenLayers.Layer.Google(
"Imagery",
{type: G_SATELLITE_MAP}
);
evenmap.addLayer(evenlayer);
var epc = document.getElementById("epc");
var emc = document.getElementById("emc");
var ee = document.getElementById("ee");
evenmap.events.register("moveend", null, function() {
var px = new OpenLayers.Pixel(evenmap.size.w / 2,
evenmap.size.h / 2);
var pc = evenmap.getLonLatFromViewPortPx(px);
pc.lon = parseFloat(pc.lon.toPrecision(6));
pc.lat = parseFloat(pc.lat.toPrecision(6));
var mc = evenmap.baseLayer.getOLLonLatFromMapObjectLonLat(
evenmap.baseLayer.mapObject.getCenter()
);
mc.lon = parseFloat(mc.lon.toPrecision(6));
mc.lat = parseFloat(mc.lat.toPrecision(6));
epc.innerHTML = "(" + pc.lon + ", " + pc.lat + ")";
emc.innerHTML = "(" + mc.lon + ", " + mc.lat + ")";
ee.innerHTML = pc.equals(mc);
});
evenmap.zoomToMaxExtent();
oddmap = new OpenLayers.Map('oddmap');
var oddlayer = new OpenLayers.Layer.Google(
"Imagery",
{type: G_SATELLITE_MAP}
);
oddmap.addLayer(oddlayer);
var opc = document.getElementById("opc");
var omc = document.getElementById("omc");
var oe = document.getElementById("oe");
oddmap.events.register("moveend", null, function() {
var px = new OpenLayers.Pixel(oddmap.size.w / 2,
oddmap.size.h / 2);
var pc = oddmap.getLonLatFromViewPortPx(px);
pc.lon = parseFloat(pc.lon.toPrecision(6));
pc.lat = parseFloat(pc.lat.toPrecision(6));
var mc = oddmap.baseLayer.getOLLonLatFromMapObjectLonLat(
oddmap.baseLayer.mapObject.getCenter()
);
mc.lon = parseFloat(mc.lon.toPrecision(6));
mc.lat = parseFloat(mc.lat.toPrecision(6));
opc.innerHTML = "(" + pc.lon + ", " + pc.lat + ")";
omc.innerHTML = "(" + mc.lon + ", " + mc.lat + ")";
oe.innerHTML = pc.equals(mc);
});
oddmap.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="evenmap"></div>
<p><b>Even sized map.</b> The map on the left should pan regularly, and the
two centers below should be equivalent. Both dragging and panning with
buttons should maintain the same center.</p>
<p><b>pixel center:</b> <span id="epc"></span>
<br /><b>map center:</b> <span id="emc"></span>
<br /><b>equvalent:</b> <span id="ee"></span>
</p>
<br style="clear: both;" />
<div id="oddmap"></div>
<p><b>Odd sized map.</b> The map on the left should pan regularly, and the
two centers below should be equivalent. Both dragging and panning with
buttons should maintain the same center.</p>
<p><b>pixel center:</b> <span id="opc"></span>
<br /><b>map center:</b> <span id="omc"></span>
<br /><b>equvalent:</b> <span id="oe"></span>
</p>
</ul>
</body>
</html>
|
