maplibre-gl-3d-tiles 0.2.1 → 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-Cz5v6sGw.cjs → ThreeDTilesControl-BcJIWra6.cjs}

@@ -37054,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,
@@ -37068,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");
@@ -37089,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,
@@ -37162,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,
@@ -37176,6 +37186,8 @@ class ThreeDTilesControl {
     this._state = {
       ...this._state,
       tilesetUrl: url,
+      layerName,
+      beforeId,
       altitudeOffset,
       flyToOnLoad,
       opacity,
@@ -37206,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) {
@@ -37230,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,
@@ -37380,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",
@@ -37401,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);
@@ -37464,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";
@@ -37472,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);
@@ -37588,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 = {
@@ -37633,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;
@@ -37663,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,
@@ -37678,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}`;
@@ -37697,4 +37735,4 @@ exports.DEFAULT_TILESET_URL = DEFAULT_TILESET_URL;
 exports.ThreeDTilesControl = ThreeDTilesControl;
 exports.ThreeDTilesLayer = ThreeDTilesLayer;
 exports.ecefToLngLatAlt = ecefToLngLatAlt;
-//# sourceMappingURL=ThreeDTilesControl-Cz5v6sGw.cjs.map
+//# sourceMappingURL=ThreeDTilesControl-BcJIWra6.cjs.map