Replace map-extent way of setting zIndex to use map-extent.position

Adapt calculatePosition to working within either shadow root or light DOM
Un-break and de-flake tests as possible

Author: Peter Rushforth

src/map-extent.js

@@ -267,7 +267,6 @@ 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],
@@ -435,13 +434,7 @@ export class HTMLExtentElement extends HTMLElement {
     if (this.checked && !this.disabled && this.parentLayer._layer) {
       // can be added to MapLayer LayerGroup no matter map-layer is checked or not
       this._extentLayer.addTo(this.parentLayer._layer);
-      this._extentLayer.setZIndex(
-        Array.from(
-          this.parentLayer.src
-            ? this.parentLayer.shadowRoot.querySelectorAll(':host > map-extent')
-            : this.parentLayer.querySelectorAll(':scope > map-extent')
-        ).indexOf(this)
-      );
+      this._extentLayer.setZIndex(this.position);
     } else {
       this.parentLayer._layer?.removeLayer(this._extentLayer);
     }

src/mapml/elementSupport/layers/calculatePosition.js

@@ -18,15 +18,29 @@ export function calculatePosition(element) {
     return 0;
   }
 
-  const parent = element.parentElement;
+  // Get parent - could be Element or ShadowRoot
+  const parent = element.parentNode;
   if (!parent) return 1;
 
+  // Get children - works for both Element and ShadowRoot
+  // For ShadowRoot, we need to filter to get only element nodes
+  const children =
+    parent.children ||
+    Array.from(parent.childNodes).filter(
+      (node) => node.nodeType === Node.ELEMENT_NODE
+    );
+
+  if (!children || children.length === 0) return 1;
+
   let position = 0;
   let lastTag = null;
   let foundTarget = false;
 
   // Iterate through all child elements
-  for (const child of parent.children) {
+  for (const child of children) {
+    // Skip non-element nodes (shouldn't happen with .children, but safe for childNodes)
+    if (child.nodeType !== Node.ELEMENT_NODE) continue;
+
     const childTag = child.tagName.toLowerCase();
 
     // Skip non-map elements
@@ -36,14 +50,14 @@ export function calculatePosition(element) {
     if (child === element) {
       foundTarget = true;
 
-      // map-extent always needs a new position
+      // map-extent always needs a new z-index
       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 this element continues a sequence of the same type, return the current z-index
       if (lastTag === childTag) {
         return position;
       }
@@ -56,13 +70,13 @@ export function calculatePosition(element) {
     // Before reaching target, count layer group transitions
     if (!foundTarget) {
       if (childTag === 'map-extent') {
-        // Each map-extent increments position
+        // Each map-extent increments z-index
         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
+        // First valid element starts at z-index 1
         position = 1;
       }
 

src/mapml/layers/MapExtentLayer.js

@@ -34,11 +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);
+    this.setZIndex(options.zIndex);
     // Add class to the container
     DomUtil.addClass(this._container, 'mapml-extentlayer-container');
   },

src/mapml/layers/MapLayer.js

@@ -131,7 +131,7 @@ export var MapLayer = LayerGroup.extend({
       }
       if (type === '_extentLayer' && mapExtents.length) {
         for (let i = 0; i < mapExtents.length; i++) {
-          if (mapExtents[i]._extentLayer.bounds) {
+          if (mapExtents[i]._extentLayer?.bounds) {
             let mapExtentLayer = mapExtents[i]._extentLayer;
             if (!bnds) {
               bnds = bounds(

test/e2e/elements/map-extent/map-extent-checked-ordering.test.js

@@ -41,12 +41,11 @@ The imagery layer <map-extent> draws on top of the states layer.
     let imageryZIndex = await ext1.evaluate((e) => {
       return +e._extentLayer._container.style.zIndex;
     });
-    expect(imageryZIndex).toEqual(0);
     const ext2 = page.getByTestId('ext2');
     let statesZIndex = await ext2.evaluate((e) => {
       return +e._extentLayer._container.style.zIndex;
     });
-    expect(statesZIndex).toEqual(1);
+    expect(statesZIndex).toBeGreaterThan(imageryZIndex);
     // re-order them via the layer control
     const imageryFieldset = layerControl.getByRole('group', {
       name: 'Extent One'
@@ -65,11 +64,10 @@ The imagery layer <map-extent> draws on top of the states layer.
     imageryZIndex = await ext1.evaluate((e) => {
       return +e._extentLayer._container.style.zIndex;
     });
-    expect(imageryZIndex).toEqual(1);
     statesZIndex = await ext2.evaluate((e) => {
       return +e._extentLayer._container.style.zIndex;
     });
-    expect(statesZIndex).toEqual(0);
+    expect(statesZIndex).toBeLessThan(imageryZIndex);
 
     await page.mouse.move(from.x, from.y);
     await page.mouse.down();
@@ -80,11 +78,10 @@ The imagery layer <map-extent> draws on top of the states layer.
     imageryZIndex = await ext1.evaluate((e) => {
       return +e._extentLayer._container.style.zIndex;
     });
-    expect(imageryZIndex).toEqual(0);
     statesZIndex = await ext2.evaluate((e) => {
       return +e._extentLayer._container.style.zIndex;
     });
-    expect(statesZIndex).toEqual(1);
+    expect(statesZIndex).toBeGreaterThan(imageryZIndex);
     // TO DO re-order them via the DOM (insertAdjacentHTML),
     // ensure that
     // a) render order/z-index is correct

test/e2e/elements/map-extent/map-extent-in-shadow-root.test.js

@@ -11,6 +11,7 @@ test.describe('map-extent can be inside a shadow root or other custom element',
     await page.goto('map-extent-in-shadow-root.html');
   });
   test('map-extent getMapEl() works in shadow root', async () => {
+    await page.waitForTimeout(500);
     const viewer = page.getByTestId('viewer');
     await expect(viewer).toBeTruthy();
     const layer = viewer.getByTestId('test-layer');

test/e2e/elements/map-link/map-link-media.test.js

@@ -20,6 +20,7 @@ test.describe('map-link media attribute', () => {
   });
 
   test('map-link is disabled when media attribute does not match', async () => {
+    await page.waitForTimeout(500);
     // const map = page.locator('mapml-viewer');
     const layer = page.locator('map-layer');
     const mapLink = page.locator('map-link').first();

test/e2e/layers/multipleExtents.test.js

@@ -149,11 +149,11 @@ test.describe('Adding and Removing Multiple Extents', () => {
       (extents) => extents.length
     );
     cbmt = await page.$eval(
-      "div.mapml-extentlayer-container[style='opacity: 0.5; z-index: 0;'] > div",
+      "div.mapml-extentlayer-container[style='opacity: 0.5; z-index: 1;'] > div",
       (div) => div.className
     );
     const alabama = await page.$eval(
-      "div.mapml-extentlayer-container[style='opacity: 0.5; z-index: 1;'] > div",
+      "div.mapml-extentlayer-container[style='opacity: 0.5; z-index: 2;'] > div",
       (div) => div.className
     );
     const layerOpacity = await page.$eval(
@@ -203,11 +203,11 @@ test.describe('Adding and Removing Multiple Extents', () => {
     // turn the Multiple Extents layer on
     await page.click("text='Multiple Extents'");
     const cbmtClass = await page.$eval(
-      "div.mapml-extentlayer-container[style='opacity: 0.5; z-index: 0;'] > div",
+      "div.mapml-extentlayer-container[style='opacity: 0.5; z-index: 1;'] > div",
       (div) => div.className
     );
     const alabamaClass = await page.$eval(
-      "div.mapml-extentlayer-container[style='opacity: 0.5; z-index: 1;'] > div",
+      "div.mapml-extentlayer-container[style='opacity: 0.5; z-index: 2;'] > div",
       (div) => div.className
     );
     const layer = page.getByTestId('multiple-extents');