23/07/2024, 15:39 GitHub - Igor-Vladyka/leaflet.browser.

yka/leaflet.browser.print: A leaflet plugin which allows users to print the map directly from the browser

Igor-Vladyka / leaflet.browser.print Public

A leaflet plugin which allows users to print the map directly from the browser

igor-vladyka.github.io/leaflet.browser.print/

MIT license

155 stars 76 forks Branches Tags Activity

Star Notifications

Code Issues 16 Pull requests 8 Actions Projects Security Insights

master 1 Branch 10 Tags Go to file Go to file Code

jude and Igor-Vladyka Issue #125: Adding main to package.json d8052cb · last year

.github Create FUNDING.yml 4 years ago

dist Added proper cleanup for map after print. 2 years ago

examples Updated few examples 2 years ago

src Added proper cleanup for map after print. 2 years ago

.gitignore Added webpack and new minification approach. 7 years ago

CHANGELOG.md Fixed changelog 2 years ago

LICENSE Added webpack and new minification approach. 7 years ago

README.md Add option printFunction to overwrite the print… 2 years ago

index.html Hide custom-select-pane because it breaks som… 2 years ago

package.json Issue #125: Adding main to package.json last year

webpack.config.js Breaking Changes!! Adding a lot of more functi… 2 years ago

README MIT license

Map Print Plugin for Leaflet.js

General information
A leaflet plugin which allows users to print full page map directly from the browser

Pros:

Compatible with Leaflet v1+.

Any page size from range A0-A10, B0-B10, C0-C10, D0-D10 can se used.
North American paper sizes available as well: Letter, HalfLetter, Legal, JuniorLegal, Tabloid, Ledger
Available 4 print modes, you can chose any you want and even create your own.
Everything in browser, no external apps or dependencies, print your map in one click.
You can even override default browser print behavior and export map as image, more details you can find here.
Any additional page content can be printed together with a map.
Leaflet Print Control
And many more...just ask!

Cons:

Doesn't change page orientation automatically in IE and FF, due to The @page rule and forcing Landscape orientation

https://github.com/Igor-Vladyka/leaflet.browser.print 1/9
23/07/2024, 15:39 GitHub - Igor-Vladyka/leaflet.browser.print: A leaflet plugin which allows users to print the map directly from the browser
Changelog

Other examples:
Check out the:

General example
Localization
Print objects manipulations
Map legend printing
Export map as Image

Be careful when printing map legend

Common problem with printing map with a legend is external CSS plugins that ruins everything, here is an actual good answer why it is like
that with Bootstrap plugin. Please read it carefully.

Downloads
NPM

npm install --save leaflet.browser.print

YARN

yarn add leaflet.browser.print

SCRIPT

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

Usage

Add a Control

Add the following line of code to your map script

var browserControl = L.control.browserPrint(options).addTo(map);

You can pass a number of options to the control:

Option Type Default Description

Leaflet control
position 'topleft' Position the print button
position

Sets the text which appears as the tooltip of the print

title String 'Print map'
button

["Portrait", "Landscape", "Auto",

printModes Array Collection of page print actions
"Custom"]

Also the options for the [backend](#Use it in the Backend) can passed through.

L.control.browserPrint({position: 'topleft', title: 'Print ...'}).addTo(map);

To use the same BrowserPrint class in the backend and in the control you can pass it while creating the control:

var browserPrint = L.browserPrint(map,backendOptions);

L.control.browserPrint(controlOptions,browserPrint).addTo(map);

Here's an example of passing through some options:

https://github.com/Igor-Vladyka/leaflet.browser.print 2/9
23/07/2024, 15:39 GitHub - Igor-Vladyka/leaflet.browser.print: A leaflet plugin which allows users to print the map directly from the browser

var customActionToPrint = function(context, mode) {

return function() {
window.alert("We are printing the MAP. Let's do Custom print here!");
context._printMode(mode);
}
};

L.control.browserPrint({
title: 'Just print me!',
documentTitle: 'Map printed using leaflet.browser.print plugin',
printLayer: L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http
subdomains: 'abcd',
minZoom: 1,
maxZoom: 16,
ext: 'png'
}),
closePopupsOnPrint: false,
printModes: [
L.BrowserPrint.Mode.Landscape("Tabloid",{title: "Tabloid VIEW"}),
L.browserPrint.mode("Alert",{title:"User specified print action",pageSize: "A6", action: customActionToPrint, invali
L.BrowserPrint.Mode.Landscape(),
"Portrait",
L.BrowserPrint.Mode.Auto("B4",{title: "Auto"}),
L.BrowserPrint.Mode.Custom("B5",{title:"Select area"})
],
manualMode: false
}).addTo(map);

To stop printing call cancel() :

browserControl.cancel();

Use it in the Backend

Add the following line of code to your map script

var browserPrint = L.browserPrint(map, options);

And then you can start printing with:

browserPrint.print(L.BrowserPrint.Mode.Landscape());

To stop printing call cancel() :

browserPrint.cancel();

You can pass a number of options for printing:

Option Type Default Description

["Portrait", "Landscape", "Auto",

printModes Array Collection of page print actions
"Custom"]

documentTitle String '' Sets the text which appears as the print page title

Leaflet tile
printLayer null A tiles layer to show instead of all current active tile layers
layer

closePopupsOnPrint Boolean true Indicates if we need to force popup closing for printed map

Content selector for printed map, will select and dynamically

contentSelector String "[leaflet-browser-print-content]" inject content on printed maps. For full functionality please
check "Printing additional content section"

Pages selector for printed map, will select and dynamically

pagesSelector String "[leaflet-browser-print-pages]"
inject additional pages content on printed maps.

manualMode Boolean false Adds a button with id='leaflet-browser-print--manualMode-

button' for debugging purpose, also can be used to print map

https://github.com/Igor-Vladyka/leaflet.browser.print 3/9
23/07/2024, 15:39 GitHub - Igor-Vladyka/leaflet.browser.print: A leaflet plugin which allows users to print the map directly from the browser

Option Type Default Description

with external button.

{ color: "gray", dashArray:

Polyline Style for rectangle on custom print. 'customPrintPane' - is a
customPrintStyle "5, 10", pane:
options custom pane with z-index => 9999
"customPrintPane" }

cancelWithEsc Boolean true Cancel printing with the ESC key

printFunction Function window.print Function that will be executed for printing.

debug Boolean false Stops opening the print window. Only for developing use.
Here's an example of passing through some options:

var options = {
documentTitle: 'Map printed using leaflet.browser.print plugin',
printLayer: L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.or
subdomains: 'abcd',
minZoom: 1,
maxZoom: 16,
ext: 'png'
}),
closePopupsOnPrint: false,
manualMode: false
};
var browserPrint = L.browserPrint(map, options);

Print Modes

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

Track all active map layers (markers, lines, polygons, etc. ) and tries to fit them in print page in Portrait or Landscape page
Auto
dimensions

Custom Allows you to select rectangle for printing, and then fit it in Portrait or Landscape page dimensions if it is not explicit set

General modes:

L.BrowserPrint.Mode.Landscape();
L.BrowserPrint.Mode.Portrait();
L.BrowserPrint.Mode.Auto();
L.BrowserPrint.Mode.Custom();

For each general mode the page size and options can be passed. The default page size is A4

L.BrowserPrint.Mode.Landscape(pageSize,options);

Option Type Default Description

The mode name. f.e.

title String Set the control menu text
"Portrait"

pageSize String 'A4' Size of page that will be printed

Mode name or
orientation String calculation (Auto & How the page will be displayed landscape or portrait
Custom)

zoom Integer 0 Zoom the map to this level

enableZoom Boolean true Zoom the map optimal, else the current zoom is taken. zoom have to be 0

action Function default mode action [Custom print button action](#Custom print button action)

rotate Integer 0 Rotate the map x-times by 90°

https://github.com/Igor-Vladyka/leaflet.browser.print 4/9
23/07/2024, 15:39 GitHub - Igor-Vladyka/leaflet.browser.print: A leaflet plugin which allows users to print the map directly from the browser

Option Type Default Description

The default margin are (height + width) / 39.9 . A number can passed for all
margin Object automatic margins or set it explicit in a object for left , right , top , bottom --> {left:
10, top: 40}

scale Double 1 Scale the map. Shows all bigger or smaller, with 1 the map looks normal

Adds a header section to the top of the page. For the available options look in
header Object
the "Header / Footer Options" table below

Adds a footer section to the bottom of the page. For the available options look in
footer Object
the "Header / Footer Options" table below

Header / Footer Options

Option Type Default Description

enabled Boolean false Shows the section

text String / HTML "" The displayed text

size String "10mm" The height of the section

overTheMap Boolean false The section is displayed over the map

You can overwrite the CSS or change the DOM over the ids #print-header and #print-footer

Creating a own mode: L.BrowserPrint.Mode(name,options);

L.browserPrint.mode("Alert Mode",{pageSize: 'A3',orientation: 'Portrait'});

The mode options can be updated with:

mode.setOptions(options);

Map Events

Map Event Event Shortcut Value Description Purpose

To support busy indicator of

browser- Fire right after printing was
L.BrowserPrint.Event.PrintInit { mode } any type to show user loaing
print-init initialized.
status.

{ pageSize, Fire before print started,

browser- For DOM manipulation with
L.BrowserPrint.Event.PrePrint pageBounds, allows manipulation with
pre-print real map objects.
printObjects } map objects.

{ printLayer,
browser- Fire on print started, before For DOM manipulation with
L.BrowserPrint.Event.PrintStart printMap,
print-start all print calculations is done. print map and print objects.
printObjects }

{ printLayer,
browser- For DOM manipulation with
L.BrowserPrint.Event.Print printMap, Fire right before native print.
print print map and print objects.
printObjects }

{ printLayer, Fire on print end, after we

browser- For DOM manipulation with
L.BrowserPrint.Event.PrintEnd printMap, refresh map to show initial
print-end real map objects after print
printObjects } view.

browser- For DOM manipulation with

L.BrowserPrint.Event.PrintCancel { mode } Fire when printing cancelded
print-cancel real map objects after cancel

Example can be found here: DEMO with print objects manipulations;

Printing additional content section

To add additional printing content (in addition to a map itself) we need to specify content that should be added: Demo; By default
contentSelector: '[leaflet-browser-print-content]' so we need a content with an 'leaflet-browser-print-content' attribute.

Code example:

https://github.com/Igor-Vladyka/leaflet.browser.print 5/9
23/07/2024, 15:39 GitHub - Igor-Vladyka/leaflet.browser.print: A leaflet plugin which allows users to print the map directly from the browser

<style leaflet-browser-print-content>
.grid-print-container { // grid holder that holds all content (map and any other content)
grid-template: auto 1fr auto / 1fr;
background-color: orange;
}
.grid-map-print { // map container itself
grid-row: 2;
}
.title { // Dynamic title styling
grid-row: 1;
justify-self: center;
color: white;
}
.sub-content { // Dynamic sub content styling
grid-row: 5;
padding-left: 10px;
}
</style>
<h1 class="title" leaflet-browser-print-content>Leaflet Browser print TITLE</h1>
<h3 class="sub-content" leaflet-browser-print-content>Leaflet Browser print SUB TITLE text</h3>

On print, plugin will scan DOM by contentSelector, and will add content to print may.

We are using CSS-GRID to position all controls on a print page.

Therefor it's not supportable in all browsers, for more information please visit [caniuse.com](https://caniuse.com/#feat=css-
grid).

Angular 2+

See chapter 4 of https://github.com/Asymmetrik/ngx-leaflet-tutorial-plugins/tree/master/Leaflet.BrowserPrint

New print layers/renderers registration

To add missing print layers you need to explicitly indicate layer, it's identifier and construction function that will return actual layer object.

Example of L.MarkerClusterGroup registration:

L.BrowserPrint.Utils.registerLayer(
// Actual typeof object to compare with
L.MarkerClusterGroup,
// Any string you would like for current function for print events
'L.MarkerClusterGroup',
function (layer, utils) {
// We need to recreate cluster object with available options
// Here we use function, but we can use object aswell,
// example: new L.MarkerClusterGroup(layer._group.options);
var cluster = L.markerClusterGroup(layer._group.options);

// And we clone all inner layers to our new cluster

// to properly recalculate/recreate position for print map
cluster.addLayers(utils.cloneInnerLayers(layer._group));

return cluster;
});

List of pre-registered layers available for printing:

L.TileLayer.WMS
L.TileLayer
L.ImageOverlay
L.Marker
L.Popup
L.Circle
L.CircleMarker
L.Rectangle
L.Polygon
L.MultiPolyline
L.MultiPolygon

https://github.com/Igor-Vladyka/leaflet.browser.print 6/9
23/07/2024, 15:39 GitHub - Igor-Vladyka/leaflet.browser.print: A leaflet plugin which allows users to print the map directly from the browser
L.Polyline
L.GeoJSON
L.FeatureGroup
L.LayerGroup
L.Tooltip

Example of renderer registration:

L.BrowserPrint.Utils.registerRenderer(L.SVG, 'L.SVG');

List of registered renderers

L.SVG
L.Canvas

If you want to override any of those, please register your own builder for them.

MarkerClusterGroup OutOfMemory problem:

If you are facing OutOfMemory problem printing huge amount of objects you may consider next workaround:

// markerClusterGroup to print
var printableObjects = L.markerClusterGroup();

// We are not cloning markercluster to preserve original clasterization behavior and prevent OutOfMemory problems
// This way we will need to invalidate MarkerClusterGroup after printing
L.BrowserPrint.Utils.registerLayer(L.MarkerClusterGroup,
'L.MarkerClusterGroup',
function (layer, utils) {
return layer;
});

// On print end we invalidate markercluster to update markers;

map.on(L.BrowserPrint.Event.PrintEnd, function(e) {
map.removeLayer(printableObjects);
map.addLayer(printableObjects);
});

// Initial rendering ouf objects

map.addLayer(printableObjects);

Download Map as Image

To download map as PNG you have to use external plugin to do the job. Current plugin will do only 1 job - prepare map for printing. To print
actual map we use in-browser print mechanism:

window.print()

You can use the options printFunction to implement any other behavior that you want. Example with domtoimage plugin to export map as
image.png:

var saveAsImage = function () {

return domtoimage.toPng(document.body)
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = map.printControl.options.documentTitle || "exportedMap" + '.png';
link.href = dataUrl;
link.click();
});
};

L.control.browserPrint({
documentTitle: "printImage",
printModes: [
L.BrowserPrint.Mode.Auto("Download PNG"),
],
printFunction: saveAsImage
}).addTo(map);

Full example you can find here.

https://github.com/Igor-Vladyka/leaflet.browser.print 7/9
23/07/2024, 15:39 GitHub - Igor-Vladyka/leaflet.browser.print: A leaflet plugin which allows users to print the map directly from the browser

Custom print button action

Example of how you can use default button or style/specify your own button to call actual print logic. First of all you need to create print plugin
with at least one print option to be able to attach it to the map, later you can use any other, even dynamically created print mode with your
custom print button.

Example:

L.control.browserPrint({
printLayer: L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommon
subdomains: 'abcd',
minZoom: 1,
maxZoom: 16,
ext: 'png'
}),
printModes: [ "Landscape" ],
manualMode: true // use true if it's debug and/or default button is okay for you, otherwise false.
}).addTo(map);

document.querySelector("#custom_print_button").addEventListener("click", function(){
var modeToUse = L.BrowserPrint.Mode.Auto();
map.printControl.print(modeToUse);
});

And add next css to hide onmap menu:

.leaflet-control-browser-print {display: none;}

Important notes

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

Acknowledgements
Thanks to Rowan Winsemius for general idea with a map print functionality.

Releases 7

First full release of a plugin. Latest

on Jul 16, 2019

+ 6 releases

Sponsor this project

patreon.com/igorvladyka

Packages

No packages published

Used by 135

+ 127

Contributors 8

Languages

https://github.com/Igor-Vladyka/leaflet.browser.print 8/9
23/07/2024, 15:39 GitHub - Igor-Vladyka/leaflet.browser.print: A leaflet plugin which allows users to print the map directly from the browser

JavaScript 83.8% HTML 16.2%

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