I'm programming an OpenLayers (4.6.5) map with a layerswitcher in order to switch between my different layers. On mobile, the display of my layer is blurry, OpenLayers is doubling pixels and I don't want that.

I also tested Leaflet (1.3.1) and the same layer with the same parameters (in the URL) has no blurring problems.

In OpenLayers I tested this code :

var hiDPI = ol.has.DEVICE_PIXEL_RATIO > 1;
var layerHdpi = hiDPI ? 'gny_bright_mobile' : 'gny_bright';
var tilePixelRatio = hiDPI ? 2 : 1;

var wms_gnybright_auto = new ol.source.TileWMS({
    url: '...',
    params: {'LAYERS': layerHdpi, 'FORMAT': 'image/png'},

I found no way to prevent pixel doubling and the blurry problem.

I tested an another way supposed to fix my problem but it's not :

var map = new ol.Map({
    layers: [new ol.layer.Group({
                title: 'Fonds de carte',
                layers: [
                    new ol.layer.Tile({
                     title: 'gny_bright_auto',
                     source: wms_gnybright_auto,
                     type: 'base',
                     tilePixelRatio: pixelRatio

Captures :

Leaflet version without blurry problem :

Leaflet version without blurry problem

OpenLayers version with blurry problem :

OpenLayers version with blurry problem

Do you have any idea ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.