feature: turn on all layers button

src/controls/legend.js

@@ -15,6 +15,7 @@ const Legend = function Legend(options = {}) {
     expanded = true,
     contentCls,
     contentStyle,
+    turnOnLayersControl = false,
     name = 'legend',
     labelOpacitySlider = '',
     visibleLayersControl = false,
@@ -140,6 +141,22 @@ const Legend = function Legend(options = {}) {
     });
   };
 
+  const turnOnAllLayers = function turnOnAllLayers() {
+    const layers = viewer.getLayers();
+    layers.forEach((el) => {
+      if (!(['none', 'background'].includes(el.get('group')))) {
+        const group = viewer.getGroups().find((item) => item.name === el.get('group'));
+        if (typeof group !== 'undefined') {
+          if (!group.exclusive) {
+            el.setVisible(true);
+          }
+        } else {
+          el.setVisible(true);
+        }
+      }
+    });
+  };
+
   const divider = El({
     cls: 'divider margin-x-small',
     style: {
@@ -222,6 +239,22 @@ const Legend = function Legend(options = {}) {
     setVisibleLayersViewActive(!visibleLayersViewActive);
   };
 
+  const turnOnLayersButton = Button({
+    cls: 'round compact icon-small margin-x-smaller',
+    title: 'Tänd alla lager utom bakgrundslager',
+    click() {
+      viewer.dispatch('active:turnonlayers');
+    },
+    style: {
+      'align-self': 'center',
+      'padding-right': '6px'
+    },
+    icon: '#ic_visibility_24px',
+    iconStyle: {
+      fill: '#7a7a7a'
+    }
+  });
+
   const layerSearchInput = Input({
     cls: 'o-search-layer-field placeholder-text-smaller smaller',
     style: { height: '1.5rem', margin: 0, width: '100%' },
@@ -457,7 +490,12 @@ const Legend = function Legend(options = {}) {
     },
     onAdd(evt) {
       viewer = evt.target;
-      viewer.on('active:turnofflayers', turnOffAllLayers);
+      if (turnOffLayersControl) {
+        viewer.on('active:turnofflayers', turnOffAllLayers);
+      }
+      if (turnOnLayersControl) {
+        viewer.on('active:turnonlayers', turnOnAllLayers);
+      }
       viewer.on('active:togglevisibleLayers', toggleShowVisibleLayers);
 
       const backgroundLayers = viewer.getLayersByProperty('group', 'background').reverse();
@@ -479,8 +517,10 @@ const Legend = function Legend(options = {}) {
     },
     onRender() {
       const layerControlCmps = [];
+      if (turnOnLayersControl) layerControlCmps.push(turnOnLayersButton);
       if (turnOffLayersControl) layerControlCmps.push(turnOffLayersButton);
       const layerControl = El({
+        cls: 'grow flex justify-end align-center no-shrink',
         components: layerControlCmps
       });
       mainContainerEl = document.getElementById(mainContainerCmp.getId());

src/controls/legend/overlays.js

@@ -25,7 +25,7 @@ const Overlays = function Overlays(options) {
 
   const cls = `${clsSettings} o-layerswitcher-overlays flex row overflow-hidden`.trim();
   const style = dom.createStyle({
-    width: '220px', height: '100%', 'min-width': '220px', ...styleSettings
+    width: '100%', height: '100%', 'min-width': '220px', ...styleSettings
   });
   const nonGroupNames = ['background', 'none'];
   const rootGroupNames = ['root', '', null, undefined];