GeoTIFF / GeoTIFF/georaster-layer-for-leaflet-example

A weird vertical shift while rendering multiple bands using GeoRasterLayer

Open
#12 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
98
Forks
31
PR merge metrics
No merged PRs in 30d

Description

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](https://geotiff.github.io/georaster-layer-for-leaflet-example/examples/load-cog-via-script-tag.html) and [this one](https://geotiff.github.io/georaster-layer-for-leaflet-example/examples/separated.html), the vertical shift is obvious.

Here is my code:
```javascript
(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.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the vertical shift with the two linked demo pages and the provided multi-band JavaScript example, comparing it with single-band rendering. Inspect how the example constructs GeoRasterLayer from multiple GeoTIFFs and verify whether the source rasters align before rendering. Done means identifying whether the shift is caused by the library or input/configuration and documenting the required fix or reproduction details.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.