Composition layer order (issue 4679)

projects/hslayers/common/extensions/layer-extensions.ts

@@ -40,6 +40,7 @@ const GREYSCALE = 'greyscale';
 const HS_LAYMAN_SYNCHRONIZING = 'hsLaymanSynchronizing';
 const HS_QML = 'qml';
 const HS_SLD = 'sld';
+const IGNORE_PATH_ZINDEX = 'ignorePathZIndex';
 const INFO_FORMAT = 'info_format';
 const INLINE_LEGEND = 'inlineLegend';
 const LAYMAN_LAYER_DESCRIPTOR = 'laymanLayerDescriptor';
@@ -622,6 +623,21 @@ export function setSwipeSide(
   layer.set(SWIPE_SIDE, side);
 }
 
+/**
+ * When set to true, prevents z-index to be set based on highest value of layer in
+ * the same layer (which is default). Used for layers from compositions (basic, permalink)
+ */
+export function setIgnorePathZIndex(
+  layer: Layer<Source>,
+  ignorePathZIndex: boolean,
+) {
+  layer.set(IGNORE_PATH_ZINDEX, ignorePathZIndex);
+}
+
+export function getIgnorePathZIndex(layer: Layer<Source>) {
+  return layer.get(IGNORE_PATH_ZINDEX);
+}
+
 export const HsLayerExt = {
   getAccessRights,
   setAccessRights,

projects/hslayers/components/compositions/compositions.service.ts

@@ -13,10 +13,10 @@ import {HsCompositionsMapService} from './compositions-map.service';
 import {HsCompositionsMickaService} from './endpoints/compositions-micka.service';
 import {HsCompositionsParserService} from 'hslayers-ng/shared/compositions';
 import {HsConfig} from 'hslayers-ng/config';
-import {HsCoreService} from 'hslayers-ng/shared/core';
 import {HsEndpoint} from 'hslayers-ng/types';
 import {HsEventBusService} from 'hslayers-ng/shared/event-bus';
 import {HsLanguageService} from 'hslayers-ng/shared/language';
+import {HsLayerManagerService} from 'hslayers-ng/shared/layer-manager';
 import {HsLogService} from 'hslayers-ng/shared/log';
 import {HsMapCompositionDescriptor} from 'hslayers-ng/types';
 import {HsShareUrlService} from 'hslayers-ng/components/share';
@@ -36,7 +36,6 @@ export class HsCompositionsService {
   constructor(
     private http: HttpClient,
     private hsMapService: HsMapService,
-    private hsCore: HsCoreService,
     private hsCompositionsParserService: HsCompositionsParserService,
     private hsConfig: HsConfig,
     private hsUtilsService: HsUtilsService,
@@ -49,6 +48,7 @@ export class HsCompositionsService {
     private hsCompositionsMapService: HsCompositionsMapService,
     private hsEventBusService: HsEventBusService,
     private hsToastService: HsToastService,
+    private hsLayerManagerService: HsLayerManagerService,
   ) {
     this.hsEventBusService.compositionEdits.subscribe(() => {
       this.hsCompositionsParserService.composition_edited = true;
@@ -377,6 +377,7 @@ export class HsCompositionsService {
         this.hsMapService.addLayer(layers[i], DuplicateHandling.RemoveOriginal);
       }
       this.hsMapService.fitExtent(response.data.nativeExtent);
+      this.hsLayerManagerService.updateLayerListPositions();
     } else {
       this.$log.log('Error loading permalink layers');
     }
@@ -414,6 +415,7 @@ export class HsCompositionsService {
         this.hsMapService.addLayer(layers[i], DuplicateHandling.IgnoreNew);
       }
       localStorage.removeItem('hs_layers');
+      this.hsLayerManagerService.updateLayerListPositions();
     }
   }
 

projects/hslayers/shared/compositions/compositions-parser.service.ts

@@ -39,6 +39,7 @@ import {
 import {
   getTitle,
   setFromBaseComposition,
+  setIgnorePathZIndex,
   setMetadata,
   setSwipeSide,
 } from 'hslayers-ng/common/extensions';
@@ -478,6 +479,7 @@ export class HsCompositionsParserService {
       this.hsLayoutService.setMainPanel('layerManager');
     }
     this.composition_edited = false;
+    this.hsLayerManagerService.updateLayerListPositions();
     this.hsEventBusService.compositionLoads.next(responseData);
   }
 
@@ -767,6 +769,7 @@ export class HsCompositionsParserService {
       resultLayer = await resultLayer; //createWMTSLayer returns Promise which needs to be resolved first
       setMetadata(resultLayer, lyr_def.metadata);
       setSwipeSide(resultLayer, lyr_def.swipeSide);
+      setIgnorePathZIndex(resultLayer, true);
     }
     return resultLayer;
   }

projects/hslayers/shared/layer-manager/layer-manager.service.ts

@@ -45,6 +45,7 @@
   getFromBaseComposition,
   getFromComposition,
   getGreyscale,
+  getIgnorePathZIndex,
   getLegends,
   getName,
   getPath,
@@ -199,7 +200,12 @@
    */
   private setupMapEventHandlers(map: Map) {
     const onLayerAddition = map.getLayers().on('add', (e) => {
-      this.applyZIndex(e.element as Layer<Source>, true);
+      this.applyZIndex(
+        e.element as Layer<Source>,
+        //z-index of composition layers should be the same as order of layers in composition.
+        //ignoring folder structure
+        !getIgnorePathZIndex(e.element as Layer<Source>),
+      );
       if (getShowInLayerManager(e.element) == false) {
         return;
       }
@@ -271,7 +277,9 @@
       abstract: getAbstract(layer),
       layer,
       grayed:
-        !this.hsLayerManagerVisibilityService.isLayerInResolutionInterval(layer),
+        !this.hsLayerManagerVisibilityService.isLayerInResolutionInterval(
+          layer,
+        ),
       visible: layer.getVisible(),
       showInLayerManager,
       uid: this.hsUtilsService.generateUuid(),
@@ -451,24 +459,20 @@
     let curfolder = this.data.folders;
     const zIndex = lyr.getZIndex();
     for (let i = 0; i < parts.length; i++) {
-      let found = null;
-      for (const folder of curfolder.sub_folders) {
-        if (folder.name == parts[i]) {
-          found = folder;
-        }
-      }
-      if (found === null) {
+      const found = curfolder.sub_folders.find(
+        (folder) => folder.name === parts[i],
+      );
+      if (!found) {
+        const hsl_path = `${curfolder.hsl_path}${curfolder.hsl_path !== '' ? '/' : ''}${parts[i]}`;
+        const coded_path = `${curfolder.coded_path}${curfolder.sub_folders.length}-`;
         //TODO: Need to describe how hsl_path works here
         const new_folder = {
           sub_folders: [],
           indent: i,
           layers: [],
           name: parts[i],
-          hsl_path:
-            curfolder.hsl_path +
-            (curfolder.hsl_path != '' ? '/' : '') +
-            parts[i],
-          coded_path: curfolder.coded_path + curfolder.sub_folders.length + '-',
+          hsl_path,
+          coded_path,
           visible: true,
           zIndex: zIndex,
         };