Leaflet Image

Zoom and pan around a map then take a screenshot as an image.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Image</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.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>

<script>
L.mapbox.accessToken = '<your access token here>';
var snapshot = document.getElementById('snapshot');
var map = L.mapbox.map('map', 'mapbox.streets')
  .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);
}
</script>
to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.
Copy example