node package manager


export leaflet maps as images

Export images out of Leaflet maps without a server component, by using Canvas and CORS.

  • Tile layer providers (OSM, MapBox, etc) must support CORS
  • Any markers on the map must also support CORS. The default Leaflet-CDN markers don't, so they aren't supported.
  • Your browser must support CORS and Canvas, so IE >= 10 with no exceptions.
  • This library does not rasterize HTML because browsers cannot rasterize HTML. Therefore, L.divIcon and other HTML-based features of a map, like zoom controls or legends, are not included in the output, because they are HTML.

For Leaflet < 1.0.0: You must set L_PREFER_CANVAS = true; so that vector layers are drawn in Canvas

For Leaflet >= 1.0.0: You must set renderer: L.canvas() for any layer that you want included in the generated image. You can also set this by setting preferCanvas: true in your map's options.

  • Leaflet.label: will not work because it uses HTML to display labels.
  • Leaflet.markercluster: will not work because it uses HTML for clusters.


npm install --save leaflet-image


curl > leaflet-image.js
var map ='map', 'YOUR.MAPID').setView([38.9, -77.03], 14);
leafletImage(map, function(err, canvas) {
    // now you have canvas 
    // example thing to do with that canvas: 
    var img = document.createElement('img');
    var dimensions = map.getSize();
    img.width = dimensions.x;
    img.height = dimensions.y;
    img.src = canvas.toDataURL();
    document.getElementById('images').innerHTML = '';

leaflet-image is available through the Mapbox Plugin CDN so you don't need to download & copy it. Just include the following script tag:

<script src='//'></script>
leafletImage(map, callback)

map is a or, callback takes (err, canvas).

Any images you generate from maps that require attribution - which is most, including all from commercial sources and those that include any data from OpenStreetMap - will require the same attribution as the map did. Remember to attribute.