Printing a leaflet map with additional content

Question

Hi asking advice on how to print a leaflet map but with added content. We've tried the leaflet.browser.print using the custum print. But in some cases not all the map and the summary table does not fill the printing preview.

Here is the implementation code:

         L.control.browserPrint({
            title: thisBlock.name,
            printModes: ["Custom"]
        }).addTo(map)

This is what we need - it must always show the full map and the table below:

but this is how it is showing - not full screen:

Also tried to add the event:

        map.on("browser-print", function (e) {
            //Would like to resize the map with the summary table here to fit the page size preview.
        });

How to get the dimensions of the target page and the objects that will be placed on the printing preview and then how to resize it. And will it work if the user change the printing settings and will the objects then size accordingly?

Answer 1

How to get the dimensions of the target page?

You can not. There is no way for JS or CSS code to know whether the user wants to print in DIN A4 paper, or A3, or US letter. The current techniques are hackish at best. On top of that, there is no known way to know the size of the printable area (paper size minus printer-imposed margins), and there is no way to know if the user is gonna use print scaling.

IMO, your best approach is gonna be:

1- Use CSS @media print queries, eg:

@media print {
  #leaflet-map { border: 1px solid black; }
}

The CSS rules in there will apply only when printing (and not when displaying on a screen). Read more about CSS @media here .

2- Use mm , cm or in units for the length of your CSS rules. eg:

@media print {
  #leaflet-map { width: 17.5cm; height: 20cm; }
  #table-with-data { width:17cm; height: 5cm; }
}

Keep in mind that this is the size before the browser applies print scaling . You might need to instruct your users to keep an eye on that, and always print stuff at "100% scale".

3- Use a CSS @page size hint . Note that this is experimental (at the time of this writing) and is just a hint, a suggestion. Browsers are free to ignore this.