maplibre-gl-layer-control 0.2.0 → 0.3.0

package/README.md

@@ -1,5 +1,9 @@
 # maplibre-gl-layer-control
 
+[![npm version](https://img.shields.io/npm/v/maplibre-gl-layer-control.svg)](https://www.npmjs.com/package/maplibre-gl-layer-control)
+[![npm downloads](https://img.shields.io/npm/dm/maplibre-gl-layer-control.svg)](https://www.npmjs.com/package/maplibre-gl-layer-control)
+[![license](https://img.shields.io/npm/l/maplibre-gl-layer-control.svg)](https://github.com/opengeos/maplibre-gl-layer-control/blob/main/LICENSE)
+
 A comprehensive layer control for MapLibre GL with advanced styling capabilities. Built with TypeScript and React, providing both vanilla JavaScript and React integration options.
 
 ## Features

package/dist/types/index.d.ts

@@ -1 +1,376 @@
+import { IControl } from 'maplibre-gl';
+import { Map as Map_2 } from 'maplibre-gl';
+
+/**
+ * Clamp a numeric value between min and max
+ * @param value Value to clamp
+ * @param min Minimum value
+ * @param max Maximum value
+ * @returns Clamped value
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+
+/**
+ * Format a numeric value based on the step size
+ * @param value Numeric value to format
+ * @param step Step size (determines decimal places)
+ * @returns Formatted string
+ */
+export declare function formatNumericValue(value: number, step: number): string;
+
+/**
+ * Get the current opacity value for a layer
+ * @param map MapLibre map instance
+ * @param layerId Layer ID
+ * @param layerType Layer type
+ * @returns Current opacity value (0-1)
+ */
+export declare function getLayerOpacity(map: Map_2, layerId: string, layerType: string): number;
+
+/**
+ * Get layer type from map
+ * @param map MapLibre map instance
+ * @param layerId Layer ID
+ * @returns Layer type or null if layer not found
+ */
+export declare function getLayerType(map: Map_2, layerId: string): string | null;
+
+/**
+ * Check if a layer type supports style editing
+ * @param layerType Layer type
+ * @returns True if the layer type supports style editing
+ */
+export declare function isStyleableLayerType(layerType: string): layerType is StyleableLayerType;
+
+/**
+ * LayerControl - A comprehensive layer control for MapLibre GL
+ * Provides visibility toggle, opacity control, and advanced style editing
+ */
+export declare class LayerControl implements IControl {
+    private map;
+    private container;
+    private button;
+    private panel;
+    private state;
+    private targetLayers;
+    private styleEditors;
+    private minPanelWidth;
+    private maxPanelWidth;
+    private widthSliderEl;
+    private widthThumbEl;
+    private widthValueEl;
+    private isWidthSliderActive;
+    private widthDragRectWidth;
+    private widthDragStartX;
+    private widthDragStartWidth;
+    private widthFrame;
+    constructor(options?: LayerControlOptions);
+    /**
+     * Called when the control is added to the map
+     */
+    onAdd(map: Map_2): HTMLElement;
+    /**
+     * Called when the control is removed from the map
+     */
+    onRemove(): void;
+    /**
+     * Auto-detect layers from the map and populate layerStates
+     */
+    private autoDetectLayers;
+    /**
+     * Generate a friendly display name from a layer ID
+     */
+    private generateFriendlyName;
+    /**
+     * Create the main container element
+     */
+    private createContainer;
+    /**
+     * Create the toggle button
+     */
+    private createToggleButton;
+    /**
+     * Create the panel element
+     */
+    private createPanel;
+    /**
+     * Create the panel header with title and width control
+     */
+    private createPanelHeader;
+    /**
+     * Create the width control slider
+     */
+    private createWidthControl;
+    /**
+     * Setup event listeners for width slider
+     */
+    private setupWidthSliderEvents;
+    /**
+     * Update panel width from pointer event
+     */
+    private updateWidthFromPointer;
+    /**
+     * Apply panel width (clamped to min/max)
+     */
+    private applyPanelWidth;
+    /**
+     * Update width display (value label and thumb position)
+     */
+    private updateWidthDisplay;
+    /**
+     * Setup main event listeners
+     */
+    private setupEventListeners;
+    /**
+     * Setup listeners for map layer changes
+     */
+    private setupLayerChangeListeners;
+    /**
+     * Toggle panel expanded/collapsed state
+     */
+    private toggle;
+    /**
+     * Expand the panel
+     */
+    private expand;
+    /**
+     * Collapse the panel
+     */
+    private collapse;
+    /**
+     * Build layer items (called initially and when layers change)
+     */
+    private buildLayerItems;
+    /**
+     * Add a single layer item to the panel
+     */
+    private addLayerItem;
+    /**
+     * Toggle layer visibility
+     */
+    private toggleLayerVisibility;
+    /**
+     * Change layer opacity
+     */
+    private changeLayerOpacity;
+    /**
+     * Check if a layer is a user-added layer (vs basemap layer)
+     */
+    private isUserAddedLayer;
+    /**
+     * Toggle visibility for all background layers (basemap layers)
+     */
+    private toggleBackgroundVisibility;
+    /**
+     * Change opacity for all background layers (basemap layers)
+     */
+    private changeBackgroundOpacity;
+    /**
+     * Create legend button for Background layer
+     */
+    private createBackgroundLegendButton;
+    /**
+     * Toggle background legend panel visibility
+     */
+    private toggleBackgroundLegend;
+    /**
+     * Open background legend panel
+     */
+    private openBackgroundLegend;
+    /**
+     * Close background legend panel
+     */
+    private closeBackgroundLegend;
+    /**
+     * Create the background legend panel with individual layer controls
+     */
+    private createBackgroundLegendPanel;
+    /**
+     * Check if a layer is currently rendered in the map viewport
+     */
+    private isLayerRendered;
+    /**
+     * Populate the background layer list with individual layers
+     */
+    private populateBackgroundLayerList;
+    /**
+     * Toggle visibility of an individual background layer
+     */
+    private toggleIndividualBackgroundLayer;
+    /**
+     * Set visibility for all background layers
+     */
+    private setAllBackgroundLayersVisibility;
+    /**
+     * Update the main Background checkbox based on individual layer states
+     */
+    private updateBackgroundCheckboxState;
+    /**
+     * Create style button for a layer
+     */
+    private createStyleButton;
+    /**
+     * Toggle style editor for a layer
+     */
+    private toggleStyleEditor;
+    /**
+     * Open style editor for a layer
+     */
+    private openStyleEditor;
+    /**
+     * Close style editor for a layer
+     */
+    private closeStyleEditor;
+    /**
+     * Create style editor UI
+     */
+    private createStyleEditor;
+    /**
+     * Add style controls based on layer type
+     */
+    private addStyleControlsForLayerType;
+    /**
+     * Add controls for fill layers
+     */
+    private addFillControls;
+    /**
+     * Add controls for line layers
+     */
+    private addLineControls;
+    /**
+     * Add controls for circle layers
+     */
+    private addCircleControls;
+    /**
+     * Add controls for raster layers
+     */
+    private addRasterControls;
+    /**
+     * Add controls for symbol layers
+     */
+    private addSymbolControls;
+    /**
+     * Create a color control
+     */
+    private createColorControl;
+    /**
+     * Create a slider control
+     */
+    private createSliderControl;
+    /**
+     * Reset layer style to original
+     */
+    private resetLayerStyle;
+    /**
+     * Update layer states from map (sync UI with map)
+     */
+    private updateLayerStatesFromMap;
+    /**
+     * Update UI elements for a specific layer
+     */
+    private updateUIForLayer;
+    /**
+     * Check for new layers and add them to the control
+     */
+    private checkForNewLayers;
+}
+
+/**
+ * Options for LayerControl constructor
+ */
+export declare interface LayerControlOptions {
+    /** Whether the control starts collapsed (default: true) */
+    collapsed?: boolean;
+    /** Initial layer states (keyed by layer ID) */
+    layerStates?: LayerStates;
+    /** Array of layer IDs to control (if not specified, controls all layers) */
+    layers?: string[];
+    /** Initial panel width in pixels (default: 320) */
+    panelWidth?: number;
+    /** Minimum panel width in pixels (default: 240) */
+    panelMinWidth?: number;
+    /** Maximum panel width in pixels (default: 420) */
+    panelMaxWidth?: number;
+}
+
+/**
+ * State for a single layer
+ */
+export declare interface LayerState {
+    /** Whether the layer is visible */
+    visible: boolean;
+    /** Layer opacity (0-1) */
+    opacity: number;
+    /** Display name for the layer */
+    name: string;
+}
+
+/**
+ * Collection of layer states keyed by layer ID
+ */
+export declare interface LayerStates {
+    [layerId: string]: LayerState;
+}
+
+/**
+ * Normalize a color value to hex format
+ * Handles hex strings, RGB strings, and RGB arrays
+ * @param value Color value in various formats
+ * @returns Normalized hex color string (always 6 digits)
+ */
+export declare function normalizeColor(value: any): string;
+
+/**
+ * Paint properties for different layer types
+ */
+export declare interface PaintProperty {
+    /** Property name (e.g., 'fill-color') */
+    name: string;
+    /** Current value */
+    value: any;
+}
+
+/**
+ * Convert RGB values to hex color string
+ * @param r Red component (0-255)
+ * @param g Green component (0-255)
+ * @param b Blue component (0-255)
+ * @returns Hex color string (e.g., '#ff0000')
+ */
+export declare function rgbToHex(r: number, g: number, b: number): string;
+
+/**
+ * Set the opacity for a layer
+ * @param map MapLibre map instance
+ * @param layerId Layer ID
+ * @param layerType Layer type
+ * @param opacity Opacity value (0-1)
+ */
+export declare function setLayerOpacity(map: Map_2, layerId: string, layerType: string, opacity: number): void;
+
+/**
+ * MapLibre layer types that support styling
+ */
+export declare type StyleableLayerType = 'fill' | 'line' | 'circle' | 'symbol' | 'raster';
+
+/**
+ * Control for a paint property (color picker or slider)
+ */
+export declare interface StyleControlConfig {
+    /** Label to display */
+    label: string;
+    /** Paint property name */
+    property: string;
+    /** Control type */
+    type: 'color' | 'slider';
+    /** For sliders: minimum value */
+    min?: number;
+    /** For sliders: maximum value */
+    max?: number;
+    /** For sliders: step increment */
+    step?: number;
+    /** Default value if property is not set */
+    defaultValue?: any;
+}
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maplibre-gl-layer-control",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A comprehensive layer control for MapLibre GL with advanced styling capabilities",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -89,5 +89,8 @@
     "vite": "^6.0.0",
     "vite-plugin-dts": "^4.3.0",
     "vitest": "^2.1.0"
+  },
+  "dependencies": {
+    "maplibre-gl-layer-control": "^0.2.0"
   }
 }