allow quickly (de)selecting all layers by shift/ctrl/alt/meta clicking an entry in the layer chooser (fixes #232)

USERGUIDE.md

@@ -45,7 +45,10 @@ The chat is split up into several categories. It usually only shows messages for
 Map Display
 -----------
 
-You can customize many aspects of how the map is rendered in the layer chooser. The layer chooser is available from the icon in the top right corner, left of the sidebar.
+You can customize many aspects of how the map is rendered in the layer chooser.
+
+**Layer Chooser:**
+The layer chooser is available from the icon in the top right corner, left of the sidebar. The top entries are background maps and you can only have one of them active at a time. The entries on the bottom can be displayed in any combination you like. *Hint:* Modifier-click an entry to quickly hide all other layers. The modifier may be either of these: shift, ctrl, alt, meta. Modifier-click the entry again to select all layers.
 
 **Background / Street Map / Base Layer:**
 All these refer to the same thing. The base layer is stored across sessions. The default one uses OpenStreetMap data with a style that resembles the default Ingress one. There are other styles available.

code/boot.js

@@ -23,6 +23,25 @@ window.setupLargeImagePreview = function() {
   });
 }
 
+// adds listeners to the layer chooser such that a long press hides
+// all custom layers except the long pressed one.
+window.setupLayerChooserSelectOne = function() {
+  $('.leaflet-control-layers-overlays').on('click', 'label', function(e) {
+    if(!e || !(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)) return;
+
+    var isChecked = $(this).find('input').is(':checked');
+    var checkSize = $('.leaflet-control-layers-overlays input:checked').length;
+    if((isChecked && checkSize === 1) || checkSize === 0) {
+      // if nothing is selected or the users long-clicks the only
+      // selected element, assume all boxes should be checked again
+      $('.leaflet-control-layers-overlays input:not(:checked)').click();
+    } else {
+      // uncheck all
+      $('.leaflet-control-layers-overlays input:checked').click();
+      $(this).find('input').click();
+    }
+  });
+}
 
 window.setupStyles = function() {
   $('head').append('<style>' +
@@ -264,6 +283,7 @@ function boot() {
   window.setupTooltips();
   window.chat.setup();
   window.setupQRLoadLib();
+  window.setupLayerChooserSelectOne();
   // read here ONCE, so the URL is only evaluated one time after the
   // necessary data has been loaded.
   urlPortal = getURLParam('pguid');