When defining custom printFunction, document.querySelector('.grid-print-container') does not include the Leaflet layers, only the container #124
Description
Describe the bug
For version 2.0.2. Instead of "printing" the map and layers/elements of it I am trying to grab the elements and create custom elements on top of it and convert it to a PDF file. Notice I am doing it in a React18 web-app.
To grab the elements of the map I am using document.querySelector('.grid-print-container'), however this returns:
<div class="grid-print-container" style="width: 522mm; display: grid; height: calc(768mm);"><div id="map-print" class="grid-map-print leaflet-container leaflet-touch" style="width: 100%; height: 100%; position: relative;"></div></div>
It seems like the last div is empty. When doing the same in version 1.0.6 I get the following (don't mind all the elements):
<div class="grid-print-container" style="width: 768mm; display: grid; height: 522mm; margin-left: 26px;"><div id="map-print" class="grid-map-print leaflet-container leaflet-touch" style="width: 100%; height: 100%; position: relative; background-color: transparent;"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-pane leaflet-tile-pane"></div><div class="leaflet-pane leaflet-overlay-pane"></div><div class="leaflet-pane leaflet-shadow-pane leaflet-zoom-hide"></div><div class="leaflet-pane leaflet-marker-pane leaflet-zoom-hide"></div><div class="leaflet-pane leaflet-tooltip-pane"></div><div class="leaflet-pane leaflet-popup-pane"></div><div class="leaflet-pane leaflet-map-pane"></div><div class="leaflet-pane leaflet-tile-pane"><div class="leaflet-layer " style="z-index: 1;"><div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 20; transform: translate3d(0px, 0px, 0px) scale(0.812252);"><img alt="" role="presentation" src="http://mt3.google.com/vt/lyrs=s&x=1078&y=641&z=11" class="leaflet-tile leaflet-tile-loaded" style="width: 258px; height: 258px; transform: translate3d(1654px, 977px, 0px);"><img alt="" role="presentation" src="http://mt0.google.com/vt/lyrs=s&x=1078&y=642&z=11" class="leaflet-tile leaflet-tile-loaded" style="width: 258px; height: 258px; transform: translate3d(1654px, 1233px, 0px);"><img alt="" role="presentation" src="http://mt2.google.com/vt/lyrs=s&x=1077&y=641&z=11" class="leaflet-tile leaflet-tile-loaded" style="width: 258px; height: 258px; transform: translate3d(1398px, 977px, 0px);"><img alt="" role="presentation" src="http://mt0.google.com/vt/lyrs=s&x=1079&y=641&z=11" class="leaflet-tile leaflet-tile-loaded" style="width: 258px; height: 258px; transform: translate3d(1910px, 977px, 0px);"><img alt="" role="presentation" src="http://mt3.google.com/vt/lyrs=s&x=1077&y=642&z=11" class="leaflet-tile leaflet-tile-loaded" style="width: 258px; height: 258px; transform: translate3d(1398px, 1233px, 0px);"><img alt="" role="presentation" src="http://mt1.google.com/vt/lyrs=s&x=1079&y=642&z=11" class="leaflet-tile leaflet-tile-loaded" style="width: 258px; height: 258px; transform: translate3d(1910px, 1233px, 0px);"><img alt="" role="presentation" src="http://mt2.google.com/vt/lyrs=s&x=1078&y=640&z=11" class="leaflet-tile leaflet-tile-loaded" ...
To Reproduce
Steps to reproduce the behavior:
- Create af React app
- Create a leaflet map
- Add browser print as follows:
const browserPrint = L.browserPrint(map, {
position: 'bottomleft',
closePopupsOnPrint: true,
printModes: ["Portrait", "Landscape", "Auto", "Custom"],
manualMode: false,
printFunction: handlePrint,
}) - implement the custom printFunction handlePrint as:
function handlePrint() {
console.log("Handle print", document.querySelector('.grid-print-container'))
} - initiate print: browserPrint.print(L.BrowserPrint.Mode.Auto())
- Observe console output from handlePrint function.
Expected behavior
That the element returned from document.querySelector('.grid-print-container') contains all the map elements.
Desktop (please complete the following information):
- OS: iOS
- Browser: Chrome
Additional context
When inspecting the map.on("browser-print-start") event listener, the layers array in printMap seems to be empty. However, when using the default printFunction window.print() everything seems to work on the output.