maplibre-gl-layer-control 0.3.0 → 0.5.0

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,6 +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
 
@@ -173,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: