Add InteresectionObserver to ensure that the preview map is checked on when the mapmlify-layer intersects the viewport for the first time. It remains on after that unless turned off.

Author: prushforth

src/script/mapmlify-layer.js

@@ -31,6 +31,7 @@ class MapmlifyLayer extends HTMLElement {
   #sourceCodeTextarea = null;
   #sourceCodeVisible = false;
   #moveendHandler = null;
+  #lazyLoadObserver = null;
 
   set layerConfig(value) {
     this.#config = value;
@@ -47,11 +48,42 @@ class MapmlifyLayer extends HTMLElement {
     if (this.#config) {
       this.#initDefaults();
       this.#render();
+      this.#setupLazyLoading();
     }
   }
 
   disconnectedCallback() {
     this.#removeViewer();
+    if (this.#lazyLoadObserver) {
+      this.#lazyLoadObserver.disconnect();
+      this.#lazyLoadObserver = null;
+    }
+  }
+
+  #setupLazyLoading() {
+    const options = {
+      root: null,
+      rootMargin: '100px',
+      threshold: 0.1,
+    };
+
+    this.#lazyLoadObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (
+          entry.isIntersecting &&
+          this.#layerCheckbox &&
+          !this.#layerCheckbox.checked
+        ) {
+          this.#layerCheckbox.checked = true;
+          this.#layerCheckbox.dispatchEvent(new Event('change'));
+
+          this.#lazyLoadObserver.disconnect();
+          this.#lazyLoadObserver = null;
+        }
+      });
+    }, options);
+
+    this.#lazyLoadObserver.observe(this);
   }
 
   #initDefaults() {

tests/helpers.js

@@ -90,7 +90,12 @@ export function getLayerElements(page) {
  */
 export async function activateLayer(page, index) {
   const layer = page.locator('mapmlify-layer').nth(index);
-  await layer.locator('.layer-checkbox').check();
+  const cb = layer.locator('.layer-checkbox');
+  // The IntersectionObserver may have already checked this box
+  const alreadyChecked = await cb.isChecked();
+  if (!alreadyChecked) {
+    await cb.check();
+  }
   // Wait for the mapml-viewer to appear inside this layer
   await layer.locator('mapml-viewer').waitFor({ timeout: 15000 });
 }