changes in legends, style layertree, bug fixes, legend toggle in context menu

public/css/pickletree.css

@@ -6,6 +6,8 @@
   width: 30px;
   height: 18px;
   margin: 0;
+  padding-inline: 15px;
+  margin-right: 5px;
 }
 
 .ptree .switch input {
@@ -137,6 +139,7 @@
   display: flex;
   align-items: baseline;
   cursor: pointer;
+  white-space: pre;
 }
 
 .ptreemenuCont span i {

public/js/extras.js

@@ -163,18 +163,18 @@ function getBathymetry() {
   const rnb = L.tileLayer.wms(rainbow_url, { transparent: true, layers: 'emodnet:mean_rainbowcolour', format: 'image/png'});
   const cnt = L.tileLayer.wms(rainbow_url, { transparent: true, layers: 'emodnet:contours', format: 'image/png'});
 
-  legends['DPTH'] = L.control.Legend({
-    position: "bottomright",
-    title: 'Bathymetry',
-    symbolWidth: 150,
-    symbolHeight: 208,
-    collapsed: false,
-    legends: [{
-      type: "image",
-      label: ' ',
-      url: "https://tiles.emodnet-bathymetry.eu/legends/legend_rainbow.png"
-    }]
-  }).addTo(mapL);
+  // legends['DPTH'] = L.control.Legend({
+  //   position: "bottomright",
+  //   title: 'Bathymetry',
+  //   symbolWidth: 150,
+  //   symbolHeight: 208,
+  //   collapsed: false,
+  //   legends: [{
+  //     type: "image",
+  //     label: ' ',
+  //     url: "https://tiles.emodnet-bathymetry.eu/legends/legend_rainbow.png"
+  //   }]
+  // }).addTo(mapL);
   remoteLayer = L.layerGroup([rnb, cnt]);
 
   return remoteLayer;
@@ -222,19 +222,19 @@ function getHabitat(layerCode) {
       habitats.addLayer(l)
     });
 
-    legends[layerCode] = L.control.Legend({
-      position: "bottomright",
-      symbolWidth: 400,
-      symbolHeight: 600,
-      collapsed: false,
-      title: 'Habitat Type',
-      legends: [{
-        type: "image",
-        label: ' ',
-        url: lgndUrl
-      }]
-    }).addTo(mapL);
-
+    // legends[layerCode] = L.control.Legend({
+    //   position: "bottomright",
+    //   symbolWidth: 400,
+    //   symbolHeight: 600,
+    //   collapsed: false,
+    //   title: 'Habitat Type',
+    //   legends: [{
+    //     type: "image",
+    //     label: ' ',
+    //     url: lgndUrl
+    //   }]
+    // }).addTo(mapL);
+    //
     return habitats;
 }
 
@@ -316,18 +316,18 @@ function getProduct(layer) {
   let l;
 
   l = L.tileLayer.betterWms(url, { transparent: true, layers: layer.code, format: 'image/png'});
-  legends[layer.code] = L.control.Legend({
-      position: "bottomright",
-      symbolWidth: 100,
-      symbolHeight: 200,
-      collapsed: false,
-      title: 'Probability of habitat presence',
-      legends: [{
-        type: "image",
-        label: ' ',
-        url: legendUrl
-      }]
-    }).addTo(mapL);
+  // legends[layer.code] = L.control.Legend({
+  //     position: "bottomright",
+  //     symbolWidth: 100,
+  //     symbolHeight: 200,
+  //     collapsed: false,
+  //     title: 'Probability of habitat presence',
+  //     legends: [{
+  //       type: "image",
+  //       label: ' ',
+  //       url: legendUrl
+  //     }]
+  //   }).addTo(mapL);
     mapL.on('click', e => {
       let location = e.latlng;
     });
@@ -360,7 +360,6 @@ function getWFD(layer) {
   const legendName = layerCode.split('_').slice(1,3).join('_');
   const lgndUrl = BASE_URL + "/img/legends/" + legendName + ".png";
   let l;
-  console.debug('layer: : : ', layer);
 
   l = L.tileLayer.wms(BASE_URL + '/geoserver/wms', { transparent: true, layers: layerCode + layer.minSuffix, format: 'image/png'});
   wmsGroup.addLayer(l);
@@ -377,19 +376,19 @@ function getWFD(layer) {
     logo: 'Year Selector ' + layerTitle,
   }).addTo(mapL);
 
-  legends[layerCode] = L.control.Legend({
-    position: "bottomright",
-    title: layerTitle,
-    symbolWidth: 90,
-    symbolHeight: 130,
-    collapsed: false,
-    legends: [{
-      type: "image",
-      label: '',
-      url: lgndUrl
-    }]
-  }).addTo(mapL);
-
+  // legends[layerCode] = L.control.Legend({
+  //   position: "bottomright",
+  //   title: layerTitle,
+  //   symbolWidth: 90,
+  //   symbolHeight: 130,
+  //   collapsed: false,
+  //   legends: [{
+  //     type: "image",
+  //     label: '',
+  //     url: lgndUrl
+  //   }]
+  // }).addTo(mapL);
+  //
   return wmsGroup;
 }
 

public/js/layers.js

@@ -326,7 +326,7 @@ var layersList = [
     leafletid: null,
   },{
     name: 'PCQI Status',
-    code: 'wfd_chla_status_',
+    code: 'wfd_pcqi_status_',
     minSuffix: '2018',
     maxSuffix: '2021',
     active: false,
@@ -400,7 +400,6 @@ async function layerTreeSwitch(node) {
     console.debug("wms layer: ", l);
     l.addTo(mapL);
     leafletId = l._leaflet_id;
-    console.debug("assigned leaflet id: ", leafletId);
   } else {
     console.debug("hide layer", layer.code);
     if (layer.format === 'geojson')
@@ -427,6 +426,7 @@ async function layerTreeSwitch(node) {
 function clearLegend(layerCode) {
   try{
     legends[layerCode].remove();
+    delete legends[layerCode];
   } catch (error) {
     console.debug('layer has no legend');
   }

public/js/treeview.js

@@ -4,7 +4,7 @@ let nodeContext = [{
             icon:'fa fa-download',
             title:'Download Layer',
             //context button click event
-            onClick : async (node) => {
+            onClick: async (node) => {
               document.getElementById('modal-download-layer').classList.add('is-active');
               Alpine.store('downloadName', node.data.code);
               document.getElementById('modal-download-layer-name').textContent = "Layer name: " + node.data.code;
@@ -15,7 +15,7 @@ let nodeContextLink = [{
             icon:'fa fa-link',
             title:'Source Link',
             //context button click event
-            onClick : async (node) => {
+            onClick: async (node) => {
               window.open(node.data.n_hyperlink, '_blank')
               // downloadShapefile(node.data.code);
             }
@@ -26,12 +26,40 @@ let citation = [{
             icon:'fa fa-link',
             title:'Citation',
             //context button click event
-            onClick : async (node) => {
+            onClick: async (node) => {
                 //console.log('add - '+node.id);
               window.open(node.data.n_citation, '_blank');
             }
         }];
 
+let nodeContextLegend = [{
+  icon: 'fa fa-icons',
+  title: 'Legend',
+  onClick: async (node) => {
+    const layerCode = node.data.code;
+    const layerTitle = node.data.n_title;
+    const lgndUrl = BASE_URL + "/img/legends/" + layerCode + ".png";
+
+    if (Object.hasOwn(legends, layerCode)) {
+      clearLegend(layerCode);
+      return;
+    }
+
+    legends[layerCode] = L.control.Legend({
+      position: "bottomright",
+      title: layerTitle,
+      symbolWidth: 'auto',
+      symbolHeight: 'auto',
+      collapsed: false,
+      legends: [{
+        type: "image",
+        label: '',
+        url: lgndUrl
+      }]
+    }).addTo(mapL);
+  }
+}];
+
 const myData = [{
       n_id: 1,
       n_title: 'MARINE AREAS',
@@ -282,14 +310,14 @@ const myData = [{
       n_title: 'EMODNET Bathymetry',
       code: 'DPTH',
       n_parentid: 32,
-      n_elements: nodeContextLink,
+      n_elements: nodeContextLink.concat(nodeContextLegend),
       n_hyperlink: "https://doi.org/10.12770/bb6a87dd-e579-4036-abe1-e649cea9881a"
     },{
       n_id: 322 ,
       n_title: 'EMODNET Habitats',
       code: 'HABT',
       n_parentid: 32,
-      n_elements: nodeContextLink,
+      n_elements: nodeContextLink.concat(nodeContextLegend),
       n_hyperlink: "http://gis.ices.dk/geonetwork/srv/eng/catalog.search#/metadata/10d3d35c-8f8e-40ff-898f-32e0b037356c"
     },
     // {
@@ -314,101 +342,72 @@ const myData = [{
       n_title: 'Probability of coralligenous habitat in the Mediterranean (MEDISEH)',
       code: 'mediseh_cora',
       n_parentid: 32,
-      n_elements: nodeContextLink,
+      n_elements: nodeContextLink.concat(nodeContextLegend),
       n_hyperlink: "http://gis.ices.dk/geonetwork/srv/eng/catalog.search#/metadata/4da88de5-b0b8-4de4-8aac-99a9b0980736"
     },{
       n_id: 325,
       n_title: 'Probability of maerl habitat in the Mediterranean (MEDISEH)',
       code: 'mediseh_maerl',
       n_parentid: 32,
-      n_elements: nodeContextLink,
+      n_elements: nodeContextLink.concat(nodeContextLegend),
       n_hyperlink: "http://gis.ices.dk/geonetwork/srv/eng/catalog.search#/metadata/43c7ac30-04da-479d-b5c1-ba621f0981e4"
     },{
       n_id: 326,
       n_title: 'Probability of Posidonia oceanica in the Mediterranean (MEDISEH)',
       code: 'mediseh_posidonia',
       n_parentid: 32,
-      n_elements: nodeContextLink,
+      n_elements: nodeContextLink.concat(nodeContextLegend),
       n_hyperlink: "http://gis.ices.dk/geonetwork/srv/eng/catalog.search#/metadata/a93cffc8-8f45-47a4-a9bd-c8ffd9ad53fb"
     },{
       n_id: 327 ,
       n_title: 'Seagrass Meadows',
       code: 'greek_seagrass_meadows_v0906_espg3035',
       n_parentid: 32,
-      n_elements: nodeContext.concat(nodeContextLink, citation),
+      n_elements: nodeContext.concat(nodeContextLink, citation, nodeContextLegend),
       n_hyperlink: "https://www.seanoe.org/data/00765/87740/",
       n_citation: "https://doi.org/10.1515/bot-2022-0011"
     },{
       n_id: 331,
       n_title: 'Integrated Ecological Status',
+      code: 'wfd_eco_status_',
+      n_elements: nodeContext.concat(nodeContextLegend),
       n_parentid: 33
     },{
       n_id: 332,
       n_title: 'Benthic MacroInvertebrates – BMI (D2C1, D5C8, D6C3, D6C5)',
+      code: 'wfd_bmi_status_',
+      n_elements: nodeContext.concat(nodeContextLegend),
       n_parentid: 33
     },{
       n_id: 333,
       n_title: 'Macroalgae (MAI)',
+      code: 'wfd_ma_status_',
+      n_elements: nodeContext.concat(nodeContextLegend),
       n_parentid: 33
     },{
       n_id: 334,
       n_title: 'Angiosperms – AN (D2C1, D6C3, D6C5)',
+      code: 'wfd_an_status_',
+      n_elements: nodeContext.concat(nodeContextLegend),
       n_parentid: 33
     },{
       n_id: 335,
       n_title: 'Chlorophyl-a (D4C2, D5C2)',
+      code: 'wfd_chla_status_',
+      n_elements: nodeContext.concat(nodeContextLegend),
       n_parentid: 33
     },{
       n_id: 336,
       n_title: 'PhysicoChemical Quality Index – PCQI (D5C1, D5C4, D5C5)',
+      code: 'wfd_pcqi_status_',
+      n_elements: nodeContext.concat(nodeContextLegend),
       n_parentid: 33
     },{
       n_id: 337,
       n_title: 'Chemical Status – Chem (D8C1)',
-      n_parentid: 33
-    },{
-      n_id: 3311,
-      n_title: 'Ecological Status',
-      code: 'wfd_eco_status_',
-      n_elements: nodeContext,
-      n_parentid: 331
-    },{
-      n_id: 3321,
-      n_title: 'BMI Status',
-      code: 'wfd_bmi_status_',
-      n_elements: nodeContext,
-      n_parentid: 332
-    },{
-      n_id: 3331,
-      n_title: 'MA Status',
-      code: 'wfd_ma_status_',
-      n_elements: nodeContext,
-      n_parentid: 333
-    },{
-      n_id: 3341,
-      n_title: 'AN Status',
-      code: 'wfd_an_status_',
-      n_elements: nodeContext,
-      n_parentid: 334
-    },{
-      n_id: 3351,
-      n_title: 'Chl-a Status',
-      code: 'wfd_chla_status_',
-      n_elements: nodeContext,
-      n_parentid: 335
-    },{
-      n_id: 3361,
-      n_title: 'PCQI Status',
-      code: 'wfd_chla_status_',
-      n_elements: nodeContext,
-      n_parentid: 336
-    },{
-      n_id: 3371,
-      n_title: 'Chemi Status',
       code: 'wfd_chem_status_',
-      n_elements: nodeContext,
-      n_parentid: 337
-    }
-];
+      n_elements: nodeContext.concat(nodeContextLegend),
+      n_parentid: 33
+    }];
 /* =======================*/