maplibre-gl-3d-tiles 0.2.0 → 0.3.0

package/README.md

@@ -39,6 +39,7 @@ const map = new maplibregl.Map({
 map.on('load', () => {
   const control = new ThreeDTilesControl({
     collapsed: false,
+    layerName: 'AGI Headquarters',
     tilesetUrl: 'https://pelican-public.s3.amazonaws.com/3dtiles/agi-hq/tileset.json',
     altitudeOffset: -300,
   });
@@ -46,6 +47,8 @@ map.on('load', () => {
   map.addControl(control, 'top-right');
   void control.loadTileset();
   void control.loadTileset('https://example.com/another/tileset.json', {
+    layerName: 'Second tileset',
+    beforeId: 'place-labels',
     altitudeOffset: 0,
   });
 });
@@ -108,6 +111,8 @@ Constructor options include:
 | Option | Type | Default |
 | --- | --- | --- |
 | `tilesetUrl` | `string` | MapLibre example tileset |
+| `layerName` | `string` | `3D Tiles` |
+| `beforeId` | `string` | `undefined` |
 | `altitudeOffset` | `number` | `-300` |
 | `flyToOnLoad` | `boolean` | `true` |
 | `visible` | `boolean` | `true` |

package/dist/{ThreeDTilesControl-DtHlKHVp.cjs → ThreeDTilesControl-BcJIWra6.cjs}

@@ -36748,6 +36748,20 @@ function parseColorSpace(container) {
     return NoColorSpace;
   }
 }
+const MAX_METADATA_RETRIES = 120;
+function requestMetadataFrame(callback) {
+  if (typeof globalThis.requestAnimationFrame === "function") {
+    return globalThis.requestAnimationFrame(callback);
+  }
+  return globalThis.setTimeout(() => callback(Date.now()), 16);
+}
+function cancelMetadataFrame(handle) {
+  if (typeof globalThis.cancelAnimationFrame === "function") {
+    globalThis.cancelAnimationFrame(handle);
+    return;
+  }
+  globalThis.clearTimeout(handle);
+}
 function ecefToLngLatAlt(x3, y3, z2) {
   const a2 = 6378137;
   const e2 = 0.00669437999014;
@@ -36787,6 +36801,8 @@ class ThreeDTilesLayer {
     __publicField(this, "_visible");
     __publicField(this, "_loadTilesetHandler");
     __publicField(this, "_loadErrorHandler");
+    __publicField(this, "_metadataRetryFrame", null);
+    __publicField(this, "_metadataRetryCount", 0);
     this.id = options.id;
     this._options = options;
     this._opacity = options.opacity;
@@ -36830,6 +36846,9 @@ class ThreeDTilesLayer {
   }
   onRemove() {
     var _a, _b, _c;
+    if (this._metadataRetryFrame !== null) {
+      cancelMetadataFrame(this._metadataRetryFrame);
+    }
     if (this._tiles && this._loadTilesetHandler) {
       this._tiles.removeEventListener("load-tileset", this._loadTilesetHandler);
     }
@@ -36848,6 +36867,8 @@ class ThreeDTilesLayer {
     this._localTransform = void 0;
     this._loadTilesetHandler = void 0;
     this._loadErrorHandler = void 0;
+    this._metadataRetryFrame = null;
+    this._metadataRetryCount = 0;
   }
   setVisible(visible) {
     var _a;
@@ -36905,12 +36926,20 @@ class ThreeDTilesLayer {
   }
   _handleTilesetLoaded() {
     var _a, _b, _c;
-    if (!this._tiles) return;
+    if (!this._tiles || this._metadata) return;
+    const sphere = new Sphere();
+    if (!this._tiles.getBoundingSphere(sphere)) {
+      this._retryTilesetMetadata();
+      return;
+    }
+    if (this._metadataRetryFrame !== null) {
+      cancelMetadataFrame(this._metadataRetryFrame);
+      this._metadataRetryFrame = null;
+    }
+    this._metadataRetryCount = 0;
     if (this._loadTilesetHandler) {
       this._tiles.removeEventListener("load-tileset", this._loadTilesetHandler);
     }
-    const sphere = new Sphere();
-    if (!this._tiles.getBoundingSphere(sphere)) return;
     const center = sphere.center.clone();
     const rootTransform = ((_a = this._tiles.root) == null ? void 0 : _a.transform) ?? [
       1,
@@ -36958,6 +36987,19 @@ class ThreeDTilesLayer {
     };
     (_c = (_b = this._options).onLoad) == null ? void 0 : _c.call(_b, this._metadata);
   }
+  _retryTilesetMetadata() {
+    var _a, _b;
+    if (this._metadataRetryFrame !== null) return;
+    if (this._metadataRetryCount >= MAX_METADATA_RETRIES) {
+      (_b = (_a = this._options).onError) == null ? void 0 : _b.call(_a, new Error("Unable to read 3D Tiles bounds."));
+      return;
+    }
+    this._metadataRetryCount += 1;
+    this._metadataRetryFrame = requestMetadataFrame(() => {
+      this._metadataRetryFrame = null;
+      this._handleTilesetLoaded();
+    });
+  }
   _updateLocalTransform(modelOrigin, rotate = [Math.PI / 2, 0, 0]) {
     const modelAsMercatorCoordinate = maplibregl.MercatorCoordinate.fromLngLat(
       [modelOrigin[0], modelOrigin[1]],
@@ -37012,6 +37054,8 @@ const DEFAULT_OPTIONS = {
   collapseOnClickOutside: true,
   layerId: "maplibre-gl-3d-tiles",
   tilesetUrl: DEFAULT_TILESET_URL,
+  layerName: "3D Tiles",
+  beforeId: void 0,
   altitudeOffset: -300,
   flyToOnLoad: true,
   opacity: 1,
@@ -37026,7 +37070,9 @@ class ThreeDTilesControl {
     __publicField(this, "_container");
     __publicField(this, "_panel");
     __publicField(this, "_content");
+    __publicField(this, "_layerNameInput");
     __publicField(this, "_urlInput");
+    __publicField(this, "_beforeIdInput");
     __publicField(this, "_altitudeInput");
     __publicField(this, "_flyToCheckbox");
     __publicField(this, "_visibleCheckbox");
@@ -37047,6 +37093,8 @@ class ThreeDTilesControl {
       collapsed: this._options.collapsed,
       panelWidth: this._options.panelWidth,
       tilesetUrl: this._options.tilesetUrl,
+      layerName: this._options.layerName,
+      beforeId: this._options.beforeId,
       altitudeOffset: this._options.altitudeOffset,
       flyToOnLoad: this._options.flyToOnLoad,
       opacity: this._options.opacity,
@@ -37120,11 +37168,15 @@ class ThreeDTilesControl {
     const flyToOnLoad = (options == null ? void 0 : options.flyToOnLoad) ?? Boolean((_a2 = this._flyToCheckbox) == null ? void 0 : _a2.checked);
     const opacity = (options == null ? void 0 : options.opacity) ?? this._state.opacity;
     const visible = (options == null ? void 0 : options.visible) ?? Boolean((_b = this._visibleCheckbox) == null ? void 0 : _b.checked);
+    const layerName = (options == null ? void 0 : options.layerName) ?? this._getLayerName();
+    const beforeId = (options == null ? void 0 : options.beforeId) ?? this._getBeforeId();
     const id = this._createTilesetId();
     const layerId = this._createLayerId(id);
     const item = {
       id,
       layerId,
+      layerName,
+      beforeId,
       tilesetUrl: url,
       altitudeOffset,
       opacity,
@@ -37134,6 +37186,8 @@ class ThreeDTilesControl {
     this._state = {
       ...this._state,
       tilesetUrl: url,
+      layerName,
+      beforeId,
       altitudeOffset,
       flyToOnLoad,
       opacity,
@@ -37164,7 +37218,7 @@ class ThreeDTilesControl {
     this._layers.set(id, layer);
     await this._waitForStyle();
     if (!this._map || !this._layers.has(id)) return void 0;
-    this._map.addLayer(layer);
+    this._map.addLayer(layer, beforeId);
     return id;
   }
   removeTileset(id, emit = true) {
@@ -37188,6 +37242,8 @@ class ThreeDTilesControl {
       altitude: activeTileset == null ? void 0 : activeTileset.altitude,
       visible: (activeTileset == null ? void 0 : activeTileset.visible) ?? this._state.visible,
       tilesetUrl: (activeTileset == null ? void 0 : activeTileset.tilesetUrl) ?? this._state.tilesetUrl,
+      layerName: (activeTileset == null ? void 0 : activeTileset.layerName) ?? this._state.layerName,
+      beforeId: activeTileset == null ? void 0 : activeTileset.beforeId,
       altitudeOffset: (activeTileset == null ? void 0 : activeTileset.altitudeOffset) ?? this._state.altitudeOffset,
       opacity: (activeTileset == null ? void 0 : activeTileset.opacity) ?? this._state.opacity,
       activeTilesetId: activeTileset == null ? void 0 : activeTileset.id,
@@ -37338,7 +37394,9 @@ class ThreeDTilesControl {
       event.preventDefault();
       void this.loadTileset();
     });
+    this._layerNameInput = this._createInput("Layer name", "text", this._state.layerName);
     this._urlInput = this._createInput("Tileset URL", "url", this._state.tilesetUrl);
+    this._beforeIdInput = this._createInput("Before layer ID", "text", this._state.beforeId ?? "");
     this._altitudeInput = this._createInput(
       "Altitude offset",
       "number",
@@ -37359,6 +37417,8 @@ class ThreeDTilesControl {
     this._tilesetList = document.createElement("div");
     this._tilesetList.className = "three-d-tiles-list";
     form.appendChild(this._wrapField("Tileset URL", this._urlInput));
+    form.appendChild(this._wrapField("Layer name", this._layerNameInput));
+    form.appendChild(this._wrapField("Before layer ID", this._beforeIdInput));
     form.appendChild(this._wrapField("Altitude offset", this._altitudeInput));
     form.appendChild(this._flyToCheckbox.parentElement);
     form.appendChild(this._visibleCheckbox.parentElement);
@@ -37422,7 +37482,7 @@ class ThreeDTilesControl {
       const title = document.createElement("button");
       title.className = "three-d-tiles-list-title";
       title.type = "button";
-      title.textContent = `Tileset ${index + 1}`;
+      title.textContent = tileset.layerName || `Tileset ${index + 1}`;
       title.addEventListener("click", () => this._setActiveTileset(tileset.id));
       const url = document.createElement("span");
       url.className = "three-d-tiles-list-url";
@@ -37430,7 +37490,7 @@ class ThreeDTilesControl {
       const status = document.createElement("span");
       status.className = "three-d-tiles-list-status";
       status.dataset.status = tileset.status;
-      status.textContent = tileset.error ?? tileset.status;
+      status.textContent = tileset.error ?? this._formatTilesetStatus(tileset);
       meta.appendChild(title);
       meta.appendChild(url);
       meta.appendChild(status);
@@ -37546,6 +37606,16 @@ class ThreeDTilesControl {
     const value = Number(((_a = this._altitudeInput) == null ? void 0 : _a.value) ?? this._state.altitudeOffset);
     return Number.isFinite(value) ? value : this._state.altitudeOffset;
   }
+  _getLayerName() {
+    var _a;
+    const value = ((_a = this._layerNameInput) == null ? void 0 : _a.value.trim()) || this._state.layerName;
+    return value || "3D Tiles";
+  }
+  _getBeforeId() {
+    var _a;
+    const value = ((_a = this._beforeIdInput) == null ? void 0 : _a.value.trim()) || this._state.beforeId;
+    return value || void 0;
+  }
   _handleTilesetLoaded(id, metadata) {
     if (!this._layers.has(id)) return;
     this._state = {
@@ -37591,6 +37661,8 @@ class ThreeDTilesControl {
   }
   _syncFormFromState() {
     if (this._urlInput) this._urlInput.value = this._state.tilesetUrl;
+    if (this._layerNameInput) this._layerNameInput.value = this._state.layerName;
+    if (this._beforeIdInput) this._beforeIdInput.value = this._state.beforeId ?? "";
     if (this._altitudeInput) this._altitudeInput.value = String(this._state.altitudeOffset);
     if (this._flyToCheckbox) this._flyToCheckbox.checked = this._state.flyToOnLoad;
     if (this._visibleCheckbox) this._visibleCheckbox.checked = this._state.visible;
@@ -37621,6 +37693,8 @@ class ThreeDTilesControl {
     this._state = {
       ...this._state,
       tilesetUrl: activeTileset.tilesetUrl,
+      layerName: activeTileset.layerName,
+      beforeId: activeTileset.beforeId,
       altitudeOffset: activeTileset.altitudeOffset,
       opacity: activeTileset.opacity,
       visible: activeTileset.visible,
@@ -37636,6 +37710,12 @@ class ThreeDTilesControl {
   _getTileset(id) {
     return this._state.tilesets.find((tileset) => tileset.id === id);
   }
+  _formatTilesetStatus(tileset) {
+    if (tileset.beforeId) {
+      return `${tileset.status} before ${tileset.beforeId}`;
+    }
+    return tileset.status;
+  }
   _createTilesetId() {
     this._tilesetCounter += 1;
     return `tileset-${this._tilesetCounter}`;
@@ -37655,4 +37735,4 @@ exports.DEFAULT_TILESET_URL = DEFAULT_TILESET_URL;
 exports.ThreeDTilesControl = ThreeDTilesControl;
 exports.ThreeDTilesLayer = ThreeDTilesLayer;
 exports.ecefToLngLatAlt = ecefToLngLatAlt;
-//# sourceMappingURL=ThreeDTilesControl-DtHlKHVp.cjs.map
+//# sourceMappingURL=ThreeDTilesControl-BcJIWra6.cjs.map