Printing two Leaflet instances (One only visible in printing)

[techdaddies-kevin]

Describe the bug We have two Leaflet canvases on a page. One is visible and interacted with by the user. One is hidden with CSS and only shows up during printing. The hidden canvas shows a highlighted area that represents the area the user is currently looking at in the main canvas. When the user hits the Print button in the main canvas, we immediately unhide the hidden canvas, invalidate its size, and draw our shape on it.

this.map.canvas.on("browser-print-init", function(e) {
                                jQuery('#map_canvas_plotting_pip').show(); // Display the hidden canvas
                                self.map.printCanvas.invalidateSize({reset: true, animate: false, pan: false}); // Invalidate the size so that Leaflet will redraw
                                self.updatePrintBounds(); // Draw our shape on top of the hidden canvas
                            });

However, we are frequently running into the issue in Chrome (Less so in other browsers) that the previously hidden canvas is not fully loaded before the print process fires off. So what we end up with is a bunch of missing tiles on the previously hidden canvas. If we cancel printing and immediately hit print again, those missing tiles will now show. What is really weird is that if we enable manualMode or debug mode (So that the browser print dialog doesn't fire off), we CANNOT duplicate this issue, and the tiles load perfectly fine each time. We are really struggling to find a solution to this that doesn't involve having the hidden canvas visible at all times.

Screenshots

[Igor-Vladyka]

Hey Kevin.

Every time you are trying to print a map, under the hood resizing is happening and additional load of tiles that is missing. Then the plugin on a print map checks all times that is loaded, and when everything is loaded it shows up to print.

In your example, looks like the second map does not have all the tiles loaded, and no waiting happens, cause you are starting print from the visible map.

You would need to: initialize print plugin on your hidden map, after initialization - cut and paste buttons from hidden map into visible map.

Now when user print, hidden map will be called, your code in pre-init event will trigger properly and everything will show up eventually.