Skip to content

mapbox/leaflet-image

gh-pages
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
May 18, 2016 17:48
May 18, 2016 16:11
December 9, 2016 10:48
May 18, 2016 17:56
June 16, 2016 13:33
December 9, 2016 10:51
December 5, 2016 15:12
December 5, 2016 15:12
September 23, 2013 13:50

leaflet-image

CircleCI

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 = 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:
    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 = '';
    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:

<script src='//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