Esri/esri-leaflet-vector

Firefox Printing Issue

sheeley820 opened this issue · 3 comments

sheeley820 commented

Describe the bug

With Chrome / Safari / Edge I am able to print a map that appears in the HTML just fine. However, this is not the case with Firefox.

If you use this page as an example you can see this behavior. Printing this page in a compatible browser will also print the present view of the map element. This is not the case in Firefox. The map will simply appear as a grey box.

The issue does not appear to be solely related to the use of the canvas element, as I am able to print various other canvas elements, including those with animations or other complexities to them. Also the issue does not appear with other Leaflet maps which do not use the esri-leaflet library.

So in all likelihood there is something that could be done on the Firefox side, but also something about the way in which the map is being rendered which makes it incompatible with printing in Firefox.

Reproduction

Attempt to print any Leaflet map which utilizes the esri-leaflet library.

Logs

Some cookies are misusing the recommended “SameSite“ attribute 36
WEBGL_debug_renderer_info is deprecated in Firefox and will be removed. Please use RENDERER. tags.js:10:17331
unreachable code after return statement
commons-46f0863a86b690c87c89.js:261
Site ID:  esri-leaflet app-031f710adf843118ec1c.js:2:411043
Page UIDs:  get-started, esri-leaflet-get-started app-031f710adf843118ec1c.js:2:411077
Page xref:  xref://site.esri-leaflet/get-started/ app-031f710adf843118ec1c.js:2:411117
demandbase event fired tags.js:30:14185
Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. esri-leaflet-code-get-started-d464188715ecfc5b8caf7418ed617a3e.html
wrong listener type: undefined Events.js:100:11
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
This page is in Almost Standards Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”.
activityi;src=11069551;type=aa1;cat=sitev0;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;npa=;gdpr=${GDPR};gdpr_consent=${GDPR_CONSENT_755};u1=;u2=;u3=developers.arcgis.com: esri-leaflet: get-started;ord=2437997705959.014
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. 6
This page is in Almost Standards Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”.
dest5.html
visitor.publishDestinations() result: Attempted to attach and load the destination publishing iframe through this API call. Result: The destination publishing iframe was attached and loaded successfully. AppMeasurement_Module_AudienceManagement.min.js:2:2663

System Info

esri-leaflet - 3.0.11
leaflet - 1.9.4

Additional Information

We are attempting to use the following Leaflet plugin (https://github.com/Igor-Vladyka/leaflet.browser.print), which works on all browsers except Firefox. For the life of me I cannot get Firefox to print Esri Leaflet maps, even with every imaginable security feature turned off.

gavinr-maps commented

Hi, thank you for logging this issue.

I did a bit of research to try and see what types of layers will print OK on Firefox and which do not:

  1. L.esri.FeatureLayer prints OK: https://developers.arcgis.com/esri-leaflet/layers/add-a-feature-layer/
    image
  2. L.esri.tiledMapLayer prints OK: https://developers.arcgis.com/esri-leaflet/samples/tile-layer-1/
    image
  3. L.esri.basemapLayer (deprecated) prints fine: https://codepen.io/gavinr/full/VwqbJej
    image
  4. L.esri.Vector.vectorBasemapLayer does NOT print OK (your original report). : https://developers.arcgis.com/esri-leaflet/maps/display-a-map/
    image

Given all this, it seems like the issue is isolated to L.esri.Vector.vectorBasemapLayer which is in the esri-leaflet-vector repository. I will move this issue there and we can work on it there.

gavinr-maps commented

This package (Esri Leaflet Vector) uses Maplibre GL JS to display the vector tile layers. Checking this behavior on that project's demo page, I see the same issue where Firefox printing is not working:

https://maplibre.org/maplibre-gl-js/docs/examples/add-a-marker/
image

I suspect that the issue is there, and if we fix the Firefox printing issue within Maplibre GL JS, it will also be fixed within Esri Leaflet Vector. Therefore I think we should log an issue with that project for this issue.

  • 👍1
sheeley820 commented

@gavinr-maps Thank you for identifying the underlying issue. I will go ahead and close this issue and open an issue with the maplibre-gl-js project. I'll let you know if this gets resolved.