ka7eh/leaflet_to_pdf.html

## leaflet_to_pdf.html
<html>
    <head>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"/>
        <style>
        #mapid{
            height: 480px;
        }

        #download {
            position:absolute;
            top:10px;
            right:10px;
            z-index:1000;
        }

        #cover {
            display: none;
            text-align: center;
            padding-top: 200px;
            background: #CCC;
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10000;
        }

        #cover.active{
            display: block;
        }

        </style>
    </head>

    <body>
        <div id="cover">Generating pdf</div>

        <div id="mapid"></div>
        <button id="download">download</button>

        <script>L_PREFER_CANVAS = true</script>
        <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
        <script src='http://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
        <script src="http://leafletjs.com/examples/us-states.js"></script>
        <script>
            var map = L.map('mapid').setView([37.8, -96], 4);
            var cover = document.getElementById('cover');

            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
                maxZoom: 18
            }).addTo(map);

            function getColor(d) {
                return d > 1000 ? '#800026' :
                       d > 500  ? '#BD0026' :
                       d > 200  ? '#E31A1C' :
                       d > 100  ? '#FC4E2A' :
                       d > 50   ? '#FD8D3C' :
                       d > 20   ? '#FEB24C' :
                       d > 10   ? '#FED976' :
                                  '#FFEDA0';
            }

            function style(feature) {
                return {
                    fillColor: getColor(feature.properties.density),
                    weight: 2,
                    opacity: 1,
                    color: 'white',
                    dashArray: '3',
                    fillOpacity: 0.7
                };
            }

            L.geoJson(statesData, {style: style}).addTo(map);

            document.getElementById('download').addEventListener('click', function() {
                cover.className = 'active';
                leafletImage(map, downloadMap);
            });

            function downloadMap(err, canvas) {
                var imgData = canvas.toDataURL("image/svg+xml", 1.0);
                var dimensions = map.getSize();

                var pdf = new jsPDF('l', 'pt', 'letter');
                pdf.addImage(imgData, 'PNG', 10, 10, dimensions.x * 0.5, dimensions.y * 0.5);

                cover.className = '';

                pdf.save("download.pdf");
            };
        </script>
    </body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"/>
	<style>
	#mapid{
	height: 480px;
	}

	#download {
	position:absolute;
	top:10px;
	right:10px;
	z-index:1000;
	}

	#cover {
	display: none;
	text-align: center;
	padding-top: 200px;
	background: #CCC;
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	}

	#cover.active{
	display: block;
	}

	</style>
	</head>

	<body>
	<div id="cover">Generating pdf</div>

	<div id="mapid"></div>
	<button id="download">download</button>

	<script>L_PREFER_CANVAS = true</script>
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
	<script src='http://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
	<script src="http://leafletjs.com/examples/us-states.js"></script>
	<script>
	var map = L.map('mapid').setView([37.8, -96], 4);
	var cover = document.getElementById('cover');

	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
	maxZoom: 18
	}).addTo(map);

	function getColor(d) {
	return d > 1000 ? '#800026' :
	d > 500 ? '#BD0026' :
	d > 200 ? '#E31A1C' :
	d > 100 ? '#FC4E2A' :
	d > 50 ? '#FD8D3C' :
	d > 20 ? '#FEB24C' :
	d > 10 ? '#FED976' :
	'#FFEDA0';
	}

	function style(feature) {
	return {
	fillColor: getColor(feature.properties.density),
	weight: 2,
	opacity: 1,
	color: 'white',
	dashArray: '3',
	fillOpacity: 0.7
	};
	}

	L.geoJson(statesData, {style: style}).addTo(map);

	document.getElementById('download').addEventListener('click', function() {
	cover.className = 'active';
	leafletImage(map, downloadMap);
	});

	function downloadMap(err, canvas) {
	var imgData = canvas.toDataURL("image/svg+xml", 1.0);
	var dimensions = map.getSize();

	var pdf = new jsPDF('l', 'pt', 'letter');
	pdf.addImage(imgData, 'PNG', 10, 10, dimensions.x * 0.5, dimensions.y * 0.5);

	cover.className = '';

	pdf.save("download.pdf");
	};
	</script>
	</body>
	</html>