openlayers/tests/manual/tiles-loading.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>Tiles Loading Acceptance Test</title>
   4     <style type="text/css">
   5         body {
   6             font-size: 0.8em;
   7         }
   8         p {
   9             padding-top: 1em;
  10         }
  11         #map {
  12             margin: 1em;
  13             float: left;
  14             width: 512px;
  15             height: 512px;
  16         }
  17     </style>
  18
  19     <script src='http://maps.google.com/maps?file=api&amp;v=2.82&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
  20     <script src="../../lib/OpenLayers.js"></script>
  21     <script type="text/javascript">
  22         // make map available for easy debugging
  23         var map;
  24
  25         // avoid pink tiles
  26         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
  27         OpenLayers.Util.onImageLoadErrorColor = "transparent";
  28
  29         function init(){
  30             var options = {
  31                 controls: [],
  32                 projection: "EPSG:900913",
  33                 units: "m",
  34                 maxResolution: 156543.0339,
  35                 maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
  36                                                  20037508, 20037508.34)
  37             };
  38             map = new OpenLayers.Map('map', options);
  39             // create Google Mercator layers
  40             var gmap = new OpenLayers.Layer.Google(
  41                 "Google Streets",
  42                 {'sphericalMercator': true}
  43             );
  44             // create WMS layer
  45             var wmsMaxResolution = 78271.51695;
  46             var wms = new OpenLayers.Layer.WMS(
  47                 "World Map",
  48                 "http://world.freemap.in/tiles/",
  49                 {'layers': 'factbook-overlay', 'format':'png'},
  50                 {
  51                     'opacity': 0.4,
  52                     'isBaseLayer': false,
  53                     'wrapDateLine': true,
  54                     'buffer': 0,
  55                     'maxResolution' : wmsMaxResolution
  56                 }
  57             );
  58             map.addLayers([gmap, wms]);
  59             map.addControl(new OpenLayers.Control.Navigation());
  60             map.addControl(new OpenLayers.Control.LayerSwitcher());
  61             map.addControl(new OpenLayers.Control.PanZoomBar());
  62
  63             function onLayerChanged() {
  64                 var html = '<p>WMS Layer state - in range: '
  65                     + this.inRange
  66                     + ', visibility: '
  67                     + this.visibility;
  68                     + '</p>';
  69                 document.getElementById('layerstate').innerHTML = html;
  70             }
  71             map.events.register('changelayer', wms, onLayerChanged);
  72
  73             function onTileLoaded() {
  74                 var html = '<p>Message: ';
  75                 if (this.numLoadingTiles > 0) {
  76                     html += 'Loading tiles...';
  77                 } else {
  78                     html += 'Done loading tiles';
  79                 }
  80                 html += '</p>';
  81                 document.getElementById('tilesloading').innerHTML = html;
  82             }
  83             wms.events.register('tileloaded', wms, onTileLoaded);
  84
  85             map.zoomToMaxExtent()
  86         }
  87     </script>
  88   </head>
  89   <body onload="init()">
  90     <div id="map"></div>
  91     <p>
  92
  93       <b>Test 0</b> : at the initial zoom the WMS layer is in range, you should
  94       therefore see the 'Loading tiles...' message when loading the page for
  95       the first time.
  96
  97     </p>
  98     <p>
  99
 100       <b>Test 1</b> : If you zoom out by one level (using the zoombar), the WMS
 101       layer becomes out of range. No tile should be loaded so you shouldn't see
 102       the 'Loading tiles...' message.
 103
 104     </p>
 105     <p>
 106
 107       <b>Test 2</b> : Zoom in by one level to go back to initial state (the WMS
 108       is back). Open the layer switcher and turn off the WMS layer. No tile
 109       should be loaded so you shouldn't see the 'Loading tiles...' message.
 110
 111     </p>
 112     <p>
 113
 114       <b>Test 3</b> : Keep the WMS layer turned off in the layer switcher. Zoom
 115       out by one level again. The layer is both invisible and out of range, so
 116       you shouldn't see the 'Loading tiles...' message.
 117
 118     </p>
 119     <div id="layerstate"><p>WMS Layer state - in range: true, visibility: true</p></div>
 120     <div id="tilesloading"><p>Message:</p></div>
 121   </body>
 122 </html>