Dynamic Legend for ARCGIS layers

project/standard/templates/configs/pluginsConfig.json

@@ -139,13 +139,35 @@
       "children": ["Permalink"],
       "autoEnableChildren": ["Permalink"]
     },
+    {
+      "name": "DynamicLegend",
+      "glyph": "align-left",
+      "title": "plugins.DynamicLegend.title",
+      "description": "plugins.DynamicLegend.description",
+      "dependencies": ["SidebarMenu"],
+      "defaultConfig": {
+          "isFloating": false,
+          "flatLegend": false
+      }
+    },
     {
       "name": "Permalink",
       "glyph": "link",
       "title": "plugins.Permalink.title",
       "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/components/TOC/fragments/settings/Display.jsx

@@ -30,6 +30,7 @@ import ThreeDTilesSettings from './ThreeDTilesSettings';
 import ModelTransformation from './ModelTransformation';
 import StyleBasedWMSJsonLegend from '../../../../plugins/TOC/components/StyleBasedWMSJsonLegend';
 import VectorLegend from '../../../../plugins/TOC/components/VectorLegend';
+import { isMapServerUrl } from '../../../../utils/ArcGISUtils';
 
 export default class extends React.Component {
     static propTypes = {
@@ -401,6 +402,30 @@ export default class extends React.Component {
                         </Col>}
                     </div>
                 </Row>}
+                {this.props.element.type === "arcgis" && isMapServerUrl(this.props.element.url) &&
+                <Row>
+                    <div className={"legend-options"}>
+                        <Col xs={12} className={"legend-label"}>
+                            <label key="legend-options-title" className="control-label"><Message msgId="layerProperties.legendOptions.title" /></label>
+                        </Col>
+                        <Col xs={12} className="first-selectize">
+                            <FormGroup>
+                                {!hideDynamicLegend && <Checkbox
+                                    data-qa="display-dynamic-legend-filter"
+                                    value="enableDynamicLegend"
+                                    key="enableDynamicLegend"
+                                    disabled={enableInteractiveLegend}
+                                    onChange={(e) => {
+                                        this.props.onChange("enableDynamicLegend", e.target.checked);
+                                    }}
+                                    checked={enableDynamicLegend || enableInteractiveLegend} >
+                                    <Message msgId="layerProperties.enableDynamicLegend.label"/>
+                                &nbsp;<InfoPopover text={<Message msgId="layerProperties.enableDynamicLegend.info" />} />
+                                </Checkbox>}
+                            </FormGroup>
+                        </Col>
+                    </div>
+                </Row>}
             </Grid>
         );
     }

web/client/components/TOC/fragments/settings/__tests__/Display-test.jsx

@@ -531,4 +531,45 @@ describe('test Layer Properties Display module component', () => {
         expect(spy.calls[0].arguments[0]).toEqual("enableDynamicLegend");
         expect(spy.calls[0].arguments[1]).toEqual(true);
     });
+
+    it('tests arcgis Layer Properties Legend component', () => {
+        const l = {
+            name: 'arcgisLayer',
+            title: 'ArcGIS Layer',
+            visibility: true,
+            storeIndex: 9,
+            type: 'arcgis',
+            url: 'https://sampleserver.arcgisonline.com/arcgis/rest/services'
+        };
+        const settings = {
+            options: {
+                opacity: 1
+            }
+        };
+        const handlers = {
+            onChange() {}
+        };
+        let spy = expect.spyOn(handlers, "onChange");
+
+        const comp = ReactDOM.render(
+            <Display element={l} settings={settings} onChange={handlers.onChange}/>,
+            document.getElementById("container")
+        );
+
+        expect(comp).toBeTruthy();
+
+        const legendOptions = document.querySelector('.legend-options');
+        expect(legendOptions).toBeTruthy();
+
+        const dynamicLegendCheckbox = document.querySelector(".legend-options input[data-qa='display-dynamic-legend-filter']");
+        expect(dynamicLegendCheckbox).toBeTruthy();
+        expect(dynamicLegendCheckbox.checked).toBeFalsy();
+
+        dynamicLegendCheckbox.checked = true;
+        ReactTestUtils.Simulate.change(dynamicLegendCheckbox);
+
+        expect(spy).toHaveBeenCalled();
+        expect(spy.calls[0].arguments[0]).toEqual("enableDynamicLegend");
+        expect(spy.calls[0].arguments[1]).toEqual(true);
+    });
 });

web/client/configs/localConfig.json

@@ -413,12 +413,42 @@
     ],
     "desktop": [
       "Details",
+      {
+        "name": "DynamicLegend",
+        "cfg": {
+          "isFloating": false,
+          "flatLegend": false
+        }
+      },
       {
         "name": "BrandNavbar",
         "cfg": {
           "containerPosition": "header"
         }
       },
+      {
+        "name": "LayersSelection",
+        "cfg": {
+          "highlightOptions": {
+            "color": "#3388ff",
+            "dashArray": "",
+            "fillColor": "#3388ff",
+            "fillOpacity": 0.2,
+            "radius": 4,
+            "weight": 4
+          },
+          "queryOptions": {
+            "maxCount": -1
+          },
+          "selectTools": [
+            "Point",
+            "Line",
+            "Circle",
+            "Rectangle",
+            "Polygon"
+          ]
+        }
+      },
       { "name": "SecurityPopup" },
       {
         "name": "Map",

web/client/configs/pluginsConfig.json

@@ -139,12 +139,34 @@
       "children": ["Permalink"],
       "autoEnableChildren": ["Permalink"]
     },
+    {
+      "name": "DynamicLegend",
+      "glyph": "align-left",
+      "title": "plugins.DynamicLegend.title",
+      "description": "plugins.DynamicLegend.description",
+      "dependencies": ["SidebarMenu"],
+      "defaultConfig": {
+          "isFloating": false,
+          "flatLegend": false
+      }
+    },
     {
       "name": "Permalink",
       "glyph": "link",
       "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/configs/simple.json

@@ -76,6 +76,13 @@
       }
     ],
     "desktop": [
+      {
+        "name": "DynamicLegend",
+        "cfg": {
+          "isFloating": false,
+          "flatLegend": false
+        }
+      },
       {
         "name": "Map",
         "cfg": {
@@ -89,6 +96,29 @@
           "zoomControl": false
         }
       },
+      {
+        "name": "LayersSelection",
+        "cfg": {
+          "highlightOptions": {
+            "color": "#3388ff",
+            "dashArray": "",
+            "fillColor": "#3388ff",
+            "fillOpacity": 0.2,
+            "radius": 4,
+            "weight": 4
+          },
+          "queryOptions": {
+            "maxCount": -1
+          },
+          "selectTools": [
+            "Point",
+            "Line",
+            "Circle",
+            "Rectangle",
+            "Polygon"
+          ]
+        }
+      },
       {
         "name": "Help"
       },

web/client/plugins/LayersSelection.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { get } from 'lodash';
+import { Glyphicon } from 'react-bootstrap';
+
+import { createPlugin } from '../utils/PluginsUtils';
+import { layersSelector } from '../selectors/layers';
+import { updateNode, addLayer, changeLayerProperties } from '../actions/layers';
+import { zoomToExtent } from '../actions/map';
+import controls from '../reducers/controls';
+import { toggleControl } from '../actions/controls';
+import Message from '../components/I18N/Message';
+
+import SelectComponent from './layersSelection/components/LayersSelection';
+import epics from './layersSelection/epics/layersSelection';
+import select from './layersSelection/reducers/layersSelection';
+import { storeConfiguration, cleanSelection, addOrUpdateSelection } from './layersSelection/actions/layersSelection';
+import { getSelectSelections, getSelectQueryMaxFeatureCount } from './layersSelection/selectors/layersSelection';
+
+/**
+ * Select plugin that enables layer feature selection in the map.
+ * It connects Redux state and actions to the SelectComponent UI.
+ * Uses selectors to retrieve visibility, layers, selection results, and feature count.
+ *
+ * @function
+ * @returns {Object} A plugin definition object used by the application to render and control the Select tool.
+ */
+export default createPlugin('Select', {
+    component: connect(
+        createSelector([
+            (state) => get(state, 'controls.select.enabled'),
+            layersSelector,
+            getSelectSelections,
+            getSelectQueryMaxFeatureCount
+        ], (isVisible, layers, selections, maxFeatureCount) => ({
+            isVisible,
+            layers,
+            selections,
+            maxFeatureCount
+        })),
+        {
+            onClose: toggleControl.bind(null, 'select', null),
+            onUpdateNode: updateNode,
+            storeConfiguration,
+            cleanSelection,
+            addOrUpdateSelection,
+            zoomToExtent,
+            addLayer,
+            changeLayerProperties
+        }
+    )(SelectComponent),
+    options: {
+        disablePluginIf: "{state('router') && (state('router').endsWith('new') || state('router').includes('newgeostory') || state('router').endsWith('dashboard'))}"
+    },
+    reducers: {
+        ...controls,
+        select
+    },
+    epics: epics,
+    containers: {
+        BurgerMenu: {
+            name: 'select',
+            position: 1000,
+            priority: 2,
+            doNotHide: true,
+            text: <Message msgId="layersSelection.title"/>,
+            tooltip: <Message msgId="layersSelection.tooltip"/>,
+            icon: <Glyphicon glyph="hand-down"/>,
+            action: toggleControl.bind(null, 'select', null),
+            toggle: true
+        },
+        SidebarMenu: {
+            name: 'select',
+            position: 1000,
+            priority: 1,
+            doNotHide: true,
+            text: <Message msgId="layersSelection.title"/>,
+            tooltip: <Message msgId="layersSelection.tooltip"/>,
+            icon: <Glyphicon glyph="hand-down"/>,
+            action: toggleControl.bind(null, 'select', null),
+            toggle: true
+        },
+        Toolbar: {
+            name: 'select',
+            alwaysVisible: true,
+            position: 2,
+            priority: 0,
+            doNotHide: true,
+            tooltip: <Message msgId="layersSelection.title"/>,
+            icon: <Glyphicon glyph="hand-down"/>,
+            action: toggleControl.bind(null, 'select', null),
+            toggle: true
+        }
+    }
+});