leaflet-simple-map-screenshoter
Version:
Leaflet plugin plugin which take screenshot of map
167 lines (150 loc) • 6.26 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>leaflet-simple-map-screenshoter examples</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script src="../dist/leaflet-simple-map-screenshoter.js"></script>
<script src="https://unpkg.com/file-saver/dist/FileSaver.js"></script>
<style>
.maps {
display: flex;
justify-content: space-around;
}
.maps > div {
border: 1px solid #939393;
margin: 10px;
padding: 10px;
border-radius: 15px;
max-width: 300px;
}
.maps .leaflet-container {
display: block;
height: 300px;
width: 302px;
}
</style>
</head>
<body>
<div class="maps">
<div>
<h3>Simple example</h3>
<div id="mapSimple"></div>
<div id="mapSimpleScreeningState"></div>
<script>
// init map
var mapSimple = L.map('mapSimple').setView([40, -74], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mapSimple);
// init plugin
L.simpleMapScreenshoter().addTo(mapSimple)
// optional: add screening state info
mapSimple.on('simpleMapScreenshoter.takeScreen', function () {
document.getElementById('mapSimpleScreeningState').innerHTML += 'screening...<br>'
})
mapSimple.on('simpleMapScreenshoter.done', function () {
document.getElementById('mapSimpleScreeningState').innerHTML += 'screen end...<br>'
})
mapSimple.on('simpleMapScreenshoter.error', function (event) {
console.error(event.e)
document.getElementById('mapSimpleScreeningState').innerHTML += event.e.toString() + '<br>'
})
</script>
</div>
<div>
<h3>Simple example with elements with long distances</h3>
<div id="mapBig"></div>
<div id="mapBigScreeningState"></div>
<script>
// init map
var mapBig = L.map('mapBig').setView([40, -74], 7);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
.addTo(mapBig);
L.marker([40, -74]).addTo(mapBig);
L.marker([51.503, -0.06]).addTo(mapBig);
L.marker([20, -20]).addTo(mapBig);
L.polygon([
[40, -74],
[51.503, -0.06],
[20, -20]
]).addTo(mapBig);
// add plugin
L.simpleMapScreenshoter({
// custom screenshot name
screenName: function () {
return new Date().toDateString()
}
}).addTo(mapBig);
// show screening progress
mapBig.on('simpleMapScreenshoter.takeScreen', function () {
document.getElementById('mapBigScreeningState').innerHTML = 'screening...<br>'
})
mapBig.on('simpleMapScreenshoter.done', function () {
document.getElementById('mapBigScreeningState').innerHTML = 'screen end...<br>'
})
mapBig.on('simpleMapScreenshoter.error', function (event) {
console.error(event.e)
document.getElementById('mapBigScreeningState').innerHTML = event.e.toString() + '<br>'
})
</script>
</div>
<div>
<h3>Advanced example</h3>
<div id="map"></div>
<button id="screenMap">Take and download screen</button>
<button id="screenMapAndPast">Take screen and past to body</button>
<div id="screens"></div>
<script>
// init map
var map = L.map('map').setView([56, 37], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
L.marker([73, -43]).addTo(map).bindPopup('Greenland')
L.marker([23.6, 121.5]).addTo(map).bindPopup('China')
// init plugin
var simpleMapScreenshoter = L.simpleMapScreenshoter({
hidden: true, // hide screen btn on map
}).addTo(map)
// return as blob
document.getElementById('screenMap').addEventListener('click', function () {
simpleMapScreenshoter.takeScreen('blob', {
caption: function () {
return 'Hello world'
}
}).then(blob => {
saveAs(blob, 'screen.png')
}).catch(e => {
alert(e.toString())
})
})
// return as image
document.getElementById('screenMapAndPast').addEventListener('click', function () {
simpleMapScreenshoter.takeScreen('image', {
caption: function () {
return 'Hello world'
}
}).then(image => {
var img = document.createElement('img')
img.src = image
document.getElementById('screens').prepend(img)
}).catch(e => {
alert(e.toString())
})
})
// listen on fired error or catch error in prev promise
map.on('simpleMapScreenshoter.error', function (event) {
var el = document.createElement('div')
el.classList.add('create-screen-error')
el.innerHTML = event.e.toString()
document.getElementById('screens').appendChild(el)
})
</script>
</div>
</div>
</body>
</html>