]> dev.renevier.net Git - syp.git/blob - openlayers/examples/layerLoadMonitoring.html
add some margin around image
[syp.git] / 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>