leaflet browser print plugin

A leaflet plugin which allows users to print full page map directly from the browser. Compatible with Leaflet v0.7.7 and v1.0.3.

Check out the DEMO v0.7.7

DEMO v1.0.3 It should set the circle's fill to transparent before print and restore it after printing

DEMO v1.0.3 pre-print It sets the circle's fill to transparent and restores it after printing

and a DEMO with custom print layer and additional page content;

Downloads

NPM

	npm install --save leaflet.browser.print

YARN

	yarn add leaflet.browser.print

Usage

Step 1. Include the required js and css files in your document.

	<script src="dist/leaflet.browser.print.min.js"></script>

Step 2. Add the following line of code to your map script

	L.browserPrint().addTo(map)

Step 3. You can pass a number of options to the plugin to control various settings.

Option	Type	Default	Description
title	String	'Print map'	Sets the text which appears as the tooltip of the print button
position	Leaflet control position	'topleft'	Position the print button
printModes	Array	["Portrait", "Landscape", "Auto", "Custom"]	Collection of page print actions
printModesNames	Object	{ Portrait:"Portrait", Landscape:"Landscape", Auto:"Auto", Custom:"Custom" }	Customize each print mode name
printLayer	Leaflet tile layer	null	A tiles layer to show instead of all current active tile layers
closePopupsOnPrint	Boolean	true	Indicates if we need to force popup closing for printed map

Here's an example of passing through some options.

L.browserPrint({
	title: 'Just print me!',
	printLayer: L.tileLayer('//{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
					attribution: '&copy; Openstreetmap France | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
					maxZoom: 19
				}),
	printModesNames: {Portrait:"Portrait", Landscape:"Paysage", Auto:"Auto", Custom:"Séléctionnez la zone"}
}).addTo(map);

Print Modes Details

Mode	Description
Portrait	Print currently visual part of the map with Portrait page dimensions
Landscape	Print currently visual part of the map with Landscape page dimensions
Auto	Track all active map layers (markers, lines, polygons, etc. ) and tries to fit them in print page in Portrait or Landscape page dimensions
Custom	Allows you to select rectangle for printing, and then fit it in Portrait or Landscape page dimensions

	Currently 'Custom' mode is not working correctly for Leaflet v.0.7.7 in all IE browsers.

Map Events

Map Event	Value	Description
pre-print	{ printLayer, printMap }	Fire on print started, before all print calculations is done.
browser-print-start	{ printLayer, printMap }	Fire on print started, before all print calculations is done.
browser-print	{ printLayer, printMap }	Fire right before native print.
browser-print-end	{ printLayer, printMap }	Fire on print end, after we refresh map to show initial view.

Acknowledgements

Thanks to Rowan Winsemius for general idea with a map print functionality. Thanks to Jan Pieter Waagmeester for an idea that helped with map print functionality.

Also thanks to IcoMoon for the print icon.