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,
IE >= 10with no exceptions.
- You must set
L_PREFER_CANVAS = true;so that vector layers are drawn in Canvas rather than SVG or VML.
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
- The Mapbox Static Image API is simpler to use and faster than this approach.