diff --git a/htdocs/css/map.css b/htdocs/css/map.css
index 73d556d..6d09b70 100644
--- a/htdocs/css/map.css
+++ b/htdocs/css/map.css
@@ -47,3 +47,9 @@ ul {
     height: 20px;
     margin-right: 10px;
 }
+
+.openwebrx-map-legend select {
+    background-color: #FFF;
+    border-color: #DDD;
+    padding: 5px;
+}
diff --git a/htdocs/map.html b/htdocs/map.html
index 9e03c40..2aed010 100644
--- a/htdocs/map.html
+++ b/htdocs/map.html
@@ -12,6 +12,13 @@
 <body>
     ${header}
     <div class="openwebrx-map"></div>
-    <div class="openwebrx-map-legend"><h3>Colors</h3><div class="content"></div></div>
+    <div class="openwebrx-map-legend">
+        <h3>Colors</h3>
+        <select id="openwebrx-map-colormode">
+            <option value="byband" selected="selected">By Band</option>
+            <option value="bymode">By Mode</option>
+        </select>
+        <div class="content"></div>
+    </div>
 </body>
 </html>
diff --git a/htdocs/map.js b/htdocs/map.js
index c958f94..4d068f5 100644
--- a/htdocs/map.js
+++ b/htdocs/map.js
@@ -52,7 +52,7 @@
     // when the color palette changes, update all grid squares with new color
     var reColor = function() {
         $.each(rectangles, function(_, r) {
-            var color = getColor(r.band);
+            var color = getColor(colorAccessor(r));
             r.setOptions({
                 strokeColor: color,
                 fillColor: color
@@ -60,6 +60,25 @@
         });
     }
 
+    var colorMode = 'byband';
+    var colorAccessor = function(r) {
+        switch (colorMode) {
+            case 'byband':
+                return r.band;
+            case 'bymode':
+                return r.mode;
+        }
+    };
+
+    $(function(){
+        $('#openwebrx-map-colormode').on('change', function(){
+            colorMode = $(this).val();
+            colorKeys = {};
+            reColor();
+            updateLegend();
+        });
+    });
+
     var updateLegend = function() {
         var lis = $.map(colorKeys, function(value, key) {
             return '<li class="square"><span class="illustration" style="background-color:' + value + ';"></span>' + key + '</li>';
@@ -109,7 +128,8 @@
                     var lon = (loc.charCodeAt(0) - 65 - 9) * 20 + Number(loc[2]) * 2;
                     var center = new google.maps.LatLng({lat: lat + .5, lng: lon + 1});
                     var rectangle;
-                    var color = getColor(update.band);
+                    // the accessor is designed to work on the rectangle... but it should work on the update object, too
+                    var color = getColor(colorAccessor(update));
                     if (rectangles[update.callsign]) {
                         rectangle = rectangles[update.callsign];
                     } else {
