jieter / leaflet-headless Goto Github PK

View Code? Open in Web Editor NEW

116.0 8.0 36.0 4.39 MB

Leaflet for node.

JavaScript 99.01% Shell 0.99%

leaflet-headless's Introduction

Leaflet-headless

Leaflet for node.

Has Leaflet 1.1.x as dependency.
Uses jsdom to fake ad DOM.
Uses Image implementation and canvas from canvas. Note that node-canvas needs some dependencies to be installed: for ubuntu: sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
Tiles, Markers and vector layers work well with leaflet-image
It's slow (~4s for the examples/choropleth/ on my machine).

Example

Run npm install leaflet-headless to install the package. Requiring leaflet-headless will introduce a global L which just works like in the browser.

For vector layers, make sure to use the canvas renderer if you want to use leaflet-image:

var L = require('leaflet-headless');

var map = L.map(document.createElement('div')).setView([52, 4], 10);

var marker = L.marker([52, 4]).addTo(map);

var latlngs = [[52, 4], [54, 4], [54, 6], [52, 6], [52, 4]];
var polyline = L.polyline(latlngs).addTo(map);

Setting map size

Because jsdom does not support clientWidth/clientHeight, leaflet-headless defaults to a map size of 1024x1024px. To adjust this size, use L.Map.setSize(width, height).

map.setSize(800, 600);

Saving images

leaflet-headless adds a convenience function to L.Map to save the current map to an image using leaflet-image.

L.Map.saveImage(filename, callback): Save image to filename and call callback when ready.

map.saveImage('test.png', function (filename) {
    console.log('Saved map image to ' + filename);
});

Other examples:

examples/leaflet-image/, using leaflet-image to output a .png.
examples/choropleth/, Choropleth tutorial from leafletjs.com using leaflet-image to output a .png.
examples/mapbox-geojson, use mapbox.js to render a GeoJSON file with simplestyle styling.

~/leaflet-headless$ npm install
[...]
~/leaflet-headless$ cd examples/leaflet-image/
~/leaflet-headless/examples/leaflet-image/$ node index.js
Save to image using leaflet-image...
Saved test.png

Run tests

npm test

Attribution

This is inspired by https://github.com/rclark/server-side-leaflet.

leaflet-headless's People

Contributors

Stargazers

Watchers

leaflet-headless's Issues

Error: Image given has not completed loading

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 (<anonymous>)
    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.<anonymous> (.../node_modules/request/request.js:1161:10)
    at Request.emit (events.js:160:13)
    at IncomingMessage.<anonymous> (.../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: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    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

L.imageOverlay() does not work

L.imageOverlay does not work if inserted before L.geoJson, and does nothing (works but does not draw nor load the image) if used right after.

This is the stack trace (the lines might be slightly off, so I added the actual code line for each)

"Image or Canvas expected"
at TypeError (native)
at handlePathRoot (/home/yurik/wmf/kartotherian/kartotherian/node_modules/leaflet-image/index.js:175:13)

   at the line "ctx.drawImage(root, pos.x, pos.y);"
   root is "core.(anonymous function)"
   x and y are valid integers

at pop (/home/yurik/wmf/kartotherian/kartotherian/node_modules/leaflet-image/queue.js:28:14)
at Object.q.defer (/home/yurik/wmf/kartotherian/kartotherian/node_modules/leaflet-image/queue.js:59:11)
at leafletImage (/home/yurik/wmf/kartotherian/kartotherian/node_modules/leaflet-image/index.js:29:20)
at tryCatcher (/home/yurik/wmf/kartotherian/kartotherian/node_modules/bluebird/js/release/util.js:16:23)
at ret (eval at <anonymous> (/home/yurik/wmf/kartotherian/kartotherian/node_modules/bluebird/js/release/promisify.js:184:12), <anonymous>:13:39)
at addGeoJson (/home/yurik/wmf/kartotherian/kartotherian/node_modules/kartotherian-server/lib/imager.js:71:12)
at /home/yurik/wmf/kartotherian/kartotherian/node_modules/kartotherian-server/lib/imager.js:117:20
at tryCatcher (/home/yurik/wmf/kartotherian/kartotherian/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/home/yurik/wmf/kartotherian/kartotherian/node_modules/bluebird/js/release/promise.js:500:35)
at Promise._settlePromise (/home/yurik/wmf/kartotherian/kartotherian/node_modules/bluebird/js/release/promise.js:560:18)
at Promise._settlePromise0 (/home/yurik/wmf/kartotherian/kartotherian/node_modules/bluebird/js/release/promise.js:605:10)
at Promise._settlePromises (/home/yurik/wmf/kartotherian/kartotherian/node_modules/bluebird/js/release/promise.js:684:18)
at Promise._fulfill (/home/yurik/wmf/kartotherian/kartotherian/node_modules/bluebird/js/release/promise.js:629:18)
at PromiseArray._resolve (/home/yurik/wmf/kartotherian/kartotherian/node_modules/bluebird/js/release/promise_array.js:125:19)

TileSize

When using a tileSize different than 256 the map will return another map.

I'm using this code for example:

L.tileLayer( url, {tileSize: 1024} ).addTo(map);

The url returns tiles from 1024*1024 pixels. When using the same code without specifying the tileSize and using a url that returns 256x256px tiles it works fine, but when using the 1024 tiles it returns image of just the sea. Is there anything im doing wrong, or does this just not work?

Another issue is that the leaflet map that im using on my website show the same map on for example zoom level 13 as the leaflet-headless does on zoom level 15. Is there an explanation for this?

Thanks!

Error: Cannot find module 'request'

leaflet-headless/examples/leaflet-image % node index.js

module.js:340
throw err;
^
Error: Cannot find module 'request'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/home/komar/src/leaflet-headless/index.js:10:15)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)

I think you should add it into depencies.

mapbox.js leaflet-based - headless

Hi, I'm working on maps for Wikipedia, and it seems that the Leaflet library, plus some extras provided by mapbox.js is what I will use. The client-side code is partially ready, but I will need server-side support to generate static snapshots, or else it will not be fast enough. I can already stitch tiles together in the Kartotherian service, but I need to overlay them with the styled GeoJSON data, which is what mapbox.js library does in the browser. How hard do you think it would be to adapt your project to the mapbox.js? I have also added an issue there, in case they have some plans for it as well. Thanks!
P.S. Your old/new New York project is very similar to the historical proposals.

Warnings on npm install and errors on running

Got these warnings when I did the npm install:

../src/CanvasPattern.h:23:9: warning: private field '_width' is not used
      [-Wunused-private-field]
    int _width, _height;
        ^
../src/CanvasPattern.h:23:17: warning: private field '_height' is not used
      [-Wunused-private-field]
    int _width, _height;
                ^
2 warnings generated.
  CXX(target) Release/obj.target/canvas/src/CanvasRenderingContext2d.o
  CXX(target) Release/obj.target/canvas/src/color.o
  CXX(target) Release/obj.target/canvas/src/Image.o
  CXX(target) Release/obj.target/canvas/src/ImageData.o
  CXX(target) Release/obj.target/canvas/src/init.o
  CXX(target) Release/obj.target/canvas/src/FontFace.o
In file included from ../src/FontFace.cc:7:
../src/FontFace.h:27:15: warning: private field '_ftFace' is not used
      [-Wunused-private-field]
    FT_Face   _ftFace;
              ^
1 warning generated.

And these when I run with my app:

[SECURITY] node-uuid: crypto not usable, falling back to insecure Math.random()
[TypeError: Cannot read property 'any' of undefined]

Upgrade jsdom

jsdom seems to have done quite some development lateley. I just tried upgrading today, but it seems to much has changed to juist replace it.

Prevent accidental file:// usage

In some cases when this module is used with unsanitized data (possibly by accident), the ability to access "file://" is a major security issue. Please add a flag to explicitly permit file:// access, which IMO should be false by default. Also, please provide for an easy way to inject my own URL sanitization function right before that URL is being used. Thanks!

Latest Version on NPM

I think there is a minor version conflict with your release on NPM. The setSize function doesn't include the resetView.

       setSize: function (width, height) {
            this._size = new L.Point(width, height);
            // reset pixelOrigin
            this._resetView(this.getCenter(), this.getZoom());
            return this;
        }

Cannot read property '_leaflet_id' of null

I'm getting the above error in nearly all code I run, including the examples for this project. Maybe a result of updating leaflet to 1.0.0-rc.1

zoomSnap issue?

Hi, I love this module and it's doing exactly what I need. However I have found a problem that I can't figure out. I can't get 'zoomSnap' to work, it seems to operate as it did on Leaflet before v1.0.0, as if zoomSnap was set to 1.
So at the moment my maps are snapping to single zoom levels but I need fractional ones. As an illustration using Leaflet, running the same code, this is standard leaflet 0.7.2:
http://jsfiddle.net/qjhtue1w/
and this is leaflet 1.0.3 showing the correct level of zoom:
https://jsfiddle.net/1p4jggbf/
leaflet-headless seems to operate like leaflet 0.7.2, but I have checked my dependencies and I'm not using a pre-1.0.0 version of Leaflet.
Any ideas?

No markers visible

L.marker([lat, lon]).addTo(map);

I am having problems with the above line. I want to add a marker to the location [lat, lon] but the code after this line is not being executed, the marker is not showing and there is absolutely no error message.

The code in question is as follows:

this.state.L.marker([lat, lon]).addTo(this.state.mapL);

where L and mapL are stored within the state, in order to treat them as sort of global variables.

Is there a solution for this problem?

Thank you.

Overlapping marker images

When markers overlap each other on the client-side leaflet library, the marker's pin point is always visible. It brings markers to the front to make sure that the pin point is visible. However when adding the same markers to a map using leaflet headless on node, the markers get layered on top of each other based on the order in which they are added to the map.

Is there a way to have the same logic for leaflet headless that is used in the client-side leaflet library?

Error installing leaflet headless

I'm trying to use this module in a project I am making but I'm struggling to install it. I am running a windows 10 laptop with node v10.15.3 and python v2.7 (as I've seen its required by this module). But when I do npm i leaflet-headless I get this error

Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
  Canvas.cc
  CanvasGradient.cc
  CanvasPattern.cc
  CanvasRenderingContext2d.cc
  color.cc
  Image.cc
  ImageData.cc
  init.cc
  win_delay_load_hook.cc
c:\users\harry\documents\projects\discordbot\node_modules\leaflet-headless\node_modules\canvas\src\canvas.h(19): fatal error C1083: Cannot open include fi
le: 'cairo.h': No such file or directory (compiling source file ..\src\ImageData.cc) [C:\Users\Harry\Documents\Projects\DiscordBot\node_modules\leaflet-he
adless\node_modules\canvas\build\canvas.vcxproj]
c:\users\harry\documents\projects\discordbot\node_modules\leaflet-headless\node_modules\canvas\src\canvas.h(19): fatal error C1083: Cannot open include fi 
le: 'cairo.h': No such file or directory (compiling source file ..\src\Canvas.cc) [C:\Users\Harry\Documents\Projects\DiscordBot\node_modules\leaflet-headl
ess\node_modules\canvas\build\canvas.vcxproj]
c:\users\harry\documents\projects\discordbot\node_modules\leaflet-headless\node_modules\canvas\src\canvas.h(19): fatal error C1083: Cannot open include fi 
le: 'cairo.h': No such file or directory (compiling source file ..\src\CanvasPattern.cc) [C:\Users\Harry\Documents\Projects\DiscordBot\node_modules\leafle 
t-headless\node_modules\canvas\build\canvas.vcxproj]
c:\users\harry\documents\projects\discordbot\node_modules\leaflet-headless\node_modules\canvas\src\canvas.h(19): fatal error C1083: Cannot open include fi 
le: 'cairo.h': No such file or directory (compiling source file ..\src\CanvasGradient.cc) [C:\Users\Harry\Documents\Projects\DiscordBot\node_modules\leafl 
et-headless\node_modules\canvas\build\canvas.vcxproj]
c:\users\harry\documents\projects\discordbot\node_modules\leaflet-headless\node_modules\canvas\src\canvas.h(19): fatal error C1083: Cannot open include fi 
le: 'cairo.h': No such file or directory (compiling source file ..\src\Image.cc) [C:\Users\Harry\Documents\Projects\DiscordBot\node_modules\leaflet-headle 
ss\node_modules\canvas\build\canvas.vcxproj]
c:\users\harry\documents\projects\discordbot\node_modules\leaflet-headless\node_modules\canvas\src\canvas.h(19): fatal error C1083: Cannot open include fi 
le: 'cairo.h': No such file or directory (compiling source file ..\src\init.cc) [C:\Users\Harry\Documents\Projects\DiscordBot\node_modules\leaflet-headles 
s\node_modules\canvas\build\canvas.vcxproj]
c:\users\harry\documents\projects\discordbot\node_modules\leaflet-headless\node_modules\canvas\src\canvas.h(19): fatal error C1083: Cannot open include fi 
le: 'cairo.h': No such file or directory (compiling source file ..\src\CanvasRenderingContext2d.cc) [C:\Users\Harry\Documents\Projects\DiscordBot\node_mod 
ules\leaflet-headless\node_modules\canvas\build\canvas.vcxproj]
gyp ERR! build error 
gyp ERR! stack Error: `C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin\MSBuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:189:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Windows_NT 10.0.18362
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\Harry\Documents\Projects\DiscordBot\node_modules\leaflet-headless\node_modules\canvas
gyp ERR! node -v v10.15.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
npm WARN [email protected] requires a peer of @discordjs/uws@^10.149.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of bufferutil@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of erlpack@discordapp/erlpack but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of libsodium-wrappers@^0.7.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of node-opus@^0.2.7 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of opusscript@^0.0.6 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of sodium@^2.0.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Harry\AppData\Roaming\npm-cache\_logs\2019-10-13T09_56_12_164Z-debug.log

I have tried installing canvas by itself and that works it just does not seem to like to install leaflet headless.

"Error: Image given has not completed loading" thrown when a layer is added

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 😄

Add ability to set the size of the window

I see there is this comment in the code

// Monkey patch map.getSize to make it work with fixed 1024x1024 elements
// jsdom appears to not have clientHeight/clientWidth on elements

I really require flexible sizing for the project I'm working on, so I'm going to try to find a workaround for this.

needs upgrade, not work with new nodejs versions

firstly contextify is removed from jsdom

jsdom has a lot of changes needs update immediately

canvas has problems on windows

WMS TileLayer Event / Multiple Tile Layer

I would like to add a WMS Tile layer (data comes from a postgresql and the wms is created by geoserver) on top of my basemap.

The map.saveImage function should start when all Tiles from the overlay-layer are loaded. Therefor I put the function in the callback of the "on-load" event of the wms layer. Unfortunatly the callback never gets called. what am I missing?

    var datalayer = L.tileLayer.wms(url, { 
        format: 'image/png',
        minZoom: 13,
        maxZoom: 21,    
        maxNativeZoom: 19,
        zIndex: 10,
        transparent: true,
        layers: "Data:Layer"
    }).addTo(map);

datalayer.on("load", function() { map.saveImage(filename, callback) });

Provide easy access to the canvas before and after leaflet draws on it

For our usecase, it would be great to add an image (from a buffer) to the canvas before leaflet gets to draw on it. What would be the best way to do this? Thx!

How to include leaflet.css?

Is there a way to apply the leaflet.css stylesheet? I'm trying to render some circle markers, which require the CSS to position correctly. I tried div.style.cssText = ... but that had no effect.

tilelayer-wms example broken

The tilelayer-wms example does not work for me (it is failing to complete loading...)

ubuntu@host:~/leaflet-headless/examples/tilelayer-wms$ node index.js
Saving an image with a WMS layer ...
/home/ubuntu/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/ubuntu/node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:128:17)
at drawTile (/home/ubuntu/node_modules/leaflet-image/index.js:174:17)
at Array.forEach (native)
at Queue.tileQueueFinish [as _call] (/home/ubuntu/node_modules/leaflet-image/index.js:169:18)
at maybeNotify (/home/ubuntu/node_modules/d3-queue/build/d3-queue.js:109:34)
at /home/ubuntu/node_modules/d3-queue/build/d3-queue.js:85:14
at Image.im.onload (/home/ubuntu/node_modules/leaflet-image/index.js:146:17)
at buffer2image (/home/ubuntu/leaflet-headless/src/image.js:29:25)
at Request._callback (/home/ubuntu/leaflet-headless/src/image.js:41:13)
at Request.self.callback (/home/ubuntu/node_modules/request/request.js:186:22)
ubuntu@host:~/leaflet-headless/examples/tilelayer-wms$

Render some sort of labels

I'd be interested in showing labels at some given points, rather than showing markers. As expected, DivIcons don't work. Is there any other way to render some simple text labels in the map?

SetSize / GetSize not working

Hi, I've been using this library and the GetSize/SetSize function doesn't seem to work. I've written my own hack for it to make it working.

Thanks for providing this library.

Either I'm using it incorrectly or it's always defaulting to 1024/1024