search

Igor-Vladyka / leaflet.browser.print

A leaflet plugin which allows users to print the map directly from the browser
https://igor-vladyka.github.io/leaflet.browser.print/
MIT License
154 stars 76 forks source link

When defining custom printFunction, document.querySelector('.grid-print-container') does not include the Leaflet layers, only the container #124

Open rallep opened 1 year ago

rallep commented 1 year ago

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&amp;x=1078&amp;y=641&amp;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&amp;x=1078&amp;y=642&amp;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&amp;x=1077&amp;y=641&amp;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&amp;x=1079&amp;y=641&amp;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&amp;x=1077&amp;y=642&amp;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&amp;x=1079&amp;y=642&amp;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&amp;x=1078&amp;y=640&amp;z=11" class="leaflet-tile leaflet-tile-loaded" ...

To Reproduce Steps to reproduce the behavior:

  1. Create af React app
  2. Create a leaflet map
  3. Add browser print as follows: const browserPrint = L.browserPrint(map, { position: 'bottomleft', closePopupsOnPrint: true, printModes: ["Portrait", "Landscape", "Auto", "Custom"], manualMode: false, printFunction: handlePrint, })
  4. implement the custom printFunction handlePrint as: function handlePrint() { console.log("Handle print", document.querySelector('.grid-print-container')) }
  5. initiate print: browserPrint.print(L.BrowserPrint.Mode.Auto())
  6. 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):

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.

Igor-Vladyka commented 1 year ago

Can you please create JSbin or something with an actual problem for better debugging?