jieter / jieter/leaflet-headless

Error: Image given has not completed loading

Open
#24 9 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.