Merge pull request #523 from geoadmin/feat_BGDIINF_SB-3185_bg_selecto…

…r_rework

BGDIINF_SB-3185 : rework of the BG selector

src/api/layers/GeoAdmin3DLayer.class.js

@@ -18,6 +18,7 @@ export default class GeoAdmin3DLayer extends GeoAdminLayer {
             layerId,
             LayerTypes.VECTOR,
             layerId,
+            layerId,
             1.0,
             true,
             [new LayerAttribution('swisstopo', 'https://www.swisstopo.admin.ch/en/home.html')],

src/api/layers/GeoAdminAggregateLayer.class.js

@@ -68,6 +68,8 @@ export default class GeoAdminAggregateLayer extends GeoAdminLayer {
             name,
             LayerTypes.AGGREGATE,
             id,
+            // no serverLayerName for aggregate, as they are made of 2 layers
+            null,
             opacity,
             visible,
             attributions,

src/api/layers/GeoAdminGeoJsonLayer.class.js

@@ -14,7 +14,7 @@ export default class GeoAdminGeoJsonLayer extends GeoAdminLayer {
      * @param styleUrl The URL to use to request the styling to apply to the data
      */
     constructor(name, id, opacity, visible, attributions, geoJsonUrl, styleUrl) {
-        super(name, LayerTypes.GEOJSON, id, opacity, visible, attributions)
+        super(name, LayerTypes.GEOJSON, id, id, opacity, visible, attributions)
         this.geoJsonUrl = geoJsonUrl
         this.styleUrl = styleUrl
     }

src/api/layers/GeoAdminLayer.class.js

@@ -10,8 +10,11 @@ export default class GeoAdminLayer extends AbstractLayer {
     /**
      * @param {String} name Name of this layer in the current lang
      * @param {LayerTypes} type See {@link LayerTypes}
-     * @param {String} geoAdminID The unique ID of this layer that will be used to request the
-     *   different backends of map.geo.admin.ch
+     * @param {String} geoAdminID The unique ID of this layer that will be used to identify this
+     *   layer
+     * @param {String} serverLayerId The ID to use when requesting the WMS/WMTS backend, this might
+     *   be different than geoAdminID, and many layers (with different geoAdminID) can in fact
+     *   request the same serverLayerId in the end)
      * @param {Number} opacity Value from 0.0 to 1.0 telling with which opacity this layer should be
      *   shown on the map
      * @param {boolean} visible If the layer should be shown on the map
@@ -36,6 +39,7 @@ export default class GeoAdminLayer extends AbstractLayer {
         name = '',
         type = null,
         geoAdminID = '',
+        serverLayerId = '',
         opacity = 1.0,
         visible = false,
         attributions = [],
@@ -48,6 +52,7 @@ export default class GeoAdminLayer extends AbstractLayer {
     ) {
         super(name, type, opacity, visible, attributions, hasTooltip, false)
         this.geoAdminID = geoAdminID
+        this.serverLayerId = serverLayerId
         this.isBackground = isBackground
         this.baseURL = baseURL
         if (ensureTrailingSlashInBaseUrl && this.baseURL && !this.baseURL.endsWith('/')) {

src/api/layers/GeoAdminWMSLayer.class.js

@@ -9,7 +9,9 @@ import { WMS_BASE_URL } from '@/config'
 export default class GeoAdminWMSLayer extends GeoAdminLayer {
     /**
      * @param {String} name The name of this layer (lang specific)
-     * @param {String} id The unique ID of this layer in the GeoAdmin backends
+     * @param {String} id The unique ID of this layer
+     * @param {String} serverLayerName The ID of this layer in the GeoAdmin backends (can be the
+     *   same, or different from the id)
      * @param {Number} opacity The opacity to apply to this layer (between 0.0 and 1.0)
      * @param {boolean} visible If the layer should be shown on the map
      * @param {LayerAttribution[]} attributions Description of the data owner(s) for this layer
@@ -33,6 +35,7 @@ export default class GeoAdminWMSLayer extends GeoAdminLayer {
     constructor(
         name,
         id,
+        serverLayerName,
         opacity,
         visible,
         attributions,
@@ -50,6 +53,7 @@ export default class GeoAdminWMSLayer extends GeoAdminLayer {
             name,
             LayerTypes.WMS,
             id,
+            serverLayerName,
             opacity,
             visible,
             attributions,

src/api/layers/GeoAdminWMTSLayer.class.js

@@ -6,7 +6,8 @@ import LayerTypes from '@/api/layers/LayerTypes.enum'
 export default class GeoAdminWMTSLayer extends GeoAdminLayer {
     /**
      * @param {String} name Layer name (internationalized)
-     * @param {String} id Unique layer ID used in our backend
+     * @param {String} id Unique layer ID
+     * @param {String} serverLayerName ID to be used in our backend (can be different from the id)
      * @param {Number} opacity Opacity value between 0.0 (transparent) and 1.0 (visible)
      * @param {boolean} visible If the layer should be shown on the map
      * @param {LayerAttribution[]} attributions Description of the data owner(s) for this layer
@@ -26,6 +27,7 @@ export default class GeoAdminWMTSLayer extends GeoAdminLayer {
     constructor(
         name = '',
         id = '',
+        serverLayerName = '',
         opacity = 1.0,
         visible = false,
         attributions = [],
@@ -41,6 +43,7 @@ export default class GeoAdminWMTSLayer extends GeoAdminLayer {
             name,
             LayerTypes.WMTS,
             id,
+            serverLayerName,
             opacity,
             visible,
             attributions,
@@ -76,9 +79,7 @@ export default class GeoAdminWMTSLayer extends GeoAdminLayer {
             // if no timestamp was found (no time config or preview year) we fall back to 'current' as the default WMTS timestamp
             timestampToUse = CURRENT_YEAR_WMTS_TIMESTAMP
         }
-        return `${
-            this.baseURL
-        }1.0.0/${this.getID()}/default/${timestampToUse}/${epsgNumber}/{z}/{x}/{y}.${this.format}`
+        return `${this.baseURL}1.0.0/${this.serverLayerId}/default/${timestampToUse}/${epsgNumber}/{z}/{x}/{y}.${this.format}`
     }
 
     get hasMultipleTimestamps() {

src/api/layers/layers.api.js

@@ -29,6 +29,7 @@ const generateClassForLayerConfig = (layerConfig, id, allOtherLayers, lang) => {
     let layer = undefined
     if (layerConfig) {
         const {
+            serverLayerName,
             label: name,
             type,
             opacity,
@@ -69,6 +70,7 @@ const generateClassForLayerConfig = (layerConfig, id, allOtherLayers, lang) => {
                 layer = new GeoAdminWMTSLayer(
                     name,
                     id,
+                    serverLayerName,
                     opacity,
                     false,
                     attributions,
@@ -85,6 +87,7 @@ const generateClassForLayerConfig = (layerConfig, id, allOtherLayers, lang) => {
                 layer = new GeoAdminWMSLayer(
                     name,
                     id,
+                    serverLayerName,
                     opacity,
                     false,
                     attributions,

src/modules/i18n/locales/de.json

@@ -616,5 +616,15 @@
     "feedback_invalid_email": "ungültige E-Mail",
     "profile_no_data": "kein Datum",
     "view_on_mapgeoadminch_webmapviewer": "In {url} ansehen",
-    "full_width": "Vollständige Breite"
+    "full_width": "Vollständige Breite",
+    "georessourcen": "Georessourcen",
+    "georessourcen_service_link_label": "Weitere Informationen",
+    "georessourcen_service_link_href": "https://www.swisstopo.admin.ch/de/wissen-fakten/geologie/georessourcen.html",
+    "topic_georessourcen_tooltip": "Georessourcen",
+    "ch.swisstopo.swissimage": "Luftbilder",
+    "ch.swisstopo.pixelkarte-grau": "Karte SW",
+    "ch.swisstopo.pixelkarte-farbe": "Karte farbig",
+    "ch.swisstopo.swissimage_3d": "Luftbild",
+    "ch.swisstopo.swisstlm3d-karte-grau_3d": "Karte SW",
+    "ch.swisstopo.swisstlm3d-karte-farbe_3d": "Karte farbig"
 }

src/modules/i18n/locales/en.json

@@ -545,7 +545,7 @@
     "verteidigung_service_link_href": "http://www.vtg.admin.ch/en/armee.html",
     "verteidigung_service_link_label": "www.vtg.admin.ch",
     "view_on_mapgeoadminch": "View on {{url}}",
-    "void_layer": "White background",
+    "void_layer": "No background",
     "vu": "Road accidents",
     "vu_service_link_href": "http://www.unfalldaten.ch ",
     "vu_service_link_label": "FEDRO - Road accident data",
@@ -616,5 +616,15 @@
     "feedback_invalid_email": "Invalid email",
     "profile_no_data": "No data",
     "view_on_mapgeoadminch_webmapviewer": "View on {url}",
-    "full_width": "Full width"
+    "full_width": "Full width",
+    "georessourcen": "Geo-resources",
+    "georessourcen_service_link_label": "More information",
+    "georessourcen_service_link_href": "https://www.swisstopo.admin.ch/en/knowledge-facts/geology/geo-resources.html",
+    "topic_georessourcen_tooltip": "Geo-resources",
+    "ch.swisstopo.swissimage": "Aerial imagery",
+    "ch.swisstopo.pixelkarte-grau": "Grey map",
+    "ch.swisstopo.pixelkarte-farbe": "Color map",
+    "ch.swisstopo.swissimage_3d": "Aerial imagery",
+    "ch.swisstopo.swisstlm3d-karte-grau_3d": "Grey map",
+    "ch.swisstopo.swisstlm3d-karte-farbe_3d": "Color map"
 }

src/modules/i18n/locales/fr.json

@@ -616,5 +616,15 @@
     "feedback_invalid_email": "e-mail invalide",
     "profile_no_data": "Aucune donnée",
     "view_on_mapgeoadminch_webmapviewer": "Voir sur {url}",
-    "full_width": "Largeur complète"
+    "full_width": "Largeur complète",
+    "georessourcen": "Géoressources",
+    "georessourcen_service_link_label": "Plus d'informations",
+    "georessourcen_service_link_href": "https://www.swisstopo.admin.ch/fr/connaissances-faits/geologie/georessources.html",
+    "topic_georessourcen_tooltip": "Géoressources",
+    "ch.swisstopo.swissimage": "Photo aérienne",
+    "ch.swisstopo.pixelkarte-grau": "Cartes N&B",
+    "ch.swisstopo.pixelkarte-farbe": "Cartes couleurs",
+    "ch.swisstopo.swissimage_3d": "Photo aérienne",
+    "ch.swisstopo.swisstlm3d-karte-grau_3d": "Cartes N&B",
+    "ch.swisstopo.swisstlm3d-karte-farbe_3d": "Cartes couleurs"
 }

src/modules/i18n/locales/it.json

@@ -616,5 +616,15 @@
     "feedback_invalid_email": "e-mail non valide",
     "profile_no_data": "Nessun dato",
     "view_on_mapgeoadminch_webmapviewer": "Vedi in {url}",
-    "full_width": "Larghezza intera"
+    "full_width": "Larghezza intera",
+    "georessourcen": "Georisorse",
+    "georessourcen_service_link_label": "Ulteriori informazioni",
+    "georessourcen_service_link_href": "https://www.swisstopo.admin.ch/it/conoscenze-fatti/geologia/georisorse.html",
+    "topic_georessourcen_tooltip": "Georisorse",
+    "ch.swisstopo.swissimage": "Veduta aerea",
+    "ch.swisstopo.pixelkarte-grau": "Carta B/N",
+    "ch.swisstopo.pixelkarte-farbe": "Carta a colori",
+    "ch.swisstopo.swissimage_3d": "Veduta aerea",
+    "ch.swisstopo.swisstlm3d-karte-grau_3d": "Carta B/N",
+    "ch.swisstopo.swisstlm3d-karte-farbe_3d": "Carta a colori"
 }

src/modules/i18n/locales/rm.json

@@ -614,5 +614,15 @@
     "feedback_invalid_email": "ungültige E-Mail",
     "profile_no_data": "kein Datum",
     "view_on_mapgeoadminch_webmapviewer": "Contemplar in {url}",
-    "full_width": "Vollständige Breite"
+    "full_width": "Vollständige Breite",
+    "georessourcen": "Georessourcen",
+    "georessourcen_service_link_label": "Ulteriuras infurmaziuns",
+    "georessourcen_service_link_href": "https://www.swisstopo.admin.ch/de/wissen-fakten/geologie/georessourcen.html",
+    "topic_georessourcen_tooltip": "Georessourcen",
+    "ch.swisstopo.swissimage": "Fotografia ord l'aria",
+    "ch.swisstopo.pixelkarte-grau": "Charta en alv e nair",
+    "ch.swisstopo.pixelkarte-farbe": "Charta en colur",
+    "ch.swisstopo.swissimage_3d": "Fotografia ord l'aria",
+    "ch.swisstopo.swisstlm3d-karte-grau_3d": "Charta en alv e nair",
+    "ch.swisstopo.swisstlm3d-karte-farbe_3d": "Charta en colur"
 }

src/modules/map/components/cesium/CesiumMap.vue

@@ -25,7 +25,7 @@
                 :layer-config="layer"
                 :preview-year="previewYear"
                 :projection="projection"
-                :z-index="index + 1"
+                :z-index="index + startingZIndexForImageryLayers"
             />
             <CesiumInternalLayer
                 v-for="layer in visiblePrimitiveLayers"
@@ -110,6 +110,7 @@ import {
 } from './constants'
 import { calculateHeight, limitCameraCenter, limitCameraPitchRoll } from './utils/cameraUtils'
 import { highlightGroup, unhighlightGroup } from './utils/highlightUtils'
+import LayerTypes from '@/api/layers/LayerTypes.enum'
 
 export default {
     components: { FontAwesomeIcon, CesiumPopover, FeatureEdit, FeatureList, CesiumInternalLayer },
@@ -165,6 +166,11 @@ export default {
         editFeature() {
             return this.selectedFeatures.find((feature) => feature.isEditable)
         },
+        startingZIndexForImageryLayers() {
+            return this.backgroundLayersFor3D.find((layer) => layer.type === LayerTypes.WMTS)
+                ? 1
+                : 0
+        },
     },
     watch: {
         selectedFeatures: {
@@ -304,7 +310,7 @@ export default {
             )
 
             const globe = scene.globe
-            globe.baseColor = Color.TRANSPARENT
+            globe.baseColor = Color.WHITE
             globe.depthTestAgainstTerrain = true
             globe.showGroundAtmosphere = false
             globe.showWaterEffect = false

src/modules/map/components/cesium/CesiumWMSLayer.vue

@@ -41,7 +41,7 @@ export default {
             currentLang: (state) => state.i18n.lang,
         }),
         layerId() {
-            return this.wmsLayerConfig.geoAdminID || this.wmsLayerConfig.externalLayerId
+            return this.wmsLayerConfig.serverLayerName || this.wmsLayerConfig.externalLayerId
         },
         opacity() {
             return this.wmsLayerConfig.opacity || 1.0

src/modules/map/components/cesium/utils/primitiveLayerUtils.js

@@ -169,15 +169,7 @@ export function updateCollectionProperties(collection, properties) {
 
 export async function loadTileSetAndApplyStyle(tileSetJsonURL, withEnhancedLabelStyle = false) {
     try {
-        const tileset = await Cesium3DTileset.fromUrl(tileSetJsonURL, {
-            // skipLevelOfDetail: true,
-            // baseScreenSpaceError: 1024,
-            // skipScreenSpaceErrorFactor: 16,
-            // skipLevels: 1,
-            // immediatelyLoadDesiredLevelOfDetail: false,
-            // loadSiblings: false,
-            // cullWithChildrenBounds: true,
-        })
+        const tileset = await Cesium3DTileset.fromUrl(tileSetJsonURL)
         if (withEnhancedLabelStyle) {
             tileset.style = cesiumEnchancedLabelStzle
         }

src/modules/map/components/footer/MapFooter.vue

@@ -4,7 +4,7 @@
             <MapFooterAttributionList />
             <div>
                 <div class="map-background-selector">
-                    <MapFooterBackgroundSelector />
+                    <BackgroundSelector />
                 </div>
                 <div id="map-footer-mobile-scale-line" />
             </div>
@@ -23,18 +23,18 @@
 </template>
 
 <script>
+import BackgroundSelector from '@/modules/map/components/footer/backgroundSelector/BackgroundSelector.vue'
 import MapFooterAttributionList from '@/modules/map/components/footer/MapFooterAttributionList.vue'
 import { mapState } from 'vuex'
 import MapFooterAppCopyright from './MapFooterAppCopyright.vue'
 import MapFooterAppVersion from './MapFooterAppVersion.vue'
-import MapFooterBackgroundSelector from './MapFooterBackgroundSelector.vue'
 
 export default {
     components: {
+        BackgroundSelector,
         MapFooterAttributionList,
         MapFooterAppCopyright,
         MapFooterAppVersion,
-        MapFooterBackgroundSelector,
     },
     computed: {
         ...mapState({
@@ -77,7 +77,7 @@ $flex-gap: 1em;
         .map-background-selector {
             padding: $screen-padding-for-ui-elements;
         }
-        @include respond-above(tablet) {
+        @include respond-above(phone) {
             flex-direction: column-reverse;
         }
     }