Old school D3 from simpler times

All examples By author By category About

mukhtyar

Full window Github gist

static snapshot of active leaflet map

<!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 = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
			var cartoDBPositron = L.tileLayer(url, {
  			attribution: 'Data: <a href="https://www.openstreetmap.org/copyright">OSM</a>, Map Tiles: <a href="https://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>

https://unpkg.com/leaflet@1.0.3/dist/leaflet.js

https://unpkg.com/leaflet-image@latest/leaflet-image.js