Merge pull request #244 from avanc/livemap

Add support for OSM on live map

docroot/last/index.html

@@ -32,8 +32,15 @@
       .latlon { color: gray; }
 
     </style>
+
+     <script
+       src="https://code.jquery.com/jquery-3.1.1.min.js"
+       integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
+       crossorigin="anonymous">
+     </script>
      <script src="../static/apikey.js"></script>
-     <script src="functions.js"></script>
+     <script src="map_google.js"></script>
+     <script src="map_leaflet.js"></script>
      <script src="websock.js"></script>
      <script src="config.js"></script>
      <script src="../static/js/moment.min.js"></script>
@@ -42,9 +49,26 @@
      	function loadMapsAPI() {
 	  var script = document.createElement('script');
 	  script.type = 'text/javascript';
-	  script.src = 'https://maps.googleapis.com/maps/api/js?v=3' +
-	      '&key=' + apiKey +'&callback=initialize';
-	  document.body.appendChild(script);
+	  if (typeof apiKey != 'undefined' && apiKey != "" ) {
+            script.src = 'https://maps.googleapis.com/maps/api/js?v=3' +
+	      '&key=' + apiKey +'&callback=initialize_googlemaps';
+          } else {
+            $("head").append("<link rel='stylesheet' href='https://unpkg.com/leaflet@1.0.2/dist/leaflet.css' type='text/css' />");
+            
+            // Dynamic script loading from http://stackoverflow.com/a/8578840
+            (function(d, s, id){
+              var js, fjs = d.getElementsByTagName(s)[0];
+              if (d.getElementById(id)){ return; }
+              js = d.createElement(s); js.id = id;
+              js.onload = function(){
+                initialize_leaflet();
+              };
+              js.src = "https://unpkg.com/leaflet@1.0.2/dist/leaflet.js";
+              fjs.parentNode.insertBefore(js, fjs);
+            }(document, 'script', 'leaflet'));
+          }
+          
+          document.body.appendChild(script);
 
 
 	}

docroot/last/map_google.js

@@ -3,7 +3,7 @@ var do_fit = false;
 var markers = {};
 var livemarkers = true;
 
-function initialize() {
+function initialize_googlemaps() {
 	var lat = 50.098280;
 	var lon = 10.187189;
 	var params = getSearchParameters();

docroot/last/map_leaflet.js

@@ -0,0 +1,85 @@
+
+function initialize_leaflet() {
+  var markerLayer;
+  var markers={};
+  var map = L.map('map-canvas').setView([0.0, 0.0], 1);
+
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(map);
+
+  function osm_map_marker(loc)
+  {
+    console.log("Updating marker");
+    var id = loc.topic.replace(/\//g, '-');
+
+    if (!markers.hasOwnProperty(id)) {
+      markers[id] = L.marker([loc.lat, loc.lon]);
+      markerLayer.addLayer(markers[id]);
+      if (loc.face) {
+        markers[id]._face=loc.face;
+      }
+    } 
+
+    markers[id].setLatLng({lat: loc.lat, lng: loc.lon});
+    loc.face=markers[id]._face;
+    var description = formatPopup(loc);
+    
+    markers[id].bindPopup(description.htmldesc).openPopup()
+    map.fitBounds(markerLayer.getBounds());
+
+  }
+
+  
+ 
+  markerLayer = new L.FeatureGroup();
+  map.addLayer(markerLayer);
+
+  ws_go(osm_map_marker); 	// Connect to websocket and start listening
+
+}
+
+function formatPopup(loc) {
+  var htmldesc="";
+  var shortdesc="";
+  var s = loc.topic.split('/');
+  var username = (s[0]) ? s[1] : s[2];	/* cater for leading / in topic */
+  var device = (s[0]) ? s[2] : s[3];	/* cater for leading / in topic */
+
+  var dt = moment.utc(loc.tst * 1000).local();
+
+  var userdev = username + "/" + device;
+  userdev = renames[userdev] ? renames[userdev] : userdev;
+  userdev = loc.name ? loc.name : userdev;
+
+  var data = {
+    userdev:  userdev,
+    ghash:    loc.ghash ? loc.ghash : 'unknown',
+    addr:     loc.addr,
+    lat:      loc.lat,
+    lon:      loc.lon,
+    fulldate: dt.format("DD MMM YYYY HH:mm:ss"),
+    facedata: loc.face,
+    vel:      loc.vel,
+    cog:      loc.cog,
+  };
+
+  
+  if (loc.face) {
+    htmldesc = htmldesc + "<div style='float:right;' id='avatar'><img class='img-circle' src='data:image/png;base64,{{ facedata }}' height='35' width='35' /></div>";
+  }
+
+  if (loc.addr) {
+    htmldesc = htmldesc + "<b>{{userdev}}</b><br/>{{addr}}<br/><span class='extrainfo'>{{ghash}} <span class='latlon'>({{lat}},{{lon}}) v={{vel}}, c={{cog}}</span> {{fulldate}}</span>";
+    shortdesc = "{{{userdev}}} {{addr}}";
+  } else {
+    htmldesc = htmldesc + "<b>{{userdev}}</b><br/>{{lat}}, {{lon}}<br/><span class='extrainfo'>{{ghash}} <span class='latlon'>({{lat}},{{lon}}) v={{vel}}, c={{cog}}</span> {{fulldate}}</span>";
+    shortdesc = shortdesc + "{{{userdev}}} {{lat}},{{lon}}";
+  }
+
+
+  var result = {}
+  result.short = Mustache.render(shortdesc, data);
+  result.htmldesc = Mustache.render(htmldesc, data);
+  return result;
+}

docroot/last/websock.js

@@ -1,6 +1,7 @@
 var reconnectTimeout = 3000;
 var ws_url;
 var ws;
+var ws_callback = map_marker;
 
 function setColor(element, color) {
 	element.style.border = '2px solid ' + color;
@@ -43,7 +44,7 @@ function ws_connect() {
 				}
 
 				if (loc['_type'] == 'location') {
-					map_marker(loc);
+					ws_callback(loc);
 				}
 			} catch (x) {
 				;
@@ -56,9 +57,13 @@ function ws_connect() {
 	};
 }
 
-function ws_go() {
+function ws_go(callback) {
 	// var url = 'ws://' + location.host + '/ws/last';
 	// console.log(JSON.stringify(location));
+  
+        if (typeof callback != 'undefined') {
+          ws_callback=callback;
+        } 
 
 	var url = ("https:" == document.location.protocol ? "wss://" : "ws://") + location.host + "/";
 	var parts = location.pathname.split('/');
@@ -66,6 +71,7 @@ function ws_go() {
 		url = url + parts[i] + "/";
 	}
 	url = url + "ws/last";
+
 	console.log("Websocket URI: " + url);