0

I'm trying to get a snapshot using leaflet-image plugin. I'm getting this error:

leaflet-image.js:195 Element could not be drawn on canvas <svg class=​"leaflet-zoom-animated" width=​"1220" height=​"790" viewBox=​"-24 -16 1220 790" style=​"transform:​ translate3d(-24px, -16px, 0px)​;​">​…​</svg>​handlePathRoot @ leaflet-image.js:195start @ leaflet-image.js:336poke @ leaflet-image.js:324(anonymous function) @ leaflet-image.js:352tileQueueFinish @ leaflet-image.js:172maybeNotify @ leaflet-image.js:377(anonymous function) @ leaflet-image.js:353im.onload @ leaflet-image.js:148

It's happening when I load a layer to the map (as the attached image)

Any help is appreciated.

Marko Letic
  • 2,460
  • 2
  • 28
  • 34
vhiguita857
  • 31
  • 5

1 Answers1

0

It's very likely that the image does not have CORS headers, and the <canvas> HTML element that leaflet-image.js uses is being tainted.

This problem is well documented in the questions: «Cross-origin data in HTML5 canvas» and «Canvas image crossplatform insecure error». Ultimately you'll have to make sure that CORS is enabled in the web server that you're fetching the image from.

IvanSanchez
  • 18,272
  • 3
  • 30
  • 45