maplibre-gl-layer-control 0.3.0 → 0.5.0

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

@@ -153,6 +153,41 @@
   pointer-events: none;
 }
 
+/* Action buttons (Show All / Hide All) */
+.layer-control-actions {
+  display: flex;
+  gap: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #e0e0e0;
+  margin-bottom: 4px;
+}
+
+.layer-control-action-btn {
+  flex: 1;
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #ffffff !important;
+  background: #2f6fed !important;
+  border: 1px solid #2f6fed !important;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  width: auto;
+  height: auto;
+}
+
+.layer-control-action-btn:hover {
+  background: #1d5bd6 !important;
+  border-color: #1d5bd6 !important;
+  color: #ffffff !important;
+}
+
+.layer-control-action-btn:active {
+  background: #1a4fc2 !important;
+  border-color: #1a4fc2 !important;
+}
+
 /* Layer items */
 .layer-control-item {
   display: flex;
@@ -173,6 +208,7 @@
   gap: 8px;
   width: 100%;
   box-sizing: border-box;
+  min-height: 20px;
 }
 
 .layer-control-checkbox {
@@ -191,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;
@@ -224,18 +276,19 @@
 
 /* Style button */
 .layer-control-style-button {
-  width: 26px;
-  height: 26px;
+  width: 20px;
+  height: 20px;
   border-radius: 4px;
   border: none;
   background: none;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 16px;
   color: #444;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background-color 0.1s ease;
+  flex-shrink: 0;
 }
 
 .layer-control-style-button:hover {
@@ -513,14 +566,14 @@
 /* Style button */
 .layer-control-style-button {
   flex: 0 0 auto;
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   border: 1px solid #ddd;
   border-radius: 3px;
   background: white;
   color: #666;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 16px;
   padding: 0;
   line-height: 1;
   transition: all 0.2s ease;
@@ -771,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,6 +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;
@@ -77,10 +123,21 @@ export declare class LayerControl implements IControl {
      * Auto-detect layers from the map and populate layerStates
      */
     private autoDetectLayers;
+    /**
+     * Get the source IDs that were part of the original style (from the style URL)
+     * Sources added via map.addSource() are considered user-added
+     */
+    private getOriginalStyleSourceIds;
     /**
      * 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
      */
@@ -93,6 +150,14 @@ export declare class LayerControl implements IControl {
      * Create the panel element
      */
     private createPanel;
+    /**
+     * Create action buttons for Show All / Hide All
+     */
+    private createActionButtons;
+    /**
+     * Set visibility of all layers
+     */
+    private setAllLayersVisibility;
     /**
      * Create the panel header with title and width control
      */
@@ -145,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
      */
@@ -270,7 +353,7 @@ export declare class LayerControl implements IControl {
      */
     private updateUIForLayer;
     /**
-     * Check for new layers and add them to the control
+     * Check for new layers and add them to the control, remove deleted layers
      */
     private checkForNewLayers;
 }
@@ -291,6 +374,16 @@ export declare interface LayerControlOptions {
     panelMinWidth?: number;
     /** Maximum panel width in pixels (default: 420) */
     panelMaxWidth?: number;
+    /** Whether to show the style editor button (gear icon) for layers (default: true) */
+    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;
 }
 
 /**
@@ -373,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.3.0",
+  "version": "0.5.0",
   "description": "A comprehensive layer control for MapLibre GL with advanced styling capabilities",
   "type": "module",
   "main": "./dist/index.cjs",