leaflet-image
Version:
export leaflet maps as images
72 lines (66 loc) • 1.79 kB
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.tiles.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<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 src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-heat/v0.1.0/leaflet-heat.js'></script>
<script src='leaflet-image.js'></script>
<script>
var snapshot = document.getElementById('snapshot');
var map = L.mapbox.map('map')
.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);
}
var heat = L.heatLayer([], {maxZoom: 18}).addTo(map);
var draw = true;
// add points on mouse move (except when interacting with the map)
map.on({
movestart: function () { draw = false; },
moveend: function () { draw = true; },
mousemove: function (e) {
if (draw) {
heat.addLatLng(e.latlng);
}
}
})
</script>
</body>
</html>