logo

Leaflet Broswer Print

In this tutorial, we’ll add Print and PDF functionality to our leaflet map using the Leaflet Browser Print plugin.

https://github.com/Igor-Vladyka/leaflet.browser.print

To use Leaflet Browser Print plugin, download the leaflet.browser.print.min.js file and place it in your document root.

Let’s start with our basic Leaflet map

<!DOCTYPE html>
<html lang="en">
    <head>
    <base target="_top">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Basic Leaflet Map</title>
    
    <!-- Leafletjs and CSS -->    
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>

    <!-- Inline CSS for map -->
    
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        .leaflet-container {
            height: 80%;
            width: 80%;
            max-width: 100%;
            max-height: 100%;
        }
    </style>

    
    </head>
    
    <body>

    <div id="map"></div>
    
    <script>
        
    // Add OpenStreetMap basemap
        var map = L.map('map').setView([37.0902, -95.7129], 4);

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

    
    </script>

</body>
</html>

Add the following to the <head> section of your html file.:

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

Add the following block of JavaScript to your html page.

L.control.browserPrint({
	title: 'Just print me!',
	documentTitle: 'My Leaflet Map',
	printLayer: L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
					attribution: 'Map tiles by <a href="http://openstreetmap.com">OpenStreetMap</a>',
					subdomains: 'abcd',
					minZoom: 1,
					maxZoom: 16,
					ext: 'png'
				}),
	closePopupsOnPrint: false,
	printModes: [
            L.BrowserPrint.Mode.Landscape(),
            "Portrait",
            L.BrowserPrint.Mode.Auto("B4",{title: "Auto"}),
            L.BrowserPrint.Mode.Custom("B5",{title:"Select area"})
	],
	manualMode: false
}).addTo(map);

With our JavaScript in place, our html code now looks like below:

<!DOCTYPE html>
<html lang="en">
    <head>
    <base target="_top">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Basic Leaflet Map</title>
    
    <!-- Leafletjs and CSS -->    
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
		
	<!-- Leaflet Print JavaScript -->	
	<script src="leaflet.browser.print.min.js"></script>

    <!-- Inline CSS for map -->
    
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        .leaflet-container {
            height: 80%;
            width: 80%;
            max-width: 100%;
            max-height: 100%;
        }
    </style>

    
    </head>
    
    <body>

    <div id="map"></div>
    
    <script>
        
    // Add OpenStreetMap basemap
        var map = L.map('map').setView([37.0902, -95.7129], 4);

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

		L.control.browserPrint({
			title: 'Just print me!',
			documentTitle: 'My Leaflet Map',
			printLayer: L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
					attribution: 'Map tiles by <a href="http://openstreetmap.com">OpenStreetMap</a>',
					subdomains: 'abcd',
					minZoom: 1,
					maxZoom: 16,
					ext: 'png'
				}),
		closePopupsOnPrint: false,
		printModes: [
            	L.BrowserPrint.Mode.Landscape(),
            	"Portrait",
            	L.BrowserPrint.Mode.Auto("B4",{title: "Auto"}),
            	L.BrowserPrint.Mode.Custom("B5",{title:"Select area"})
			],
			manualMode: false
		}).addTo(map);

    
    </script>

</body>
</html>

Now, when we view our map, we see the Print controls:

When generated, you are given the option to Print or save as PDF