diff --git a/public/css/pickletree.css b/public/css/pickletree.css index 8f3863f..bdba3f9 100644 --- a/public/css/pickletree.css +++ b/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 { diff --git a/public/img/legends/HABT.png b/public/img/legends/HABT.png new file mode 100644 index 0000000..aa1a621 Binary files /dev/null and b/public/img/legends/HABT.png differ diff --git a/public/img/legends/mediseh_cora.png b/public/img/legends/mediseh_cora.png new file mode 100644 index 0000000..1ff8776 Binary files /dev/null and b/public/img/legends/mediseh_cora.png differ diff --git a/public/img/legends/mediseh_maerl.png b/public/img/legends/mediseh_maerl.png new file mode 100644 index 0000000..1ff8776 Binary files /dev/null and b/public/img/legends/mediseh_maerl.png differ diff --git a/public/img/legends/mediseh_posidonia.png b/public/img/legends/mediseh_posidonia.png new file mode 100644 index 0000000..1ff8776 Binary files /dev/null and b/public/img/legends/mediseh_posidonia.png differ diff --git a/public/img/legends/an_status.png b/public/img/legends/wfd_an_status_.png similarity index 100% rename from public/img/legends/an_status.png rename to public/img/legends/wfd_an_status_.png diff --git a/public/img/legends/bmi_status.png b/public/img/legends/wfd_bmi_status_.png similarity index 100% rename from public/img/legends/bmi_status.png rename to public/img/legends/wfd_bmi_status_.png diff --git a/public/img/legends/chem_status.png b/public/img/legends/wfd_chem_status_.png similarity index 100% rename from public/img/legends/chem_status.png rename to public/img/legends/wfd_chem_status_.png diff --git a/public/img/legends/chla_status.png b/public/img/legends/wfd_chla_status_.png similarity index 100% rename from public/img/legends/chla_status.png rename to public/img/legends/wfd_chla_status_.png diff --git a/public/img/legends/eco_status.png b/public/img/legends/wfd_eco_status_.png similarity index 100% rename from public/img/legends/eco_status.png rename to public/img/legends/wfd_eco_status_.png diff --git a/public/img/legends/ma_status.png b/public/img/legends/wfd_ma_status_.png similarity index 100% rename from public/img/legends/ma_status.png rename to public/img/legends/wfd_ma_status_.png diff --git a/public/img/legends/pcqi_status.png b/public/img/legends/wfd_pcqi_status_.png similarity index 100% rename from public/img/legends/pcqi_status.png rename to public/img/legends/wfd_pcqi_status_.png diff --git a/public/js/extras.js b/public/js/extras.js index 4310cc6..2a3b986 100644 --- a/public/js/extras.js +++ b/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; } diff --git a/public/js/layers.js b/public/js/layers.js index b4110ce..65885b9 100644 --- a/public/js/layers.js +++ b/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'); } diff --git a/public/js/treeview.js b/public/js/treeview.js index dec8b32..31ccca5 100644 --- a/public/js/treeview.js +++ b/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 + }]; /* =======================*/