Print Inconsistency - As you turn on more layers, some don't appear in the print out

[chughes-lincoln]

Using the demo as a test case, when I print with just the parcels layer I don't notice any issues.
When I turn on the AGS County Rail and County Runways, some layers fail to show up in the print out.
In this case the parcels appeared for a second in the print preview, and then disappeared.

[brentfraser]

Works fine for me (Firefox v87.0 64-bit) using the full demo on geomoose.org. Anything special on your client -side?

[chughes-lincoln]

Interestingly (for the most part), I've now only managed to replicate it from my work laptop (Windows). The only extension I can see is is Virtru Email Protection, which I wouldn't think would have an impact.
-Chrome - Version 89.0.4389.114 (Official Build) (64-bit)
-Microsoft Edge - Version 89.0.774.68 (Official build) (64-bit)

For the most part it works fine from my Mac. I was able to replicate it by turning on the OpenStreetMap layer (the OpenStreetMap shows in the print, but the parcels do not), but I was able to turn on the ags railroads/runways (in addition to a bunch of other layers) without issues.
-Chrome - Version 89.0.4389.114 (Official Build) (x86_64)
-Safari - Version 14.0.3 (16610.4.3.1.7)
-Firefox - Version 86.0.1 (64 bit)

[chughes-lincoln]

Some more diagnostics:

My office desktop computer (Windows, same browser settings and extensions as my work laptop) works perfectly. I can turn on all the ags layers and print them without issue, I can even turn on the OpenStreetMap layer and print it, which wasn't working on my Mac.

[chughes-lincoln]

I also have similar issues from my iPhone.
I can turn on the two ags layers I mentioned without issues, but if I turn on OpenStreetMap, only
the OpenStreetMap layer shows in the print preview.

[brentfraser]

I was trying it with Chrome and I see there could be a Z-order / Layer ordering problem. The ArcGIS background layer obscures the AGS Rail and Runway layers

May be related. Or not

[chughes-lincoln]

I don't think that's related. I think that's just because the ags raster is above the rail and runway layers in the map-source (on a separate note it may be better to move the vector layers above the raster). The issue I was having was that layers wouldn't appear in the print out even though they were showing on the map.

[brentfraser]

Ah right. Yes, that needs to be changed.

[klassenjs]

This probably isn't it, but I have to ask: Did you wait long enough?

I ask because the genesis of the print preview was we couldn't programmatically detect (reliably) when all the layers had actually rendered to the canvas. The idea was to slow the user down enough (and let them verify) that they were getting what they wanted before they clicked Print to generate the PDF from that canvas.

[chughes-lincoln]

I considered that, but that's not the case.
In fact when I tried it just now from my work laptop (turning on rail and runways),
everything loaded, and then after a second or so, the rail and parcels disappeared
from the print preview (though sometimes layers don't load at all - after checking
it a few minutes later).

[chughes-lincoln]

Also, another simple way of replicating it for me (without turning on a bunch of layers), is just adding a sketch and nothing else.
Using the demo at geomoose.org and Google Chrome (Version 90.0.4430.93 (Official Build) (64-bit)). The parcels
layer shows up in the print preview and the print out, but the sketch does not.

[robinrullo]

I think that the problem is the screen resolution (DPI):
My personal computer (MacBook Pro 13") has a resolution of 227DPI. When I print a map, I've the same problem than @chughes-lincoln.
So I plugged in my second monitor which has a resolution of 94 DPI, and refreshed the tab on this screen. Printing works well !
If I slide the tab on my 227DPI monitor (without refresh the tab), turn some layers on, printing works well. Then, when I just refresh this tab (and also start a new GM3 application) on the screen, printing is broken again.

I tried to print a map on a Windows laptop too, which has a resolution of 1920*1200 for 15.6" (145DPI) and print doesn't work. If I downgrade the resolution to 1600*900 (117DPI), refresh the tab to start a new GM3 application, printing works

[chughes-lincoln]

Thanks for those diagnostics!

My Windows laptop was at 1920x1080 (sketch didn't print). I downgraded it to 1600x900 and it worked.
It was working previously for one of my coworkers (Windows laptop at 1600x900). When he upgraded it to 1920x1080
the sketch no longer appeared in print outs.

[robinrullo]

I found the fix !
I don't know why but when the DPI high, OL uses more than one canvas to render the layers on the map.

With low resolution monitors, I only have 2 canvas : one blank and one with all layers rendered.
On my high resolution montitors, I have 3 canvas: one blank, one with OSM, and another one with my WMS layers (and I guess one more if I have vector layers).

So instead of return the first not blank canvas, you have to combine them to one as done in the exemple of OL: https://openlayers.org/en/latest/examples/export-map.html.

The method getImage() (printImage.js) should become something like that (works well on all my devices...):

getImage() {
    // there are many opportunities for the map to
    //  disappear "out of order" and this makes sure all
    //  of the DOM elements required still exists.
    const p = document.getElementById(this.state.mapId);
    if(p) {
        const canvas = p.getElementsByTagName('canvas');
        if(canvas.length > 0) {
            const mapCanvas = document.createElement('canvas');
            mapCanvas.width = (this.props.width ? this.props.width : 600);
            mapCanvas.height = (this.props.height ? this.props.height : 400);
            const mapContext = mapCanvas.getContext('2d');

            try {
                for (let i = 0, ii = canvas.length; i < ii; i++) {
                    if (canvas[i].width > 0) {
                        const opacity = canvas[i].parentNode.style.opacity;
                        mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
                        const transform = canvas[i].style.transform;
                        // Get the transform parameters from the style's transform matrix
                        const matrix = transform
                            .match(/^matrix\(([^\(]*)\)$/)[1]
                            .split(',')
                            .map(Number);
                        // Apply the transform to the export map context
                        CanvasRenderingContext2D.prototype.setTransform.apply(
                            mapContext,
                            matrix
                        );
                        mapContext.drawImage(canvas[i], 0, 0);
                    }
                }
                return mapCanvas.toDataURL('image/png');
            } catch(error) {
                return 'err';
            }
        }
    }
    return '';
}