openlayers/tests/manual/google-panning.html

   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>