"Error: Image given has not completed loading" thrown when a layer is added
gregoryalary opened this issue · 2 comments
I keep getting the following error as soon as I add a layer to a map and try to save it as an image.
Complete log :
/home/gregory/code/tsm-aveyron/node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:128
return prev.apply(ctx, arguments);
^
Error: Image given has not completed loading
at CanvasRenderingContext2D.ctx.(anonymous function) [as drawImage] (/home/gregory/code/tsm-aveyron/node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:128:17)
at drawTile (/home/gregory/code/tsm-aveyron/node_modules/leaflet-image/index.js:174:17)
at Array.forEach (<anonymous>)
at Queue.tileQueueFinish [as _call] (/home/gregory/code/tsm-aveyron/node_modules/leaflet-image/index.js:169:18)
at maybeNotify (/home/gregory/code/tsm-aveyron/node_modules/d3-queue/build/d3-queue.js:109:34)
at /home/gregory/code/tsm-aveyron/node_modules/d3-queue/build/d3-queue.js:85:14
Example :
For example, the following code works fine :
var L = require('leaflet-headless');
const map = L.map(document.createElement('div')).setView([52, 4], 10);
L.marker([52, 4]).addTo(map);
L.polyline([[52, 4], [54, 4], [54, 6], [52, 6], [52, 4]]).addTo(map);
map.saveImage('test.png', function (filename) {
console.log('Saved map image to ' + filename);
});
But Error: Image given has not completed loading
will be thrown for the following code :
var L = require('leaflet-headless');
const map = L.map(document.createElement('div')).setView([52, 4], 10);
L.marker([52, 4]).addTo(map);
L.polyline([[52, 4], [54, 4], [54, 6], [52, 6], [52, 4]]).addTo(map);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map); // /!\ Trying to add a layer makes the script crashes during the image export /!\
map.saveImage('test.png', function (filename) {
console.log('Saved map image to ' + filename);
});
Additional infos :
I tried to install libjpeg62-dev
, it did not help.
Any idea? Thanks 😄
I closed this issue as this is a #24 duplicate. Sorry.
I'm just making a note here in case it helps anybody.
It seems that the osm xyz server has some weird CORS set up that prevents this library from working with it.
I spent nearly a day pulling my hair out trying to figure out what was going on but when I tried some different tiles everything worked.
Here's a few I tested that worked perfectly fine:
// mapbox works
let mapId = 'mapbox/streets-v11';
// let mapId = 'mapbox/outdoors-v11';
let token = "pk.yourmapboxtoken";
const tileLayer = L.tileLayer(
`https://api.mapbox.com/styles/v1/${mapId}/tiles/{z}/{x}/{y}?access_token=${token}`
).addTo(map);
const tileLayer = L.tileLayer(
`https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg`
).addTo(map);
const tileLayer = L.tileLayer(
`https://a.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png`
).addTo(map);
const tileLayer = L.tileLayer(
`https://a.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png`
).addTo(map);
It was only the OSM xyz server that was giving me the issue but realistically, it could be any server that doesn't send back CORS headers as expected.