openlayers/examples/layerLoadMonitoring.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers Layer Load Monitoring Example</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <style type="text/css">
   7         #controls {
   8             float: left;
   9             text-align: right;
  10         }
  11         #eventsLogID {
  12             text-align: left;
  13             width: 350px;
  14             height: 475px;
  15             overflow: auto;
  16             border: 1px solid black;
  17         }
  18     </style>
  19     <script src="../lib/Firebug/firebug.js"></script>
  20     <script src="../lib/OpenLayers.js"></script>
  21     <script type="text/javascript">
  22         var lon = 5;
  23         var lat = 40;
  24         var zoom = 5;
  25         var map, layer;
  26
  27         function init(){
  28
  29             eventsLog = OpenLayers.Util.getElement("eventsLogID");
  30
  31             map = new OpenLayers.Map( 'map' );
  32             map.addControl(new OpenLayers.Control.LayerSwitcher());
  33
  34             buffer0 = new OpenLayers.Layer.WMS( "WMS Buffer 0",
  35                     "http://labs.metacarta.com/wms/vmap0",
  36                     {layers: 'basic'} ,
  37                     { singleTile: false, buffer:0}
  38             );
  39             registerEvents(buffer0);
  40
  41             buffer1 = new OpenLayers.Layer.WMS( "WMS Buffer 1",
  42                     "http://labs.metacarta.com/wms/vmap0",
  43                     {layers: 'basic'} ,
  44                     { singleTile: false, buffer:1}
  45             );
  46             registerEvents(buffer1);
  47
  48             buffer2 = new OpenLayers.Layer.WMS( "WMS Buffer 2",
  49                     "http://labs.metacarta.com/wms/vmap0",
  50                     {layers: 'basic'} ,
  51                     { singleTile: false, buffer:2 }
  52             );
  53             registerEvents(buffer2);
  54
  55             singleTileLayer = new OpenLayers.Layer.WMS( "Single Tile Layer",
  56                     "http://labs.metacarta.com/wms/vmap0",
  57                     {layers: 'basic'} ,
  58                     { singleTile: true}
  59             );
  60             registerEvents(singleTileLayer);
  61
  62             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
  63         }
  64
  65         function registerEvents(layer) {
  66
  67             layer.logEvent = function(event) {
  68                 eventsLog.innerHTML += "<br>(" + getTimeStamp() + ") " +
  69                                        this.name + ": " + event;
  70             }
  71
  72             layer.events.register("loadstart", layer, function() {
  73                 this.logEvent("Load Start");
  74             });
  75
  76             layer.events.register("tileloaded", layer, function() {
  77                 this.logEvent("Tile loaded. " + this.numLoadingTiles + " left.");
  78             });
  79
  80             layer.events.register("loadend", layer, function() {
  81                 this.logEvent("Load End. Grid:" + this.grid.length + "x" + this.grid[0].length);
  82             });
  83
  84             map.addLayer(layer);
  85         }
  86
  87
  88         function getTimeStamp() {
  89             var date = new Date();
  90
  91             var timeParts = [
  92                 date.getHours(),
  93                 date.getMinutes(),
  94                 date.getSeconds()
  95             ];
  96
  97             var timeStamp = timeParts.join(":");
  98
  99             return timeStamp;
 100         }
 101
 102         function clearLog() {
 103             eventsLog.innerHTML = "<b>Events Log:</b>";
 104         }
 105     </script>
 106   </head>
 107   <body onload="init()">
 108       <h1 id="title">Layer Load Monitoring Example</h1>
 109
 110       <div id="tags"></div>
 111
 112       <p id="shortdesc">
 113           Demonstrate a method for monitoring tile loading performance.
 114       </p>
 115
 116     <div id="map" style="float:left;"></div>
 117
 118     <div id="controls">
 119         <div id="eventsLogID">
 120             <b>Events Log:</b>
 121         </div>
 122
 123         <input type="button" value="Clear" onclick="clearLog()"/>
 124     </div>
 125
 126     <div id="docs">
 127     </div>
 128   </body>
 129 </html>