geosolutions-it#9006 wms legend from mapserver not available in 3d mo…

…de because of wrong empty scale parameter

web/client/components/TOC/fragments/legend/Legend.jsx

@@ -51,6 +51,14 @@ class Legend extends React.Component {
  onImgError = () => {
  this.setState(() => ({error: true}));
  }
+ getScale = (props) => {
+ if (props.scales && props.currentZoomLvl !== undefined && props.scaleDependent) {
+ const zoom = Math.round(props.currentZoomLvl);
+ const scale = props.scales[zoom] ?? props.scales[props.scales.length - 1];
+ return Math.round(scale);
+ }
+ return null;
+ };
  getUrl = (props, urlIdx) => {
  if (props.layer && props.layer.type === "wms" && props.layer.url) {
  const layer = props.layer;
@@ -63,6 +71,7 @@ class Legend extends React.Component {
  let urlObj = urlUtil.parse(url);
 
  const cleanParams = clearNilValuesForParams(layer.params);
+ const scale = this.getScale(props);
  let query = assign({}, {
  service: "WMS",
  request: "GetLegendGraphic",
@@ -78,7 +87,7 @@ class Legend extends React.Component {
  props.language && layer.localizedLayerStyles ? {LANGUAGE: props.language} : {},
  addAuthenticationToSLD(cleanParams || {}, props.layer),
  cleanParams && cleanParams.SLD_BODY ? {SLD_BODY: cleanParams.SLD_BODY} : {},
- props.scales && props.currentZoomLvl && props.scaleDependent ? {SCALE: Math.round(props.scales[props.currentZoomLvl])} : {});
+ scale !== null ? { SCALE: scale } : {});
  addAuthenticationParameter(url, query);
 
  return urlUtil.format({

web/client/components/TOC/fragments/legend/__tests__/Legend-test.jsx

@@ -10,10 +10,11 @@ import expect from 'expect';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Rx from 'rxjs';
+import url from 'url';
 
 import Legend from '../Legend';
 
-const TestUtils = require('react-dom/test-utils');
+import * as TestUtils from 'react-dom/test-utils';
 
 describe("test the Layer legend", () => {
  beforeEach((done) => {
@@ -166,4 +167,46 @@ describe("test the Layer legend", () => {
  expect(legendComponent.props.legendHeight).toBe(30);
  expect(legendComponent.props.scaleDependent).toBe(scaleDependentCustom);
  });
+ it('should apply the scale correctly even for zoom with decimal values', () => {
+ const layer = {
+ "type": "wms",
+ "url": "http://test2/reflector/open/service",
+ "visibility": true,
+ "title": "test layer 3 (no group)",
+ "name": "layer3",
+ "format": "image/png"
+ };
+ ReactDOM.render(
+ <Legend
+ layer={layer}
+ currentZoomLvl={2.3456}
+ scales={[10000, 5000, 2000, 1000]}
+ />,
+ document.getElementById("container"));
+ const legendImage = document.querySelector("img");
+ expect(legendImage).toBeTruthy();
+ const { query } = url.parse(legendImage.getAttribute('src'), true);
+ expect(query.SCALE).toBe('2000');
+ });
+ it('should apply the scale correctly even for zoom exceed the maximum scales index', () => {
+ const layer = {
+ "type": "wms",
+ "url": "http://test2/reflector/open/service",
+ "visibility": true,
+ "title": "test layer 3 (no group)",
+ "name": "layer3",
+ "format": "image/png"
+ };
+ ReactDOM.render(
+ <Legend
+ layer={layer}
+ currentZoomLvl={10}
+ scales={[10000, 5000, 2000, 1000]}
+ />,
+ document.getElementById("container"));
+ const legendImage = document.querySelector("img");
+ expect(legendImage).toBeTruthy();
+ const { query } = url.parse(legendImage.getAttribute('src'), true);
+ expect(query.SCALE).toBe('1000');
+ });
 });