npm package: @icgcat/layer-tree
Description: A Svelte Layer Tree component to manage visually multiple layers
Author: Institut Cartogràfic i Geològic de Catalunya
Latest version: 0.0.40

<div style="text-align:center">
<p>
  <img src="https://eines.icgc.cat/recursos/logos/icgc_logo_color.png"  alt="ICGC Logo" width="250px">
</p>
</div>

<div style="text-align:center">

  [![License](https://img.shields.io/badge/License-BSD_3--Clause-blue.svg?style=flat)](LICENSE.txt) 
  [![Version](https://img.shields.io/npm/v/@icgcat/layer-tree?style=flat)](https://www.npmjs.com/package/@icgcat/layer-tree) 
  [![LinkedIn](https://img.shields.io/badge/LinkedIn-icgcat-blue?style=flat)](https://www.linkedin.com/company/icgcat) 
  <img src="https://eines.icgc.cat/recursos//images/JS-logo.svg" width="20px"/>
</div>

# @icgcat/layer-tree

This component is an implementation of an interactive WMS layer management system using toggles to activate and deactivate layers and sublayers. It is useful for applications that need to manage layer hierarchies, such as map viewers.

## Features

- **Support for nested layers:** Each main layer can have sublayers that can also be managed with toggles.
- **Highly customizable:** Supports configurations for colors, fieldset border radius, and colors for parent and child layer toggles.
- **Interaction with `store`:** Uses a Svelte `store` to maintain the visibility state of sublayers.
- **Callbacks:** Allows a custom `onSelect` function to manage logic when layers are toggled.

## Configurable Properties

This component supports the following configurable properties:

| Property                | Description                                                              | Default Value     |
|-------------------------|--------------------------------------------------------------------------|-------------------|
| `checked`               | Initial state of the toggle (true/false).                               | `false`           |
| `onSelect`              | Function executed when a toggle changes state.                          | `null`            |
| `dataType`              | Type of data managed (currently only `WMS`).                            | `"WMS"`           |
| `dataFileArray`         | Array of objects with information about layers and sublayers.           | `[]`              |
| `fontColor`             | Font color of the labels.                                               | `"black"`         |
| `fieldsetBorderColor`   | Border color of the fieldset.                                           | `""`              |
| `fieldsetBorderRadius`  | Corner radius of the fieldset.                                          | `"5px"`           |
| `parentToggleColor`     | Color of the toggle for main layers.                                    | `"green"`         |
| `childrenToggleColor`   | Color of the toggle for sublayers.                                      | `"red"`           |

## Usage Example

```svelte
<script>
  import { LayerTree } from "@icgcat/layer-tree";

  const dataFileArray = [
    {
      title: "Main Layer",
      layers: [
        {
          title: "Sublayer 1",
          state: true,
          layers: [
            { title: "Sublayer 1.1", state: false },
            { title: "Sublayer 1.2", state: true }
          ]
        },
        {
          title: "Sublayer 2",
          state: false
        }
      ]
    }
  ];

  function handleSelect(state, layer) {
    console.log("Toggle changed:", state, layer);
  }
</script>

<LayerTree
  dataFileArray={dataFileArray}
  fontColor="blue"
  fieldsetBorderColor="gray"
  fieldsetBorderRadius="10px"
  parentToggleColor="green"
  childrenToggleColor="orange"
  onSelect={handleSelect}
/>
```
## Dependencies
This component uses:

- `Svelte`: Main framework.
- `@icgcat/ui`: Component library for the toggle.
- `Svelte Store`: To manage the global visibility state of sublayers.

## Customization
### Styling
The component supports styling via properties like `fontColor`, `fieldsetBorderColor`, and `fieldsetBorderRadius`. You can also change the colors of toggles for main and sublayers via `parentToggleColor` and `childrenToggleColor`.

### Interactivity
The `onSelect` function can be used to execute custom code when toggles change state, providing flexibility to integrate this component into more complex applications.

## Developed by:

 <a href="https://www.icgc.cat/" target="_blank"><img src="https://eines.icgc.cat/recursos/logos/ICGC_color_norma.svg"  alt="ICGC Logo" width="150"></img></a>      

  <a href="https://web.gencat.cat/" target="_blank"><img src="https://eines.icgc.cat/recursos/logos/gencat_logo_color.png"  alt="Gencat Logo" width="190"></img></a>


## License
This project is licensed under the MIT License.