Index: /nodes/make-map.py
===================================================================
--- /nodes/make-map.py	(revision 8283)
+++ /nodes/make-map.py	(revision 8285)
@@ -4,13 +4,10 @@
 # Build topological network graph
 # Rick van der Zwet <info@rickvanderzwet.nl>
+
+import cgi
+import gformat
 import re
 import sys
-import glob
-import tempfile
-import subprocess
-import gformat
-
 import urllib
-import re
 import yaml
 
@@ -65,115 +62,32 @@
 def make_graph():
   f = open('kmlfile.kml', 'w')
-  f.write("""
-<?xml version="1.0" encoding="UTF-8"?>
+  f.write("""<?xml version="1.0" encoding="UTF-8"?>
 <kml xmlns="http://earth.google.com/kml/2.0">
   <Document>
-    <name>KML Samples</name>
+    <name>WirelessLeiden Nodemap</name>
     <open>1</open>
-    <description>Unleash your creativity with the help of these examples!</description>
-    <Style id="downArrowIcon">
+    <description>Generated realtime status of all Wireless Leiden AccessPoints</description>
+    <Style id="node_status_up">
       <IconStyle>
-        <Icon>
-          <href>http://maps.google.com/mapfiles/kml/pal4/icon28.png</href>
-        </Icon>
+        <scale>0.5</scale>
+        <Icon><href>http://www.google.com/mapfiles/kml/paddle/grn-stars-lv.png</href></Icon>  
       </IconStyle>
     </Style>
-    <Style id="globeIcon">
+    <Style id="node_status_down">
       <IconStyle>
-        <Icon>
-          <href>http://maps.google.com/mapfiles/kml/pal3/icon19.png</href>
-        </Icon>
+        <scale>0.5</scale>
+        <Icon><href>http://www.google.com/mapfiles/kml/paddle/red-stars-lv.png</href></Icon>  
       </IconStyle>
-      <LineStyle>
-        <width>2</width>
-      </LineStyle>
     </Style>
-    <Style id="transPurpleLineGreenPoly">
-      <LineStyle>
-        <color>7fff00ff</color>
-        <width>4</width>
-      </LineStyle>
-      <PolyStyle>
-        <color>7f00ff00</color>
-      </PolyStyle>
-    </Style>
-    <Style id="yellowLineGreenPoly">
-      <LineStyle>
-        <color>7f00ffff</color>
-        <width>4</width>
-      </LineStyle>
-      <PolyStyle>
-        <color>7f00ff00</color>
-      </PolyStyle>
-    </Style>
-    <Style id="thickBlackLine">
-      <LineStyle>
-        <color>87000000</color>
-        <width>10</width>
-      </LineStyle>
-    </Style>
-    <Style id="redLineBluePoly">
-      <LineStyle>
-        <color>ff0000ff</color>
-      </LineStyle>
-      <PolyStyle>
-        <color>ffff0000</color>
-      </PolyStyle>
-    </Style>
-    <Style id="blueLineRedPoly">
-      <LineStyle>
-        <color>ffff0000</color>
-      </LineStyle>
-      <PolyStyle>
-        <color>ff0000ff</color>
-      </PolyStyle>
-    </Style>
-    <Style id="transRedPoly">
-      <LineStyle>
-        <width>1.5</width>
-      </LineStyle>
-      <PolyStyle>
-        <color>7d0000ff</color>
-      </PolyStyle>
-    </Style>
-    <Style id="transBluePoly">
-      <LineStyle>
-        <width>1.5</width>
-      </LineStyle>
-      <PolyStyle>
-        <color>7dff0000</color>
-      </PolyStyle>
-    </Style>
-    <Style id="transGreenPoly">
-      <LineStyle>
-        <width>1.5</width>
-      </LineStyle>
-      <PolyStyle>
-        <color>7d00ff00</color>
-      </PolyStyle>
-    </Style>
-    <Style id="transYellowPoly">
-      <LineStyle>
-        <width>1.5</width>
-      </LineStyle>
-      <PolyStyle>
-        <color>7d00ffff</color>
-      </PolyStyle>
-    </Style>
-    <Style id="noDrivingDirections">
-      <BalloonStyle>
-        <text><![CDATA[
-          <b>$[name]</b>
-          <br /><br />
-          $[description]
-        ]]></text>
-      </BalloonStyle>
+    <Style id="node_status_planned">
+      <IconStyle>
+        <scale>0.5</scale>
+        <Icon><href>http://www.google.com/mapfiles/kml/paddle/wht-stars-lv.png</href></Icon>  
+      </IconStyle>
     </Style>
     <Folder>
-      <name>Paths</name>
+      <name>Nodes</name>
       <visibility>0</visibility>
-      <description>Examples of paths. Note that the tessellate tag is by default
-        set to 0. If you want to create tessellated lines, they must be authored
-        (or edited) directly in KML.</description>
+      <description>All active nodes and links</description>
     """)
 
@@ -201,37 +115,45 @@
           poel[addr] = [host]
           # Assume all eth2wifibridge to be 11a for a moment
-          if datadump[iface_key].has_key('eth2wifibridge'):
+          iface_parent = '_'.join(iface_key.split('_')[0:2])
+          if datadump[iface_parent].has_key('extra_type') and datadump[iface_parent]['extra_type'] == 'eth2wifibridge':
             link_type[addr] = '11a'
           else:
-            link_type[addr] = datadump[iface_key]['type']
+            link_type[addr] = datadump[iface_parent]['type']
           print "### %s [%s] is of type %s" % (gformat.showaddr(addr), iface_key, link_type[addr])
       lam, phi = rd2etrs(datadump['rdnap_x'], datadump['rdnap_y'])
       node[host] = (lam, phi)
       f.write("""
-		<Placemark>
-			<name>Blue Icon</name>
-			<description>Just another blue icon.</description>
-			<styleUrl>./styles.kml#blueIcons</styleUrl>
-			<Point>
-				<coordinates>%s,%s,630</coordinates>
-			</Point>
-		</Placemark>
-   """ % (lam, phi))
+      <description>All active nodes</description>
+      <Placemark>
+        <name>Node %(name)s</name>
+        <description>%(desc)s></description>
+        <styleUrl>#node_status_up</styleUrl>
+        <Point><coordinates>%(lam)s,%(phi)s,0</coordinates></Point>
+      </Placemark>
+   """ % {'name' : host, 'desc' : cgi.escape(datadump['location']), 'lam' : lam, 'phi' : phi})
       nodes += [("POINT(%s, %s)" % (lam, phi))]
   except (KeyError, ValueError), e:
     print "[FOUT] in '%s' interface '%s'" % (host,iface_key) 
-    print e
+    raise
     sys.exit(1)
 
+  f.write("""
+    </Folder>
+    <Folder>
+      <name>Links</name>
+      <visibility>0</visibility>
+      <description>All links</description>
+  """)
   for addr,leden in poel.iteritems():
     if link_type[addr] == '11a':
-      color = 'red'
+      color = '#ff0000ff'
+      weight = 2
+    elif link_type[addr] == 'eth':
+      color = '#ffff0000'
       weight = 4
-    elif link_type[addr] == 'eth':
-      color = 'blue'
-      weight = 8
     else:
-      color = 'black'
+      color = '#ff000000'
       weight = 1
+
     leden = sorted(set(leden))
     for index,lid in enumerate(leden[:-1]):
@@ -239,14 +161,22 @@
         f.write("""
       <Placemark>
-        <name>Untessellated</name>
+        <name>%(name)s</name>
         <visibility>0</visibility>
-        <description><![CDATA[If the <tessellate> tag has a value of 0, the line follow a simple straight-line path from point to point]]></description>
+        <description>%(desc)s</description>
         <LineString>
           <tessellate>0</tessellate>
-          <coordinates> %s, %s, 0
-            %s , %s, 0 </coordinates>
+          <coordinates> %(lam1)s, %(phi1)s, 0
+            %(lam2)s , %(phi2)s, 0 </coordinates>
         </LineString>
+        <Style>%(style)s</Style>
       </Placemark>
-      """ % (node[lid][0], node[lid][1], node[buur][0], node[buur][1]))
+      """ % { 'lam1' : node[lid][0], 
+              'phi1' : node[lid][1], 
+              'lam2' : node[buur][0], 
+              'phi2' : node[buur][1],
+              'name' : "Interlink: %s --- %s" % (lid, buur), 
+              'desc' : "%s [%s]" % (gformat.showaddr(addr), link_type[addr]),
+              'style' : "<LineStyle><color>%s</color><width>%s</width></LineStyle>" % (color, weight),
+              })
   f.write("""
     </Folder>
Index: /nodes/nodemap.html
===================================================================
--- /nodes/nodemap.html	(revision 8283)
+++ /nodes/nodemap.html	(revision 8285)
@@ -9,5 +9,5 @@
       }
     </style>
-    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'></script>
+  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAKRiFs2kXKhTkKZkE_ms9rhTdBXm62xfhQU7Dk6ZBFSzYdmSteRQWjLqZhwX8afHvGpd4N3iKql6w8g" type="text/javascript"></script>
 
     <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
@@ -60,9 +60,16 @@
                 extractStyles: true, 
                 extractAttributes: true,
-                maxDepth: 2
+                maxDepth: 5
               }
             });
         map.addLayer(kml);
 
+        select = new OpenLayers.Control.SelectFeature(kml);
+        kml.events.on( {
+               "featureselected": onKMLFeatureSelect,
+               "featureunselected": onKMLFeatureUnselect
+        });
+        map.addControl(select);
+        select.activate();
 
         var vectors = new OpenLayers.Layer.Vector("Vector Layer")
@@ -75,4 +82,5 @@
         map.addControl(new OpenLayers.Control.ScaleLine());
         map.addControl(new OpenLayers.Control.KeyboardDefaults());
+        map.addControl(new OpenLayers.Control.ZoomBox());
 
         //var in_options = {
@@ -162,4 +170,29 @@
       }
 
+      function onPopupClose(evt) {
+          select.unselectAll();
+      }
+
+
+      function onKMLFeatureSelect(event) {
+        var feature = event.feature;
+        var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description;
+        popup = new OpenLayers.Popup.FramedCloud("chicken", 
+                                 feature.geometry.getBounds().getCenterLonLat(),
+                                 new OpenLayers.Size(100,100),
+                                 content,
+                                 null, true, onPopupClose);
+        feature.popup = popup;
+        map.addPopup(popup);
+      }
+
+      function onKMLFeatureUnselect(event) {
+        var feature = event.feature;
+        if(feature.popup) {
+          map.removePopup(feature.popup);
+          feature.popup.destroy();
+          delete feature.popup;
+        }
+      }
 
       function handleMeasurements(event) {
@@ -199,4 +232,13 @@
       }
 
+      function toggleInfo() {
+        var e = document.getElementById('infofield');
+        if (e.style.visibility == "hidden") {
+          e.style.visibility = "visible";
+        } else {
+          e.style.visibility = "hidden";
+        };
+      }
+
       // http://openlayers.org/dev/examples/strategy-cluster-threshold.html
     </script>
@@ -204,9 +246,16 @@
   <body onload="init();">
     <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 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()"/>
+          <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon36.png" alt="Information" onclick="toggleInfo()" />
+          <div id="output"></div>
+      </div>
+      <div id="infofield" style="position: absolute; bottom: 40px; left : 10px; z-index:1004; background-color: red; visibility: hidden">
+        <ul>
+          <li>holding down shift, whilst dragging the mouse to do box zooming</li>
+          <li>Keyboard Navigation is enabled</li>
+        </ul>
+      </div>
     </div>
   </body>
