review comments

src/App.vue

@@ -2,7 +2,6 @@
 import { onMounted, onUnmounted, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import MapLibreLayer from '@/lib/ol-maplibre-layer'
-import olLayerGroup from 'ol/layer/Group.js'
 
 import { MapLibreLayerType } from './composables/map/map.model'
 import HeaderBar from './components/header/header-bar.vue'
@@ -25,6 +24,7 @@ import { statePersistorStyleService } from '@/services/state-persistor/state-per
 import { statePersistorMyMapService } from '@/services/state-persistor/state-persistor-mymap.service'
 import { useAppStore } from '@/stores/app.store'
 import useMap from '@/composables/map/map.composable'
+import traverseLayer from '@/lib/tools.js'
 
 // Important, keep order!
 statePersistorMyMapService.bootstrap()
@@ -45,15 +45,6 @@ watch(layersOpen, () =>
 onMounted(() => window.addEventListener('resize', resizeMap))
 onUnmounted(() => window.removeEventListener('resize', resizeMap))
 
-function traverseLayer(layer, ancestors, visitor) {
-  const descend = visitor(layer, ancestors)
-  if (descend && layer instanceof olLayerGroup) {
-    layer.getLayers().forEach(childLayer => {
-      traverseLayer(childLayer, [...ancestors, layer], visitor)
-    })
-  }
-}
-
 function resizeMap() {
   // Update all canvas size when layer panel is opened/closed
   const map = useMap().getOlMap()
@@ -62,6 +53,8 @@ function resizeMap() {
   map.updateSize()
 
   // And trigger update MapLibre layers' canvas size
+  // the utility function traverseLayer is used as a workaround until OL is updated to 6.15
+  // then the function getAllLayers below (added in OL v.6.10.0) can be used
   // map.getAllLayers().forEach(layer => {
   traverseLayer(map.getLayerGroup(), [], layer => {
     if (layer instanceof MapLibreLayer) {

src/composables/map/ol.composable.ts

@@ -251,10 +251,7 @@ export default function useOpenLayers() {
   function getLayerFromCache(
     layer: Layer | undefined | null
   ): BaseLayer | null {
-    if (layer === null || layer === undefined) return null
-    const id = layer.id
-
-    return layersCache.get(id)
+    return layer ? layersCache.get(layer.id) : null
   }
 
   function applyOnBgLayer(

src/composables/mvt-styles/mvt-styles.composable.ts

@@ -43,9 +43,7 @@ export default function useMvtStyles() {
     const newVectorSources: VectorSourceDict = new Map()
     styleStore.bgVectorSources.forEach((vectorSource, key) => {
       if (key === bgLayer.id) {
-        const newVectorSource = Object.assign({}, vectorSource, {
-          xyz_custom: serial,
-        })
+        const newVectorSource = { ...vectorSource, xyz_custom: serial }
         newVectorSources.set(key, newVectorSource)
       } else {
         newVectorSources.set(key, vectorSource)

src/lib/tools.js

@@ -0,0 +1,10 @@
+import olLayerGroup from 'ol/layer/Group.js'
+
+export default function traverseLayer(layer, ancestors, visitor) {
+  const descend = visitor(layer, ancestors)
+  if (descend && layer instanceof olLayerGroup) {
+    layer.getLayers().forEach(childLayer => {
+      traverseLayer(childLayer, [...ancestors, layer], visitor)
+    })
+  }
+}