leaflet-image

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

Requirements

• 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.

Plugins that will not work with leaflet-image

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

Usage

browserify

npm install --save leaflet-image

web

curl -L https://unpkg.com/leaflet-image@latest/leaflet-image.js > leaflet-image.js

Example

varmap=L.mapbox.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:varimg=document.createElement('img');vardimensions=map.getSize();img.width=dimensions.x;img.height=dimensions.y;img.src=canvas.toDataURL();document.getElementById('images').innerHTML='';document.getElementById('images').appendChild(img);});

Plugin CDN

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

<scriptsrc='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script>

API

leafletImage(map,callback)

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

Attribution

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.

See Also

• The Mapbox Static Image API is simpler to use and faster than this approach.