[core] Raster tiles blurry

[rinigus]

When using Mapbox GL Native with Qt through QML bindings on Linux desktop, I get blurry maps for raster sources/styles. This is very clear on maps that are rendered by Mapnik, for example. To reproduce, compare Leaflet presentation of the same map with the presentation by Mapbox GL and focus on labels.

I compared the images at full zoom levels (14 vs 14, ...). Its clear that 14.x would be interpolated by Mapbox GL, but I was expecting the same sharpness on the full zoom levels. This is not the case. It was tested with pixelRatio=1, tile sizes 512, 1024 (and specified as needed).

When looking into logs of the map server, looks like the same level zoom is loaded as displayed by Mapbox GL when 512 tiles are used. For 1024, you get zoom level fetched from the map server that is one level smaller than displayed.

Maybe there is some smoothing filter applied while rendering the raster maps? Or some interpolation?

As it is, using Mapbox GL with the raster tiles leads to considerable regression in map quality. Which is not desired and would be great to fix.

I can upload images if needed later today.

Possibly related to https://github.com/mapbox/mapbox-gl-js/issues/1030 , which, according to the comments, seems not to be fully explained by Math.floor issue.

I am using my own QML bindings (https://github.com/rinigus/mapbox-gl-qml), but I presume that this did not cause such effect.

[jfirebaugh]

What is the native size of your raster tiles? If 256px, did you set tileSize: 256 on the raster source?

[rinigus]

I have a server which can output many sizes. I tested 512x512 and specified tileSize: 512 as well as 1024x1024 with the tileSize: 1024:

For example:

{
    "version": 8,
    "name": "Raster",
    "sources": {
        "Raster": {
            "tiles": ["http://localhost:8553/v1/tile?scale=2&z={z}&x={x}&y={y}"],
            "type": "raster",
            "tileSize": 512
        }
    },
    "layers": [
        {
            "id": "raster",
            "type": "raster",
            "source": "Raster",
            "layout": {
                "visibility": "visible"
            },
            "paint": {
                "raster-opacity": 1
            }
        }
    ],
    "id": "test-raster"
}

I have repeated the test using provided Qt demo app (https://github.com/mapbox/mapbox-gl-native/tree/master/platform/qt/app) by replacing the used style with the style above and observed the same effect. Attached are the screenshots from Mapbox GL demo app (zoom level 14) and Leaflet (same zoom level). As you can see, Leaflet shows sharp image while Mapbox GL shows blurred tiles. Finally, an original tile as served by the server is attached as well.

[jfirebaugh]

Thanks, just wanted to eliminate one common mistake. In that case, this is a duplicate of https://github.com/mapbox/mapbox-gl-js/issues/4552.

[jfirebaugh]

Ooops, that's a gl-js issue -- this is the native equivalent.

[SumeetMoray]

Hi, i am also facing this issue when using a custom raster tile source. One of the TEMPORARY solution to this issue is to reduce the tilesize below 200 for example 150 : this would make the tiles appear more clear but the text size gets very much reduced and it gets difficult to read names of places.

Anyway, does anyone know how to create custom vector tile server and set the style URL. I think this issue would not arise with vector tiles.

[rinigus]

Just an additional note: its not specific to Qt, I have the same blurry map for glfw Linux bindings.

[kkaefer]

This was fixed in https://github.com/mapbox/mapbox-gl-native/pull/10984