maplibre-gl-layer-control 0.4.0 → 0.5.0

package/dist/maplibre-gl-layer-control.css

@@ -227,6 +227,22 @@
   white-space: nowrap;
 }
 
+/* Layer symbol/icon */
+.layer-control-symbol {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.layer-control-symbol svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
 .layer-control-opacity {
   flex: 0 0 140px;
   height: 16px;
@@ -808,6 +824,22 @@
   flex-shrink: 0;
 }
 
+/* Layer symbol in background legend */
+.background-legend-layer-symbol {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.background-legend-layer-symbol svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+
 .background-legend-layer-name {
   flex: 1;
   font-size: 11px;

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 import { IControl } from 'maplibre-gl';
+import { LayerSpecification } from 'maplibre-gl';
 import { Map as Map_2 } from 'maplibre-gl';
 
 /**
@@ -10,6 +11,30 @@ import { Map as Map_2 } from 'maplibre-gl';
  */
 export declare function clamp(value: number, min: number, max: number): number;
 
+/**
+ * Create an SVG symbol for the Background layer group
+ * @param size Symbol size in pixels (default: 16)
+ * @returns SVG markup string
+ */
+export declare function createBackgroundGroupSymbolSVG(size?: number): string;
+
+/**
+ * Create an SVG symbol for a layer type
+ * @param layerType The MapLibre layer type
+ * @param color The primary color (hex format), or null for default
+ * @param options Optional configuration
+ * @returns SVG markup string
+ */
+export declare function createLayerSymbolSVG(layerType: string, color: string | null, options?: SymbolOptions): string;
+
+/**
+ * Darken a hex color by a given amount
+ * @param hexColor The hex color to darken (e.g., '#ff0000')
+ * @param amount Amount to darken (0-1, where 1 is fully black)
+ * @returns The darkened hex color
+ */
+export declare function darkenColor(hexColor: string, amount: number): string;
+
 /**
  * Format a numeric value based on the step size
  * @param value Numeric value to format
@@ -18,6 +43,22 @@ export declare function clamp(value: number, min: number, max: number): number;
  */
 export declare function formatNumericValue(value: number, step: number): string;
 
+/**
+ * Get the primary color from a layer's paint properties
+ * @param map The MapLibre map instance
+ * @param layerId The layer ID
+ * @param layerType The layer type
+ * @returns The normalized hex color, or null if not found
+ */
+export declare function getLayerColor(map: Map_2, layerId: string, layerType: string): string | null;
+
+/**
+ * Get the primary color directly from a layer specification
+ * @param layer The layer specification
+ * @returns The normalized hex color, or null if not found
+ */
+export declare function getLayerColorFromSpec(layer: LayerSpecification): string | null;
+
 /**
  * Get the current opacity value for a layer
  * @param map MapLibre map instance
@@ -56,8 +97,11 @@ export declare class LayerControl implements IControl {
     private styleEditors;
     private minPanelWidth;
     private maxPanelWidth;
+    private maxPanelHeight;
     private showStyleEditor;
     private showOpacitySlider;
+    private showLayerSymbol;
+    private excludeDrawnLayers;
     private widthSliderEl;
     private widthThumbEl;
     private widthValueEl;
@@ -88,6 +132,12 @@ export declare class LayerControl implements IControl {
      * Generate a friendly display name from a layer ID
      */
     private generateFriendlyName;
+    /**
+     * 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
+     */
+    private isDrawnLayer;
     /**
      * Create the main container element
      */
@@ -160,6 +210,24 @@ export declare class LayerControl implements IControl {
      * Add a single layer item to the panel
      */
     private addLayerItem;
+    /**
+     * Create a symbol element for a layer
+     * @param layerId The layer ID
+     * @returns The symbol HTML element, or null if layer not found
+     */
+    private createLayerSymbol;
+    /**
+     * Create a symbol element for a background layer
+     * @param layer The layer specification
+     * @returns The symbol HTML element
+     */
+    private createBackgroundLayerSymbol;
+    /**
+     * Create a symbol element for the Background layer group
+     * Shows a stacked layers icon to represent multiple background layers
+     * @returns The symbol HTML element
+     */
+    private createBackgroundGroupSymbol;
     /**
      * Toggle layer visibility
      */
@@ -310,6 +378,12 @@ export declare interface LayerControlOptions {
     showStyleEditor?: boolean;
     /** Whether to show the opacity slider for layers (default: true) */
     showOpacitySlider?: boolean;
+    /** Whether to show layer type symbols/icons next to layer names (default: true) */
+    showLayerSymbol?: boolean;
+    /** Maximum panel height in pixels (default: 600). When content exceeds this height, the panel becomes scrollable. */
+    panelMaxHeight?: number;
+    /** Whether to exclude drawn layers from drawing libraries like Geoman, Mapbox GL Draw, etc. (default: true) */
+    excludeDrawnLayers?: boolean;
 }
 
 /**
@@ -392,4 +466,14 @@ export declare interface StyleControlConfig {
     defaultValue?: any;
 }
 
+/**
+ * Symbol generation options
+ */
+export declare interface SymbolOptions {
+    /** Symbol size in pixels (default: 16) */
+    size?: number;
+    /** Stroke width for line symbols (default: 2) */
+    strokeWidth?: number;
+}
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maplibre-gl-layer-control",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A comprehensive layer control for MapLibre GL with advanced styling capabilities",
   "type": "module",
   "main": "./dist/index.cjs",