leaflet-image
Version:
export leaflet maps as images
42 lines (37 loc) • 1.24 kB
HTML
<head>
<script>L_PREFER_CANVAS = true;</script>
<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' />
<link href='./shared/style.css' rel='stylesheet' />
</head>
<body>
<div id='snapshot'></div>
<div id='map'></div>
<script src='../../leaflet-image.js'></script>
<script>
var snapshot = document.getElementById('snapshot');
var map = L.map('map')
.setView([38.88995, -77.00906], 8);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var precipitation = L.tileLayer.wms('http://nowcoast.noaa.gov/arcgis/services/nowcoast/analysis_meteohydro_sfc_qpe_time/MapServer/WmsServer', {
format: 'image/png',
transparent: true,
layers: '5'
}).addTo(map);
setTimeout(function() {
leafletImage(map, doImage);
}, 2000);
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>
</body>
</html>