[OpenLayers-Commits] r3624 - sandbox/euzuro/untiled3/examples

commits at openlayers.org commits at openlayers.org
Fri Jul 6 15:07:28 EDT 2007


Author: euzuro
Date: 2007-07-06 15:07:27 -0400 (Fri, 06 Jul 2007)
New Revision: 3624

Modified:
   sandbox/euzuro/untiled3/examples/layerLoadMonitoring.html
Log:
update load monitoring example to display messages in the actual div instead of in the console. Also, provide hooks to allow user to switch (on the fly) between single tile and grids with different levels of buffer. Note that this last bit of fancy switching hilights that this patch is not *quite* ready to go into trunk :-)

Modified: sandbox/euzuro/untiled3/examples/layerLoadMonitoring.html
===================================================================
--- sandbox/euzuro/untiled3/examples/layerLoadMonitoring.html	2007-07-06 19:05:14 UTC (rev 3623)
+++ sandbox/euzuro/untiled3/examples/layerLoadMonitoring.html	2007-07-06 19:07:27 UTC (rev 3624)
@@ -2,10 +2,22 @@
   <head>
     <style type="text/css">
         #map {
-            width: 800px;
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            width: 500px;
             height: 475px;
             border: 1px solid black;
         }
+        #eventsLog {
+            position: absolute;
+            top: 5px;
+            left: 510px;
+            width: 200px;
+            height: 475px;
+            overflow: auto;
+            border: 1px solid black;
+        }
     </style>
     <script src="../lib/Firebug/firebug.js"></script>
     <script src="../lib/OpenLayers.js"></script>
@@ -16,7 +28,13 @@
         var zoom = 5;
         var map, layer;
 
+        
         function init(){
+
+            eventsLog = OpenLayers.Util.getElement("eventsLog");
+
+            OpenLayers.Util.getElement("defaultOption").checked = true;
+
             map = new OpenLayers.Map( 'map' );
             layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                     "http://labs.metacarta.com/wms/vmap0",
@@ -25,21 +43,71 @@
             );
             
             layer.events.register("loadstart", this, function() {
-                OpenLayers.Console.log("loadstart!");
+                eventsLog.innerHTML += getTimeStamp() + ": Load Start<br>";        
             });
             
             layer.events.register("loadend", this, function() {
-                OpenLayers.Console.log("loadend!");
+                eventsLog.innerHTML += getTimeStamp() + ": Load End<br>";        
             });
             
-                                  
             map.addLayer(layer);
             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
         }
+        
+        function getTimeStamp() {
+            var date = new Date();
+            
+            var timeParts = [
+                date.getHours(), 
+                date.getMinutes(), 
+                date.getSeconds()
+            ];
+            
+            var timeStamp = "(" + timeParts.join(":") + ")";
+            
+            return timeStamp;
+        }
+        
+        function configureTiling(value) {
+            layer.singleTile = (value == "single");
+            if (!layer.singleTile) {
+                layer.buffer = value.charAt(value.length - 1);
+            }
+            layer.redraw();
+        }
+
         // -->
     </script>
   </head>
   <body onload="init()">
     <div id="map"></div>
+    <div id="controls">
+        <div id="eventsLog"></div>         
+    </div>
+    <div style="position:absolute; top: 500px; width: 700px">
+        <table>
+          <tr>
+            <td>
+                <input id="defaultOption" type="radio" name="tiling" value="buffer0" onclick="configureTiling(this.value);"/>
+                Gridded Buffer 0
+            </td>
+            <td style="width:25px">&nbsp;</td>
+            <td>
+                <input type="radio" name="tiling" value="buffer1" onclick="configureTiling(this.value);"/>
+                Gridded Buffer 1
+            </td>
+            <td style="width:25px">&nbsp;</td>
+            <td>
+                <input type="radio" name="tiling" value="buffer2" onclick="configureTiling(this.value);"/>
+                Gridded Buffer 2
+            </td>
+            <td style="width:25px">&nbsp;</td>
+            <td>
+                <input type="radio" name="tiling" value="single" onclick="configureTiling(this.value);"/>
+                Single Tile
+            </td>
+          </td>
+        </table>
+    </div>
   </body>
 </html>



More information about the Commits mailing list