Leaflet Image

by Anas Zaki

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css">
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script>

<style>
.ui-button {
  position:absolute;
  top:10px;
  right:10px;
  z-index:1000;
  }
#map {
  width:50%;
  }
#snapshot {
  position:absolute;
  top:0;bottom:0;right:0;
  width:50%;
  }
</style>

<button id='snap' class='ui-button'>Take a snapshot</button>
<div id='snapshot'></div>
<div id='map'></div>

CSS

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

JavaScript

L.mapbox.accessToken = 'pk.eyJ1IjoiaXdhbm5hZmx5dXAiLCJhIjoic3g4WVR2YyJ9.qcDUEK2Z2fOd453_raZ8tw';
var snapshot = document.getElementById('snapshot');
var map = L.mapbox.map('map', 'examples.map-i875kd35')
  .setView([38.88995, -77.00906], 15);

document.getElementById('snap').addEventListener('click', function() {
    leafletImage(map, doImage);
});

function doImage(err, canvas) {
    var img = document.createElement('img');
    var dimensions = map.getSize();
    img.width = dimensions.x;
    img.height = dimensions.y;
    img.src = canvas.toDataURL();
    snapshot.innerHTML = '';
    snapshot.appendChild(img);
}