search

commenthol / leaflet-rastercoords

Leaflet plugin for plain image map projection to display large images using tiles generated with gdal2tiles-leaflet
https://commenthol.github.io/leaflet-rastercoords
MIT License
122 stars 23 forks source link

404s on zooming out #9

Closed Mohamed-Kassem-com closed 3 years ago

Mohamed-Kassem-com commented 3 years ago

Hi @commenthol and thanks for this plugin.

If you visit https://commenthol.github.io/leaflet-rastercoords/example/index.html and zoom out, you will get a lot of 404 errors in the network panel. Why these errors are happening?

Why is it requesting non-existing images/tile images?

I recorded this video to show you the issue: https://www.dropbox.com/s/prjp7e3cxikijx6/uqHLiG4HyA.mp4?dl=0

Bamux commented 3 years ago

I unfortunately have the same problem have you found a solution for this?

takvol commented 3 years ago

You need to set bounds for the layer

const size = [
  3831, // original width of image
  3101  // original height of image
];
const rc = new L.RasterCoords(map, size);

L.tileLayer('./tiles/{z}/{x}/{y}.png', {
  noWrap: true,
  bounds: getMaxBounds(rc, size[0], size[1]),
  ...
})

function to calculate bounds

getMaxBounds(rc, width, height) {
  const southWest = rc.unproject([0, height]);
  const northEast = rc.unproject([width, 0]);

  return new L.LatLngBounds(southWest, northEast);
}
commenthol commented 3 years ago

Proposed changes are part of v1.0.4 Credits go to @takvol :clap: