OpenLayers OpenLayers

root/trunk/openlayers/tests/manual/google-panning.html

Revision 6470, 4.3 kB (checked in by tschaub, 10 months ago)

panning test updates

  • Property svn:eol-style set to native
Line 
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
3     <title>Google Panning Acceptance Test</title>
4     <style type="text/css">
5    
6         body {
7             font-size: 0.8em;
8         }
9         p {
10             padding-top: 1em;
11         }
12        
13         #evenmap {
14             margin: 1em;
15             float: left;
16             width: 256px;
17             height: 256px;
18         }
19
20         #oddmap {
21             margin: 1em;
22             float: left;
23             width: 255px;
24             height: 255px;
25         }
26
27
28     </style>
29
30     <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
31
32     <script src="../../lib/OpenLayers.js"></script>
33     <script type="text/javascript">
34  
35         var evenmap, oddmap;
36         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
37         OpenLayers.Util.onImageLoadErrorColor = "transparent";
38
39         function init(){
40             evenmap = new OpenLayers.Map('evenmap');
41             var evenlayer = new OpenLayers.Layer.Google(
42                 "Imagery",
43                 {type: G_SATELLITE_MAP}
44             );
45             evenmap.addLayer(evenlayer);
46             var epc = document.getElementById("epc");
47             var emc = document.getElementById("emc");
48             var ee = document.getElementById("ee");
49             evenmap.events.register("moveend", null, function() {
50                 var px = new OpenLayers.Pixel(evenmap.size.w / 2,
51                                               evenmap.size.h / 2);
52                 var pc = evenmap.getLonLatFromViewPortPx(px);
53                 pc.lon = parseFloat(pc.lon.toPrecision(6));
54                 pc.lat = parseFloat(pc.lat.toPrecision(6));
55                 var mc = evenmap.baseLayer.getOLLonLatFromMapObjectLonLat(
56                     evenmap.baseLayer.mapObject.getCenter()
57                 );
58                 mc.lon = parseFloat(mc.lon.toPrecision(6));
59                 mc.lat = parseFloat(mc.lat.toPrecision(6));
60                 epc.innerHTML = "(" + pc.lon + ", " + pc.lat + ")";
61                 emc.innerHTML = "(" + mc.lon + ", " + mc.lat + ")";
62                 ee.innerHTML = pc.equals(mc);
63             });
64             evenmap.zoomToMaxExtent();
65
66             oddmap = new OpenLayers.Map('oddmap');
67             var oddlayer = new OpenLayers.Layer.Google(
68                 "Imagery",
69                 {type: G_SATELLITE_MAP}
70             );
71             oddmap.addLayer(oddlayer);
72             var opc = document.getElementById("opc");
73             var omc = document.getElementById("omc");
74             var oe = document.getElementById("oe");
75             oddmap.events.register("moveend", null, function() {
76                 var px = new OpenLayers.Pixel(oddmap.size.w / 2,
77                                               oddmap.size.h / 2);
78                 var pc = oddmap.getLonLatFromViewPortPx(px);
79                 pc.lon = parseFloat(pc.lon.toPrecision(6));
80                 pc.lat = parseFloat(pc.lat.toPrecision(6));
81                 var mc = oddmap.baseLayer.getOLLonLatFromMapObjectLonLat(
82                     oddmap.baseLayer.mapObject.getCenter()
83                 );
84                 mc.lon = parseFloat(mc.lon.toPrecision(6));
85                 mc.lat = parseFloat(mc.lat.toPrecision(6));
86                 opc.innerHTML = "(" + pc.lon + ", " + pc.lat + ")";
87                 omc.innerHTML = "(" + mc.lon + ", " + mc.lat + ")";
88                 oe.innerHTML = pc.equals(mc);
89             });
90             oddmap.zoomToMaxExtent();
91
92         }
93
94     </script>
95   </head>
96   <body onload="init()">
97     <div id="evenmap"></div>
98     <p><b>Even sized map.</b> The map on the left should pan regularly, and the
99     two centers below should be equivalent.  Both dragging and panning with
100     buttons should maintain the same center.</p>
101     <p><b>pixel center:</b> <span id="epc"></span>
102     <br /><b>map center:</b> <span id="emc"></span>
103     <br /><b>equvalent:</b> <span id="ee"></span>
104     </p>
105     <br style="clear: both;" />
106
107     <div id="oddmap"></div>
108     <p><b>Odd sized map.</b> The map on the left should pan regularly, and the
109     two centers below should be equivalent.  Both dragging and panning with
110     buttons should maintain the same center.</p>
111     <p><b>pixel center:</b> <span id="opc"></span>
112     <br /><b>map center:</b> <span id="omc"></span>
113     <br /><b>equvalent:</b> <span id="oe"></span>
114     </p>
115     </ul>
116   </body>
117 </html>
Note: See TracBrowser for help on using the browser.