joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add simple legend with colors

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
htdocs/css/map.css
View File

@ -29,3 +29,20 @@ ul {
margin-block-end: 5px; margin-block-end: 5px;
padding-inline-start: 25px; 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;
}

1
htdocs/map.html
View File

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

9
htdocs/map.js
View File

@ -44,6 +44,7 @@
colorKeys[key] = colors[index]; colorKeys[key] = colors[index];
}); });
reColor(); reColor();
updateLegend();
} }
return colorKeys[id]; 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) { var processUpdates = function(updates) {
if (!map) { if (!map) {
updateQueue = updateQueue.concat(updates); updateQueue = updateQueue.concat(updates);
@ -183,6 +191,7 @@
nite.init(map); nite.init(map);
setInterval(function() { nite.refresh() }, 10000); // every 10s 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; retention_time = config.map_position_retention_time * 1000;
break; break;