mukhtyar/.block

## .block
license: mit

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Image</title>

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
   <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>

    <script src='https://unpkg.com/leaflet-image@latest/leaflet-image.js'></script>
<style>
  #map { height:300px;}
  #snap {position: absolute; bottom: 100px; left: 10px; z-index: 99;}
</style>
</head>
<body>


    <button id='snap'>Map Snapshot</button>
    <div id='images' style='float: right;'></div>
    <div id='map' style='width: 70%;'></div>

    <script type="text/javascript">
    	var map = L.map('map', {preferCanvas: true}).setView([40, -100], 13);
      var url = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
			var cartoDBPositron = L.tileLayer(url, {
  			attribution: 'Data: <a href="http://www.openstreetmap.org/copyright">OSM</a>, Map Tiles: <a href="http://cartodb.com/attributions">CartoDB</a>',
  			subdomains: 'abcd',
  			maxZoom: 19,
  			label: 'Streets',
			});
      map.addLayer(cartoDBPositron);

      var myLines = [{
          "type": "LineString",
          "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
      }, {
          "type": "LineString",
          "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
      }];
      var myLayer = L.geoJSON().addTo(map);
			myLayer.addData(myLines);

      document.getElementById('snap').addEventListener('click', function() {
        leafletImage(map, doImage);
      });

        function doImage(err, canvas) {
            var img = document.createElement('img');
            var dimensions = map.getSize();
            imgRatio = dimensions.x / dimensions.y;
            img.width = 300;
            img.height = 300 / imgRatio;
            img.src = canvas.toDataURL();
            document.getElementById('images').innerHTML = '';
            document.getElementById('images').appendChild(img);
        }
    </script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Leaflet Image</title>

	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>

	<script src='https://unpkg.com/leaflet-image@latest/leaflet-image.js'></script>
	<style>
	#map { height:300px;}
	#snap {position: absolute; bottom: 100px; left: 10px; z-index: 99;}
	</style>
	</head>
	<body>



	<button id='snap'>Map Snapshot</button>
	<div id='images' style='float: right;'></div>
	<div id='map' style='width: 70%;'></div>

	<script type="text/javascript">
	var map = L.map('map', {preferCanvas: true}).setView([40, -100], 13);
	var url = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
	var cartoDBPositron = L.tileLayer(url, {
	attribution: 'Data: <a href="http://www.openstreetmap.org/copyright">OSM</a>, Map Tiles: <a href="http://cartodb.com/attributions">CartoDB</a>',
	subdomains: 'abcd',
	maxZoom: 19,
	label: 'Streets',
	});
	map.addLayer(cartoDBPositron);

	var myLines = [{
	"type": "LineString",
	"coordinates": [[-100, 40], [-105, 45], [-110, 55]]
	}, {
	"type": "LineString",
	"coordinates": [[-105, 40], [-110, 45], [-115, 55]]
	}];
	var myLayer = L.geoJSON().addTo(map);
	myLayer.addData(myLines);

	document.getElementById('snap').addEventListener('click', function() {
	leafletImage(map, doImage);
	});

	function doImage(err, canvas) {
	var img = document.createElement('img');
	var dimensions = map.getSize();
	imgRatio = dimensions.x / dimensions.y;
	img.width = 300;
	img.height = 300 / imgRatio;
	img.src = canvas.toDataURL();
	document.getElementById('images').innerHTML = '';
	document.getElementById('images').appendChild(img);
	}
	</script>


	</body>
	</html>