0

I have a puzzling problem: I'm using Leaflet on an internal webpage to show a map with some custom layers.

Say, the webpage sits on the internal server showdata.local. The map tiles come from another internal server named maps.local. Leaflet finds the tiles perfectly given the appropriate tile URL http://maps.local/terraintiles/{z}_{x}_{y}.png. - So Leaflet's JavaScript (running in the browser) can clearly retrieve the images from the tile server maps.local. So far so good.

Now I am trying some Leaflet plugins to export on the client (i.e. the browser) the map (with the custom layers) as an image. I tried Leaflet.BigImage and leaflet-image. - But in both plugins, when I try to export the map, I get CORS errors on the tiles URLs. I assume the plugins need to retrieve the tiles again to build a virtual canvas with the map on it.

What I do not understand: Why do I get the CORS error in the plugins, but Leaflet's JavaScript code can load the tiles freely? Shouldn't be both disallowed if the tile server does not allow CORS?

halloleo
  • 9,216
  • 13
  • 64
  • 122

1 Answers1

3

To export the map, the plugin needs to read the image data from the files into JS and generate a new image. This needs permission from CORS.

To display a map tile, Leaflet just needs to place an image element on the page and leave the browser to display it to the user. The image data never touches the JS.

Further reading: XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Makes total sense! Of course it is the browser’s render engine which does the downloading of the *displayed* images while for *exporting* the JavaScript engine has to do the downloading. Thanks! – halloleo Jan 28 '22 at 11:44