From 74dddcb8ad66bee5260bfba5014d7bd53ffe1276 Mon Sep 17 00:00:00 2001 From: Jakob Ketterl Date: Sun, 28 Jul 2019 15:57:33 +0200 Subject: [PATCH] add simple legend with colors --- htdocs/css/map.css | 19 ++++++++++++++++++- htdocs/map.html | 1 + htdocs/map.js | 9 +++++++++ 3 files changed, 28 insertions(+), 1 deletion(-) diff --git a/htdocs/css/map.css b/htdocs/css/map.css index 4b27afe..6170218 100644 --- a/htdocs/css/map.css +++ b/htdocs/css/map.css @@ -28,4 +28,21 @@ ul { margin-block-start: 5px; margin-block-end: 5px; padding-inline-start: 25px; -} \ No newline at end of file +} + +.openwebrx-map-legend { + background-color: #fff; + padding: 10px; +} + +.openwebrx-map-legend ul { + list-style-type: none; + padding: 0; +} + +.openwebrx-map-legend li.square .illustration { + display: inline-block; + width: 30px; + height: 20px; + margin-right: 10px; +} diff --git a/htdocs/map.html b/htdocs/map.html index bd8b60a..9e03c40 100644 --- a/htdocs/map.html +++ b/htdocs/map.html @@ -12,5 +12,6 @@ ${header}
+

Colors

diff --git a/htdocs/map.js b/htdocs/map.js index ba7e151..c958f94 100644 --- a/htdocs/map.js +++ b/htdocs/map.js @@ -44,6 +44,7 @@ colorKeys[key] = colors[index]; }); reColor(); + updateLegend(); } return colorKeys[id]; } @@ -59,6 +60,13 @@ }); } + var updateLegend = function() { + var lis = $.map(colorKeys, function(value, key) { + return '
  • ' + key + '
    • '; + }); + $(".openwebrx-map-legend .content").html(''); + } + var processUpdates = function(updates) { if (!map) { updateQueue = updateQueue.concat(updates); @@ -183,6 +191,7 @@ nite.init(map); setInterval(function() { nite.refresh() }, 10000); // every 10s }); + map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push($(".openwebrx-map-legend")[0]); }); retention_time = config.map_position_retention_time * 1000; break;