leaflet-simple-map-screenshoter
Version:
Leaflet plugin plugin which take screenshot of map
100 lines (80 loc) • 3.08 kB
HTML
<html style="height: auto; min-height: 100%;" lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Test Leaflet</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/leaflet-draw"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css"/>
<script src="https://unpkg.com/leaflet-mouse-position"></script>
<script src="https://unpkg.com/leaflet-measure-path"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-measure-path/leaflet-measure-path.css"/>
<script src="https://unpkg.com/@elfalem/leaflet-curve"></script>
</head>
<body class="skin-black" style="height: auto; min-height: 100%;">
<div class="wrapper" style="height: auto; min-height: 100%;">
<div style="min-height: 825px;">
<pre>
https://github.com/grinat/leaflet-simple-map-screenshoter/issues/27
1 draw a Polygon
2 press the button on top.
3 scroll down to see the image
</pre>
<button onclick='buttonClick()'>
click
</button>
<section>
<div id="divMap" style="width: 100%; height: 400px;"></div>
</section>
<div id = "screens"></div>
</div>
</div>
<script>
// init map
var map = L.map('divMap')
// L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mapSimple);
var layer = null
const drawnItems = new L.FeatureGroup()
map.fitBounds([[0, 0], [700, 1000]])
map.addLayer(drawnItems)
const drawControl = new L.Control.Draw({
position: 'topleft',
draw: {
polyline: false,
polygon: true,
rectangle: false,
circle: false,
marker: false,
circlemarker: false
},
edit: {
featureGroup: drawnItems,
remove: true
}
})
map.addControl(drawControl)
var shot = L.simpleMapScreenshoter().addTo(map)
map.on(L.Draw.Event.CREATED, function (event) {
drawnItems.addLayer(event.layer)
layer = event.layer
})
// init plugin
function buttonClick(){
map.fitBounds(layer.getBounds())
shot.takeScreen('image')
.then((image) => {
var img = document.createElement('img')
img.src = image
document.getElementById('screens').prepend(img)
})
}
</script>
</body>
</html>