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
var map = Lmapbox;;
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:
API
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.