@fxi/zartigl 0.9.0 → 0.9.2

package/dist/zartigl.d.ts

@@ -1572,11 +1572,14 @@ export declare class Zartigl {
     private updateQueue;
     private suspended;
     private attachQueued;
+    /**
+     * Place of the detached render layer, for the next one : the layer above
+     * it, `undefined` at the top, `null` when none was attached.
+     */
+    private anchor;
     private querySources;
     private listeners;
-    private readonly onMapLoad;
-    private readonly onStyleData;
-    private readonly onMapIdle;
+    private readonly onMapReady;
     constructor(options: ZartiglOptions);
     init(): Promise<void>;
     update(input: ZartiglUpdate): Promise<void>;
@@ -1740,7 +1743,11 @@ export declare class Zartigl {
     private resolveSource;
     private querySource;
     private isMapReady;
+    /** A new render layer takes the place of the detached one, else `before`. */
     private getBeforeLayerId;
+    private isAttached;
+    /** First layer above the render layer that is not its own WMTS raster. */
+    private layerAbove;
     private requireLayer;
     private assertAlive;
     private emit;
@@ -1797,6 +1804,8 @@ declare type ZartiglEventMap = {
         id: string;
         type: CatalogSource["type"];
     }) => void;
+    /** The render layer was added to the map, e.g. for the host to order it. */
+    layerAttach: (id: string) => void;
 };
 
 export declare class ZartiglFrameUnavailableError extends Error {

package/dist/zartigl.js

@@ -5731,12 +5731,8 @@ class _E {
       source: this.rasterSourceId,
       metadata: this.metadata ? { ...this.metadata } : void 0,
       paint: { "raster-opacity": this.opacity }
-    }, C = this.getBeforeLayerId();
-    if (C) {
-      this.map.addLayer(g, C);
-      return;
-    }
-    this.map.addLayer(g);
+    };
+    this.map.addLayer(g, this.getBeforeLayerId());
   }
   removeWmts() {
     this.map && (this.map.getLayer(this.rasterLayerId) && this.map.removeLayer(this.rasterLayerId), this.map.getSource(this.rasterSourceId) && this.map.removeSource(this.rasterSourceId));
@@ -5757,10 +5753,13 @@ class _E {
       for (const C of g)
         C(...I);
   }
+  /** The WMTS raster takes the place of this custom layer, right above it. */
   getBeforeLayerId() {
-    const A = this.options.before;
-    if (!(!A || !this.map?.getLayer(A)))
-      return A;
+    const A = this.map?.getLayersOrder?.() ?? [], I = A.indexOf(this.options.id);
+    if (I > -1)
+      return A[I + 1];
+    const g = this.options.before;
+    return g && this.map?.getLayer(g) ? g : void 0;
   }
 }
 function mI(B, A) {
@@ -6125,7 +6124,9 @@ function yB(B, A, I) {
 }
 class ki {
   constructor(A) {
-    if (this.fullTimeMeta = null, this.autoplayPending = !0, this.playing = !1, this.catalogLayer = null, this.catalogSource = null, this.layer = null, this.time = 0, this.pendingTime = null, this.requestedTime = null, this.playbackIntent = 0, this.requestSeq = 0, this.playSeq = 0, this.depth = 0, this.depthRequest = null, this.failedGeoVideo = /* @__PURE__ */ new Set(), this.lastMeta = null, this.timeMeta = null, this.resolvedTimeRange = null, this.verticalMeta = null, this.variableUnit = "", this.geoVideoManifest = null, this.wmtsMetadata = null, this.fieldSources = /* @__PURE__ */ new Map(), this.archiveChunks = /* @__PURE__ */ new Map(), this.nextChunkManifest = null, this.activeFieldSource = null, this.switchGeneration = 0, this.destroyed = !1, this.initialized = !1, this.initStarted = !1, this.updateQueue = Promise.resolve(), this.suspended = !1, this.attachQueued = !1, this.querySources = /* @__PURE__ */ new Map(), this.listeners = /* @__PURE__ */ new Map(), this.onMapLoad = () => this.attachWhenReady(), this.onStyleData = () => this.attachWhenReady(), this.onMapIdle = () => this.attachWhenReady(), !A.layer)
+    if (this.fullTimeMeta = null, this.autoplayPending = !0, this.playing = !1, this.catalogLayer = null, this.catalogSource = null, this.layer = null, this.time = 0, this.pendingTime = null, this.requestedTime = null, this.playbackIntent = 0, this.requestSeq = 0, this.playSeq = 0, this.depth = 0, this.depthRequest = null, this.failedGeoVideo = /* @__PURE__ */ new Set(), this.lastMeta = null, this.timeMeta = null, this.resolvedTimeRange = null, this.verticalMeta = null, this.variableUnit = "", this.geoVideoManifest = null, this.wmtsMetadata = null, this.fieldSources = /* @__PURE__ */ new Map(), this.archiveChunks = /* @__PURE__ */ new Map(), this.nextChunkManifest = null, this.activeFieldSource = null, this.switchGeneration = 0, this.destroyed = !1, this.initialized = !1, this.initStarted = !1, this.updateQueue = Promise.resolve(), this.suspended = !1, this.attachQueued = !1, this.anchor = null, this.querySources = /* @__PURE__ */ new Map(), this.listeners = /* @__PURE__ */ new Map(), this.onMapReady = () => {
+      this.attachQueued && this.attachWhenReady();
+    }, !A.layer)
       throw new Error("Zartigl requires a layer UUID");
     if (A.time != null && gA(A.time, "time"), A.depth != null && !Number.isFinite(A.depth))
       throw new Error("Depth must be finite");
@@ -6133,7 +6134,7 @@ class ki {
     const I = TI(A.settings);
     rB(I.legacyKeys), this.style = vA(I.style, A.style), yB(this.style, A.catalog, A.layer), this.settings = { ...I.settings, ...oI(this.style) }, this.settings.colorDomain !== void 0 && (this.settings.colorDomain = fA(
       this.settings.colorDomain
-    )), this.colorDomainOverridden = this.settings.colorDomain !== void 0, this.paletteOverridden = this.settings.palette !== void 0, this.map.on("load", this.onMapLoad), this.map.on("styledata", this.onStyleData), this.map.on("idle", this.onMapIdle);
+    )), this.colorDomainOverridden = this.settings.colorDomain !== void 0, this.paletteOverridden = this.settings.palette !== void 0, this.map.on("load", this.onMapReady), this.map.on("styledata", this.onMapReady), this.map.on("idle", this.onMapReady);
   }
   async init() {
     if (this.assertAlive(), this.initStarted)
@@ -6406,7 +6407,7 @@ class ki {
     }
   }
   destroy() {
-    this.destroyed || (this.switchGeneration++, this.detach(), this.querySources.forEach((A) => A.cancelAll()), this.fieldSources.forEach((A) => A.cancelAll()), this.querySources.clear(), this.fieldSources.clear(), this.map.off("load", this.onMapLoad), this.map.off("styledata", this.onStyleData), this.map.off("idle", this.onMapIdle), this.destroyed = !0);
+    this.destroyed || (this.switchGeneration++, this.detach(), this.querySources.forEach((A) => A.cancelAll()), this.fieldSources.forEach((A) => A.cancelAll()), this.querySources.clear(), this.fieldSources.clear(), this.map.off("load", this.onMapReady), this.map.off("styledata", this.onMapReady), this.map.off("idle", this.onMapReady), this.destroyed = !0);
   }
   applyTime(A) {
     this.assertAlive();
@@ -6760,9 +6761,15 @@ class ki {
       this.attachQueued = !0;
       return;
     }
-    if (this.layer && this.map.getLayer(this.layer.id))
+    if (this.layer && this.isAttached(this.layer))
       return;
-    this.attachQueued = !1;
+    if (this.attachQueued = !1, this.map.getLayer(this.id)) {
+      this.emit(
+        "error",
+        new Error(`Map layer id '${this.id}' is already used by another layer`)
+      );
+      return;
+    }
     const A = new _E({
       id: this.id,
       entry: this.catalogLayer,
@@ -6792,23 +6799,17 @@ class ki {
       metadata: this.metadata ? { ...this.metadata } : void 0,
       before: this.before
     });
-    this.pendingTime = null, this.autoplayPending = !1, A.on("loading", () => this.emit("loading")), A.on("loaded", (g) => {
-      this.lastMeta = g, this.emit("loaded", g);
-    }), A.on("error", (g) => {
-      this.emit("error", g), this.fallBackFromGeoVideo(A, g);
-    }), A.on("status", (g) => this.emit("status", g)), A.on("frameBuffered", (g) => this.emit("frameBuffered", g)), A.on("cacheInvalidated", () => this.emit("cacheInvalidated")), A.on("timeChange", (g) => {
-      A === this.layer && (this.time = IA(this.timeMeta?.values ?? [], g), this.playing && (this.requestedTime = null), this.emit("timeChange", this.time));
-    }), A.on("playbackChange", (g) => {
-      A === this.layer && (g && this.preloadNextArchiveChunk(A), g !== this.playing && (this.playing = g, this.emit("playbackChange", g)));
+    this.pendingTime = null, this.autoplayPending = !1, A.on("loading", () => this.emit("loading")), A.on("loaded", (I) => {
+      this.lastMeta = I, this.emit("loaded", I);
+    }), A.on("error", (I) => {
+      this.emit("error", I), this.fallBackFromGeoVideo(A, I);
+    }), A.on("status", (I) => this.emit("status", I)), A.on("frameBuffered", (I) => this.emit("frameBuffered", I)), A.on("cacheInvalidated", () => this.emit("cacheInvalidated")), A.on("timeChange", (I) => {
+      A === this.layer && (this.time = IA(this.timeMeta?.values ?? [], I), this.playing && (this.requestedTime = null), this.emit("timeChange", this.time));
+    }), A.on("playbackChange", (I) => {
+      A === this.layer && (I && this.preloadNextArchiveChunk(A), I !== this.playing && (this.playing = I, this.emit("playbackChange", I)));
     }), A.on("playbackEnd", () => {
       this.continueArchivePlayback();
-    }), this.layer = A;
-    const I = this.getBeforeLayerId();
-    if (I) {
-      this.map.addLayer(A, I);
-      return;
-    }
-    this.map.addLayer(A);
+    }), this.layer = A, this.map.addLayer(A, this.getBeforeLayerId()), this.emit("layerAttach", A.id);
   }
   /** GeoVideo playback options shared by a new layer and an in-place swap. */
   geoVideoPlayback() {
@@ -6826,7 +6827,7 @@ class ki {
    */
   replaceGeoVideoInPlace(A) {
     const I = this.layer;
-    if (!I || !this.geoVideoManifest || !this.map.getLayer(I.id) || I.getBackend() !== "scalar-geovideo")
+    if (!I || !this.geoVideoManifest || !this.isAttached(I) || I.getBackend() !== "scalar-geovideo")
       return !1;
     const g = this.geoVideoPlayback();
     return I.replaceGeoVideoManifest(this.geoVideoManifest, {
@@ -6837,8 +6838,8 @@ class ki {
     }) ? (I.setColorDomain(this.settings.colorDomain ?? null), this.settings.palette && this.settings.palette !== A && I.setColorRamp(this.settings.palette), !0) : !1;
   }
   detach() {
-    const A = this.layer?.id ?? this.id, I = `${A}-wmts`, g = `${A}-wmts-source`;
-    this.map.getLayer(A) && this.map.removeLayer(A), this.map.getLayer(I) && this.map.removeLayer(I), this.map.getSource(g) && this.map.removeSource(g), this.layer = null, this.playing && (this.playing = !1, this.emit("playbackChange", !1));
+    const A = this.layer;
+    this.layer = null, A && this.isAttached(A) && (this.anchor = this.layerAbove(A.id), this.map.removeLayer(A.id)), this.playing && (this.playing = !1, this.emit("playbackChange", !1));
   }
   /**
    * In "auto", a GeoVideo that fails while it renders (media, mask) yields
@@ -7062,9 +7063,22 @@ class ki {
     const A = this.map;
     return A.isStyleLoaded?.() ?? A.loaded?.() ?? !0;
   }
+  /** A new render layer takes the place of the detached one, else `before`. */
   getBeforeLayerId() {
-    if (!(!this.before || !this.map.getLayer(this.before)))
-      return this.before;
+    if (this.anchor !== void 0) {
+      for (const A of [this.anchor, this.before])
+        if (A && this.map.getLayer(A))
+          return A;
+    }
+  }
+  isAttached(A) {
+    const I = this.map.getLayer(A.id);
+    return I === A || I?.implementation === A;
+  }
+  /** First layer above the render layer that is not its own WMTS raster. */
+  layerAbove(A) {
+    const I = this.map.getLayersOrder?.() ?? [], g = I.indexOf(A);
+    return g < 0 ? void 0 : I.slice(g + 1).find((C) => C !== `${A}-wmts`);
   }
   requireLayer() {
     if (!this.catalogLayer)
@@ -7106,7 +7120,7 @@ function Ji(B, A, I) {
       (C, Q) => Math.abs(Q - g) < Math.abs(C - g) ? Q : C
     );
 }
-const yi = "0.9.0", ni = { "maplibre-gl": "^5.17.0" }, zB = {
+const yi = "0.9.2", ni = { "maplibre-gl": "^5.17.0" }, zB = {
   version: yi,
   devDependencies: ni
 }, jB = zB.devDependencies["maplibre-gl"].replace(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fxi/zartigl",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "MapLibre GL JS visualization for catalog-backed Zarr, WMTS, and GeoVideo data",
   "repository": {
     "type": "git",