Legend for wmts/wms layers

swisstopo · Apr 26, 2024 · 6646581 · 6646581
1 parent 55f219a
commit 6646581
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 53 deletions.
diff --git 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`
+      <div class="ngm-legend-container">
+        <div>${i18next.t('dtd_legend')}</div>
+        <div class="ngm-legend-image"><img src="${legendImage}"></div>
+      </div>
+    ` : ''}`;
+  }
+
+  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`
+      <div class="ngm-legend-html">
+        ${unsafeHTML(legendHtml)}
+      </div>`;
+  }
+
+  render() {
     return html`
       <div class="ngm-floating-window-header drag-handle">
-      ${i18next.t(this.config.label)}
+        ${i18next.t(this.config.label)}
         <div class="ngm-close-icon" @click=${() => this.dispatchEvent(new CustomEvent('close'))}></div>
       </div>
-      <div class="content-container">
-        <table class="ui compact small very basic table">
-          <tbody>
-          ${legendImage ? html`
-            <tr class="top aligned">
-              <td class="key">${i18next.t('dtd_legend')}</td>
-              <td class="value"><img src="${legendImage}"></td>
-            </tr>
-            ` : ''}
-          </tbody>
-        </table>
+      <div class="content-container ${classMap({'legend-html': this.config.type === LayerType.swisstopoWMTS})}">
+        ${this.config.type === LayerType.swisstopoWMTS ? html`${until(this.getWmtsLegend(), html`
+          <div class="ui loader"></div>`)}` : this.getImageLegend()}
       </div>
+      ${dragArea}
     `;
   }
 

diff --git 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
@@ -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
@@ -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;
 }