add option to use local print server with headless puppeteer

.env.development

@@ -9,5 +9,5 @@ VITE_API_SERVICES_BASE_URL=https://sys-map.dev.bgdi.ch/api/
 VITE_API_SERVICE_KML_BASE_URL=https://sys-public.dev.bgdi.ch/
 VITE_APP_API_SERVICE_SHORTLINK_BASE_URL=https://sys-s.dev.bgdi.ch/
 VITE_APP_3D_TILES_BASE_URL=https://sys-3d.dev.bgdi.ch/
-VITE_APP_VECTORTILES_BASE_URL=https://sys-verctortiles.dev.bgdi.ch/
+VITE_APP_VECTORTILES_BASE_URL=https://vectortiles.geo.admin.ch/
 VITE_APP_SERVICE_PROXY_BASE_URL=https://sys-proxy.dev.bgdi.ch/

.env.integration

@@ -8,5 +8,5 @@ VITE_API_SERVICES_BASE_URL=https://sys-map.int.bgdi.ch/api/
 VITE_API_SERVICE_KML_BASE_URL=https://sys-public.int.bgdi.ch/
 VITE_APP_API_SERVICE_SHORTLINK_BASE_URL=https://sys-s.int.bgdi.ch/
 VITE_APP_3D_TILES_BASE_URL=https://sys-3d.int.bgdi.ch/
-VITE_APP_VECTORTILES_BASE_URL=https://sys-verctortiles.int.bgdi.ch/
+VITE_APP_VECTORTILES_BASE_URL=https://vectortiles.geo.admin.ch/
 VITE_APP_SERVICE_PROXY_BASE_URL=https://sys-proxy.int.bgdi.ch/

src/api/layers/GeoAdminLayer.class.js

@@ -22,6 +22,9 @@ export default class GeoAdminLayer extends AbstractLayer {
      *   layer
      * @param {String | null} layerData.idIn3d The layer ID to be used as substitute for this layer
      *   when we are showing the 3D map. Will be using the same layer if this is set to null.
+     * @param {String | null} layerData.idInVectorTile The layer ID to be used as substitute for
+     *   this layer when we are showing the map with vector tiles. Will be using the same layer if
+     *   this is set to null.
      * @param {String} layerData.technicalName The ID/name to use when requesting the WMS/WMTS
      *   backend, this might be different than id, and many layers (with different id) can in fact
      *   request the same layer, through the same technical name, in the end)
@@ -75,6 +78,7 @@ export default class GeoAdminLayer extends AbstractLayer {
             type = null,
             id = null,
             idIn3d = null,
+            idInVectorTile = null,
             technicalName = null,
             opacity = 1.0,
             visible = true,
@@ -128,6 +132,7 @@ export default class GeoAdminLayer extends AbstractLayer {
         this.isHighlightable = isHighlightable
         this.topics = topics
         this.idIn3d = idIn3d
+        this.idInVectorTile = idInVectorTile
         this.isSpecificFor3D = id.toLowerCase().endsWith('_3d')
         this.searchable = searchable
     }

src/api/layers/GeoAdminVectorLayer.class.js

@@ -16,23 +16,26 @@ import { getVectorTilesBaseUrl } from '@/config/baseUrl.config'
  */
 export default class GeoAdminVectorLayer extends GeoAdminLayer {
     /**
-     * @param {string} layerId The ID of this layer
-     * @param {LayerAttribution[]} extraAttributions Extra attribution in case this vector layer is
-     *   a mix of many sources
+     * @param {string} vtLayerConfig.id The ID of this layer
+     * @param {string} vtLayerConfig.vectorStyleId The ID of the style in the VT backend
+     * @param {LayerAttribution[]} vtLayerConfig.extraAttributions Extra attribution in case this
+     *   vector layer is a mix of many sources
      */
-    constructor(layerId, extraAttributions = []) {
+    constructor(vtLayerConfig = {}) {
+        const { id, vectorStyleId = null, extraAttributions = [] } = vtLayerConfig
         super({
-            name: layerId,
+            id,
+            name: id,
             type: LayerTypes.VECTOR,
             baseUrl: getVectorTilesBaseUrl(),
-            id: layerId,
-            technicalName: layerId,
+            technicalName: id,
             attributions: [
                 ...extraAttributions,
                 new LayerAttribution('swisstopo', 'https://www.swisstopo.admin.ch/en/home.html'),
             ],
             isBackground: true,
             hasLegend: false,
         })
+        this.vectorStyleId = vectorStyleId
     }
 }

src/api/layers/GeoAdminWMSLayer.class.js

@@ -21,6 +21,9 @@ export default class GeoAdminWMSLayer extends GeoAdminLayer {
      * @param {String} layerData.id The unique ID of this layer
      * @param {String | null} layerData.idIn3d The layer ID to be used as substitute for this layer
      *   when we are showing the 3D map. Will be using the same layer if this is set to null.
+     * @param {String | null} layerData.idInVectorTile The layer ID to be used as substitute for
+     *   this layer when we are showing the map with vector tiles. Will be using the same layer if
+     *   this is set to null.
      * @param {String} layerData.technicalName The ID/name to use when requesting the WMS backend,
      *   this might be different than id, and many layers (with different id) can in fact request
      *   the same layer, through the same technical name, in the end)
@@ -69,6 +72,7 @@ export default class GeoAdminWMSLayer extends GeoAdminLayer {
             name = null,
             id = null,
             idIn3d = null,
+            idInVectorTile = null,
             technicalName = null,
             opacity = 1.0,
             visible = true,
@@ -91,6 +95,7 @@ export default class GeoAdminWMSLayer extends GeoAdminLayer {
             type: LayerTypes.WMS,
             id,
             idIn3d,
+            idInVectorTile,
             technicalName,
             opacity,
             visible,

src/api/layers/GeoAdminWMTSLayer.class.js

@@ -22,6 +22,9 @@ export default class GeoAdminWMTSLayer extends GeoAdminLayer {
      * @param {String} layerData.id Unique layer ID
      * @param {String | null} layerData.idIn3d The layer ID to be used as substitute for this layer
      *   when we are showing the 3D map. Will be using the same layer if this is set to null.
+     * @param {String | null} layerData.idInVectorTile The layer ID to be used as substitute for
+     *   this layer when we are showing the map with vector tiles. Will be using the same layer if
+     *   this is set to null.
      * @param {String} layerData.technicalName ID to be used in our backend (can be different from
      *   the id)
      * @param {Number} [layerData.opacity=1.0] Opacity value between 0.0 (transparent) and 1.0
@@ -63,6 +66,7 @@ export default class GeoAdminWMTSLayer extends GeoAdminLayer {
             name = null,
             id = null,
             idIn3d = null,
+            idInVectorTile = null,
             technicalName = null,
             opacity = 1.0,
             visible = true,
@@ -89,6 +93,7 @@ export default class GeoAdminWMTSLayer extends GeoAdminLayer {
             type: LayerTypes.WMTS,
             id,
             idIn3d,
+            idInVectorTile,
             technicalName,
             opacity,
             visible,

src/modules/map/components/openlayers/OpenLayersBackgroundLayer.vue

@@ -6,15 +6,19 @@ import { useLayerZIndexCalculation } from '@/modules/map/components/common/z-ind
 import OpenLayersInternalLayer from '@/modules/map/components/openlayers/OpenLayersInternalLayer.vue'
 
 const store = useStore()
+const layersConfig = computed(() => store.state.layers.config)
 const currentBackgroundLayer = computed(() => store.state.layers.currentBackgroundLayer)
+const vectorTileCounterpart = computed(() =>
+    layersConfig.value.find((layer) => layer.id === currentBackgroundLayer.value.idInVectorTile)
+)
 
 const { getZIndexForLayer } = useLayerZIndexCalculation()
 </script>
 
 <template>
     <OpenLayersInternalLayer
         v-if="currentBackgroundLayer"
-        :layer-config="currentBackgroundLayer"
+        :layer-config="vectorTileCounterpart ?? currentBackgroundLayer"
         :z-index="getZIndexForLayer(currentBackgroundLayer)"
     />
 </template>

src/modules/map/components/openlayers/OpenLayersInternalLayer.vue

@@ -17,7 +17,6 @@ import OpenLayersKMLLayer from '@/modules/map/components/openlayers/OpenLayersKM
 import OpenLayersVectorLayer from '@/modules/map/components/openlayers/OpenLayersVectorLayer.vue'
 import OpenLayersWMSLayer from '@/modules/map/components/openlayers/OpenLayersWMSLayer.vue'
 import OpenLayersWMTSLayer from '@/modules/map/components/openlayers/OpenLayersWMTSLayer.vue'
-import { WEBMERCATOR } from '@/utils/coordinates/coordinateSystems'
 
 const props = defineProps({
     layerConfig: {
@@ -36,7 +35,6 @@ const props = defineProps({
 const { layerConfig, parentLayerOpacity, zIndex } = toRefs(props)
 
 const store = useStore()
-const projection = computed(() => store.state.position.projection)
 const resolution = computed(() => store.getters.resolution)
 
 function shouldAggregateSubLayerBeVisible(subLayer) {
@@ -57,7 +55,7 @@ function shouldAggregateSubLayerBeVisible(subLayer) {
             (see OpenLayersMap main component)
         -->
         <OpenLayersVectorLayer
-            v-if="projection.epsg === WEBMERCATOR.epsg && layerConfig.type === LayerTypes.VECTOR"
+            v-if="layerConfig.type === LayerTypes.VECTOR"
             :vector-layer-config="layerConfig"
             :parent-layer-opacity="parentLayerOpacity"
             :z-index="zIndex"

src/modules/map/components/openlayers/OpenLayersVectorLayer.vue

@@ -9,14 +9,14 @@
  * Most of the specific code found bellow, plus import of layer ID should be removed then.
  */
 
-import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer'
-import axios from 'axios'
+import { Source } from 'ol/source'
 import { computed, inject, toRefs, watch } from 'vue'
+import { useStore } from 'vuex'
 
 import GeoAdminVectorLayer from '@/api/layers/GeoAdminVectorLayer.class'
-import { VECTOR_TILES_IMAGERY_STYLE_ID } from '@/config/vectortiles.config'
+import MapLibreLayer from '@/modules/map/components/openlayers/utils/ol-maplibre-layer/MapLibreLayer'
 import useAddLayerToMap from '@/modules/map/components/openlayers/utils/useAddLayerToMap.composable'
-import log from '@/utils/logging'
+import SwissCoordinateSystem from '@/utils/coordinates/SwissCoordinateSystem.class'
 
 const props = defineProps({
     vectorLayerConfig: {
@@ -34,66 +34,37 @@ const props = defineProps({
 })
 const { vectorLayerConfig, parentLayerOpacity, zIndex } = toRefs(props)
 
+const store = useStore()
+const currentProjection = computed(() => store.state.position.projection)
+
 // extracting useful info from what we've linked so far
-const layerId = computed(() => vectorLayerConfig.value.id)
+const layerId = computed(() => vectorLayerConfig.value.vectorStyleId)
 const opacity = computed(() => parentLayerOpacity.value ?? vectorLayerConfig.value.opacity)
 const styleUrl = computed(
     () => `${vectorLayerConfig.value.baseUrl}styles/${layerId.value}/style.json`
 )
 
 const layer = new MapLibreLayer({
-    id: layerId.value,
     opacity: opacity.value,
+    mapLibreOptions: {
+        style: styleUrl.value,
+    },
+    source: new Source({
+        attribution: [vectorLayerConfig.value.attribution],
+    }),
+    translateZoom: (zoom) => {
+        if (currentProjection.value instanceof SwissCoordinateSystem) {
+            return currentProjection.value.transformCustomZoomLevelToStandard(zoom)
+        }
+        return zoom
+    },
 })
-setMapLibreStyle(styleUrl.value)
 
 const olMap = inject('olMap')
 useAddLayerToMap(layer, olMap, zIndex)
 
 watch(opacity, (newOpacity) => layer.setOpacity(newOpacity))
-watch(styleUrl, (newStyleUrl) => setMapLibreStyle(newStyleUrl))
-function setMapLibreStyle(styleUrl) {
-    if (!layer?.maplibreMap) {
-        log.error('MapLibre instance is not attached to the layer')
-        return
-    }
-    // most of this methods will be edited while doing https://jira.swisstopo.ch/browse/BGDIINF_SB-2741
-    if (layerId.value === VECTOR_TILES_IMAGERY_STYLE_ID) {
-        // special case here, as the imagery is only over Switzerland (for now)
-        // we inject a fair-use WMTS that covers the globe under our aerial images
-        axios
-            .get(styleUrl)
-            .then((response) => {
-                const vectorStyle = response.data
-                // settings SwissImage to use the tiled WMS instead
-                // otherwise it covers the whole world with white tiles (when no data is present)
-                vectorStyle.sources.swissimage_wmts.tiles = [
-                    'https://wms.geo.admin.ch/?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=ch.swisstopo.swissimage&LANG=en&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&STYLES=&BBOX={bbox-epsg-3857}',
-                ]
-                // setting up Sentinel2 WMTS to cover the globe outside of Switzerland
-                vectorStyle.sources['sentinel2_wmts'] = {
-                    minzoom: 0,
-                    maxzoom: 22,
-                    tileSize: 256,
-                    type: 'raster',
-                    tiles: [
-                        'https://tiles.maps.eox.at/wmts?layer=s2cloudless-2020_3857&style=default&tilematrixset=g&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix={z}&TileCol={x}&TileRow={y}',
-                    ],
-                }
-                vectorStyle.layers.splice(1, 0, {
-                    id: 'sentinel2',
-                    source: 'sentinel2_wmts',
-                    type: 'raster',
-                })
-                layer.maplibreMap.setStyle(vectorStyle)
-            })
-            .catch((err) => {
-                log.error('Error while fetching MapLibre style', styleUrl, err)
-            })
-    } else {
-        layer.maplibreMap.setStyle(styleUrl)
-    }
-}
+watch(styleUrl, (newStyleUrl) => layer.mapLibreMap?.setStyle(newStyleUrl))
 </script>
 
 <template>

src/modules/map/components/openlayers/OpenLayersWMTSLayer.vue

@@ -85,15 +85,13 @@ function getTransformedXYZUrl() {
 function createTileGridForProjection() {
     const maxResolutionIndex = indexOfMaxResolution(projection.value, maxResolution.value)
     let resolutions = projection.value.getResolutions()
-    let matrixIds = projection.value.getMatrixIds()
     if (resolutions.length > maxResolutionIndex) {
         resolutions = resolutions.slice(0, maxResolutionIndex + 1)
-        matrixIds = matrixIds.slice(0, maxResolutionIndex + 1)
     }
     return new WMTSTileGrid({
-        resolutions,
+        resolutions: resolutions.map((resolution) => resolution.resolution),
         origin: projection.value.getTileOrigin(),
-        matrixIds,
+        matrixIds: resolutions.map((_, index) => index),
         extent: projection.value.bounds.flatten,
     })
 }