diff --git a/htdocs/map.css b/htdocs/map.css index 4b5fb00..55cb4aa 100644 --- a/htdocs/map.css +++ b/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; } \ No newline at end of file diff --git a/htdocs/map.js b/htdocs/map.js index 9ed13f2..875060f 100644 --- a/htdocs/map.js +++ b/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( + '