Add basic slippy map implementation. Needs apache config to keep torggle out of this dir.

ents.gpx file should really come from elsewhere once this is working. The javascript link should point to /usr/share/javascript which contains openlayers (from libjs-openlayers)
2026-05-01 12:30:02 +01:00 · 2013-08-11 21:03:59 +01:00
parent 2e40991173
commit 6224053447
5 changed files with 887 additions and 0 deletions
@@ -0,0 +1,120 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
+<head>
+<title>Loser cave map</title>
+<meta http-equiv="content-type" content="text/html;charset=utf-8" />
+<meta http-equiv="content-script-type" content="text/javascript" />
+<meta http-equiv="content-style-type" content="text/css" />
+<meta http-equiv="content-language" content="en" />
+<meta name="generator" content="Easymap" />
+<link rel="stylesheet" type="text/css" href="map.css" />
+
+<script type="text/javascript" src="javascript/openlayers/OpenLayers.min.js"></script>
+<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
+<script type="text/javascript" src="util.js"></script>
+ 
+<script type="text/javascript">
+//<![CDATA[
+
+var map;
+
+var showPopupOnHover = true;
+text = new Array("Show map information","Hide map information");
+
+function drawmap() {
+    OpenLayers.Lang.setCode('en');
+    
+    map = new OpenLayers.Map('map', {
+        projection: new OpenLayers.Projection("EPSG:900913"),
+        displayProjection: new OpenLayers.Projection("EPSG:4326"),
+        controls: [
+		new OpenLayers.Control.MouseDefaults(),
+		new OpenLayers.Control.Attribution()],
+        maxExtent:
+            new OpenLayers.Bounds(-20037508.34,-20037508.34,
+                                    20037508.34, 20037508.34),
+        numZoomLevels: 18,
+        maxResolution: 156543,
+        units: 'meters'
+    });
+
+
+
+// Display the control elements
+// This appear momentarily then dissappear. Not sure what's wrong.
+map.addControl(new OpenLayers.Control.PanZoomBar());
+map.addControl(new OpenLayers.Control.Permalink('permalink'));
+map.addControl(new OpenLayers.Control.ScaleLine());
+map.addControl(new OpenLayers.Control.LayerSwitcher());
+
+
+
+// Position and Zoomlevel of the map
+lon = 13.8081;
+lat = 47.6776;
+zoom = 14; 
+
+checkForPermalink();
+
+//this isn't right yet - GPX points are not appearing
+map.addLayer(
+	new OpenLayers.Layer.Vector("Entrances","ents.gpx",
+		{format: OpenLayers.Format.GPX({extractWaypoints: true}),
+	         styleMap: new OpenLayers.StyleMap(
+			{pointRadius: "5", label: "${wpt}", strokeColor: "#FF0000", strokeWidth: 3, strokeOpacity: 0.8}
+		 ),
+		 projection: new OpenLayers.Projection("EPSG:4326")
+		}
+	)
+);
+
+
+
+// Display layers
+
+layer_markers = new OpenLayers.Layer.Markers("Marker", { projection: new OpenLayers.Projection("EPSG:4326"),visibility: true, displayInLayerSwitcher: false });
+layer_vectors = new OpenLayers.Layer.Vector("Zeichnungen", { displayInLayerSwitcher: false } );map.addLayer(layer_vectors);map.addLayer(layer_markers)
+layers = new Array();
+layer_layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
+map.addLayer(layer_layerMapnik);
+layers.push(new Array(layer_layerMapnik,'layer_layerMapnik'));
+layer_layerCyclemap = new OpenLayers.Layer.OSM.CycleMap("Cyclemap");
+map.addLayer(layer_layerCyclemap);
+layers.push(new Array(layer_layerCyclemap,'layer_layerCyclemap'));
+setLayer(1);
+
+
+// Jump to the right location
+jumpTo(lon,lat,zoom);
+
+// Display marker icons
+icons = new Array();
+icons[0] = new Array('http://openlayers.org/api/img/marker.png','21','25','0.5','1');
+//icons[4] = new Array('http://osmtools.de/easymap/images/pin_red.png','16','28','0','1');
+//icons[6] = new Array('http://osmtools.de/easymap/images/pin_green.png','16','28','0','1');
+//icons[10] = new Array('http://osmtools.de/easymap/images/haus_red.png','20','24','0.5','0.5');
+
+// Display markers
+addMarker(layer_markers,13.8248,47.6884,"<b>Stone Bridge</b><p />Not the real stone bridge: this is a demo",false,0);
+
+geometries = new Array();
+
+
+
+
+// Nochmal was..
+jumpTo(lon, lat, zoom);
+toggleInfo();
+checkUtilVersion(4);
+}
+
+//]]>
+    </script>
+</head>
+<body onload="drawmap();">
+	<div id="descriptionToggle" onclick="toggleInfo()">Show map information</div>
+	<div id="description" class="hide">Expo prototype slippy map<br >Please mouseover<br >the pin markers.<br ></div>
+	<div id="map"></div>
+	<div class="hide"><p><p>If you see this text, you opened the map HTML-File without the necessary files.</p></div>
+</body>
+</html>