GeoTIFF / GeoTIFF/georaster-layer-for-leaflet-example
A weird vertical shift while rendering multiple bands using GeoRasterLayer
- 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