From acbf2939c97671db042806b8e546ca5aa7ef2691 Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Thu, 11 Jul 2019 21:21:01 +0200
Subject: [PATCH] infowindow for ysf markers

---
 htdocs/css/map.css |  1 +
 htdocs/map.js      | 21 ++++++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/htdocs/css/map.css b/htdocs/css/map.css
index 57a78369..4b27afe1 100644
--- a/htdocs/css/map.css
+++ b/htdocs/css/map.css
@@ -21,6 +21,7 @@ body {
 
 h3 {
     margin: 10px 0;
+    text-align: center;
 }
 
 ul {
diff --git a/htdocs/map.js b/htdocs/map.js
index 40793121..6354604e 100644
--- a/htdocs/map.js
+++ b/htdocs/map.js
@@ -46,6 +46,9 @@
                         marker = markers[update.callsign];
                     } else {
                         marker = new google.maps.Marker();
+                        marker.addListener('click', function(){
+                            showMarkerInfoWindow(update.callsign, pos);
+                        });
                         markers[update.callsign] = marker;
                     }
                     marker.setOptions($.extend({
@@ -58,6 +61,7 @@
                     // TODO the trim should happen on the server side
                     if (expectedCallsign && expectedCallsign == update.callsign.trim()) {
                         map.panTo(pos);
+                        showMarkerInfoWindow(update.callsign, pos);
                         delete(expectedCallsign);
                     }
                 break;
@@ -72,7 +76,7 @@
                     } else {
                         rectangle = new google.maps.Rectangle();
                         rectangle.addListener('click', function(){
-                            showInfoWindow(update.location.locator, center);
+                            showLocatorInfoWindow(update.location.locator, center);
                         });
                         rectangles[update.callsign] = rectangle;
                     }
@@ -93,7 +97,7 @@
 
                     if (expectedLocator && expectedLocator == update.location.locator) {
                         map.panTo(center);
-                        showInfoWindow(expectedLocator, center);
+                        showLocatorInfoWindow(expectedLocator, center);
                         delete(expectedLocator);
                     }
                 break;
@@ -175,7 +179,7 @@
     connect();
 
     var infowindow;
-    var showInfoWindow = function(locator, pos) {
+    var showLocatorInfoWindow = function(locator, pos) {
         if (!infowindow) infowindow = new google.maps.InfoWindow();
         var inLocator = $.map(rectangles, function(r, callsign) {
             return {callsign: callsign, locator: r.locator, lastseen: r.lastseen}
@@ -198,6 +202,17 @@
         infowindow.open(map);
     };
 
+    var showMarkerInfoWindow = function(callsign, pos) {
+        if (!infowindow) infowindow = new google.maps.InfoWindow();
+        var marker = markers[callsign];
+        var timestring = moment(marker.lastseen).fromNow();
+        infowindow.setContent(
+            '<h3>' + callsign + '</h3>' +
+            '<div>' + timestring + '</div>'
+        );
+        infowindow.open(map, marker);
+    }
+
     var getScale = function(lastseen) {
         var age = new Date().getTime() - lastseen;
         var scale = 1;