Floating Dynamic Legend Plugin for ArcGIS & WMS layers

project/standard/templates/configs/pluginsConfig.json

@@ -139,6 +139,17 @@
       "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",

web/client/configs/pluginsConfig.json

@@ -139,6 +139,17 @@
       "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",

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

@@ -17,9 +17,11 @@ import { getLayerIds } from '../../../utils/ArcGISUtils';
 /**
  * ArcGISLegend renders legend from a MapServer or ImageServer service
  * @prop {object} node layer node options
+ * @prop {function} onChange return the changes of a specific node
  */
 function ArcGISLegend({
-    node = {}
+    node = {},
+    onChange = () => {}
 }) {
     const [legendData, setLegendData] = useState(null);
     const [error, setError] = useState(false);
@@ -31,8 +33,15 @@ function ArcGISLegend({
                     f: 'json'
                 }
             })
-                .then(({ data }) => setLegendData(data))
-                .catch(() => setError(true));
+                .then(({ data }) => {
+                    const legendEmpty = data.layers.every(layer => layer.legend.length === 0);
+                    onChange({ legendEmpty });
+                    setLegendData(data);
+                })
+                .catch(() => {
+                    onChange({ legendEmpty: true });
+                    setError(true);
+                });
         }
     }, [legendUrl]);
 

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

@@ -96,6 +96,7 @@ const NodeLegend = ({
                 <li>
                     {visible ? <ArcGISLegend
                         node={node}
+                        onChange={onChange}
                     /> : null}
                 </li>
             </>

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

@@ -90,7 +90,8 @@ const LayersTree = ({
     nodeToolItems,
     nodeContentItems,
     singleDefaultGroup = isSingleDefaultGroup(tree),
-    theme
+    theme,
+    getNodeStyle = () => ({})
 }) => {
 
     const containerNode = useRef();
@@ -117,10 +118,6 @@ const LayersTree = ({
         return (<Layer />);
     };
 
-    const getNodeStyle = () => {
-        return {};
-    };
-
     const getNodeClassName = (currentNode) => {
         const selected = selectedNodes.find((selectedNode) => currentNode.id === selectedNode.id);
         const contextMenuHighlight = contextMenu?.id === currentNode.id;

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

@@ -35,6 +35,7 @@ import { getWMSLegendConfig, LEGEND_FORMAT } from '../../../utils/LegendUtils';
  * @prop {string} language current language code
  * @prop {number} legendWidth width of the legend symbols
  * @prop {number} legendHeight height of the legend symbols
+ * @prop {function} onUpdateNode return the changes of a specific node
  */
 class Legend extends React.Component {
     static propTypes = {
@@ -49,15 +50,17 @@ class Legend extends React.Component {
         language: PropTypes.string,
         projection: PropTypes.string,
         mapSize: PropTypes.object,
-        bbox: PropTypes.object
+        bbox: PropTypes.object,
+        onChange: PropTypes.func
     };
 
     static defaultProps = {
         legendHeight: 12,
         legendWidth: 12,
         legendOptions: "forceLabels:on",
         style: {maxWidth: "100%"},
-        scaleDependent: true
+        scaleDependent: true,
+        onChange: () => {}
     };
     state = {
         error: false
@@ -132,9 +135,11 @@ class Legend extends React.Component {
     validateImg = (img) => {
         // GeoServer response is a 1x2 px size when legend is not available.
         // In this case we need to show the "Legend Not available" message
-        if (img.height <= 1 && img.width <= 2) {
+        const imgError = img.height <= 1 && img.width <= 2;
+        if (imgError) {
             this.onImgError();
         }
+        this.props.onChange({ legendEmpty: imgError });
     }
 }
 

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

@@ -76,7 +76,6 @@ class StyleBasedWMSJsonLegend extends React.Component {
 
         const currEnableDynamicLegend = this.props?.layer?.enableDynamicLegend;
         const prevEnableDynamicLegend = prevProps?.layer?.enableDynamicLegend;
-
         const [prevFilter, currFilter] = [prevProps?.layer, this.props?.layer]
             .map(_layer => getLayerFilterByLegendFormat(_layer, LEGEND_FORMAT.JSON));
 
@@ -104,8 +103,11 @@ class StyleBasedWMSJsonLegend extends React.Component {
         }
         this.setState({ loading: true });
         getJsonWMSLegend(jsonLegendUrl).then(data => {
+            const legendEmpty = data.length === 0 || data[0].rules.length === 0;
+            this.props.onChange({ legendEmpty: legendEmpty });
             this.setState({ jsonLegend: data[0], loading: false });
         }).catch(() => {
+            this.props.onChange({ legendEmpty: true });
             this.setState({ error: true, loading: false });
         });
     }

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

@@ -54,6 +54,7 @@ import {
  * @prop {object} config.groupOptions.tooltipOptions options for group title tooltip
  * @prop {object} config.layerOptions specific options for layer nodes
  * @prop {object} config.layerOptions.tooltipOptions options for layer title tooltip
+ * @prop {boolean} config.layerOptions.enableDynamicLegend make the legend dynamic
  * @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
@@ -77,7 +78,8 @@ export function ControlledTOC({
     nodeToolItems,
     nodeContentItems,
     singleDefaultGroup,
-    theme
+    theme,
+    getNodeStyle
 }) {
     return (
         <LayersTree
@@ -104,6 +106,7 @@ export function ControlledTOC({
             nodeToolItems={nodeToolItems}
             nodeContentItems={nodeContentItems}
             singleDefaultGroup={singleDefaultGroup}
+            getNodeStyle={getNodeStyle}
         />
     );
 }
@@ -137,6 +140,7 @@ export function ControlledTOC({
  * @prop {object} config.groupOptions.tooltipOptions options for group title tooltip
  * @prop {object} config.layerOptions specific options for layer nodes
  * @prop {object} config.layerOptions.tooltipOptions options for layer title tooltip
+ * @prop {boolean} config.layerOptions.enableDynamicLegend make the legend dynamic
  * @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

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

@@ -97,6 +97,7 @@ class WMSLegend extends React.Component {
                         }
                         legendOptions={this.props.WMSLegendOptions}
                         {...this.getLegendProps()}
+                        onChange={this.props.onChange}
                     />
                 </div>
             );