diff --git a/web/client/components/map/openlayers/__tests__/Layer-test.jsx b/web/client/components/map/openlayers/__tests__/Layer-test.jsx
index 7fe6cb3db7..c10a2b6173 100644
--- a/web/client/components/map/openlayers/__tests__/Layer-test.jsx
+++ b/web/client/components/map/openlayers/__tests__/Layer-test.jsx
@@ -150,6 +150,68 @@ describe('Openlayers layer', () => {
         expect(map.getLayers().item(0).getSource().urls.length).toBe(1);
     });
 
+    it('creates a single tile wms layer for openlayers map', () => {
+        var options = {
+            "type": "wms",
+            "visibility": true,
+            "name": "nurc:Arc_Sample",
+            "group": "Meteo",
+            "format": "image/png",
+            "singleTile": true,
+            "url": "http://sample.server/geoserver/wms"
+        };
+        // create layers
+        var layer = ReactDOM.render(
+            <OpenlayersLayer type="wms"
+                options={options} map={map} />, document.getElementById("container"));
+
+        expect(layer).toExist();
+        // count layers
+        expect(map.getLayers().getLength()).toBe(1);
+        expect(map.getLayers().item(0).getSource().getUrl()).toExist();
+    });
+
+    it('creates a single tile wms layer for openlayers map ratio', (done) => {
+        var options = {
+            "type": "wms",
+            "visibility": true,
+            "name": "nurc:Arc_Sample",
+            "group": "Meteo",
+            "format": "image/png",
+            "singleTile": true,
+            "url": "http://sample.server/geoserver/wms"
+        };
+        // create layers
+        var layer = ReactDOM.render(
+            <OpenlayersLayer type="wms"
+                options={options} map={map} />, document.getElementById("container"));
+
+        expect(layer).toExist();
+        // count layers
+        expect(map.getLayers().getLength()).toBe(1);
+        expect(map.getLayers().item(0).getSource().getUrl()).toExist();
+        let width = 0;
+        const loadFun = (image, src) => {
+            if (width === 0) {
+                width = parseInt(src.match(/WIDTH=([0-9]+)/i)[1], 10);
+                layer = ReactDOM.render(
+                    <OpenlayersLayer type="wms"
+                        options={assign({}, options, {
+                            ratio: 2
+                        })} map={map} />, document.getElementById("container"));
+                map.getLayers().item(0).getSource().setImageLoadFunction(loadFun);
+                map.getLayers().item(0).getSource().refresh();
+            } else {
+                const oldWidth = width;
+                width = parseInt(src.match(/WIDTH=([0-9]+)/i)[1], 10);
+                expect(oldWidth !== width).toBe(true);
+                done();
+            }
+        };
+        map.getLayers().item(0).getSource().setImageLoadFunction(loadFun);
+        map.getLayers().item(0).getSource().refresh();
+    });
+
     it('creates a wmts layer for openlayers map', () => {
         var options = {
             "type": "wmts",
diff --git a/web/client/components/map/openlayers/plugins/WMSLayer.js b/web/client/components/map/openlayers/plugins/WMSLayer.js
index f86298006b..509c89aa33 100644
--- a/web/client/components/map/openlayers/plugins/WMSLayer.js
+++ b/web/client/components/map/openlayers/plugins/WMSLayer.js
@@ -69,7 +69,7 @@ Layers.registerType('wms', {
                 source: new ol.source.ImageWMS({
                     url: urls[0],
                     params: queryParameters,
-                    ratio: options.ratio
+                    ratio: options.ratio || 1
                 })
             });
         }
@@ -124,7 +124,7 @@ Layers.registerType('wms', {
             if (changed) {
                 layer.getSource().updateParams(objectAssign(newParams, newOptions.params));
             }
-            if (oldOptions.singleTile !== newOptions.singleTile || oldOptions.securityToken !== newOptions.securityToken) {
+            if (oldOptions.singleTile !== newOptions.singleTile || oldOptions.securityToken !== newOptions.securityToken || oldOptions.ratio !== newOptions.ratio) {
                 const urls = getWMSURLs(isArray(newOptions.url) ? newOptions.url : [newOptions.url]);
                 const queryParameters = wmsToOpenlayersOptions(newOptions) || {};
                 urls.forEach(url => SecurityUtils.addAuthenticationParameter(url, queryParameters, newOptions.securityToken));
@@ -137,7 +137,8 @@ Layers.registerType('wms', {
                         zIndex: newOptions.zIndex,
                         source: new ol.source.ImageWMS({
                             url: urls[0],
-                            params: queryParameters
+                            params: queryParameters,
+                            ratio: newOptions.ratio || 1
                         })
                     });
                 } else {