add simple legend with colors
This commit is contained in:
parent
6e7d99376d
commit
74dddcb8ad
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user