Blurry raster image by TiTiler (Bug in TiTiler processing raster file - .tif file?)

[alphajae11]

I used TiTiler to preprocess .tif file to upload on deck.gl map. However, I noticed that raster image visualization appears to be very blurry (even as compared to uploading .tif file to QGIS - Please check the image below).

QGIS

Deck.gl after processed by TiTiler

Is this a problem from TiTiler or is there a way I can improve on this raster visualization?

[hrodmn]

Hi @alphajae11 - can you share the tile URL (including all parameters) that you are adding to deck.gl. It looks like a case of over-zooming on a low zoom level tile to me. You could try adding maxzoom=22 to the tile url and report back?

[alphajae11]

Hi @hrodmn - Thank you for your prompt reply and sorry for late response as I was trying to dig out more details to see this problem in greater detail before getting back to you.

Let me give more details regarding your question. In my project, after I upload .tif file - there are 3 preprocess that program does before adding to deck.gl map:

1. /cog/validate
   const { crs, dType, resolution, minZoom, maxZoom, isCOG } = await validateTile(url);
   Function:

export async function validateTile(url: string) {
    const response = await fetch(
        `${RASTER_SERVER - TiTiler}/cog/validate?url=${encodeURIComponent(url)}`,
    );

    if (!response.ok) {
        throw new Error(`Failed to fetch tile info: ${response.statusText}`);
    }

    const { GEO, Tags, Profile } = await response.json();

    return {
        crs: GEO.CRS,
        dType: Profile.Dtype,
        resolution: GEO.Resolution,
        minZoom: GEO.MinZoom,
        maxZoom: GEO.MaxZoom,
        isCOG: Tags?.['Image Structure']?.['LAYOUT'] === 'COG' || false,
    };
}

From here, maxZoom is 12 for my file when I checked this on console

2. /cog/info
   const bounds = await fetchTileBounds(url);
   Function: /cog/info

export async function fetchTileBounds(url: string) {
    const response = await fetch(
        `${RASTER_SERVER - TiTiler}/cog/info?url=${encodeURIComponent(url)}`,
    );

    if (!response.ok) {
        throw new Error(`Failed to fetch tile info: ${response.statusText}`);
    }

    const { bounds } = await response.json();
    return bounds;
}

3. /cog/statistics
   const stats = await fetchTileStatistics(url);

export async function fetchTileStatistics(
    url: string,
    props: Record<string, string> = {},
) {
    const baseUrl = new URL(`${RASTER_SERVER}/cog/statistics`);

    baseUrl.searchParams.append('url', url);

    // Add any additional parameters from props
    Object.entries(props).forEach(([key, value]) => {
        if (!value) return;
        baseUrl.searchParams.append(key, value);
    });

    const response = await fetch(baseUrl.toString());

    if (!response.ok) {
        throw new Error(
            `Failed to fetch tile statistics: ${response.statusText}`,
        );
    }

    const stats = (await response.json()) as COGStatistics;

    return stats;
}

Basically, information gathered from here are used to build the deck.gl layer

[alphajae11]

Based on what you said, I suspect that there is a possilibility that TiTiler miscalculates the maxZoom in the 1st function for the particular .tif file that gives the blurry image on deck.gl

[vincentsarago]

can you share the COG ?

[alphajae11]

Apologies, I just received some update that this COG/.tif file cannot be shared with a third party. In that case, I will see what I can do on my end. Thanks for the replies

[jterry64]

@hrodmn reviving this since I ran into the same issue. In my case, I have a COG that's natively 30m (so close to zoom level 12), but I only want it to show down to zoom level 8 (about 1km resolution). When it gets to zoom level 8, it looks blurry if you keep zooming in, but I just want to see clearly defined 1km pixels.

Is there a way to do make TiTiler do this, or do I need to modify my COG so it starts at 1 km resolution instead of 30m? The use case here is only I want to see the resampled data at a coarse scale, it's not meant to be viewed at native resolution. I unfortunately also can't share my COG for a few weeks, although I may be able to reproduce it on data I can share if necessary.

[hrodmn]

@jterry64 without knowing which map client you are using or a reproducible example of the file I can't confirm this works, but leaflet has a pair of settings minNativeZoom and maxNativeZoom that you can use to manipulate this kind of behavior. We use these settings in the built-in map.html template:

titiler/src/titiler/core/titiler/core/templates/map.html

Lines 206 to 212 in 7b50a43

	const tileLayer = L.tileLayer(
	data.tiles[0], {
	maxNativeZoom: data.maxzoom,
	minNativeZoom: data.minzoom,
	bounds: L.latLngBounds([bottom, left], [top, right]),
	}
	);

Hopefully that helps!