Merge pull request #1006 from simon-leech/main

Layer Restrictions
GEOLYTIX · Nov 17, 2023 · 3c04e78 · 3c04e78
2 parents d41bfe1 + 7fdcab6
commit 3c04e78
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 22 deletions.
diff --git a/lib/ui/layers/view.mjs b/lib/ui/layers/view.mjs
@@ -32,22 +32,22 @@ mapp.utils.merge(mapp.dictionaries, {
 export default (layer) => {
 
   if (layer.view === null) {
-    
+
     // Do not create a layer view.
-     return layer;
+    return layer;
   }
 
   layer.view = mapp.utils.html.node`<div class="layer-view">`
-    
+
   // Create content from layer view panels and plugins
   const content = Object.keys(layer)
     .map(key => mapp.ui.layers.panels[key] && mapp.ui.layers.panels[key](layer))
     .filter(panel => typeof panel !== 'undefined')
 
   // Set default order for panel if not explicit in layer config.
-  layer.panelOrder = layer.panelOrder || ['draw-drawer','dataviews-drawer','filter-drawer','style-drawer','meta']
+  layer.panelOrder = layer.panelOrder || ['draw-drawer', 'dataviews-drawer', 'filter-drawer', 'style-drawer', 'meta']
 
-  content.sort((a,b)=>{
+  content.sort((a, b) => {
 
     // Sort according to data-id in panelOrder array.
     return layer.panelOrder.findIndex(chk => chk === a.dataset?.id)
@@ -62,16 +62,16 @@ export default (layer) => {
         data-id=zoomToExtent
         title=${mapp.dictionary.layer_zoom_to_extent}
         class="mask-icon fullscreen"
-        onclick=${async e=>{
-          
-          // response indicates whether locations were found.
-          let response = await layer.zoomToExtent()
-
-          // disable button if no locations were found.
-          e.target.disabled = !response
-        }}>` || ``
- 
-    // Create toogleDisplay button for header.
+        onclick=${async e => {
+
+        // response indicates whether locations were found.
+        let response = await layer.zoomToExtent()
+
+        // disable button if no locations were found.
+        e.target.disabled = !response
+      }}>` || ``
+
+    // Create toggleDisplay button for header.
     const toggleDisplay = mapp.utils.html.node`
       <button
         data-id=display-toggle
@@ -98,7 +98,7 @@ export default (layer) => {
     // Create layer drawer node.
     layer.drawer = mapp.ui.elements.drawer({
       data_id: `layer-drawer`,
-      class: `layer-view raised ${layer.classList || ''} ${content.length? '' : 'empty'}`,
+      class: `layer-view raised ${layer.classList || ''} ${content.length ? '' : 'empty'}`,
       header: header,
       content: content
     })
@@ -112,23 +112,49 @@ export default (layer) => {
     content.forEach(el => layer.view.append(el))
   }
 
+  // Create a div for the magnifying glass icon
+  const zoomButton = mapp.utils.html.node`<button class="mask-icon search" title="Zoom To" data-id="zoom-to">`
+
+  // Add an event listener to the magnifying glass icon to show the zoom level button when clicked
+  zoomButton.addEventListener('click', () => {
+    // Zoom to the extent of the layer if table provided. 
+    if (layer.tableCurrent() !== null) {
+      layer.zoomToExtent();
+      layer.show();
+    };
+
+    // Zoom to the zoom level if tables object. 
+    for (const key in layer.tables) {
+      if (layer.tables[key] !== null) {
+        layer.mapview.Map.getView().setZoom(key);
+        layer.show();
+      }
+    }
+  });
+
+  // Add the zoom Button before the layer toggle.
+  layer.view.querySelector('[data-id=display-toggle]').before(zoomButton)
+
   // The layer view drawer should be disabled if layer.tables are not available for the current zoom level.
-  layer.mapview.Map.getTargetElement().addEventListener('changeEnd', ()=>{
+  layer.mapview.Map.getTargetElement().addEventListener('changeEnd', () => {
 
     if (!layer.tables) return;
 
     if (layer.tableCurrent() === null) {
 
       // Collapse drawer and disable layer.view.
       layer.view.querySelector('[data-id=layer-drawer]').classList.remove('expanded')
-      layer.view.classList.add('disabled')
 
-    } else {
+      // Remove the active state from the layer view toggle button.
+      layer.view.querySelector('[data-id=display-toggle]').classList.remove('on')
+      // Set the layer toggle button to disabled.
+      layer.view.querySelector('[data-id=display-toggle]').classList.add('disabled')
 
-      // Enable the layer.view.
-      layer.view.classList.remove('disabled')
+    } else {
+      // Set the layer toggle button to enabled.
+      layer.view.querySelector('[data-id=display-toggle]').classList.remove('disabled')
     }
-    
+
   })
 
   return layer

diff --git a/public/css/_icons.css b/public/css/_icons.css
@@ -620,6 +620,10 @@
       mask-image: url("../icons/icon-toggle-on.svg");
     }
   }
+  &.disabled {
+    background-color: var(--color-primary-light);
+    pointer-events: none;
+  }
 }
 
 .touch-app {

diff --git a/public/css/ui.css b/public/css/ui.css
@@ -816,6 +816,10 @@ h3 {
       mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPHBhdGggZD0iTTE3IDdIN2MtMi43NiAwLTUgMi4yNC01IDVzMi4yNCA1IDUgNWgxMGMyLjc2IDAgNS0yLjI0IDUtNXMtMi4yNC01LTUtNXptMCA4Yy0xLjY2IDAtMy0xLjM0LTMtM3MxLjM0LTMgMy0zIDMgMS4zNCAzIDMtMS4zNCAzLTMgM3oiLz4KPC9zdmc+);
     }
   }
+  &.disabled {
+    background-color: var(--color-primary-light);
+    pointer-events: none;
+  }
 }
 .touch-app {
   &.bg-icon {