export leaflet maps as images
Export images out of Leaflet maps without a server component, by using Canvas and CORS.
IE >= 10with no exceptions.
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.
npm install --save leaflet-image
curl https://raw.github.com/mapbox/leaflet-image/gh-pages/leaflet-image.js > leaflet-image.js
var map = Lmapboxmap'map' 'YOUR.MAPID'setView38.9 -77.03 14;leafletImagemap// now you have canvas// example thing to do with that canvas:var img = documentcreateElement'img';var dimensions = mapgetSize;imgwidth = dimensionsx;imgheight = dimensionsy;imgsrc = canvastoDataURL;documentgetElementById'images'innerHTML = '';documentgetElementById'images'appendChildimg;;
leaflet-image is available through the Mapbox Plugin CDN so you don't need to download & copy it. Just include the following script tag:
map is a
L.mapbox.map, callback takes
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.