maplibre-gl-layer-control 0.6.2 → 0.7.0

package/dist/index.cjs

@@ -156,12 +156,23 @@ function getOpacityProperty(layerType) {
       return "raster-opacity";
     case "background":
       return "background-opacity";
+    case "heatmap":
+      return "heatmap-opacity";
+    case "fill-extrusion":
+      return "fill-extrusion-opacity";
+    case "hillshade":
+      return "hillshade-exaggeration";
+    case "color-relief":
+      return null;
     default:
       return `${layerType}-opacity`;
   }
 }
 function getLayerOpacity(map, layerId, layerType) {
   const opacityProp = getOpacityProperty(layerType);
+  if (opacityProp === null) {
+    return 1;
+  }
   if (Array.isArray(opacityProp)) {
     const opacity2 = map.getPaintProperty(layerId, opacityProp[0]);
     return opacity2 !== void 0 && opacity2 !== null ? opacity2 : 1;
@@ -171,6 +182,9 @@ function getLayerOpacity(map, layerId, layerType) {
 }
 function setLayerOpacity(map, layerId, layerType, opacity) {
   const opacityProp = getOpacityProperty(layerType);
+  if (opacityProp === null) {
+    return;
+  }
   if (Array.isArray(opacityProp)) {
     opacityProp.forEach((prop) => {
       map.setPaintProperty(layerId, prop, opacity);
@@ -180,7 +194,16 @@ function setLayerOpacity(map, layerId, layerType, opacity) {
   }
 }
 function isStyleableLayerType(layerType) {
-  return ["fill", "line", "circle", "symbol", "raster"].includes(layerType);
+  return [
+    "fill",
+    "line",
+    "circle",
+    "symbol",
+    "raster",
+    "heatmap",
+    "fill-extrusion",
+    "hillshade"
+  ].includes(layerType);
 }
 function getLayerType(map, layerId) {
   try {
@@ -703,9 +726,9 @@ class LayerControl {
     }
     const allLayerIds = style.layers.map((layer) => layer.id);
     if (this.targetLayers.length === 0) {
-      const originalSourceIds = this.getOriginalStyleSourceIds();
       const userAddedLayers = [];
       const backgroundLayerIds = [];
+      const userAddedSourceIds = this.detectUserAddedSources();
       allLayerIds.forEach((layerId) => {
         const layer = this.map.getLayer(layerId);
         if (!layer) return;
@@ -714,10 +737,10 @@ class LayerControl {
           return;
         }
         const sourceId = layer.source;
-        if (!sourceId || originalSourceIds.has(sourceId)) {
-          backgroundLayerIds.push(layerId);
-        } else {
+        if (sourceId && userAddedSourceIds.has(sourceId)) {
           userAddedLayers.push(layerId);
+        } else {
+          backgroundLayerIds.push(layerId);
         }
       });
       if (backgroundLayerIds.length > 0) {
@@ -792,58 +815,90 @@ class LayerControl {
     this.targetLayers = Object.keys(this.state.layerStates);
   }
   /**
-   * Get the source IDs that were part of the original style (from the style URL)
-   * Sources added via map.addSource() are considered user-added
+   * Detect which sources are user-added (not from the basemap style)
+   * User-added sources are identified by:
+   * - GeoJSON sources with inline data objects (not URL strings)
+   * - Image, video, canvas sources (always user-added)
+   * - Raster, raster-dem, vector sources from non-basemap tile providers
    */
-  getOriginalStyleSourceIds() {
-    const originalSourceIds = /* @__PURE__ */ new Set();
+  detectUserAddedSources() {
+    const userAddedSources = /* @__PURE__ */ new Set();
     const style = this.map.getStyle();
-    if (!style || !style.sources) return originalSourceIds;
+    if (!style || !style.sources) return userAddedSources;
+    const basemapDomains = /* @__PURE__ */ new Set();
+    const knownBasemapProviders = [
+      "demotiles.maplibre.org",
+      "api.maptiler.com",
+      "tiles.stadiamaps.com",
+      "api.mapbox.com",
+      "basemaps.cartocdn.com",
+      "tiles.mapbox.com",
+      "a.basemaps.cartocdn.com",
+      "b.basemaps.cartocdn.com",
+      "c.basemaps.cartocdn.com",
+      "d.basemaps.cartocdn.com",
+      "tiles.arcgis.com",
+      "server.arcgisonline.com",
+      "services.arcgisonline.com"
+    ];
     const spriteUrl = style.sprite;
-    const glyphsUrl = style.glyphs;
-    let styleBaseDomain = "";
-    if (spriteUrl) {
+    if (spriteUrl && typeof spriteUrl === "string") {
       try {
-        const url = new URL(typeof spriteUrl === "string" ? spriteUrl : "");
-        styleBaseDomain = url.hostname;
+        const url = new URL(spriteUrl);
+        basemapDomains.add(url.hostname);
       } catch {
       }
-    } else if (glyphsUrl) {
+    }
+    if (style.glyphs) {
       try {
-        const url = new URL(glyphsUrl.replace("{fontstack}", "test").replace("{range}", "test"));
-        styleBaseDomain = url.hostname;
+        const url = new URL(style.glyphs.replace("{fontstack}", "x").replace("{range}", "x"));
+        basemapDomains.add(url.hostname);
       } catch {
       }
     }
-    Object.entries(style.sources).forEach(([sourceId, source]) => {
+    for (const [sourceId, source] of Object.entries(style.sources)) {
       const src = source;
-      let sourceUrl = src.url || src.tiles && src.tiles[0] || "";
-      if (sourceUrl) {
-        try {
-          const url = new URL(sourceUrl);
-          if (styleBaseDomain && url.hostname === styleBaseDomain) {
-            originalSourceIds.add(sourceId);
-            return;
-          }
-          const basemapDomains = [
-            "demotiles.maplibre.org",
-            "api.maptiler.com",
-            "tiles.stadiamaps.com",
-            "api.mapbox.com",
-            "basemaps.cartocdn.com"
-          ];
-          if (basemapDomains.some((domain) => url.hostname.includes(domain))) {
-            originalSourceIds.add(sourceId);
-            return;
+      const sourceType = src.type;
+      if (sourceType === "image" || sourceType === "video" || sourceType === "canvas") {
+        userAddedSources.add(sourceId);
+        continue;
+      }
+      if (sourceType === "geojson") {
+        if (src.data && typeof src.data === "object") {
+          userAddedSources.add(sourceId);
+        } else if (src.data && typeof src.data === "string") {
+          try {
+            const url = new URL(src.data);
+            const isBasemap = knownBasemapProviders.some((p) => url.hostname.includes(p)) || basemapDomains.has(url.hostname);
+            if (!isBasemap) {
+              userAddedSources.add(sourceId);
+            }
+          } catch {
+            userAddedSources.add(sourceId);
           }
-        } catch {
         }
+        continue;
       }
-      if (!src.data && !sourceUrl && src.type !== "geojson") {
-        originalSourceIds.add(sourceId);
+      if (sourceType === "raster" || sourceType === "raster-dem" || sourceType === "vector") {
+        const tileUrl = src.url || src.tiles && src.tiles[0] || "";
+        if (tileUrl) {
+          try {
+            const url = new URL(tileUrl.replace(/{[^}]+}/g, "0"));
+            const hostname = url.hostname;
+            const isKnownBasemap = knownBasemapProviders.some(
+              (provider) => hostname === provider || hostname.endsWith("." + provider)
+            );
+            const matchesBasemapDomain = basemapDomains.has(hostname);
+            if (!isKnownBasemap && !matchesBasemapDomain) {
+              userAddedSources.add(sourceId);
+            }
+          } catch {
+            userAddedSources.add(sourceId);
+          }
+        }
       }
-    });
-    return originalSourceIds;
+    }
+    return userAddedSources;
   }
   /**
    * Generate a friendly display name from a layer ID
@@ -2172,9 +2227,9 @@ class LayerControl {
         return;
       }
       const currentMapLayerIds = new Set(style.layers.map((layer) => layer.id));
-      const originalSourceIds = this.getOriginalStyleSourceIds();
       const isAutoDetectMode = this.targetLayers.length === 0 || this.targetLayers.length === 1 && this.targetLayers[0] === "Background" || this.targetLayers.every((id) => id === "Background" || this.state.layerStates[id]);
       const newLayers = [];
+      const userAddedSourceIds = isAutoDetectMode ? this.detectUserAddedSources() : /* @__PURE__ */ new Set();
       currentMapLayerIds.forEach((layerId) => {
         if (layerId !== "Background" && !this.state.layerStates[layerId]) {
           const layer = this.map.getLayer(layerId);
@@ -2184,7 +2239,7 @@ class LayerControl {
                 return;
               }
               const sourceId = layer.source;
-              if (!sourceId || originalSourceIds.has(sourceId)) {
+              if (!sourceId || !userAddedSourceIds.has(sourceId)) {
                 return;
               }
             }