🗺️ Leaflet-Node Examples

Generate server-side map images identical to client-side rendering

GitHub npm Leaflet.js

What is Leaflet-Node?

Leaflet-Node allows you to run Leaflet maps in Node.js environments. Perfect for server-side map generation, automated testing, and headless rendering.

Below you'll see live Leaflet.js maps on the left and PNG images generated server-side using the exact same configuration on the right. This demonstrates how you can use leaflet-node to generate identical map images on your server.

Quick Start

Install the shared packages with your preferred package manager:

npm install leaflet-node leaflet
yarn add leaflet-node leaflet
pnpm add leaflet-node leaflet
bun add leaflet-node leaflet

Node.js 20+ is required. The bundled @napi-rs/canvas ships prebuilt binaries (ensure glibc ≥ 2.18 on Linux).

Leaflet.js (Browser)

View setup & code
  • Include the Leaflet CSS and JS from the CDN (or bundle them).
  • Add a container element, e.g. <div id="map" class="map-container"></div>.
  • Reuse any example setup by passing L and the map instance.
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import { setup } from './my-shared-setup.js';

const map = L.map('map');
setup(L, map);

leaflet-node (Server / CI)

View setup & code
  • Install leaflet-node and the Leaflet peer dependency.
  • Create a headless map and call the same setup function.
  • Size the canvas, then export to PNG/JPEG with saveImage.
import L from 'leaflet-node';
import { setup } from './my-shared-setup.js';

const map = L.map(document.createElement('div'));
setup(L, map);

map.setSize(600, 400);
await new Promise((resolve) => setTimeout(resolve, 1000));
await map.saveImage('map.png');

Examples

Each example shows the same Leaflet configuration rendered both client-side (interactive) and server-side (static PNG).

Features