add a quick infowindow to show who's in a grid square

htdocs/map.css

@@ -1,4 +1,14 @@
 html, body {
     width: 100%;
     height: 100%;
+}
+
+h3 {
+    margin: 10px 0;
+}
+
+ul {
+    margin-block-start: 5px;
+    margin-block-end: 5px;
+    padding-inline-start: 25px;
 }

htdocs/map.js

@@ -73,6 +73,8 @@
                         rectangle = rectangles[update.callsign];
                     } else {
                         rectangle = new google.maps.Rectangle();
+                        var center = new google.maps.LatLng({lat: lat + .5, lng: lon + 1});
+                        rectangle.addListener('click', buildRectangleClick(update.location.locator, center));
                         rectangles[update.callsign] = rectangle;
                     }
                     rectangle.setOptions($.extend({
@@ -88,6 +90,7 @@
                         }
                     }, getRectangleOpacityOptions(update.lastseen) ));
                     rectangle.lastseen = update.lastseen;
+                    rectangle.locator = update.location.locator;
                 break;
             }
         });
@@ -144,6 +147,28 @@
         console.info("onerror");
     };
 
+    var infowindow;
+
+    var buildRectangleClick = function(locator, pos) {
+        if (!infowindow) infowindow = new google.maps.InfoWindow();
+        return function() {
+            var inLocator = $.map(rectangles, function(r, callsign) {
+                return {callsign: callsign, locator: r.locator}
+            }).filter(function(d) {
+                return d.locator == locator;
+            });
+            infowindow.setContent(
+                '<h3>Locator: ' + locator + '</h3>' +
+                '<div>Active Callsigns:</div>' +
+                '<ul>' +
+                    inLocator.map(function(i){ return '<li>' + i.callsign + '</li>' }).join("") +
+                '</ul>'
+            );
+            infowindow.setPosition(pos);
+            infowindow.open(map);
+        };
+    }
+
     var getScale = function(lastseen) {
         var age = new Date().getTime() - lastseen;
         var scale = 1;