Leaflet: Blurry Maps

[ghost]

How to reproduce

• Leaflet version I'm using: Latest version
• Browser (with version) I'm using: Chrome
• OS/Platform (with version) I'm using: MacOS

What behaviour I'm expecting and which behaviour I'm seeing

Blurry maps

I noticed this issue in several topics but all of them were closed, is it me or leaflet maps are blurry?

here is the example from the site:
http://leafletjs.com/examples/geojson/

here is an example from mapbox:
https://www.mapbox.com/maps/light-dark/

clearly the leaflet map is blurry,
is this a known issue? any way to fix this?

[IvanSanchez]

What's your exact tile source and DevicePixelRatio?

[ghost]

@IvanSanchez
I am on Macbook Pro Retina

[brianreavis]

Chrome seems to have changed _something_ under the hood which is causing this along with sporadic other leaflet-related issues for me (getView() after setView() returning subtly different coordinates, but that's another issue).

The blurriness stems from a fractional transform on leaflet-map-pane.

• Leaflet 1.2.0
• window.devicePixelRatio is 2
• Chrome Version 64.0.3282.167
• Chrome Version 64.0.3282.186

[cherniavskii]

You are comparing raster tiles used in Leaflet example with vector tiles in Mapbox.

Of course, raster tiles are blurry on retina screens.
Use TileLayer's detectRetina option to avoid that.

[brianreavis]

@cherniavskii You're oversimplifying the problem. I'm using 512x512px raster tiles that have always looked just fine on retina (and non-retina, for that matter). The fractional translate causes interpolation, which causes blurring even on a non-retina screens.

[brianreavis]

This can also lead to subtle seam artifacts, depending on how you've panned.

[cherniavskii]

@brianreavis Well, TS provided link to Leaflet geojson example, which has detectRetina disabled by default.
Looks like you are experiencing different issue, since it affects also non-retina screens. If so, please open a new issue

[brianreavis]

Fair enough – didn't realize the reference point of this issue was comparing to vector maps.

[ghost]

@cherniavskii
if I set detedRetina to true the text becomes small

so here is an example map with retina set to true

sample map without retina:

http://jsfiddle.net/dm93f059/1/

as it can been, the text and zoom level somehow changed

[brianreavis]

@LittleHamster This is expected. If you don't want blurriness and don't want small text (caused by tiles being scaled to achieve retina screen dpi), you need a tile provider that supports high-resolution tiles (512x512px instead of 256x256px). This isn't a problem with leaflet.

[gabrielpeixoto]

@LittleHamster Did you resolve that?

[MikaelEdebro]

We're also seeing this behaviour. Here is a screenshot comparing on the same screen:

1. The map in QGis
2. The WMS tile opened in new tab
3. The map in leaflet

Notice how number 3 is more blurry than the others (click image for full size).

The screenshots are in Edge, but we're seeing the same result in Chrome, Firefox and IE as well.

Unfortunately the tile is from a paid service, so it can't be accessed from outside.
My DevicePixelRation is 1.

[kasper747]

The problem is still there.
with
{tileSize: 512,
zoomOffset: -1,
detectRetina:true}
the labels are too small.
Without it - the size is ok, but it is blurry.
I am using mapbox as a provider.

[MathieuSchopfer]

I experience the same issue on 1.7.1 with OpenStreetMap (Map Box is acceptable). Either the tiles are neat but with a (too) small font size, or pixelated if I change the tile size with the following option:

{
    tileSize: 512,
    zoomOffset: -1
}

Has someone found a solution/workaround ?