Fix #1640 added singleTile option to Display Tab

package.json

@@ -105,6 +105,7 @@
     "leaflet-plugins": "https://github.com/Polyconseil/leaflet-plugins/tarball/master",
     "leaflet-simple-graticule": "1.0.2",
     "leaflet.locatecontrol": "0.45.1",
+    "leaflet.nontiledlayer": "1.0.3",
     "lodash": "4.16.6",
     "moment": "2.13.0",
     "object-assign": "4.1.1",

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

@@ -49,10 +49,16 @@ module.exports = React.createClass({
                     <Checkbox key="transparent" checked={this.props.element && (this.props.element.transparent === undefined ? true : this.props.element.transparent)} onChange={(event) => {this.props.onChange("transparent", event.target.checked); }}>
                         <Message msgId="layerProperties.transparent"/></Checkbox>
                     <Checkbox key="cache" value="tiled" key="tiled"
+                        disabled={!!this.props.element.singleTile}
                         onChange={(e) => this.props.onChange("tiled", e.target.checked)}
                         checked={this.props.element && this.props.element.tiled !== undefined ? this.props.element.tiled : true} >
                         <Message msgId="layerProperties.cached"/>
                     </Checkbox>
+                    <Checkbox key="singleTile" value="singleTile" key="singleTile"
+                        checked={this.props.element && (this.props.element.singleTile !== undefined ? this.props.element.singleTile : false )}
+                        onChange={(e) => this.props.onChange("singleTile", e.target.checked)}>
+                        <Message msgId="layerProperties.singleTile"/>
+                    </Checkbox>
                 </div>)] : null}
         </div>);
     }

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

@@ -68,7 +68,7 @@ describe('test Layer Properties Display module component', () => {
         expect(comp).toExist();
         const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" );
         expect(inputs).toExist();
-        expect(inputs.length).toBe(2);
+        expect(inputs.length).toBe(3);
         inputs[0].click();
         expect(spy.calls.length).toBe(1);
     });

web/client/components/map/cesium/Layer.jsx

@@ -1,5 +1,5 @@
-/**
- * Copyright 2015, GeoSolutions Sas.
+/*
+ * Copyright 2017, GeoSolutions Sas.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
@@ -136,7 +136,9 @@ const CesiumLayer = React.createClass({
     updateLayer(newProps, oldProps) {
         const newLayer = Layers.updateLayer(newProps.type, this.layer, newProps.options, oldProps.options, this.props.map);
         if (newLayer) {
+            this.removeLayer();
             this.layer = newLayer;
+            this.addLayer();
         }
     },
     addLayerInternal() {

web/client/components/map/cesium/plugins/TileProviderLayer.js

@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright 2017, GeoSolutions Sas.
  * All rights reserved.
  *
@@ -10,7 +10,7 @@ var Layers = require('../../../../utils/cesium/Layers');
 var Cesium = require('../../../../libs/cesium');
 var TileProvider = require('../../../../utils/TileConfigProvider');
 var ConfigUtils = require('../../../../utils/ConfigUtils');
-var {isObject, isArray} = require('lodash');
+const ProxyUtils = require('../../../../utils/ProxyUtils');
 
 function splitUrl(originalUrl) {
     let url = originalUrl;
@@ -34,7 +34,7 @@ TileProviderProxy.prototype.getURL = function(resource) {
     if (url.indexOf("//") === 0) {
         url = location.protocol + url;
     }
-    return this.proxy + encodeURIComponent(url + queryString);
+    return this.proxy.url + encodeURIComponent(url + queryString);
 };
 
 function NoProxy() {
@@ -64,16 +64,7 @@ Layers.registerType('tileprovider', (options) => {
     let proxyUrl = ConfigUtils.getProxyUrl({});
     let proxy;
     if (proxyUrl) {
-        let useCORS = [];
-        if (isObject(proxyUrl)) {
-            useCORS = proxyUrl.useCORS || [];
-            proxyUrl = proxyUrl.url;
-        }
-        if (isArray(url)) {
-            url = url[0];
-        }
-        const isCORS = useCORS.reduce((found, current) => found || url.indexOf(current) === 0, false);
-        proxy = !isCORS && proxyUrl;
+        proxy = opt.noCors || ProxyUtils.needProxy(url);
     }
     const cr = opt.credits;
     const credit = cr ? new Cesium.Credit(cr.text, cr.imageUrl, cr.link) : opt.attribution;
@@ -84,6 +75,6 @@ Layers.registerType('tileprovider', (options) => {
         maximumLevel: opt.maxZoom,
         minimumLevel: opt.minZoom,
         credit,
-        proxy: proxy && opt.noCors ? new TileProviderProxy(proxyUrl) : new NoProxy()
+        proxy: proxy ? new TileProviderProxy(proxyUrl) : new NoProxy()
     });
 });

web/client/components/map/cesium/plugins/WMSLayer.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2015, GeoSolutions Sas.
+ * Copyright 2017, GeoSolutions Sas.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
@@ -37,7 +37,7 @@ function WMSProxy(proxy) {
 
 WMSProxy.prototype.getURL = function(resource) {
     let {url, queryString} = splitUrl(resource);
-    return this.proxy + encodeURIComponent(url + queryString);
+    return this.proxy.url + encodeURIComponent(url + queryString);
 };
 
 function NoProxy() {
@@ -111,5 +111,22 @@ const createLayer = (options) => {
     };
     return layer;
 };
-
-Layers.registerType('wms', createLayer);
+const updateLayer = (newOptions, oldOptions) => {
+    if (oldOptions.singleTile !== newOptions.singleTile || oldOptions.tiled !== newOptions.tiled) {
+        let layer;
+        if (newOptions.singleTile) {
+            layer = new Cesium.SingleTileImageryProvider(wmsToCesiumOptionsSingleTile(newOptions));
+        } else {
+            layer = new Cesium.WebMapServiceImageryProvider(wmsToCesiumOptions(newOptions));
+        }
+        layer.updateParams = (params) => {
+            const newOp = assign({}, newOptions, {
+                params: assign({}, newOptions.params || {}, params)
+            });
+            return createLayer(newOp);
+        };
+        return layer;
+    }
+    return null;
+};
+Layers.registerType('wms', {create: createLayer, update: updateLayer});

web/client/components/map/leaflet/Layer.jsx

@@ -134,7 +134,13 @@ const LeafletLayer = React.createClass({
         }
     },
     updateLayer(newProps, oldProps) {
-        Layers.updateLayer(newProps.type, this.layer, this.generateOpts(newProps.options, newProps.position), this.generateOpts(oldProps.options, oldProps.position));
+        const newLayer = Layers.updateLayer(newProps.type, this.layer, this.generateOpts(newProps.options, newProps.position),
+            this.generateOpts(oldProps.options, oldProps.position));
+        if (newLayer) {
+            this.removeLayer();
+            this.layer = newLayer;
+            this.addLayer();
+        }
     },
     addLayer() {
         if (this.isValid()) {

web/client/components/map/leaflet/plugins/WMSLayer.js

@@ -1,5 +1,5 @@
-/**
- * Copyright 2015, GeoSolutions Sas.
+/*
+ * Copyright 2017, GeoSolutions Sas.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
@@ -13,6 +13,7 @@ const L = require('leaflet');
 const objectAssign = require('object-assign');
 const {isArray, isEqual} = require('lodash');
 const SecurityUtils = require('../../../../utils/SecurityUtils');
+require('leaflet.nontiledlayer');
 
 
 L.TileLayer.MultipleUrlWMS = L.TileLayer.WMS.extend({
@@ -42,7 +43,6 @@ L.TileLayer.MultipleUrlWMS = L.TileLayer.WMS.extend({
 
         L.setOptions(this, options);
     },
-
     getTileUrl: function(tilePoint) { // (Point, Number) -> String
         let map = this._map;
         let tileSize = this.options.tileSize;
@@ -79,6 +79,7 @@ function wmsToLeafletOptions(options) {
         transparent: options.transparent !== undefined ? options.transparent : true,
         tiled: options.tiled !== undefined ? options.tiled : true,
         opacity: opacity,
+        "zIndex": options.zIndex,
         version: options.version || "1.3.0",
         SRS: CoordinatesUtils.normalizeSRS(options.srs || 'EPSG:3857', options.allowedSRS),
         CRS: CoordinatesUtils.normalizeSRS(options.srs || 'EPSG:3857', options.allowedSRS),
@@ -95,6 +96,9 @@ Layers.registerType('wms', {
         const urls = getWMSURLs(isArray(options.url) ? options.url : [options.url]);
         const queryParameters = wmsToLeafletOptions(options) || {};
         urls.forEach(url => SecurityUtils.addAuthenticationParameter(url, queryParameters));
+        if (options.singleTile) {
+            return L.nonTiledLayer.wms(urls, queryParameters);
+        }
         return L.tileLayer.multipleUrlWMS(urls, queryParameters);
     },
     update: function(layer, newOptions, oldOptions) {
@@ -103,12 +107,32 @@ Layers.registerType('wms', {
         let newQueryParameters = WMSUtils.filterWMSParamOptions(wmsToLeafletOptions(newOptions));
         let newParameters = Object.keys(newQueryParameters).filter((key) => {return newQueryParameters[key] !== oldqueryParameters[key]; });
         let newParams = {};
+        let newLayer;
+        if (oldOptions.singleTile !== newOptions.singleTile) {
+            const urls = getWMSURLs(isArray(newOptions.url) ? newOptions.url : [newOptions.url]);
+            urls.forEach(url => SecurityUtils.addAuthenticationParameter(url, newQueryParameters));
+            if (newOptions.singleTile) {
+                // return the nonTiledLayer
+                newLayer = L.nonTiledLayer.wms(urls[0], newQueryParameters);
+            } else {
+                newLayer = L.tileLayer.multipleUrlWMS(urls, newQueryParameters);
+            }
+            if ( newParameters.length > 0 ) {
+                newParameters.forEach( key => newParams[key] = newQueryParameters[key] );
+                // set new options as parameters, merged with params
+                newLayer.setParams(objectAssign(newParams, newParams.params, newOptions.params));
+            } else if (!isEqual(newOptions.params, oldOptions.params)) {
+                newLayer.setParams(newOptions.params);
+            }
+            return newLayer;
+        }
         if ( newParameters.length > 0 ) {
             newParameters.forEach( key => newParams[key] = newQueryParameters[key] );
             // set new options as parameters, merged with params
             layer.setParams(objectAssign(newParams, newParams.params, newOptions.params));
         } else if (!isEqual(newOptions.params, oldOptions.params)) {
             layer.setParams(newOptions.params);
         }
+        return null;
     }
 });

web/client/components/map/openlayers/Layer.jsx

@@ -121,13 +121,18 @@ const OpenlayersLayer = React.createClass({
                 return;
             }
         }
-        Layers.updateLayer(
+        const newLayer = Layers.updateLayer(
             this.props.type,
             this.layer,
             this.generateOpts(newProps.options, newProps.position, newProps.projection),
             this.generateOpts(oldProps.options, oldProps.position, oldProps.projection),
             this.props.map,
             this.props.mapId);
+        if (newLayer) {
+            this.props.map.removeLayer(this.layer);
+            this.layer = newLayer;
+            this.addLayer(newProps.options);
+        }
     },
     addLayer(options) {
         if (this.isValid()) {

web/client/components/map/openlayers/plugins/WMSLayer.js

@@ -1,5 +1,5 @@
-/**
- * Copyright 2015, GeoSolutions Sas.
+/*
+ * Copyright 2017, GeoSolutions Sas.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
@@ -77,7 +77,7 @@ Layers.registerType('wms', {
             }, (options.forceProxy) ? {tileLoadFunction: proxyTileLoadFunction} : {}))
         });
     },
-    update: (layer, newOptions, oldOptions) => {
+    update: (layer, newOptions, oldOptions, map) => {
         if (oldOptions && layer && layer.getSource() && layer.getSource().updateParams) {
             let changed = false;
             if (oldOptions.params && newOptions.params) {
@@ -110,6 +110,45 @@ Layers.registerType('wms', {
             if (changed) {
                 layer.getSource().updateParams(objectAssign(newParams, newOptions.params));
             }
+            if (oldOptions.singleTile !== newOptions.singleTile) {
+                const urls = getWMSURLs(isArray(newOptions.url) ? newOptions.url : [newOptions.url]);
+                const queryParameters = wmsToOpenlayersOptions(newOptions) || {};
+                urls.forEach(url => SecurityUtils.addAuthenticationParameter(url, queryParameters));
+                let newLayer;
+                if (newOptions.singleTile) {
+                    // return the Image Layer with the related source
+                    newLayer = new ol.layer.Image({
+                        opacity: newOptions.opacity !== undefined ? newOptions.opacity : 1,
+                        visible: newOptions.visibility !== false,
+                        zIndex: newOptions.zIndex,
+                        source: new ol.source.ImageWMS({
+                            url: urls[0],
+                            params: queryParameters
+                        })
+                    });
+                } else {
+                    // return the Tile Layer with the related source
+                    const mapSrs = map && map.getView() && map.getView().getProjection() && map.getView().getProjection().getCode() || 'EPSG:3857';
+                    const extent = ol.proj.get(CoordinatesUtils.normalizeSRS(newOptions.srs || mapSrs, newOptions.allowedSRS)).getExtent();
+                    newLayer = new ol.layer.Tile({
+                        opacity: newOptions.opacity !== undefined ? newOptions.opacity : 1,
+                        visible: newOptions.visibility !== false,
+                        zIndex: newOptions.zIndex,
+                        source: new ol.source.TileWMS(objectAssign({
+                          urls: urls,
+                          params: queryParameters,
+                          tileGrid: new ol.tilegrid.TileGrid({
+                              extent: extent,
+                              resolutions: mapUtils.getResolutions(),
+                              tileSize: newOptions.tileSize ? newOptions.tileSize : 256,
+                              origin: newOptions.origin ? newOptions.origin : [extent[0], extent[1]]
+                          })
+                        }, (newOptions.forceProxy) ? {tileLoadFunction: proxyTileLoadFunction} : {}))
+                    });
+                }
+                return newLayer;
+            }
+            return null;
         }
     }
 });

web/client/translations/data.de-DE

@@ -30,6 +30,7 @@
             "display": "Darstellung",
             "style": "Stil",
             "transparent": "Transparent",
+            "singleTile": "Single Tile",
             "cached": "Verwenden Sie Cache-Optionen",
             "styleCustom": "Stil \"{value}\" nutzen",
             "styleListLoadError": "Es gab einen Fehler beim Laden der Liste von Stilen",

web/client/translations/data.en-US

@@ -30,6 +30,7 @@
             "display": "Display",
             "style": "Style",
             "transparent": "Transparent",
+            "singleTile": "Single Tile",
             "cached": "Use cache options",
             "styleCustom": "Use style named \"{value}\"",
             "styleListLoadError": "There was an error loading the styles list",

web/client/translations/data.fr-FR

@@ -30,6 +30,7 @@
             "display": "Affichage",
             "style": "Style",
             "transparent": "Transparent",
+            "singleTile": "Single Tile",
             "cached": "Utiliser les options de cache",
             "styleCustom": "Utilisez un style nommé \"{value} \"",
             "styleListLoadError": "Une erreur s'est produite lors du chargement de la liste de styles",

web/client/translations/data.it-IT

@@ -30,6 +30,7 @@
             "display": "Visualizzazione",
             "style": "Stile",
             "transparent": "Trasparenza",
+            "singleTile": "Single Tile",
             "cached": "Usa la cache",
             "styleCustom": "Usa stile con nome \"{value}\"",
             "styleListLoadError": "Si è verificato un errore durante il caricamento della lista degli stili",

web/client/utils/cesium/Layers.js

@@ -1,5 +1,5 @@
-/**
- * Copyright 2015, GeoSolutions Sas.
+/*
+ * Copyright 2017, GeoSolutions Sas.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
@@ -35,9 +35,8 @@ var Layers = {
     updateLayer: function(type, layer, newOptions, oldOptions, map) {
         var layerCreator = layerTypes[type];
         if (layerCreator && layerCreator.update) {
-            return layerCreator.update(layer, newOptions, oldOptions, map);
+            return layerCreator.update(newOptions, oldOptions, map);
         }
-
     }
 };
 

web/client/utils/leaflet/WMSUtils.js

@@ -1,5 +1,5 @@
-/**
- * Copyright 2016, GeoSolutions Sas.
+/*
+ * Copyright 2017, GeoSolutions Sas.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
@@ -8,7 +8,7 @@
 var objectAssign = require('object-assign');
 
 var WMSUtils = {
-    PARAM_OPTIONS: ["layers", "styles", "format", "transparent", "version", "tiled" ],
+    PARAM_OPTIONS: ["layers", "styles", "format", "transparent", "version", "tiled", "opacity", "zindex" ],
     wmsToLeafletOptions: function(options) {
         var opacity = options.opacity !== undefined ? options.opacity : 1;
         // NOTE: can we use opacity to manage visibility?