Fixes #1701: improvements to the elevation slider

web/client/components/TOC/fragments/SettingsModal.jsx

@@ -20,6 +20,7 @@ const Elevation = require('./settings/Elevation');
 const Portal = require('../../misc/Portal');
 const assign = require('object-assign');
 const Message = require('../../I18N/Message');
+const LayersUtils = require('../../../utils/LayersUtils');
 
 const SettingsModal = React.createClass({
     propTypes: {
@@ -48,14 +49,13 @@ const SettingsModal = React.createClass({
         includeDeleteButton: React.PropTypes.bool,
         realtimeUpdate: React.PropTypes.bool,
         groups: React.PropTypes.array,
-        elevations: React.PropTypes.object
+        getDimension: React.PropTypes.func
     },
     getDefaultProps() {
         return {
             id: "mapstore-layer-settings",
             settings: {expanded: false},
             options: {},
-            elevations: {},
             updateSettings: () => {},
             hideSettings: () => {},
             updateNode: () => {},
@@ -76,7 +76,8 @@ const SettingsModal = React.createClass({
             includeDeleteButton: true,
             realtimeUpdate: true,
             deleteText: <Message msgId="layerProperties.delete" />,
-            confirmDeleteText: <Message msgId="layerProperties.confirmDelete" />
+            confirmDeleteText: <Message msgId="layerProperties.confirmDelete" />,
+            getDimension: LayersUtils.getDimension
         };
     },
     getInitialState() {
@@ -129,12 +130,13 @@ const SettingsModal = React.createClass({
         }
     },
     renderElevationTab() {
-        if (this.props.element.type === "wms" && this.props.element.elevations) {
+        const elevationDim = this.props.getDimension(this.props.element.dimensions, 'elevation');
+        if (this.props.element.type === "wms" && this.props.element.dimensions && elevationDim) {
             return (<Elevation
                elevationText={this.props.elevationText}
                chartStyle={this.props.chartStyle}
                element={this.props.element}
-               elevations={this.props.element.elevations}
+               elevations={elevationDim}
                appState={this.state || {}}
                onChange={(key, value) => this.updateParams({[key]: value}, this.props.realtimeUpdate)} />);
         }
@@ -144,12 +146,11 @@ const SettingsModal = React.createClass({
         const display = this.renderDisplay();
         const style = this.renderStyleTab();
         const elevation = this.renderElevationTab();
-        const tabs = (<Tabs defaultActiveKey={1} id="layerProperties-tabs">
-            <Tab eventKey={1} title={<Message msgId="layerProperties.general" />}>{general}</Tab>
-            <Tab eventKey={2} title={<Message msgId="layerProperties.display" />}>{display}</Tab>
-            <Tab eventKey={3} title={<Message msgId="layerProperties.style" />} disabled={!style} >{style}</Tab>
-            <Tab eventKey={4} title={<Message msgId="layerProperties.elevation" />} disabled={!elevation} >{elevation}</Tab>
-          </Tabs>);
+        const availableTabs = [<Tab eventKey={1} title={<Message msgId="layerProperties.general" />}>{general}</Tab>,
+                <Tab eventKey={2} title={<Message msgId="layerProperties.display" />}>{display}</Tab>,
+                <Tab eventKey={3} title={<Message msgId="layerProperties.style" />} disabled={!style} >{style}</Tab>]
+            .concat(elevation ? [<Tab eventKey={4} title={<Message msgId="layerProperties.elevation" />}>{elevation}</Tab>] : []);
+        const tabs = <Tabs defaultActiveKey={1} id="layerProperties-tabs">{availableTabs}</Tabs>;
         const footer = (<span role="footer">
             {this.props.includeCloseButton ? <Button bsSize={this.props.buttonSize} onClick={this.onClose}>{this.props.closeText}</Button> : <span/>}
             {this.props.includeDeleteButton ?

web/client/components/TOC/fragments/settings/Elevation.jsx

@@ -56,7 +56,7 @@ module.exports = React.createClass({
         const lastVal = parseFloat(values[values.length - 1]);
         const start = this.props.element &&
                         this.props.element.params &&
-                        this.props.element.params[this.props.elevations.name][0] || values[0];
+                        this.props.element.params[this.props.elevations.name] || values[0];
         const elevationName = {};
         return (
             <div id="mapstore-elevation">

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

@@ -34,7 +34,7 @@ describe('test Layer Properties Elevation component', () => {
             type: 'shapefile',
             url: 'base/web/client/test-resources/geoserver/wms',
             params: {
-              "ELEVATION": ["1.5"]
+              "ELEVATION": "1.5"
             },
             elevations: {
               name: "ELEVATION",

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

@@ -34,7 +34,7 @@ describe('test Layer Properties Elevation Chart component', () => {
             type: 'shapefile',
             url: 'base/web/client/test-resources/geoserver/wms',
             params: {
-              "ELEVATION": ["1.5"]
+              "ELEVATION": "1.5"
             },
             elevations: {
               name: "ELEVATION",
@@ -65,7 +65,7 @@ describe('test Layer Properties Elevation Chart component', () => {
             type: 'shapefile',
             url: 'base/web/client/test-resources/geoserver/wms',
             params: {
-              "ELEVATION": ["1.5"]
+              "ELEVATION": "1.5"
             },
             elevations: {
               name: "ELEVATION",

web/client/components/catalog/RecordItem.jsx

@@ -212,6 +212,7 @@ const RecordItem = React.createClass({
                 type: "wms",
                 url: url,
                 visibility: true,
+                dimensions: this.props.record.dimensions || [],
                 name: wms.params && wms.params.name,
                 title: this.props.record.title || (wms.params && wms.params.name),
                 bbox: {

web/client/utils/CatalogUtils.js

@@ -156,6 +156,9 @@ const converters = {
                     ],
                     crs: "EPSG:4326"
                 },
+                dimensions: (record.Dimension && castArray(record.Dimension) || []).map((dim) => assign({}, {
+                    values: dim._.split(',')
+                }, dim.$ || {})),
                 references: [{
                     type: "OGC:WMS",
                     url: options.url,

web/client/utils/LayersUtils.js

@@ -43,7 +43,27 @@ const createGroup = (groupId, groupName, layers, addLayers) => {
         });
 };
 
+const getElevationDimension = (dimensions = []) => {
+    return dimensions.reduce((previous, dim) => {
+        return (dim.name.toLowerCase() === 'elevation' || dim.name.toLowerCase() === 'depth') ?
+            assign({
+                showChart: true,
+                positive: dim.name.toLowerCase() === 'elevation'
+            }, dim, {
+                name: dim.name.toLowerCase() === 'elevation' ? dim.name : 'DIM_' + dim.name
+            }) : previous;
+    }, null);
+};
+
 var LayersUtils = {
+    getDimension: (dimensions, dimension) => {
+        switch (dimension.toLowerCase()) {
+            case 'elevation':
+                return getElevationDimension(dimensions);
+            default:
+                return null;
+        }
+    },
     getLayerId: (layerObj, layers) => {
         return layerObj && layerObj.id || (layerObj.name + "__" + layers.length);
     },
@@ -181,6 +201,7 @@ var LayersUtils = {
             allowedSRS: layer.allowedSRS,
             matrixIds: layer.matrixIds,
             tileMatrixSet: layer.tileMatrixSet,
+            dimensions: layer.dimensions || [],
             ...assign({}, layer.params ? {params: layer.params} : {})
         };
     }