Give each overlay kind its own layer z-index band

src/helpers.ts

@@ -1,4 +1,4 @@
-import { createGeoPoint, type GeoPoint, type GeoPointInterface } from '@mapconductor/js-sdk-core';
+import { createGeoPoint, overlayStackZ, type GeoPoint, type GeoPointInterface, type OverlayKind } from '@mapconductor/js-sdk-core';
 import type { Coordinate } from 'ol/coordinate';
 import type Map from 'ol/Map';
 import type MapBrowserEvent from 'ol/MapBrowserEvent';
@@ -37,3 +37,16 @@ export function getLayerGroup(map: Map, name: string): BaseLayer | undefined {
   const groups = map.getLayerGroup().getLayersArray();
   return groups.find(group => group.get('name') === name);
 }
+
+/**
+ * Layer z-index for an overlay, from the shared stack (js-sdk-core OVERLAY_STACK_ORDER):
+ * raster < ground image < polygon < circle < polyline < marker, zIndex within the band.
+ *
+ * Bands of 60 from 211 to 569: above the basemap (index 0, no zIndex) and below the native
+ * marker layer (600). zIndex is clamped to ±29 so it cannot cross a band. Polygons, circles
+ * and polylines used to share one range (400 ± zIndex), so with equal zIndexes the one added
+ * last was drawn on top; a raster could go up to 350, over ground images (300).
+ */
+export function overlayLayerZIndex(kind: OverlayKind, zIndex: number | null | undefined = 0): number {
+  return overlayStackZ(kind, zIndex, { base: 240, bandSize: 60 });
+}

src/raster/OpenLayersRasterLayer.ts

@@ -15,6 +15,7 @@ import type ImageTile from 'ol/ImageTile';
 import TileLayerClass from 'ol/layer/Tile.js';
 import XYZ from 'ol/source/XYZ.js';
 import { renderXYZTemplate } from 'ol/uri.js';
+import { overlayLayerZIndex } from '../helpers';
 import { OpenLayersMapViewHolder } from '../OpenLayersMapViewHolder';
 import { parseLocalTileRequest, parseLocalTileTemplate } from './localTileUrl';
 
@@ -117,7 +118,9 @@ export class OpenLayersRasterLayerRenderer {
     const layer = new TileLayerClass({
       source: tileSource,
       opacity: state.opacity,
-      zIndex: 250 + Math.max(-100, Math.min(100, state.zIndex)),
+      // Marker tiles are mounted as a raster but belong with the markers (under the native
+      // marker layer, over the shapes).
+      zIndex: state.id === 'mc-marker-tiles' ? overlayLayerZIndex('marker', 0) : overlayLayerZIndex('rasterLayer', state.zIndex),
     });
 
     this.holder.map.addLayer(layer);

src/vector/OpenLayersVectorControllers.ts

@@ -44,21 +44,18 @@ import IconClass from 'ol/style/Icon.js';
 import ImageLayerClass from 'ol/layer/Image.js';
 import StaticClass from 'ol/source/ImageStatic.js';
 import { OpenLayersMapViewHolder } from '../OpenLayersMapViewHolder';
-import { toCoordinate } from '../helpers';
-
-const VECTOR_BASE_Z_INDEX = 400;
-const GROUND_IMAGE_BASE_Z_INDEX = 300;
+import { overlayLayerZIndex, toCoordinate } from '../helpers';
 
 function vectorLayer<G extends Geometry>(
   holder: OpenLayersMapViewHolder,
-  kind: string,
+  kind: 'circle' | 'polyline' | 'polygon',
   id: string,
   zIndex: number,
 ): VectorLayer<VectorSource<Feature<G>>> {
   const source = new VectorSourceClass<Feature<G>>();
   const layer = new VectorLayerClass({
     source,
-    zIndex: VECTOR_BASE_Z_INDEX + Math.max(-100, Math.min(100, zIndex)),
+    zIndex: overlayLayerZIndex(kind, zIndex),
   });
 
   layer.set('name', `mc-${kind}-${id}`);
@@ -301,7 +298,7 @@ export class OpenLayersGroundImageRenderer extends AbstractGroundImageOverlayRen
     const source = new StaticClass({ url: state.imageUrl, imageExtent: extent });
     const layer = new ImageLayerClass({
       source,
-      zIndex: GROUND_IMAGE_BASE_Z_INDEX,
+      zIndex: overlayLayerZIndex('groundImage'),
       opacity: state.opacity,
     });
     layer.set('name', `mc-ground-image-${state.id}`);