geomap support

2012-05-12 16:44:27 +02:00 · 2012-05-12 16:44:27 +02:00 · f05e6a3a26
commit f05e6a3a26
parent 5d203b0f07
71 changed files with 649 additions and 8 deletions
--- a/html/geomap.html
+++ b/html/geomap.html
@ -0,0 +1,122 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<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>
+
+  <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 type="text/javascript">
+		var map;
+
+		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")
+			} );
+
+			var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
+			map.addLayer(layerMapnik);
+
+			var layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
+			map.addLayer(layerTilesAtHome);
+
+			var layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
+			map.addLayer(layerCycleMap);
+
+			var center = new OpenLayers.LonLat(153.02775, -27.47558).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
+
+			var zoom = 11
+			map.setCenter(center, zoom);
+
+			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
+				}
+			});
+
+			map.addLayer(vectorLayer);
+
+			selectControl = new OpenLayers.Control.SelectFeature(map.layers[3],
+				{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
+			map.addControl(selectControl);
+			selectControl.activate();
+
+			var click = new OpenLayers.Control.Click();
+        		map.addControl(click);
+		        click.activate();
+		}
+
+		function onPopupClose(evt)
+		{
+			selectControl.unselect(selectedFeature);
+		}
+
+		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 onFeatureUnselect(feature)
+			{
+			map.removePopup(feature.popup);
+			feature.popup.destroy();
+			feature.popup = null;
+			}
+
+		function kmlLoaded()
+			{
+			map.zoomToExtent(vectorLayer.getDataExtent());
+			}
+
+	</script>
+</head>
+
+<body onload="init()">
+  <h1>luebeck.freifunk.net</h1>
+  <ul>
+    <li><a href="nodes.html">Knotengraph</a></li>
+    <li><a href="geomap.html">Knotenkarte</a></li>
+  </ul>
+  <h2>Knotenkarte</h2>
+	<div id="map"></div>
+</body>