maplibre-gl-layer-control 0.4.0 → 0.5.1

package/README.md

@@ -11,6 +11,7 @@ A comprehensive layer control for MapLibre GL with advanced styling capabilities
 - ✅ **Auto-detection** - Automatically detects layer properties (opacity, visibility) and generates friendly names
 - ✅ **Layer visibility toggle** - Checkbox control for each layer
 - ✅ **Layer opacity control** - Smooth opacity slider with type-aware property mapping
+- ✅ **Layer symbols** - Visual type indicators (colored shapes) next to layer names, auto-detected from layer paint properties
 - ✅ **Resizable panel** - Adjustable panel width (240-420px) with keyboard support
 - ✅ **Advanced style editor** - Per-layer-type styling controls:
   - **Fill layers**: color, opacity, outline-color
@@ -153,8 +154,11 @@ function MapComponent() {
 | `panelWidth` | `number` | `320` | Initial panel width in pixels |
 | `panelMinWidth` | `number` | `240` | Minimum panel width |
 | `panelMaxWidth` | `number` | `420` | Maximum panel width |
+| `panelMaxHeight` | `number` | `600` | Maximum panel height (scrollable when exceeded) |
 | `showStyleEditor` | `boolean` | `true` | Show gear icon for style editor |
 | `showOpacitySlider` | `boolean` | `true` | Show opacity slider for layers |
+| `showLayerSymbol` | `boolean` | `true` | Show layer type symbols (colored icons) next to layer names |
+| `excludeDrawnLayers` | `boolean` | `true` | Exclude layers from drawing libraries (Geoman, Mapbox GL Draw, etc.) |
 
 ### LayerState
 
@@ -175,6 +179,33 @@ See the [examples](./examples) folder for complete working examples:
 - **[background-legend](./examples/background-legend)** - Background layer visibility control
 - **[react](./examples/react)** - React integration example
 
+### Layer Symbols
+
+The layer control displays visual symbols (colored icons) next to each layer name to indicate the layer type. Symbols are automatically generated based on the layer's type and paint properties:
+
+| Layer Type | Symbol |
+|------------|--------|
+| `fill` | Colored rectangle with border |
+| `line` | Horizontal line |
+| `circle` | Colored circle |
+| `symbol` | Marker/pin icon |
+| `raster` | Gradient rectangle |
+| `heatmap` | Orange-red gradient |
+| `hillshade` | Gray gradient |
+| `fill-extrusion` | 3D rectangle |
+| `background` | Rectangle with inner border |
+| Background group | Stacked layers icon |
+
+The symbol color is automatically extracted from the layer's paint properties (e.g., `fill-color`, `line-color`, `circle-color`). If a color cannot be determined, a neutral gray is used.
+
+To disable layer symbols:
+
+```typescript
+const layerControl = new LayerControl({
+  showLayerSymbol: false
+});
+```
+
 ### Background Layer Legend
 
 When using the `layers` option to specify specific layers, all other layers are grouped under a "Background" entry. The Background layer includes a **gear icon** that opens a detailed legend panel showing:

package/dist/index.cjs

@@ -168,6 +168,258 @@ function formatNumericValue(value, step) {
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
+const COLOR_PROPERTY_MAP = {
+  fill: ["fill-color", "fill-outline-color"],
+  line: ["line-color"],
+  circle: ["circle-color", "circle-stroke-color"],
+  symbol: ["icon-color", "text-color"],
+  background: ["background-color"],
+  heatmap: ["heatmap-color"],
+  "fill-extrusion": ["fill-extrusion-color"]
+};
+function extractColorFromExpression(expression) {
+  if (!Array.isArray(expression) || expression.length === 0) return null;
+  for (const item of expression) {
+    if (typeof item === "string") {
+      if (item.startsWith("#") || item.startsWith("rgb") || item.startsWith("hsl")) {
+        return normalizeColor(item);
+      }
+    } else if (Array.isArray(item)) {
+      const result = extractColorFromExpression(item);
+      if (result) return result;
+    }
+  }
+  return null;
+}
+function getLayerColor(map, layerId, layerType) {
+  var _a;
+  const propertyNames = COLOR_PROPERTY_MAP[layerType];
+  if (!propertyNames) return null;
+  for (const propertyName of propertyNames) {
+    try {
+      const runtimeColor = map.getPaintProperty(layerId, propertyName);
+      if (runtimeColor) {
+        if (typeof runtimeColor === "string") {
+          return normalizeColor(runtimeColor);
+        }
+        if (Array.isArray(runtimeColor)) {
+          const extracted = extractColorFromExpression(runtimeColor);
+          if (extracted) return extracted;
+        }
+      }
+    } catch {
+    }
+    const style = map.getStyle();
+    const layer = (_a = style == null ? void 0 : style.layers) == null ? void 0 : _a.find(
+      (l) => l.id === layerId
+    );
+    if (layer && "paint" in layer && layer.paint) {
+      const paintColor = layer.paint[propertyName];
+      if (paintColor) {
+        if (typeof paintColor === "string") {
+          return normalizeColor(paintColor);
+        }
+        if (Array.isArray(paintColor)) {
+          const extracted = extractColorFromExpression(paintColor);
+          if (extracted) return extracted;
+        }
+      }
+    }
+  }
+  return null;
+}
+function getLayerColorFromSpec(layer) {
+  const propertyNames = COLOR_PROPERTY_MAP[layer.type];
+  if (!propertyNames) return null;
+  for (const propertyName of propertyNames) {
+    if ("paint" in layer && layer.paint) {
+      const paintColor = layer.paint[propertyName];
+      if (paintColor) {
+        if (typeof paintColor === "string") {
+          return normalizeColor(paintColor);
+        }
+        if (Array.isArray(paintColor)) {
+          const extracted = extractColorFromExpression(paintColor);
+          if (extracted) return extracted;
+        }
+      }
+    }
+  }
+  return null;
+}
+function darkenColor(hexColor, amount) {
+  let hex = hexColor.replace("#", "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  const r = Math.max(
+    0,
+    parseInt(hex.slice(0, 2), 16) - Math.round(255 * amount)
+  );
+  const g = Math.max(
+    0,
+    parseInt(hex.slice(2, 4), 16) - Math.round(255 * amount)
+  );
+  const b = Math.max(
+    0,
+    parseInt(hex.slice(4, 6), 16) - Math.round(255 * amount)
+  );
+  return rgbToHex(r, g, b);
+}
+function createFillSymbol(size, color) {
+  const padding = 2;
+  const borderColor = darkenColor(color, 0.3);
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
+          fill="${color}" stroke="${borderColor}" stroke-width="1" rx="1"/>
+  </svg>`;
+}
+function createLineSymbol(size, color, strokeWidth = 2) {
+  const y = size / 2;
+  const padding = 2;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <line x1="${padding}" y1="${y}" x2="${size - padding}" y2="${y}"
+          stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="round"/>
+  </svg>`;
+}
+function createCircleSymbol(size, color) {
+  const cx = size / 2;
+  const cy = size / 2;
+  const r = size / 2 - 3;
+  const borderColor = darkenColor(color, 0.3);
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="${cx}" cy="${cy}" r="${r}" fill="${color}"
+            stroke="${borderColor}" stroke-width="1"/>
+  </svg>`;
+}
+function createMarkerSymbol(size, color) {
+  const borderColor = darkenColor(color, 0.3);
+  const cx = size / 2;
+  const pinWidth = size * 0.5;
+  const pinHeight = size * 0.7;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <path d="M${cx} ${size - 2}
+             L${cx - pinWidth / 2} ${size - pinHeight}
+             A${pinWidth / 2} ${pinWidth / 2} 0 1 1 ${cx + pinWidth / 2} ${size - pinHeight}
+             Z"
+          fill="${color}" stroke="${borderColor}" stroke-width="1"/>
+    <circle cx="${cx}" cy="${size - pinHeight - pinWidth / 4}" r="${pinWidth / 5}" fill="white"/>
+  </svg>`;
+}
+function createRasterSymbol(size) {
+  const padding = 2;
+  const id = `rasterGrad_${Math.random().toString(36).slice(2, 9)}`;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient id="${id}" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="#e0e0e0"/>
+        <stop offset="50%" stop-color="#808080"/>
+        <stop offset="100%" stop-color="#404040"/>
+      </linearGradient>
+    </defs>
+    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
+          fill="url(#${id})" rx="1"/>
+  </svg>`;
+}
+function createBackgroundSymbol(size, color) {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1" y="1" width="${size - 2}" height="${size - 2}" fill="${color}" rx="2"/>
+    <rect x="3" y="3" width="${size - 6}" height="${size - 6}" fill="none"
+          stroke="white" stroke-width="1" stroke-opacity="0.5" rx="1"/>
+  </svg>`;
+}
+function createHeatmapSymbol(size) {
+  const padding = 2;
+  const id = `heatmapGrad_${Math.random().toString(36).slice(2, 9)}`;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <radialGradient id="${id}" cx="50%" cy="50%" r="50%">
+        <stop offset="0%" stop-color="#ffff00"/>
+        <stop offset="50%" stop-color="#ff8800"/>
+        <stop offset="100%" stop-color="#ff0000"/>
+      </radialGradient>
+    </defs>
+    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
+          fill="url(#${id})" rx="1"/>
+  </svg>`;
+}
+function createHillshadeSymbol(size) {
+  const padding = 2;
+  const id = `hillshadeGrad_${Math.random().toString(36).slice(2, 9)}`;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient id="${id}" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="#ffffff"/>
+        <stop offset="100%" stop-color="#666666"/>
+      </linearGradient>
+    </defs>
+    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
+          fill="url(#${id})" rx="1"/>
+  </svg>`;
+}
+function createFillExtrusionSymbol(size, color) {
+  const borderColor = darkenColor(color, 0.3);
+  const topColor = color;
+  const sideColor = darkenColor(color, 0.2);
+  const depth = 3;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="${2 + depth},2 ${size - 2},2 ${size - 2},${size - 2 - depth} ${size - 2 - depth},${size - 2} 2,${size - 2} 2,${2 + depth}"
+             fill="${topColor}" stroke="${borderColor}" stroke-width="1"/>
+    <polygon points="2,${2 + depth} ${2 + depth},2 ${2 + depth},${size - 2 - depth} 2,${size - 2}"
+             fill="${sideColor}" stroke="${borderColor}" stroke-width="0.5"/>
+    <polygon points="${2 + depth},${size - 2 - depth} ${size - 2},${size - 2 - depth} ${size - 2 - depth},${size - 2} 2,${size - 2}"
+             fill="${sideColor}" stroke="${borderColor}" stroke-width="0.5"/>
+  </svg>`;
+}
+function createDefaultSymbol(size, color) {
+  const padding = 2;
+  const borderColor = darkenColor(color, 0.3);
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <rect x="${padding}" y="${padding}" width="${size - padding * 2}" height="${size - padding * 2}"
+          fill="${color}" stroke="${borderColor}" stroke-width="1"/>
+  </svg>`;
+}
+function createStackedLayersSymbol(size) {
+  const colors = ["#a8d4a8", "#8ec4e8", "#d4c4a8"];
+  const borderColor = "#666666";
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <rect x="4" y="1" width="${size - 6}" height="${size - 6}" fill="${colors[2]}" stroke="${borderColor}" stroke-width="0.75" rx="1"/>
+    <rect x="2" y="3" width="${size - 6}" height="${size - 6}" fill="${colors[1]}" stroke="${borderColor}" stroke-width="0.75" rx="1"/>
+    <rect x="0" y="5" width="${size - 6}" height="${size - 6}" fill="${colors[0]}" stroke="${borderColor}" stroke-width="0.75" rx="1"/>
+  </svg>`;
+}
+function createLayerSymbolSVG(layerType, color, options = {}) {
+  const size = options.size || 16;
+  const strokeWidth = options.strokeWidth || 2;
+  const fillColor = color || "#888888";
+  switch (layerType) {
+    case "fill":
+      return createFillSymbol(size, fillColor);
+    case "line":
+      return createLineSymbol(size, fillColor, strokeWidth);
+    case "circle":
+      return createCircleSymbol(size, fillColor);
+    case "symbol":
+      return createMarkerSymbol(size, fillColor);
+    case "raster":
+      return createRasterSymbol(size);
+    case "background":
+      return createBackgroundSymbol(size, fillColor);
+    case "heatmap":
+      return createHeatmapSymbol(size);
+    case "hillshade":
+      return createHillshadeSymbol(size);
+    case "fill-extrusion":
+      return createFillExtrusionSymbol(size, fillColor);
+    case "background-group":
+      return createStackedLayersSymbol(size);
+    default:
+      return createDefaultSymbol(size, fillColor);
+  }
+}
+function createBackgroundGroupSymbolSVG(size = 16) {
+  return createStackedLayersSymbol(size);
+}
 class LayerControl {
   constructor(options = {}) {
     __publicField(this, "map");
@@ -181,8 +433,11 @@ class LayerControl {
     // Panel width management
     __publicField(this, "minPanelWidth");
     __publicField(this, "maxPanelWidth");
+    __publicField(this, "maxPanelHeight");
     __publicField(this, "showStyleEditor");
     __publicField(this, "showOpacitySlider");
+    __publicField(this, "showLayerSymbol");
+    __publicField(this, "excludeDrawnLayers");
     __publicField(this, "widthSliderEl", null);
     __publicField(this, "widthThumbEl", null);
     __publicField(this, "widthValueEl", null);
@@ -193,8 +448,11 @@ class LayerControl {
     __publicField(this, "widthFrame", null);
     this.minPanelWidth = options.panelMinWidth || 240;
     this.maxPanelWidth = options.panelMaxWidth || 420;
+    this.maxPanelHeight = options.panelMaxHeight || 600;
     this.showStyleEditor = options.showStyleEditor !== false;
     this.showOpacitySlider = options.showOpacitySlider !== false;
+    this.showLayerSymbol = options.showLayerSymbol !== false;
+    this.excludeDrawnLayers = options.excludeDrawnLayers !== false;
     this.state = {
       collapsed: options.collapsed !== false,
       panelWidth: options.panelWidth || 320,
@@ -250,6 +508,10 @@ class LayerControl {
       allLayerIds.forEach((layerId) => {
         const layer = this.map.getLayer(layerId);
         if (!layer) return;
+        if (this.excludeDrawnLayers && this.isDrawnLayer(layerId)) {
+          backgroundLayerIds.push(layerId);
+          return;
+        }
         const sourceId = layer.source;
         if (!sourceId || originalSourceIds.has(sourceId)) {
           backgroundLayerIds.push(layerId);
@@ -375,6 +637,28 @@ class LayerControl {
     name = name.replace(/\b\w/g, (char) => char.toUpperCase());
     return name || layerId;
   }
+  /**
+   * Check if a layer ID belongs to a drawing library (Geoman, Mapbox GL Draw, etc.)
+   * @param layerId The layer ID to check
+   * @returns true if the layer is from a drawing library
+   */
+  isDrawnLayer(layerId) {
+    const drawnLayerPatterns = [
+      /^gm[-_\s]/i,
+      // Geoman (gm-main-*, gm_*, Gm Temporary...)
+      /^gl-draw[-_]/i,
+      // Mapbox GL Draw
+      /^mapbox-gl-draw[-_]/i,
+      // Mapbox GL Draw alternative
+      /^terra-draw[-_]/i,
+      // Terra Draw
+      /^maplibre-gl-draw[-_]/i,
+      // MapLibre GL Draw
+      /^draw[-_]layer/i
+      // Generic draw layers
+    ];
+    return drawnLayerPatterns.some((pattern) => pattern.test(layerId));
+  }
   /**
    * Create the main container element
    */
@@ -404,6 +688,7 @@ class LayerControl {
     const panel = document.createElement("div");
     panel.className = "layer-control-panel";
     panel.style.width = `${this.state.panelWidth}px`;
+    panel.style.maxHeight = `${this.maxPanelHeight}px`;
     if (!this.state.collapsed) {
       panel.classList.add("expanded");
     }
@@ -739,6 +1024,17 @@ class LayerControl {
     name.textContent = state.name || layerId;
     name.title = state.name || layerId;
     row.appendChild(checkbox);
+    if (this.showLayerSymbol) {
+      if (layerId === "Background") {
+        const symbol = this.createBackgroundGroupSymbol();
+        row.appendChild(symbol);
+      } else {
+        const symbol = this.createLayerSymbol(layerId);
+        if (symbol) {
+          row.appendChild(symbol);
+        }
+      }
+    }
     row.appendChild(name);
     if (this.showOpacitySlider) {
       const opacity = document.createElement("input");
@@ -775,6 +1071,50 @@ class LayerControl {
     item.appendChild(row);
     this.panel.appendChild(item);
   }
+  /**
+   * Create a symbol element for a layer
+   * @param layerId The layer ID
+   * @returns The symbol HTML element, or null if layer not found
+   */
+  createLayerSymbol(layerId) {
+    const layer = this.map.getLayer(layerId);
+    if (!layer) return null;
+    const layerType = layer.type;
+    const color = getLayerColor(this.map, layerId, layerType);
+    const svgMarkup = createLayerSymbolSVG(layerType, color);
+    const symbolContainer = document.createElement("span");
+    symbolContainer.className = "layer-control-symbol";
+    symbolContainer.innerHTML = svgMarkup;
+    symbolContainer.title = `Layer type: ${layerType}`;
+    return symbolContainer;
+  }
+  /**
+   * Create a symbol element for a background layer
+   * @param layer The layer specification
+   * @returns The symbol HTML element
+   */
+  createBackgroundLayerSymbol(layer) {
+    const color = getLayerColorFromSpec(layer);
+    const svgMarkup = createLayerSymbolSVG(layer.type, color, { size: 14 });
+    const symbolContainer = document.createElement("span");
+    symbolContainer.className = "background-legend-layer-symbol";
+    symbolContainer.innerHTML = svgMarkup;
+    symbolContainer.title = `Layer type: ${layer.type}`;
+    return symbolContainer;
+  }
+  /**
+   * Create a symbol element for the Background layer group
+   * Shows a stacked layers icon to represent multiple background layers
+   * @returns The symbol HTML element
+   */
+  createBackgroundGroupSymbol() {
+    const svgMarkup = createBackgroundGroupSymbolSVG(16);
+    const symbolContainer = document.createElement("span");
+    symbolContainer.className = "layer-control-symbol";
+    symbolContainer.innerHTML = svgMarkup;
+    symbolContainer.title = "Background layers";
+    return symbolContainer;
+  }
   /**
    * Toggle layer visibility
    */
@@ -1015,6 +1355,9 @@ class LayerControl {
     const styleLayers = this.map.getStyle().layers || [];
     styleLayers.forEach((layer) => {
       if (!this.isUserAddedLayer(layer.id)) {
+        if (this.excludeDrawnLayers && this.isDrawnLayer(layer.id)) {
+          return;
+        }
         if (this.state.onlyRenderedFilter && !this.isLayerRendered(layer.id)) {
           return;
         }
@@ -1039,6 +1382,12 @@ class LayerControl {
         typeIndicator.className = "background-legend-layer-type";
         typeIndicator.textContent = layer.type;
         layerRow.appendChild(checkbox);
+        if (this.showLayerSymbol) {
+          const symbol = this.createBackgroundLayerSymbol(layer);
+          if (symbol) {
+            layerRow.appendChild(symbol);
+          }
+        }
         layerRow.appendChild(name);
         layerRow.appendChild(typeIndicator);
         container.appendChild(layerRow);
@@ -1528,6 +1877,9 @@ class LayerControl {
           const layer = this.map.getLayer(layerId);
           if (layer) {
             if (isAutoDetectMode) {
+              if (this.excludeDrawnLayers && this.isDrawnLayer(layerId)) {
+                return;
+              }
               const sourceId = layer.source;
               if (!sourceId || originalSourceIds.has(sourceId)) {
                 return;
@@ -1579,7 +1931,12 @@ class LayerControl {
 }
 exports.LayerControl = LayerControl;
 exports.clamp = clamp;
+exports.createBackgroundGroupSymbolSVG = createBackgroundGroupSymbolSVG;
+exports.createLayerSymbolSVG = createLayerSymbolSVG;
+exports.darkenColor = darkenColor;
 exports.formatNumericValue = formatNumericValue;
+exports.getLayerColor = getLayerColor;
+exports.getLayerColorFromSpec = getLayerColorFromSpec;
 exports.getLayerOpacity = getLayerOpacity;
 exports.getLayerType = getLayerType;
 exports.isStyleableLayerType = isStyleableLayerType;