Demo files for wdocs doc-root

2024-11-15 18:08:28 -07:00 · 2015-09-03 17:25:07 +02:00 · 2015-09-03 17:25:07 +02:00 · ba9be1c1c3
commit ba9be1c1c3
parent 4ba21fcc33
3 changed files with 140 additions and 0 deletions
--- a/wdocs/index.html
+++ b/wdocs/index.html
@ -0,0 +1,7 @@
+<html>
+<pre>
+http://localhost:8083/map/index.html?user=jpm&device=test&format=linestring&from=2014-01-01
+</pre>
+
+<a href="map/index.html?user=jpm&device=test&format=linestring&from=2014-01-01">clickstdu</a>
+</html>
--- a/wdocs/map/functions.js
+++ b/wdocs/map/functions.js
@ -0,0 +1,107 @@
+
+// __author__    = 'Jan-Piet Mens <jpmens()gmail.com>'
+// __copyright__ = 'Copyright 2015 Jan-Piet Mens'
+// __license__   = """Eclipse Public License - v 1.0 (http://www.eclipse.org/legal/epl-v10.html)"""
+
+// https://developers.google.com/maps/documentation/javascript/datalayer
+
+var infowindow = new google.maps.InfoWindow();
+
+function processPoints(geometry, callback, thisArg) {
+	if (geometry instanceof google.maps.LatLng) {
+		callback.call(thisArg, geometry);
+	} else if (geometry instanceof google.maps.Data.Point) {
+		callback.call(thisArg, geometry.get());
+	} else {
+		geometry.getArray().forEach(function(g) {
+			processPoints(g, callback, thisArg);
+		});
+	}
+}
+
+function initialize() {
+
+	var map;
+	var center = new google.maps.LatLng( 46.993665, 10.399188);
+
+	mapOptions = {
+		center: center,
+		zoom: 5,
+		mapTypeId: google.maps.MapTypeId.ROADMAP,
+		scrollwheel: false,
+		disableDefaultUI: false,
+		panControl: false,
+		scaleControl: false,
+		streetViewControl: true,
+		overviewMapControl: true,
+	};
+
+	map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
+
+	// alert(JSON.stringify(location));
+
+	var dataURI = location.protocol + "//" + location.host + // ":" + location.port +
+		"/api/0/locations" + location.search;
+	console.log(dataURI);
+	map.data.loadGeoJson(dataURI);
+
+        // Set the stroke width, and fill color for each polygon
+        var featureStyle = {
+                fillColor: 'green',
+                strokeColor: 'red',
+                strokeWeight: 4,
+                title: "OwnTracks",
+        };
+        map.data.setStyle(featureStyle);
+
+
+	// Zoom to show all the features
+	var bounds = new google.maps.LatLngBounds();
+	map.data.addListener('addfeature', function (e) {
+		processPoints(e.feature.getGeometry(), bounds.extend, bounds);
+		map.fitBounds(bounds);
+	});
+
+   /*
+	// Zoom to the clicked feature
+	map.data.addListener('click', function (e) {
+		var bounds = new google.maps.LatLngBounds();
+	        processPoints(e.feature.getGeometry(), bounds.extend, bounds);
+		map.fitBounds(bounds);
+	});
+    */
+
+	google.maps.event.addListener(map, 'click', function() {
+		infowindow.close();
+	});
+	map.data.addListener('click', function(e) {
+		var content = "<h1>" + e.feature.getProperty('name') + "</h1>" + e.feature.getProperty('address');
+
+		infowindow.setContent(content);
+		infowindow.setPosition(e.latLng);
+		infowindow.setOptions({
+			pixelOffset: new google.maps.Size(0, -34),
+			});
+		infowindow.open(map);
+	});
+
+	
+	map.data.setStyle(function(feature) {
+		var circle ={
+			path: google.maps.SymbolPath.CIRCLE,
+			fillColor: '#ff0000',
+			fillOpacity: .9,
+			scale: 5.5,
+			strokeColor: 'white',
+			strokeWeight: 2
+		};
+
+		return ({
+			icon: circle
+			});
+	});
+
+}
+
+
+google.maps.event.addDomListener(window, 'load', initialize);
--- a/wdocs/map/index.html
+++ b/wdocs/map/index.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>GeoJSON</title>
+    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0" />
+
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <style type="text/css">
+      body {  font-size: 80%; }
+
+      td { border-bottom: 1px solid; border-right: 1px dotted;}
+
+      #map-canvas { height: 100% }
+
+    </style>
+     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&signed_in=true"></script>
+    <script src="functions.js"></script>
+  </head>
+  <body>
+
+    <div>
+      <div id="map-canvas" style='width: 100%; height: 700px;'/></div>
+    </div>
+  </body>
+</html>