jieter/leaflet-headless

"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: '&copy; <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.