From 54e0461471a5fa9f8afef1debe63e79c961582fd Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@gmail.com>
Date: Sat, 12 May 2012 16:49:12 +0200
Subject: [PATCH] update geomap.html

---
 html/geomap.html | 202 ++++++++++++++++++++++++++---------------------
 1 file changed, 112 insertions(+), 90 deletions(-)
diff --git a/html/geomap.html b/html/geomap.html
index bad4f19..51d97b7 100644
--- a/html/geomap.html
+++ b/html/geomap.html
@@ -1,114 +1,135 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-	<link rel="stylesheet" href="theme/default/style.css" type="text/css" />
+  <link rel="stylesheet" href="theme/default/style.css" type="text/css" />
 
-	<style type="text/css">
-		#map {
-		width: 100%;
-		height: 100%;
-		}
-		.olPopup p { margin:0px; }
-	</style>
+  <style type="text/css">
+    body, html {
+      margin: 0; padding: 0;
+    }
+    #map {
+    float: left;
+    width: 80%;
+
+    box-sizing:border-box;
+
+    }
+    #infobox {
+    box-sizing:border-box;
+    width: 20%;
+    vertical-align: top;
+    float: right;
+    padding: 1em;
+    }
+    body {
+    font:80%/100% 'helvetica neue',sans-serif,'arial';
+    color: #666;
+    }
+    h2 {
+      margin: 0 0 1em;
+      color: #f60;
+    }
+    li {
+      margin-bottom: 0.5em;
+    }
+    ul {
+      padding-left: 2em;
+    }
+    .olPopup p { margin:0px; }
+  </style>
 
   <title>Freifunk Lübeck - Knotenkarte</title>
 
-	<script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenLayers.js"></script>
-	<script src="http://maps.burningsilicon.net/OpenLayers-2.8/cloudmade.js"></script>
-	<script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenStreetMap.js"></script>
+  <script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenLayers.js"></script>
+  <script src="http://maps.burningsilicon.net/OpenLayers-2.8/cloudmade.js"></script>
+  <script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenStreetMap.js"></script>
 
-	<script type="text/javascript">
-		var map;
+  <script type="text/javascript">
+    var map;
 
-		OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control);
+    OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control);
 
-		function init()
-		{
-			map = new OpenLayers.Map ("map", {
-			controls:[
-			new OpenLayers.Control.Navigation(),
-			new OpenLayers.Control.PanZoomBar(),
-			new OpenLayers.Control.LayerSwitcher(),
-			new OpenLayers.Control.Attribution(),
-			new OpenLayers.Control.Permalink(),
-			new OpenLayers.Control.ScaleLine(),
-			new OpenLayers.Control.OverviewMap(),
-			new OpenLayers.Control.MousePosition()],
-			maxResolution: 156543.0399,
-			numZoomLevels: 19,
-			units: 'm',
-			projection: new OpenLayers.Projection("EPSG:900913"),
-			displayProjection: new OpenLayers.Projection("EPSG:4326")
-			} );
+    function init()
+    {
+      map = new OpenLayers.Map ("map", {
+      controls:[
+      new OpenLayers.Control.Navigation(),
+      new OpenLayers.Control.PanZoomBar(),
+      new OpenLayers.Control.LayerSwitcher(),
+      new OpenLayers.Control.Attribution(),
+      new OpenLayers.Control.Permalink(),
+      new OpenLayers.Control.ScaleLine(),
+      new OpenLayers.Control.OverviewMap(),
+      new OpenLayers.Control.MousePosition()],
+      maxResolution: 156543.0399,
+      numZoomLevels: 19,
+      units: 'm',
+      projection: new OpenLayers.Projection("EPSG:900913"),
+      displayProjection: new OpenLayers.Projection("EPSG:4326")
+      } );
 
-			var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
-			map.addLayer(layerMapnik);
+      var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {opacity: 0.5});
+      map.addLayer(layerMapnik);
 
-			var layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
-			map.addLayer(layerTilesAtHome);
+      var center = new OpenLayers.LonLat(153.02775, -27.47558).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 
-			var layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
-			map.addLayer(layerCycleMap);
+      var zoom = 11
+      map.setCenter(center, zoom);
 
-			var center = new OpenLayers.LonLat(153.02775, -27.47558).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
+      vectorLayer = new OpenLayers.Layer.GML("KML", 'geomap.kml',
+      {
+        projection: new OpenLayers.Projection("EPSG:4326"),
+        eventListeners: { 'loadend': kmlLoaded },
+        format: OpenLayers.Format.KML,
+        formatOptions: {
+          style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
+          extractStyles: true,
+          maxDepth: 2,
+          extractAttributes: true
+        }
+      });
 
-			var zoom = 11
-			map.setCenter(center, zoom);
+      map.addLayer(vectorLayer);
 
-			vectorLayer = new OpenLayers.Layer.GML("KML", 'geomap.kml',
-			{
-				projection: new OpenLayers.Projection("EPSG:4326"),
-				eventListeners: { 'loadend': kmlLoaded },
-				format: OpenLayers.Format.KML,
-				formatOptions: {
-					style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
-					extractStyles: true,
-					maxDepth: 2,
-					extractAttributes: true
-				}
-			});
+      selectControl = new OpenLayers.Control.SelectFeature(map.layers[1],
+        {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
+      map.addControl(selectControl);
+      selectControl.activate();
 
-			map.addLayer(vectorLayer);
+      var click = new OpenLayers.Control.Click();
+            map.addControl(click);
+            click.activate();
+    }
 
-			selectControl = new OpenLayers.Control.SelectFeature(map.layers[3],
-				{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
-			map.addControl(selectControl);
-			selectControl.activate();
+    function onPopupClose(evt)
+    {
+      selectControl.unselect(selectedFeature);
+    }
 
-			var click = new OpenLayers.Control.Click();
-        		map.addControl(click);
-		        click.activate();
-		}
+    function onFeatureSelect(feature)
+    {
+      selectedFeature = feature;
+      popup = new OpenLayers.Popup.FramedCloud("chicken",
+      feature.geometry.getBounds().getCenterLonLat(),
+      new OpenLayers.Size(100,150),
+      "<div style='font-size:.8em'><b>Name:</b>"+feature.attributes.name+"<br><b>Description:</b>"+feature.attributes.description+"</div>",
+      null, true, onPopupClose);
+      feature.popup = popup;
+      map.addPopup(popup);
+    }
 
-		function onPopupClose(evt)
-		{
-			selectControl.unselect(selectedFeature);
-		}
+    function onFeatureUnselect(feature)
+      {
+      map.removePopup(feature.popup);
+      feature.popup.destroy();
+      feature.popup = null;
+      }
 
-		function onFeatureSelect(feature)
-		{
-			selectedFeature = feature;
-			popup = new OpenLayers.Popup.FramedCloud("chicken",
-			feature.geometry.getBounds().getCenterLonLat(),
-			new OpenLayers.Size(100,150),
-			"<div style='font-size:.8em'><b>Name:</b>"+feature.attributes.name+"<br><b>Description:</b>"+feature.attributes.description+"</div>",
-			null, true, onPopupClose);
-			feature.popup = popup;
-			map.addPopup(popup);
-		}
+    function kmlLoaded()
+      {
+      map.zoomToExtent(vectorLayer.getDataExtent());
+      }
 
-		function onFeatureUnselect(feature)
-			{
-			map.removePopup(feature.popup);
-			feature.popup.destroy();
-			feature.popup = null;
-			}
-
-		function kmlLoaded()
-			{
-			map.zoomToExtent(vectorLayer.getDataExtent());
-			}
-
-	</script>
+  </script>
 </head>
 
 <body onload="init()">
@@ -120,3 +141,4 @@
   <h2>Knotenkarte</h2>
 	<div id="map"></div>
 </body>
+</html>
