add simple legend with colors

This commit is contained in:
Jakob Ketterl 2019-07-28 15:57:33 +02:00
parent 6e7d99376d
commit 74dddcb8ad
3 changed files with 28 additions and 1 deletions

View File

@ -28,4 +28,21 @@ ul {
margin-block-start: 5px;
margin-block-end: 5px;
padding-inline-start: 25px;
}
}
.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;
}

View File

@ -12,5 +12,6 @@
<body>
${header}
<div class="openwebrx-map"></div>
<div class="openwebrx-map-legend"><h3>Colors</h3><div class="content"></div></div>
</body>
</html>

View File

@ -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 '<li class="square"><span class="illustration" style="background-color:' + value + ';"></span>' + key + '</li>';
});
$(".openwebrx-map-legend .content").html('<ul>' + lis.join('') + '</ul>');
}
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;