From 6646581fd39fdd8cf3fa5eb44139eb72a115278c Mon Sep 17 00:00:00 2001 From: vladyslavtk Date: Fri, 26 Apr 2024 10:20:05 +0300 Subject: [PATCH] Legend for wmts/wms layers --- ui/src/elements/ngm-layer-legend.ts | 47 +++++++++++++++++++---------- ui/src/elements/ngm-side-bar.ts | 24 +++++++++------ ui/src/layertree.ts | 4 +++ ui/src/style/ngm-layer-legend.css | 47 ++++++++++++----------------- 4 files changed, 69 insertions(+), 53 deletions(-) diff --git a/ui/src/elements/ngm-layer-legend.ts b/ui/src/elements/ngm-layer-legend.ts index 972888af1..f589847d9 100644 --- a/ui/src/elements/ngm-layer-legend.ts +++ b/ui/src/elements/ngm-layer-legend.ts @@ -1,17 +1,21 @@ -import {html} from 'lit'; +import {html, PropertyValues} from 'lit'; +import {until} from 'lit/directives/until.js'; import {customElement, state} from 'lit/decorators.js'; import draggable from './draggable'; import i18next from 'i18next'; import {LitElementI18n} from '../i18n.js'; -import {LayerConfig} from '../layertree'; +import {LayerConfig, LayerType} from '../layertree'; +import {unsafeHTML} from 'lit/directives/unsafe-html.js'; +import {classMap} from 'lit/directives/class-map.js'; +import {dragArea} from './helperElements'; @customElement('ngm-layer-legend') export class NgmLayerLegend extends LitElementI18n { @state() accessor config!: LayerConfig; - protected firstUpdated(_changedProperties) { + protected firstUpdated(_changedProperties: PropertyValues) { // hidden is required to have correct window placing this.hidden = true; draggable(this, { @@ -21,25 +25,36 @@ export class NgmLayerLegend extends LitElementI18n { super.firstUpdated(_changedProperties); } - render() { + getImageLegend() { const legendImage = this.config.legend ? `https://api.geo.admin.ch/static/images/legends/${this.config.legend}_${i18next.language}.png` : undefined; + return html`${legendImage ? html` +
+
${i18next.t('dtd_legend')}
+
+
+ ` : ''}`; + } + + async getWmtsLegend() { + const response = await fetch(`https://api3.geo.admin.ch/rest/services/api/MapServer/${this.config.layer}/legend?lang=${i18next.language}`); + const legendHtml = await response.text(); + return html` +
+ ${unsafeHTML(legendHtml)} +
`; + } + + render() { return html`
- ${i18next.t(this.config.label)} + ${i18next.t(this.config.label)}
this.dispatchEvent(new CustomEvent('close'))}>
-
- - - ${legendImage ? html` - - - - - ` : ''} - -
${i18next.t('dtd_legend')}
+
+ ${this.config.type === LayerType.swisstopoWMTS ? html`${until(this.getWmtsLegend(), html` +
`)}` : this.getImageLegend()}
+ ${dragArea} `; } diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts index d6c46019e..7e7998c3b 100644 --- a/ui/src/elements/ngm-side-bar.ts +++ b/ui/src/elements/ngm-side-bar.ts @@ -11,25 +11,29 @@ import defaultLayerTree, {LayerConfig} from '../layertree'; import { addAssetId, getAssetIds, - getAttribute, getCesiumToolbarParam, + getAttribute, + getCesiumToolbarParam, getLayerParams, getSliceParam, - getZoomToPosition, LayerFromParam, setCesiumToolbarParam, + getZoomToPosition, + LayerFromParam, + setCesiumToolbarParam, syncLayersParam } from '../permalink'; import {createCesiumObject} from '../layers/helpers'; import i18next from 'i18next'; import 'fomantic-ui-css/components/accordion.js'; import './ngm-map-configuration'; +import type {Cartesian2, Viewer} from 'cesium'; import { + BoundingSphere, Cartesian3, + CustomDataSource, + GeoJsonDataSource, HeadingPitchRange, - BoundingSphere, + Math as CMath, ScreenSpaceEventHandler, ScreenSpaceEventType, - Math as CMath, - CustomDataSource, - GeoJsonDataSource, } from 'cesium'; import {showSnackbarError, showSnackbarInfo} from '../notifications'; import auth from '../store/auth'; @@ -40,7 +44,6 @@ import {classMap} from 'lit/directives/class-map.js'; import {zoomTo} from '../utils'; import $ from '../jquery'; import {customElement, property, query, state} from 'lit/decorators.js'; -import type {Cartesian2, Viewer} from 'cesium'; import type QueryManager from '../query/QueryManager'; import NavToolsStore from '../store/navTools'; import {getLayerLabel} from '../swisstopoImagery'; @@ -54,6 +57,7 @@ type SearchLayer = { layer: string type?: LayerType title?: string + dataSourceName?: string } @customElement('ngm-side-bar') @@ -607,7 +611,7 @@ export class SideBar extends LitElementI18n { } // adds layer from search to 'Displayed Layers' - async addLayerFromSearch(searchLayer) { + async addLayerFromSearch(searchLayer: SearchLayer) { let layer; if (searchLayer.dataSourceName) { layer = this.activeLayers.find(l => l.type === searchLayer.dataSourceName); // check for layers like earthquakes @@ -642,6 +646,7 @@ export class SideBar extends LitElementI18n { config.visible = true; config.origin = 'layer'; config.label = searchLayer.title || searchLayer.label; + config.legend = config.type === LayerType.swisstopoWMTS ? config.layer : undefined; } else { config = { type: LayerType.swisstopoWMTS, @@ -650,7 +655,8 @@ export class SideBar extends LitElementI18n { visible: true, displayed: true, opacity: DEFAULT_LAYER_OPACITY, - queryType: 'geoadmin' + queryType: 'geoadmin', + legend: searchLayer.layer }; } config.load = async () => { diff --git a/ui/src/layertree.ts b/ui/src/layertree.ts index 6616bfdc2..7f8ba80e1 100644 --- a/ui/src/layertree.ts +++ b/ui/src/layertree.ts @@ -548,6 +548,7 @@ const geo_map_series: LayerTreeNode = { opacity: 0.7, queryType: 'geoadmin', geocatId: '2467ab13-e794-4c13-8c55-59fe276398c5', + legend: 'ch.swisstopo.geologie-geocover', }, { type: LayerType.swisstopoWMTS, @@ -559,6 +560,7 @@ const geo_map_series: LayerTreeNode = { opacity: 0.7, queryType: 'geoadmin', geocatId: 'a4cdef47-505e-41ab-b6a7-ad5b92d80e41', + legend: 'ch.swisstopo.geologie-geologische_karte', }, { type: LayerType.swisstopoWMTS, @@ -570,6 +572,7 @@ const geo_map_series: LayerTreeNode = { opacity: 0.7, queryType: 'geoadmin', geocatId: 'ca917a71-dcc9-44b6-8804-823c694be516', + legend: 'ch.swisstopo.geologie-tektonische_karte', }, { type: LayerType.swisstopoWMTS, @@ -581,6 +584,7 @@ const geo_map_series: LayerTreeNode = { opacity: 0.7, noQuery: true, geocatId: 'f1455593-7571-48b0-8603-307ec59a6702', + legend: 'ch.swisstopo.geologie-eiszeit-lgm-raster', }, ] }, diff --git a/ui/src/style/ngm-layer-legend.css b/ui/src/style/ngm-layer-legend.css index a61aa1d4e..4afa8719d 100644 --- a/ui/src/style/ngm-layer-legend.css +++ b/ui/src/style/ngm-layer-legend.css @@ -1,53 +1,48 @@ ngm-layer-legend { - max-width: 528px; - max-height: 643px; - font-size: 14px; - font-weight: bold; + max-height: 100%; } -ngm-layer-legend .htmlpopup-header { - font-weight: bold; - border-bottom: 2px solid #DFE2E6; - padding-bottom: 8px; - margin-bottom: 8px; +ngm-layer-legend .content-container { + max-width: 504px; + font-size: 14px; } -ngm-layer-legend .ui.small.table { - font-size: unset; +ngm-layer-legend .content-container.legend-html { + width: 504px; + max-width: 100%; } -ngm-layer-legend .ui.basic.table { +ngm-layer-legend .ngm-legend-container { background-color: #F8F9FA; - border-spacing: 4px; - border-collapse: collapse; -} - -ngm-layer-legend .ui.basic.table tbody tr { - border-bottom-width: 4px; - border-bottom-color: #F1F3F5; + display: flex; } -ngm-layer-legend .ui.table .key { +ngm-layer-legend .ngm-legend-container > div { padding-left: 8px !important; vertical-align: top; white-space: nowrap; + font-weight: bold; } -ngm-layer-legend .ui.table .value { +ngm-layer-legend .ngm-legend-image { min-width: 160px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; - font-weight: bold; padding-right: 8px !important; } -ngm-layer-legend .ui.table .value a { +ngm-layer-legend .ngm-legend-html table a { color: #357183; } -ngm-layer-legend .ui.table .value img { +ngm-layer-legend .ngm-legend-html span, +ngm-layer-legend .ngm-legend-html p.bod-title { + font-weight: bold; +} + +ngm-layer-legend .ngm-legend-container img { width: 200px; } @@ -60,9 +55,5 @@ ngm-layer-legend .content-container { overflow-y: auto; overflow-x: hidden; max-height: 505px; -} - -ngm-layer-legend div.content-container td, -ngm-layer-legend div.content-container span { user-select: text; }