GeoTIFF/georaster-layer-for-leaflet

COG skewed at lower zoom levels

Tommatheussen opened this issue · 1 comments

Describe the bug
COGs are skewed at lower zoom levels. This only happens when the data gets loaded directly using the URL. Loading the file into an arrayBuffer works correctly, but this obviously defeats the purpose of COGs. (sample code below)

To Reproduce

async addGeoRasterToMap(url: string) {
  /* Option that works */
  let arrayBuffer = await fetch(url)
    .then(response => response.arrayBuffer());

  let georaster: GeoRaster = await parseGeoRaster(arrayBuffer);

  /* Option that does not work correctly */
  let georaster: GeoRaster = await parseGeoRaster(url);

  const layer = new GeoRasterLayer({
    georaster: georaster,
  })

  this._leafletMap.addLayer(layer);
}

Expected behavior
A clear and concise description of what you expected to happen.
Screenshots

Lower zoom level shows skewed result:
image

Higher zoom levels gradually get increasingly more accurate:
image

Same data using arrayBuffer:
image

Desktop (please complete the following information):

  • OS: macOS
  • Browser: Firefox
  • Version 107.0

Additional context
I can provide the used geotiff file, although it seems to happen on all geotiff files I currently have available to me.
Looks like the problem is that the COG files use EPSG:4326 projection and leaflet is using EPSG:3857

This is likely a duplicate of #77.