Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A weird vertical shift while rendering multiple bands using GeoRasterLayer #12

Open
arashmad opened this issue Feb 18, 2022 · 0 comments

Comments

@arashmad
Copy link

Hello team, thank you for this beautiful work.
I am not sure that it is a right place for asking my question.

During my development to create a GeoRasterLayer in leaflet, when I try to render a single band .tif file, it is displayed correctly. But in case of having more than one .tif file say to visualize an RGB raster layer, I come across a weird thing in which, there is vertical shift between tiles.

This COG file has been generated by GDAL command lines gdaladdo and gdal_translate and then using validate_cloud_optimized_geotiff.py I checked it if the generated COG is valid or not.

After that I found some useful examples on this repository. When I take a look at demos, I got surprised because this vertical shift can been seen clearly. For example, in this demo and this one, the vertical shift is obvious.

Here is my code:

(async function() {
        var map = L.map('map').setView([0, 0], 5);
        const bandRedURL = "http://localhost:4002/geo-data/band3.tif";
        const bandGreenURL = "http://localhost:4002/geo-data/band2.tif";
        const bandBlueURL = "http://localhost:4002/geo-data/band1.tif";

        const red_georaster = await parseGeoraster(bandRedURL);
        const green_georaster = await parseGeoraster(bandGreenURL);
        const blue_georaster = await parseGeoraster(bandBlueURL);

        const r_metadata = await getMetadata(bandRedURL.replace('.tif', '.json'))
        const g_metadata = await getMetadata(bandGreenURL.replace('.tif', '.json'))
        const b_metadata = await getMetadata(bandBlueURL.replace('.tif', '.json'))
        
        const georasters = [red_georaster, green_georaster, blue_georaster];

        const pixelValuesToColorFn = ([red, green, blue]) => {
            if (red <=0) return 'rgb(0,0,0,0)'
            if (green <=0) return 'rgb(0,0,0,0)'
            if (blue <=0) return 'rgb(0,0,0,0)'
            red = Math.round(255 * red / r_metadata.max);
            green = Math.round(255 * green / g_metadata.max);
            blue = Math.round(255 * blue / b_metadata.max);
            return `rgb(${red}, ${green}, ${blue})`;
        };

        const layer = new GeoRasterLayer({
          georasters,
          pixelValuesToColorFn,
          resolution: 512
        });
        
        layer.addTo(map);
        map.fitBounds(layer.getBounds());
})();

I was wondering it it is a bug in the library that your are working on it or a configuration I need to do inside my JS code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant