Layer Selection Plugin on ArcGIS, WFS & WMS layers

project/standard/templates/configs/pluginsConfig.json

@@ -146,6 +146,17 @@
       "description": "plugins.Permalink.description",
       "denyUserSelection": true
     },
+    {
+      "name": "LayersSelection",
+      "glyph": "hand-down",
+      "title": "plugins.LayersSelection.title",
+      "description": "plugins.LayersSelection.description",
+      "dependencies": [
+        "Toolbar",
+        "BurgerMenu",
+        "SidebarMenu"
+      ]
+    },
     {
       "name": "BackgroundSelector",
       "title": "plugins.BackgroundSelector.title",

web/client/configs/pluginsConfig.json

@@ -145,6 +145,17 @@
       "title": "plugins.Permalink.title",
       "description": "plugins.Permalink.description"
     },
+    {
+      "name": "LayersSelection",
+      "glyph": "hand-down",
+      "title": "plugins.LayersSelection.title",
+      "description": "plugins.LayersSelection.description",
+      "dependencies": [
+        "Toolbar",
+        "BurgerMenu",
+        "SidebarMenu"
+      ]
+    },
     {
       "name": "BackgroundSelector",
       "title": "plugins.BackgroundSelector.title",

web/client/plugins/TOC/components/LayersTree.jsx

@@ -68,6 +68,7 @@ const loopGroupCondition = (groupNode, condition) => {
  * @prop {string} noFilteredResultsMsgId message id for no result on filter
  * @prop {object} config optional configuration available for the nodes
  * @prop {boolean} config.sortable activate the possibility to sort nodes
+ * @prop {component} treeHeader display a header on top of the layer tree
  */
 const LayersTree = ({
     tree,
@@ -90,7 +91,8 @@ const LayersTree = ({
     nodeToolItems,
     nodeContentItems,
     singleDefaultGroup = isSingleDefaultGroup(tree),
-    theme
+    theme,
+    treeHeader
 }) => {
 
     const containerNode = useRef();
@@ -151,6 +153,7 @@ const LayersTree = ({
                     event.preventDefault();
                 }}
             >
+                {treeHeader ?? null}
                 {(root || []).map((node, index) => {
                     return (
                         <DefaultLayerOrGroup

web/client/plugins/TOC/components/TOC.jsx

@@ -57,6 +57,7 @@ import {
  * @prop {boolean} config.layerOptions.hideLegend hide the legend of the layer
  * @prop {object} config.layerOptions.legendOptions additional options for WMS legend
  * @prop {boolean} config.layerOptions.hideFilter hide the filter button in the layer nodes
+ * @prop {component} treeHeader display a header on top of the layer tree
  */
 export function ControlledTOC({
     tree,
@@ -77,7 +78,8 @@ export function ControlledTOC({
     nodeToolItems,
     nodeContentItems,
     singleDefaultGroup,
-    theme
+    theme,
+    treeHeader
 }) {
     return (
         <LayersTree
@@ -104,6 +106,7 @@ export function ControlledTOC({
             nodeToolItems={nodeToolItems}
             nodeContentItems={nodeContentItems}
             singleDefaultGroup={singleDefaultGroup}
+            treeHeader={treeHeader}
         />
     );
 }
@@ -140,6 +143,7 @@ export function ControlledTOC({
  * @prop {boolean} config.layerOptions.hideLegend hide the legend of the layer
  * @prop {object} config.layerOptions.legendOptions additional options for WMS legend
  * @prop {boolean} config.layerOptions.hideFilter hide the filter button in the layer nodes
+ * @prop {component} treeHeader display a header on top of the layer tree
  */
 function TOC({
     map = { layers: [], groups: [] },
@@ -154,7 +158,8 @@ function TOC({
     singleDefaultGroup,
     nodeItems,
     theme,
-    filterText
+    filterText,
+    treeHeader
 }) {
     const { layers } = splitMapAndLayers(map) || {};
     const tree = denormalizeGroups(layers.flat || [], layers.groups || []).groups;
@@ -218,6 +223,7 @@ function TOC({
             nodeToolItems={nodeToolItems}
             nodeContentItems={nodeContentItems}
             singleDefaultGroup={singleDefaultGroup}
+            treeHeader={treeHeader}
         />
     );
 }

web/client/plugins/layersSelection/actions/layersSelection.js

@@ -0,0 +1,44 @@
+export const SELECT_CLEAN_SELECTION = "SELECT:CLEAN_SELECTION";
+export const SELECT_STORE_CFG = "SELECT:STORE_CFG";
+export const ADD_OR_UPDATE_SELECTION = "SELECT:ADD_OR_UPDATE_SELECTION";
+
+/**
+ * Action creator to clean the current selection based on geometry type.
+ *
+ * @param {string} geomType - The type of geometry to clean (e.g., "Point", "Polygon").
+ * @returns {{ type: string, geomType: string }} The action object.
+ */
+export function cleanSelection(geomType) {
+    return {
+        type: SELECT_CLEAN_SELECTION,
+        geomType
+    };
+}
+
+/**
+ * Action creator to store configuration settings related to selection.
+ *
+ * @param {Object} cfg - Configuration object to store.
+ * @returns {{ type: string, cfg: Object }} The action object.
+ */
+export function storeConfiguration(cfg) {
+    return {
+        type: SELECT_STORE_CFG,
+        cfg
+    };
+}
+
+/**
+ * Action creator to add or update a layer selection with GeoJSON data.
+ *
+ * @param {string} layer - The name or ID of the layer.
+ * @param {Object} geoJsonData - The GeoJSON data representing the selection.
+ * @returns {{ type: string, layer: string, geoJsonData: Object }} The action object.
+ */
+export function addOrUpdateSelection(layer, geoJsonData) {
+    return {
+        type: ADD_OR_UPDATE_SELECTION,
+        layer,
+        geoJsonData
+    };
+}