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