Blurriness in rendering raster tiles

[aliir74]

mapbox-gl-js version: 0.52.0

Question

Hi all, I use mapbox gl js for rendering raster tiles but tiles in a browser after rendering have blurriness but main tile images are clear

I added tilesize to my style but my problem still exists.

"sources": {
    "high_update": {
        "type": "raster",
        "tileSize": 256,
        "tiles": [
            "http://192.168.101.16:8000/images/{z}/{x}/{y}.png"
        ],
        "minzoom": 3,
        "maxzoom": 16
    }
},
"layers": [
    {
        "id": "simple-tiles",
        "type": "raster",
        "source": "high_update",
        "minzoom": 0,
        "maxzoom": 22
    }
]

my tile image:

my rendered map:

Sorry for asking in github instead of stackoverflow. The stackoverflow show me this error You need at least 10 reputation to post images.

Links to related documentation

raster sources

[peterqliu]

@aliir74 two things come to mind:

• the renderer loads raster tiles at the nearest integer zoom, which means they're blurrier at all zooms x.0 to x.5 (rounded down), and sharper at x.5 to x.0 (rounded up). Raster tile loading thresholds #1030 has some more historical context

• allowing fractional zoom and map rotation/pitch means it's hard to align pixels to the screen, which might contribute to blurriness. Per only align raster sources to pixel grid when map is idle to prevent shaking #7426 the renderer now aligns when the map idles

[aliir74]

Hi @peterqliu

• Is there any way to mapbox-gl-js load tiles earlier than we have now? Now mapbox-gl-js render z4 tiles from z3.5 to z4.5. Could we set is to z3 to z4 for less blurriness
• In non-fractional zoom level also I have some blurriness, Disabling map rotation can help me for solving this problem?

Thanks for your fast reply :)

[aliir74]

I find my problem is in mobile view mode. In a browser with a wide view didn't any blurry tile. but in mobile view everything gets blurry.

Wide view in Chrome:

Mobile view in Chrome:

In mobile browser:

[peterqliu]

@aliir74 not sure what you mean by wide vs mobile view, but if it has to do with different displays, it might be because you're forcing tileSize: 256 when the default is 512. This will be blurry on retina-like screens

[aliir74]

@peterqliu I mean when you see map on mobile things gets blurry but in desktop everything is ok.

I'm trying to generate rasters in 512x512 size to see the result.

[aliir74]

The problem didn't solve by change tilesize to 512x512

[aliir74]

@peterqliu Do you have any idea why this blurry thing happen in mobile size?

[asheemmamoowala]

@aliir74 Can you test the v0.53.0 beta to see if it resolves the bluriness ?

[aliir74]

@asheemmamoowala I increase the ratio in my picture and blurriness is gone. seems mobile screens have more resolution display.

[bart-1990]

I'm also experiencing bluriness in tiles, especially at the .5 zoom level.

The weird thing is that I don't experience this using mapbox styles, so I was wondering what the tile server might be doing different than the one I'm fetching my tiles from.

First image, zoom level = 1.5
Second image, zoom level = 1.5019