From e958efea3e4df4e370223a5ffa670f8f224546c0 Mon Sep 17 00:00:00 2001
From: Sam <Sam@wenhams.co.uk>
Date: Wed, 11 Jun 2014 18:06:23 +0100
Subject: [PATCH] A closer to working slippy map

---
 map/index.html | 186 ++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 138 insertions(+), 48 deletions(-)
diff --git a/map/index.html b/map/index.html
index 027d4c121..b0e627354 100644
--- a/map/index.html
+++ b/map/index.html
@@ -1,21 +1,24 @@
 <!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">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <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 src="http://www.openlayers.org/api/OpenLayers.js"></script>
+<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
+<script src="util.js"></script>
  
 <script type="text/javascript">
 //<![CDATA[
 
+// Position and Zoomlevel of the map
+var lon = 13.8081;
+var lat = 47.6776;
+var zoom = 14; 
+
 var map;
 
 var showPopupOnHover = true;
@@ -25,40 +28,59 @@ 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),
+        	new OpenLayers.Control.Navigation({zoomWheelEnabled : true}),
+			new OpenLayers.Control.PanZoomBar(),
+			new OpenLayers.Control.LayerSwitcher(),
+			new OpenLayers.Control.Attribution()],
+			//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'
-    });
-
-
+        units: 'meters',
+        projection: new OpenLayers.Projection("EPSG:900913"),
+        displayProjection: new OpenLayers.Projection("EPSG:4326")
+    } );
 
 // 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());
+//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());
 
+//checkForPermalink();
 
+icons = new Array();
+icons[0] = new Array('http://openlayers.org/api/img/marker.png','21','25','0.5','1');
 
-// Position and Zoomlevel of the map
-lon = 13.8081;
-lat = 47.6776;
-zoom = 14; 
+// Display layers
 
-checkForPermalink();
+//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: true } );
+//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'));
+
+layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
+map.addLayer(layerMapnik);
+
+layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
+map.addLayer(layerCycleMap);
+
+layers = new Array();
+layers.push(new Array(layerMapnik,'layerMapnik'));
+layers.push(new Array(layerCycleMap,'layerCycleMap'));
 
 //this isn't right yet - GPX points are not appearing
-map.addLayer(
-	new OpenLayers.Layer.Vector("Entrances","ents.gpx",
+/*map.addLayer(
+	new OpenLayers.Layer.Markers("Entrances","ents.gpx",
 		{format: OpenLayers.Format.GPX({extractWaypoints: true}),
 	         styleMap: new OpenLayers.StyleMap(
 			{pointRadius: "5", label: "${wpt}", strokeColor: "#FF0000", strokeWidth: 3, strokeOpacity: 0.8}
@@ -66,42 +88,90 @@ map.addLayer(
 		 projection: new OpenLayers.Projection("EPSG:4326")
 		}
 	)
-);
+);*/
+
+var gpxStyles = new OpenLayers.StyleMap({
+                "default": new OpenLayers.Style({
+                    pointRadius: "5", // sized according to type attribute
+                    graphicName: "star",
+					label: "${name}",        
+                    labelAlign: "rb",
+                  
+				    //labelAlign: "${align}",
+                    //labelXOffset: "${xOffset}",
+                    //labelYOffset: "${yOffset}",
+                    labelOutlineColor: "white",
+                    labelOutlineWidth: 3,
+
+					fontSize: 12,
+                    fontFamily: "Arial",
+                    fontColor: "brown",
+                    labelYOffset: 10,
+                    fillColor: "black",
+                    
+					
+					strokeColor: "red",
+                    strokeWidth: 3, 
+                    strokeOpacity: 0.8
+                }),
+                //"select": new OpenLayers.Style({
+                   // fillColor: "#66ccff",
+                  //  strokeColor: "#3399ff",
+                  //  graphicZIndex: 10000
+               // })
+            }); 
+
+var layerGPX = new OpenLayers.Layer.Vector("Entrances", {
+	strategies: [new OpenLayers.Strategy.Fixed()],
+	protocol: new OpenLayers.Protocol.HTTP({
+		url: "ents.gpx",
+		format: new OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes: true, extractAttributes: true})
+	}),
+	//style: {strokeColor: "red", strokeWidth: 3, strokeOpacity: 0.8},
+	styleMap: gpxStyles,
+	projection: new OpenLayers.Projection("EPSG:4326")
+	
+});
 
 
+map.addLayer(layerGPX);
+layers.push(new Array(layerGPX,'layerGPX'));
+			
+				// fit map to bounds of window and add start, finish pins (finish not working)
+layerGPX.events.register("loadend", layerGPX, function() {
+	this.map.zoomToExtent(this.getDataExtent());
+	//var startPoint = this.features[0].geometry.components[0];				
+	//layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon));
+	//var endPoint = this.features[0].geometry.components[this.features[0].geometry.components.length - 1];
+	//layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(endPoint.x, endPoint.y),icon2));
+});
 
-// Display layers
+// another way to manually add marker. Give vars lon and lat values initially
+//var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
+//map.setCenter(lonLat, zoom);
+
+// Markers layer must be last up if you want the hover over dialouge to work
+layerMarkers = new OpenLayers.Layer.Markers("Marker", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayInLayerSwitcher: false });
+map.addLayer(layerMarkers);
+layers.push(new Array(layerMarkers,'layerMarkers'));
 
-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 = 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);
+addMarker(layerMarkers,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();
@@ -110,7 +180,27 @@ checkUtilVersion(4);
 
 //]]>
     </script>
-</head>
+
+<link rel="stylesheet" href="map.css" type="text/css">
+
+<style type="text/css">
+<!--
+body {
+	margin-left: 0px;
+	margin-top: 0px;
+	margin-right: 0px;
+	margin-bottom: 0px;
+}
+.mapposn {
+	display: block;
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	height: 100%;
+	width: 100%;
+}
+-->
+</style></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>
