@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

<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:

License

This project is licensed under the MIT License.