add simple legend with colors
This commit is contained in:
		| @@ -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; | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Jakob Ketterl
					Jakob Ketterl