Index: nodes/nodemap.html
===================================================================
--- nodes/nodemap.html	(revision 8282)
+++ nodes/nodemap.html	(revision 8283)
@@ -1,5 +1,5 @@
 <html>
   <head>
-    <title>OpenLayers Demo</title>
+    <title>Wireless Leiden Nodemap using OpenLayers.org and OpenSteetmap.org</title>
     <style type="text/css">
       html, body, #basicMap {
@@ -9,16 +9,39 @@
       }
     </style>
-    <!-- <script src="http://www.openlayers.org/api/OpenLayers.js"></script> -->
-    <script src="http://openlayers.org/dev/OpenLayers.js"</script>
+    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'></script>
+
+    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
+    <!-- <script src="http://openlayers.org/dev/OpenLayers.js"</script> -->
 
     <script>
+      var map, rulerControl;
+      var projection_wgs = new OpenLayers.Projection("EPSG:4326"); // WGS 1984
+      var projection_smp = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator Projection
+
       function init() {
         map = new OpenLayers.Map("basicMap");
-        var mapnik = new OpenLayers.Layer.OSM();
-        map.addLayer(mapnik);
-
-        //layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
-        //        "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
-        //map.addLayer(layer);
+
+        var world_bound = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
+        var mapnik = new OpenLayers.Layer.OSM("OpenStreepMap");
+        var google_sat = new OpenLayers.Layer.Google("Google Satellite" , 
+           { type: G_SATELLITE_MAP, 
+             sphericalMercator: true, 
+             maxExtent: world_bound,
+             wrapDateLine: false});
+        var google_normal = new OpenLayers.Layer.Google("Google Normal" , 
+           { type: G_NORMAL_MAP, 
+             sphericalMercator: true,
+             maxExtent: world_bound,
+             wrapDateLine: false});
+
+        var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
+
+        map.addLayers([mapnik, google_sat, wms, google_normal]);
+        //map.setCenter(new OpenLayers.LonLat(4.40,52.186), 9);
+
+        defaultFocus();
+
+
         //var pois = new OpenLayers.Layer.Text( "My Points",
         //                   { location:"./textfile.txt",
@@ -26,4 +49,9 @@
         //                   });
         //map.addLayer(pois);
+
+        //function parseKML(req) {
+        //  alert(req.responseText);
+        //};
+        //alert(OpenLayers.loadURL("./kmlfile.kml", "", null, parseKML));
 
         var kml = new OpenLayers.Layer.GML("KML", "./kmlfile.kml",
@@ -38,8 +66,13 @@
 
 
-        //var vectors = new OpenLayers.Layer.Vector("Vector Layer")
-        //map.addLayer(vectors);
-        //map.addControl(new OpenLayers.Control.MousePosition());
-        //map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
+        var vectors = new OpenLayers.Layer.Vector("Vector Layer")
+        map.addLayer(vectors);
+        map.addControl(new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }));
+        map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
+        map.addControl(new OpenLayers.Control.LayerSwitcher());
+        map.addControl(new OpenLayers.Control.OverviewMap());
+        map.addControl(new OpenLayers.Control.Permalink());
+        map.addControl(new OpenLayers.Control.ScaleLine());
+        map.addControl(new OpenLayers.Control.KeyboardDefaults());
 
         //var in_options = {
@@ -76,15 +109,105 @@
         //}
 
-         map.setCenter(new OpenLayers.LonLat(4.40,52.186) // Center of the map
-          .transform(
-            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
-            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
-          ), 11 // Zoom level
+
+        // style the sketch fancy
+        var sketchSymbolizers = {
+            "Point": {
+                pointRadius: 4,
+                graphicName: "square",
+                fillColor: "white",
+                fillOpacity: 1,
+                strokeWidth: 1,
+                strokeOpacity: 1,
+                strokeColor: "#333333"
+            },
+            "Line": {
+                strokeWidth: 3,
+                strokeOpacity: 1,
+                strokeColor: "#666666",
+                strokeDashstyle: "dash"
+            },
+            "Polygon": {
+                strokeWidth: 2,
+                strokeOpacity: 1,
+                strokeColor: "#666666",
+                fillColor: "white",
+                fillOpacity: 0.3
+            }
+        };
+        var style = new OpenLayers.Style();
+        style.addRules([
+            new OpenLayers.Rule({symbolizer: sketchSymbolizers})
+        ]);
+        var styleMap = new OpenLayers.StyleMap({"default": style});
+        
+        rulerControl = new OpenLayers.Control.Measure(
+                OpenLayers.Handler.Path, {
+                    persist: true,
+                    handlerOptions: {
+                        layerOptions: {styleMap: styleMap}
+                    }
+                }
         );
-      }
+
+        rulerControl.events.on({
+            "measure": handleMeasurements,
+            "measurepartial": handleMeasurements
+        });
+        map.addControl(rulerControl);
+      }
+
+      function resize() {
+        size = new OpenLayers.Size(size.w + 10, size.h + 10);
+        icon.setSize(size);   
+      }
+
+
+      function handleMeasurements(event) {
+          // For some reason 'delayed' events get posted even though the object
+          // is deactivated
+          if (!rulerControl.active) {
+            return;
+          }
+          var geometry = event.geometry;
+          var units = event.units;
+          var order = event.order;
+          var measure = event.measure;
+          var element = document.getElementById('output');
+           out = measure.toFixed(3) + " " + units;
+          if(order == 2) {
+              out += "<sup>2</" + "sup>";
+          } else {
+          }
+          element.innerHTML = out;
+      }
+
+      function toggleRulerControl() {
+          if (!rulerControl.active) {
+             rulerControl.activate();
+             document.getElementById('ruler').src = "ruler_on.png";
+          } else {
+             rulerControl.deactivate();
+             document.getElementById('ruler').src = "ruler_off.png";
+             document.getElementById('output').innerHTML = "";
+             
+          }
+      }
+      function defaultFocus() {
+        map.setCenter(new OpenLayers.LonLat(4.50,52.186) // Center of the map
+         .transform( projection_wgs, projection_smp), 12 // Zoom level
+        );
+      }
+
+      // http://openlayers.org/dev/examples/strategy-cluster-threshold.html
     </script>
   </head>
   <body onload="init();">
-    <div id="basicMap"></div>
+    <div id="basicMap">
+    <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
+        <img id="ruler" src="ruler_off.png" onClick="toggleRulerControl()" />
+        <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon20.png" alt="Reset focus" onclick="defaultFocus()"/>
+        <div id="output"></div>
+    </div>
+    </div>
   </body>
 </html>
