CODEWITHSUNDEEP
mapboxmapbox-gl-js
Nourdine
Nourdine

Reputation: 67

Mapbox raster Image quality changes with zoom level

I have a floorplan image added on top of Mapbox as a Raster, everything works as expected except as I zoom out the image gets blurrier and its features are unrecognizable. please see below what I mean.

Zoom = 20

enter image description here

Zoom = 19

Zoom = 19

Zoom = 18

enter image description here

Is this something I can change, or is it how Mapbox handles the raster display?

Here is my code

 map.on('load', () => {
        map.addSource('radar', {
            'type': 'image',
            'url': 'URL_TO_IMAGE',
            'coordinates': [...]
        });
        map.addLayer({
            id: 'radar-layer',
            'type': 'raster',
            'source': 'radar',
            'paint': {
                'raster-fade-duration': 0
            }
        });
    });

Upvotes: 1

Views: 735

Answers (1)

David
David

Reputation: 825

Because of the way this is rendered as an overlay image, there is no way to really fix this.

My answer is to actually just convert the image to a GeoTIF and use the utility gdal2tiles to convert the image to a tileset. For each zoom level, the tiles are rendered differently and the image will always be as intended. It is not trivial if you have never worked with GeoTIFs or gdal before, but with effort you can get it to look perfectly as desired.

Upvotes: 1

Related Questions