1 <html xmlns="http://www.w3.org/1999/xhtml">
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">
16 border: 1px solid black;
19 <script src="../lib/Firebug/firebug.js"></script>
20 <script src="../lib/OpenLayers.js"></script>
21 <script type="text/javascript">
29 eventsLog = OpenLayers.Util.getElement("eventsLogID");
31 map = new OpenLayers.Map( 'map' );
32 map.addControl(new OpenLayers.Control.LayerSwitcher());
34 buffer0 = new OpenLayers.Layer.WMS( "WMS Buffer 0",
35 "http://labs.metacarta.com/wms/vmap0",
37 { singleTile: false, buffer:0}
39 registerEvents(buffer0);
41 buffer1 = new OpenLayers.Layer.WMS( "WMS Buffer 1",
42 "http://labs.metacarta.com/wms/vmap0",
44 { singleTile: false, buffer:1}
46 registerEvents(buffer1);
48 buffer2 = new OpenLayers.Layer.WMS( "WMS Buffer 2",
49 "http://labs.metacarta.com/wms/vmap0",
51 { singleTile: false, buffer:2 }
53 registerEvents(buffer2);
55 singleTileLayer = new OpenLayers.Layer.WMS( "Single Tile Layer",
56 "http://labs.metacarta.com/wms/vmap0",
60 registerEvents(singleTileLayer);
62 map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
65 function registerEvents(layer) {
67 layer.logEvent = function(event) {
68 eventsLog.innerHTML += "<br>(" + getTimeStamp() + ") " +
69 this.name + ": " + event;
72 layer.events.register("loadstart", layer, function() {
73 this.logEvent("Load Start");
76 layer.events.register("tileloaded", layer, function() {
77 this.logEvent("Tile loaded. " + this.numLoadingTiles + " left.");
80 layer.events.register("loadend", layer, function() {
81 this.logEvent("Load End. Grid:" + this.grid.length + "x" + this.grid[0].length);
88 function getTimeStamp() {
89 var date = new Date();
97 var timeStamp = timeParts.join(":");
102 function clearLog() {
103 eventsLog.innerHTML = "<b>Events Log:</b>";
107 <body onload="init()">
108 <h1 id="title">Layer Load Monitoring Example</h1>
110 <div id="tags"></div>
113 Demonstrate a method for monitoring tile loading performance.
116 <div id="map" style="float:left;"></div>
119 <div id="eventsLogID">
123 <input type="button" value="Clear" onclick="clearLog()"/>