Add calculatePosition function to be shared by

  map-extent, -tile, -feature to determine zIndex positioning in parent
  based on how Leaflet layers are created and shared among sibling
  elements in a sequence
Add red/green/blue-tile.png
Add setZIndex function to MapFeatureLayer, MapTileLayer, copied from
MapExtentLayer.
Update MapFeatureLayer, MapExtentLayer, MapTileLayer initialize 
constructors to set the zIndex if there's an option present for it

Author: Peter Rushforth

src/map-extent.js

@@ -3,6 +3,7 @@ import { bounds as Lbounds, point as Lpoint } from 'leaflet';
 import { Util } from './mapml/utils/Util.js';
 import { mapExtentLayer } from './mapml/layers/MapExtentLayer.js';
 import { createLayerControlExtentHTML } from './mapml/elementSupport/extents/createLayerControlForExtent.js';
+import { calculatePosition } from './mapml/elementSupport/layers/calculatePosition.js';
 
 /* global M */
 export class HTMLExtentElement extends HTMLElement {
@@ -77,6 +78,9 @@ export class HTMLExtentElement extends HTMLElement {
       ? getExtent(this)
       : getCalculatedExtent(this);
   }
+  get position() {
+    return calculatePosition(this);
+  }
 
   getOuterHTML() {
     let tempElement = this.cloneNode(true);
@@ -263,14 +267,11 @@ export class HTMLExtentElement extends HTMLElement {
     // this._opacity is used to record the current opacity value (with or without updates),
     // the initial value of this._opacity should be set as opacity attribute value, if exists, or the default value 1.0
     this._opacity = this.opacity || 1.0;
+    console.log(this.label + ' extent position: ' + this.position);
     this._extentLayer = mapExtentLayer({
       opacity: this.opacity,
       crs: M[this.units],
-      extentZIndex: Array.from(
-        this.parentLayer.src
-          ? this.parentLayer.shadowRoot.querySelectorAll(':host > map-extent')
-          : this.parentLayer.querySelectorAll(':scope > map-extent')
-      ).indexOf(this),
+      zIndex: this.position,
       extentEl: this
     });
     // this._layerControlHTML is the fieldset for the extent in the LayerControl

src/map-feature.js

@@ -4,6 +4,7 @@ import { MapFeatureLayer } from './mapml/layers/MapFeatureLayer.js';
 import { featureRenderer } from './mapml/features/featureRenderer.js';
 import { Util } from './mapml/utils/Util.js';
 import proj4 from 'proj4';
+import { calculatePosition } from './mapml/elementSupport/layers/calculatePosition.js';
 
 export class HTMLFeatureElement extends HTMLElement {
   static get observedAttributes() {
@@ -138,6 +139,9 @@ export class HTMLFeatureElement extends HTMLElement {
       return this._getFeatureExtent();
     }
   }
+  get position() {
+    return calculatePosition(this);
+  }
   getMapEl() {
     return Util.getClosest(this, 'mapml-viewer,map[is=web-map]');
   }
@@ -162,6 +166,7 @@ export class HTMLFeatureElement extends HTMLElement {
   constructor() {
     // Always call super first in constructor
     super();
+    this._calculatePosition = calculatePosition.bind(this);
   }
 
   connectedCallback() {
@@ -324,6 +329,7 @@ export class HTMLFeatureElement extends HTMLElement {
               : {}),
             ...(isMapLink ? { zoomBounds: this._getZoomBounds() } : {}),
             ...(isMapLink ? {} : { _leafletLayer: parentElement._layer }),
+            zIndex: this.position,
             projection: map.options.projection,
             mapEl: parentElement.getMapEl(),
             onEachFeature: function (properties, geometry) {

src/map-tile.js

@@ -2,6 +2,7 @@ import { bounds as Lbounds, point as Lpoint } from 'leaflet';
 
 import { Util } from './mapml/utils/Util.js';
 import { mapTileLayer } from './mapml/layers/MapTileLayer.js';
+import { calculatePosition } from './mapml/elementSupport/layers/calculatePosition.js';
 
 /* global M */
 
@@ -76,6 +77,9 @@ export class HTMLTileElement extends HTMLElement {
     }
     return this._extent;
   }
+  get position() {
+    return calculatePosition(this);
+  }
   constructor() {
     // Always call super first in constructor
     super();
@@ -217,7 +221,8 @@ export class HTMLTileElement extends HTMLElement {
         // used by map-link and map-layer, both have containers
         pane:
           parentElement._templatedLayer?.getContainer() ||
-          parentElement._layer.getContainer()
+          parentElement._layer.getContainer(),
+        zIndex: this.position
       });
       this._tileLayer.addMapTile(this);
 

src/mapml/elementSupport/layers/calculatePosition.js

@@ -0,0 +1,74 @@
+/**
+ * Calculate the sequence position for map elements based on their position in a
+ * sequence of target elements (map-tile, map-feature, map-extent).
+ * - map-extent: Each element gets its own unique position (each is its own MapExtentLayer)
+ * - map-tile/map-feature: Adjacent elements of same type share the same position (they share a MapTileLayer/MapFeatureLayer)
+ * - used to set the zIndex for the LayerGroup's _container (rendering).
+ *
+ * @param {HTMLElement} element - The element to calculate position for (map-tile, map-extent, or map-feature)
+ * @returns {number} The position of this element's LayerGroup
+ */
+export function calculatePosition(element) {
+  const tagName = element.tagName.toLowerCase();
+  const validTags = ['map-tile', 'map-extent', 'map-feature'];
+
+  // Validate element type
+  if (!validTags.includes(tagName)) {
+    console.warn(`calculatePosition: Invalid element type ${tagName}`);
+    return 0;
+  }
+
+  const parent = element.parentElement;
+  if (!parent) return 1;
+
+  let position = 0;
+  let lastTag = null;
+  let foundTarget = false;
+
+  // Iterate through all child elements
+  for (const child of parent.children) {
+    const childTag = child.tagName.toLowerCase();
+
+    // Skip non-map elements
+    if (!validTags.includes(childTag)) continue;
+
+    // Check if we've reached our target element
+    if (child === element) {
+      foundTarget = true;
+
+      // map-extent always needs a new position
+      if (childTag === 'map-extent') {
+        position++;
+        return position;
+      }
+
+      // For map-tile and map-feature:
+      // If this element continues a sequence of the same type, return the current position
+      if (lastTag === childTag) {
+        return position;
+      }
+
+      // This element starts a new layer group
+      position++;
+      return position;
+    }
+
+    // Before reaching target, count layer group transitions
+    if (!foundTarget) {
+      if (childTag === 'map-extent') {
+        // Each map-extent increments position
+        position++;
+      } else if (lastTag !== null && lastTag !== childTag) {
+        // Transition between different types (excluding map-extent)
+        position++;
+      } else if (lastTag === null) {
+        // First valid element starts at position 1
+        position = 1;
+      }
+
+      lastTag = childTag;
+    }
+  }
+  // Element not found (shouldn't happen in normal usage)
+  return 0;
+}

src/mapml/layers/MapExtentLayer.js

@@ -34,6 +34,9 @@ export var MapExtentLayer = LayerGroup.extend({
     // Call LayerGroup's initialize to trigger Leaflet's setup
     LayerGroup.prototype.initialize.call(this, null, options);
     this._container = DomUtil.create('div', 'leaflet-layer');
+    if (options.zIndex) {
+      this._container.style.zIndex = options.zIndex;
+    }
     this._extentEl = this.options.extentEl;
     this.changeOpacity(this.options.opacity);
     // Add class to the container
@@ -60,11 +63,6 @@ export var MapExtentLayer = LayerGroup.extend({
       layer.redraw();
     });
   },
-  //addTo: function(map) {
-  //for(let i = 0; i < this._templates.length; i++){
-  //    this._templates[0].layer.addTo(map);
-  //}
-  //},
   setZIndex: function (zIndex) {
     this.options.zIndex = zIndex;
     this._updateZIndex();

src/mapml/layers/MapFeatureLayer.js

@@ -84,6 +84,9 @@ export var MapFeatureLayer = FeatureGroup.extend({
       this._container = this.options.pane;
       DomUtil.addClass(this._container, 'leaflet-pane mapml-vector-container');
     }
+    if (this.options.zIndex) {
+      this._container.style.zIndex = this.options.zIndex;
+    }
 
     this.options.renderer.options.pane = this._container;
   },
@@ -116,7 +119,21 @@ export var MapFeatureLayer = FeatureGroup.extend({
   get _staticFeature() {
     return this._context === 'static';
   },
+  setZIndex: function (zIndex) {
+    this.options.zIndex = zIndex;
+    this._updateZIndex();
 
+    return this;
+  },
+  _updateZIndex: function () {
+    if (
+      this._container &&
+      this.options.zIndex !== undefined &&
+      this.options.zIndex !== null
+    ) {
+      this._container.style.zIndex = this.options.zIndex;
+    }
+  },
   isVisible: function () {
     let map = this.options.mapEl._map;
     // if query, isVisible is unconditionally true

src/mapml/layers/MapTileLayer.js

@@ -31,6 +31,9 @@ export var MapTileLayer = GridLayer.extend({
     this._pendingTiles = {};
     this._buildTileMap();
     this._container = DomUtil.create('div', 'leaflet-layer');
+    if (options.zIndex) {
+      this._container.style.zIndex = options.zIndex;
+    }
     DomUtil.addClass(this._container, 'mapml-static-tile-container');
     // Store bounds for visibility checks
     //    this.layerBounds = this._computeLayerBounds();
@@ -58,6 +61,21 @@ export var MapTileLayer = GridLayer.extend({
     // remove _container from the dom, but don't delete it
     DomUtil.remove(this._container);
   },
+  setZIndex: function (zIndex) {
+    this.options.zIndex = zIndex;
+    this._updateZIndex();
+
+    return this;
+  },
+  _updateZIndex: function () {
+    if (
+      this._container &&
+      this.options.zIndex !== undefined &&
+      this.options.zIndex !== null
+    ) {
+      this._container.style.zIndex = this.options.zIndex;
+    }
+  },
 
   _handleZoomChange: function () {
     // this is necessary for CBMTILE in particular, I think because