WMS legend is taking in account the current scale of the map (#1669)

geosolutions-it · Apr 3, 2017 · 0987dd7 · 0987dd7
1 parent 7ac597b
commit 0987dd7
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 12 deletions.
diff --git a/web/client/components/TOC/DefaultLayer.jsx b/web/client/components/TOC/DefaultLayer.jsx
@@ -48,7 +48,9 @@ var DefaultLayer = React.createClass({
         settingsOptions: React.PropTypes.object,
         visibilityCheckType: React.PropTypes.string,
         includeDeleteButtonInSettings: React.PropTypes.bool,
-        groups: React.PropTypes.array
+        groups: React.PropTypes.array,
+        currentZoomLvl: React.PropTypes.number,
+        scales: React.PropTypes.array
     },
     getDefaultProps() {
         return {
@@ -135,7 +137,7 @@ var DefaultLayer = React.createClass({
         }
         return (<div position="collapsible" className="collapsible-toc">
              <div style={{minHeight: "35px"}}>{tools}</div>
-             <div><WMSLegend node={this.props.node}/></div>
+             <div><WMSLegend node={this.props.node} currentZoomLvl={this.props.currentZoomLvl} scales={this.props.scales}/></div>
         </div>);
     },
     renderTools() {

diff --git a/web/client/components/TOC/fragments/WMSLegend.jsx b/web/client/components/TOC/fragments/WMSLegend.jsx
@@ -12,7 +12,9 @@ var Legend = require('./legend/Legend');
 var WMSLegend = React.createClass({
     propTypes: {
         node: React.PropTypes.object,
-        showOnlyIfVisible: React.PropTypes.bool
+        showOnlyIfVisible: React.PropTypes.bool,
+        currentZoomLvl: React.PropTypes.number,
+        scales: React.PropTypes.array
     },
     getDefaultProps() {
         return {
@@ -22,7 +24,7 @@ var WMSLegend = React.createClass({
     render() {
         let node = this.props.node || {};
         if (this.canShow(node) && node.type === "wms" && node.group !== "background") {
-            return <div style={{marginLeft: "15px"}}><Legend layer={node}/></div>;
+            return <div style={{marginLeft: "15px"}}><Legend layer={node} currentZoomLvl={this.props.currentZoomLvl} scales={this.props.scales}/></div>;
         }
         return null;
     },

diff --git a/web/client/components/TOC/fragments/legend/Legend.jsx b/web/client/components/TOC/fragments/legend/Legend.jsx
@@ -11,7 +11,9 @@ const Legend = React.createClass({
         layer: React.PropTypes.object,
         legendHeigth: React.PropTypes.number,
         legendWidth: React.PropTypes.number,
-        legendOptions: React.PropTypes.string
+        legendOptions: React.PropTypes.string,
+        currentZoomLvl: React.PropTypes.number,
+        scales: React.PropTypes.array
     },
     getDefaultProps() {
         return {
@@ -39,10 +41,10 @@ const Legend = React.createClass({
                version: layer.version || "1.3.0",
                SLD_VERSION: "1.1.0",
                LEGEND_OPTIONS: this.props.legendOptions
-               // SCALE TODO
            }, layer.legendParams || {},
            layer.params || {},
-           layer.params && layer.params.SLD_BODY ? {SLD_BODY: layer.params.SLD_BODY} : {});
+           layer.params && layer.params.SLD_BODY ? {SLD_BODY: layer.params.SLD_BODY} : {},
+           this.props.scales && this.props.currentZoomLvl ? {SCALE: Math.round(this.props.scales[this.props.currentZoomLvl])} : {});
            SecurityUtils.addAuthenticationParameter(url, query);
 
            let legendUrl = urlUtil.format({

diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx
@@ -15,8 +15,10 @@ const {changeLayerProperties, changeGroupProperties, toggleNode,
 const {getLayerCapabilities} = require('../actions/layerCapabilities');
 const {zoomToExtent} = require('../actions/map');
 const {groupsSelector} = require('../selectors/layers');
+const {mapSelector} = require('../selectors/map');
 
 const LayersUtils = require('../utils/LayersUtils');
+const mapUtils = require('../utils/MapUtils');
 
 const Message = require('./locale/Message');
 const assign = require('object-assign');
@@ -127,12 +129,18 @@ const tocSelector = createSelector(
         (state) => state.controls && state.controls.toolbar && state.controls.toolbar.active === 'toc',
         groupsSelector,
         (state) => state.layers && state.layers.settings || {expanded: false, options: {opacity: 1}},
-        (state) => state.controls && state.controls.queryPanel && state.controls.queryPanel.enabled || false
-    ], (enabled, groups, settings, querypanelEnabled) => ({
+        (state) => state.controls && state.controls.queryPanel && state.controls.queryPanel.enabled || false,
+        mapSelector
+    ], (enabled, groups, settings, querypanelEnabled, map) => ({
         enabled,
         groups,
         settings,
-        querypanelEnabled
+        querypanelEnabled,
+        currentZoomLvl: map && map.zoom,
+        scales: mapUtils.getScales(
+            map && map.projection || 'EPSG:3857',
+            map && map.mapOptions && map.mapOptions.view && map.mapOptions.view.DPI || null
+        )
     })
 );
 
@@ -168,7 +176,9 @@ const LayerTree = React.createClass({
         activateQueryTool: React.PropTypes.bool,
         activateSettingsTool: React.PropTypes.bool,
         visibilityCheckType: React.PropTypes.string,
-        settingsOptions: React.PropTypes.object
+        settingsOptions: React.PropTypes.object,
+        currentZoomLvl: React.PropTypes.number,
+        scales: React.PropTypes.array
     },
     getDefaultProps() {
         return {
@@ -230,7 +240,9 @@ const LayerTree = React.createClass({
                             opacityText={<Message msgId="opacity"/>}
                             saveText={<Message msgId="save"/>}
                             closeText={<Message msgId="close"/>}
-                            groups={this.props.groups}/>);
+                            groups={this.props.groups}
+                            currentZoomLvl={this.props.currentZoomLvl}
+                            scales={this.props.scales}/>);
         return (
             <div>
                 <TOC onSort={this.props.onSort} filter={this.getNoBackgroundLayers}