jieter / jieter/leaflet-headless
Error: Image given has not completed loading
- Dominant language
- JavaScript
- Stars
- 118
- Forks
- 34
- PR merge metrics
- No merged PRs in 30d
Description
Hello,
I've seen that this repo has been not actively developed since 2017 but I'm using it and eventually I could try to fix it if someone could help me to understand this issue, because apart of this issue this library works very well.
Basically, what happen is that if I zoom out too much, I get this exception:
```
uncaughtException: Error: Image given has not completed loading
at CanvasRenderingContext2D.ctx.(anonymous function) [as drawImage] (.../node_modules/leaflet-headless/node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:128:17)
at drawTile (.../node_modules/leaflet-image/index.js:174:17)
at Array.forEach ()
at Queue.tileQueueFinish [as _call] (.../node_modules/leaflet-image/index.js:169:18)
at maybeNotify (/home/daniele/git/print.nextatlas.com/node_modules/d3-queue/build/d3-queue.js:109:34)
at .../node_modules/d3-queue/build/d3-queue.js:85:14
at Image.im.onload .../node_modules/leaflet-image/index.js:146:17)
at buffer2image (.../node_modules/leaflet-headless/src/image.js:29:25)
at Request._callback (.../node_modules/leaflet-headless/src/image.js:41:13)
at Request.self.callback (.../node_modules/request/request.js:185:22)
at Request.emit (events.js:160:13)
at Request. (.../node_modules/request/request.js:1161:10)
at Request.emit (events.js:160:13)
at IncomingMessage. (.../node_modules/request/request.js:1083:12)
at Object.onceWrapper (events.js:255:19)
at IncomingMessage.emit (events.js:165:20)
```
To be more precise, this is the configuration I use:
```
maxBounds = {
northEast: {lat: 80.297927149974, lng: 180.94482421874997},
southWest: {lat: -50.736455137010644, lng: -178.35205078125}
};
center = [45, 8];
mapConfig = {
zoomControl: false,
attributionControl: false,
worldCopyJump: true,
dragging: false,
touchZoom: false,
scrollWheelZoom: false,
doubleClickZoom: false,
boxZoom: false,
tap: false,
trackResize: false,
minZoom: 0,
maxBounds: L.latLngBounds(
L.latLng(maxBounds.southWest.lat, maxBounds.southWest.lng),
L.latLng(maxBounds.northEast.lat, maxBounds.northEast.lng))
};
tilesConfig = {
attribution: '© OpenStreetMap contributors, ' + 'CC-BY-SA',
maxZoom: 14,
minZoom: 0,
detectRetina: true,
continuousWorld: true
}
const map = L.map(global.document.createElement('div'), mapConfig);
L.tileLayer('mapbox-url', tilesConfig).addTo(map);
```
To export the map I use this code:
```
map.setView(center, 1); /* if the zoom is more than 1 it doesn't break */
this.map.setSize(width, height); /* width = 572 height = 354 */
map.saveImage('test_map.png', (filename) => {
/* callback when the export finishes */
});
```
Any hints will be very appreciated.
Daniele
Contributor guide
No contributing guide indexed for this repository
Research direction
Reproduce the export with the map configuration in the issue, especially at zoom 0, then trace the stack from leaflet-image/index.js drawTile through leaflet-headless/src/image.js buffer2image and jsdom's HTMLCanvasElement implementation. The issue is resolved when saving the map completes without the "Image given has not completed loading" exception.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, node.js
- Domain
- backend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100