leaflet-headless

Leaflet-headless

Leaflet for node.

• Has Leaflet 1.0.0-beta as dependency.
• Uses jsdom to fake ad DOM.
• Uses canvas Image implementation to fake images. 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
• Currently fixed to 1024x1024 map size.
• 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);

// canvas renderer for vector layers:
var canvas = L.canvas();
var latlngs = [[52, 4], [54, 4], [54, 6], [52, 6], [52, 4]];
var polyline = L.polyline(latlngs, {renderer: canvas}).addTo(map);

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.

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

var map = L.map(document.createElement('div')).setView([0, 0], 3);
L.marker([-12, -14]).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);

map.saveImage('test.png');

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.

~/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.