From 632e5f45d8c520a208aa829384e5701e9a574c73 Mon Sep 17 00:00:00 2001
From: expo on server <devnull@localhost>
Date: Wed, 20 Nov 2019 20:09:02 +0000
Subject: [PATCH] found files left on server - Philip

---
 essentials.gpx |   1 +
 map/map.html   | 148 +++++++++++++++++++++++++++++++++++++++++++++++++
 map/test.html  |  29 ++++++++++
 3 files changed, 178 insertions(+)
 create mode 120000 essentials.gpx
 create mode 100644 map/map.html
 create mode 100644 map/test.html
diff --git a/essentials.gpx b/essentials.gpx
new file mode 120000
index 000000000..a8e9b18c1
--- /dev/null
+++ b/essentials.gpx
@@ -0,0 +1 @@
+/home/expo/expofiles/gpslogs/essentials/essentials2019.gpx
\ No newline at end of file
diff --git a/map/map.html b/map/map.html
new file mode 100644
index 000000000..97eeada91
--- /dev/null
+++ b/map/map.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
+    <style>
+      .map {
+        height: 500px;
+        width: 100%;
+      }
+      #map .ol-zoom .ol-zoom-out {
+        margin-top: 204px;
+      }
+      #map .ol-zoomslider {
+        background-color: transparent;
+        top: 2.3em;
+      }
+
+      #map .ol-touch .ol-zoom .ol-zoom-out {
+        margin-top: 212px;
+      }
+      #map .ol-touch .ol-zoomslider {
+        top: 2.75em;
+      }
+
+      #map .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
+      #map .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
+        top: 3px;
+      }
+
+      #map .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
+      #map .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
+        top: 232px;
+      }
+    </style>
+    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
+    <title>Expo prospecting slippy map</title>
+  </head>
+  <body>
+    <h2>Expo prospecting slippy map</h2>
+    <div id="map" class="map"></div>
+    <div id="info">&nbsp;</div>
+    <script type="text/javascript">
+      // import Map from 'ol/Map.js';
+      // import View from 'ol/View.js';
+      // import GPX from 'ol/format/GPX.js';
+      // import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
+      // import BingMaps from 'ol/source/BingMaps.js';
+      // import VectorSource from 'ol/source/Vector.js';
+      // import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
+      var lon = 13.8081;
+      var lat = 47.6776;
+      var zoom = 14;
+
+      var style = {
+        'Point': new ol.style.Style({
+          image: new ol.style.Circle({
+            fill: new ol.style.Fill({
+              color: 'rgba(255,255,0,0.4)'
+            }),
+            radius: 5,
+            stroke: new ol.style.Stroke({
+              color: '#ff0',
+              width: 1
+            })
+          })
+        }),
+        'LineString': new ol.style.Style({
+          stroke: new ol.style.Stroke({
+            color: '#f00',
+            width: 3
+          })
+        }),
+        'MultiLineString': new ol.style.Style({
+          stroke: new ol.style.Stroke({
+            color: '#0f0',
+            width: 3
+          })
+        })
+      };
+
+      var vector = new ol.layer.Vector({
+        source: new ol.source.Vector({
+          url: 'http://expo.survex.com/expofiles/gpslogs/essentials/essentials2019.gpx',
+          format: new ol.format.GPX()
+        }),
+        style: function(feature) {
+          return style[feature.getGeometry().getType()];
+        }
+      });
+
+      var map = new ol.Map({
+        //maxExtent: new ol.bounds(-20037508.34,-20037508.34,20037508.34, 20037508.34),
+        numZoomLevels: 18,
+        maxResolution: 156543,
+        units: 'meters',
+        //projection: new ol.projection("EPSG:900913"),
+        //displayProjection: new ol.projection("EPSG:4326"),
+
+        target: 'map',
+        layers: [
+          // new ol.layer.Tile({
+          //   source: new ol.source.OSM()
+          // }),
+          new ol.layer.Tile({
+            source: new ol.source.OSM({
+            })
+          }),
+          vector
+        ],
+        view: new ol.View({
+          center: ol.proj.fromLonLat([lon, lat]),
+          zoom: zoom
+        })
+      });
+
+      var displayFeatureInfo = function(pixel) {
+        var features = [];
+        map.forEachFeatureAtPixel(pixel, function(feature) {
+          features.push(feature);
+        });
+        if (features.length > 0) {
+          var info = [];
+          var i, ii;
+          for (i = 0, ii = features.length; i < ii; ++i) {
+            info.push(features[i].get('name'));
+          }
+          document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
+          map.getTarget().style.cursor = 'pointer';
+        } else {
+          document.getElementById('info').innerHTML = '&nbsp;';
+          map.getTarget().style.cursor = '';
+        }
+      };
+
+      map.on('pointermove', function(evt) {
+        if (evt.dragging) {
+          return;
+        }
+        var pixel = map.getEventPixel(evt.originalEvent);
+        displayFeatureInfo(pixel);
+      });
+
+      map.on('click', function(evt) {
+        displayFeatureInfo(evt.pixel);
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/map/test.html b/map/test.html
new file mode 100644
index 000000000..ca63e7582
--- /dev/null
+++ b/map/test.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<title>OpenLayers Simplest Example</title>
+	</head>
+	<body>
+		<div id="Map" style="height:250px"></div>
+		<script src="/javascript/openlayers/OpenLayers.js"></script>
+		<script>
+    			var lat            = 47.35387;
+   			var lon            = 8.43609;
+    			var zoom           = 18;
+
+        		var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
+	    		var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
+	        	var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
+
+		    	map = new OpenLayers.Map("Map");
+		        var mapnik         = new OpenLayers.Layer.OSM();
+			map.addLayer(mapnik);
+
+			var markers = new OpenLayers.Layer.Markers( "Markers" );
+			map.addLayer(markers);
+			markers.addMarker(new OpenLayers.Marker(position));
+
+		        map.setCenter(position, zoom);
+		</script>
+	</body>
+</html>
