search

rowanwins / leaflet-easyPrint

A leaflet plugin which adds an icon to print the map - Demo @ http://rowanwins.github.io/leaflet-easyPrint/
MIT License
250 stars 138 forks source link

Does not export base layers in last version of Firefox (55.0.3) #42

Open bcm-afalco opened 7 years ago

bcm-afalco commented 7 years ago

Hi,

The export was working OK in Firefox V55.0.1 and after a recent update, I am now experiencing an issue in the export of the base layers (leaflet map). I have attached an image of the result I am getting. Can you help? Thanks

macarte 2

rowanwins commented 7 years ago

Hi @Audinetta123

Unfortunately this is probably a CORS issue related to the use dom-to-image under the hood (similar to lots of previous issues). Do you know if you're tile provider has headers set to allow cross origin requests?

bcm-afalco commented 7 years ago

Hello, I have headers set to * in allow cross origin requests

rowanwins commented 7 years ago

Hi @Audinetta123

Are you able to post your tile layer url so I can take a quick look? If you dont want to make it public you can drop me an email at rowanwins at yahoo dot come dot au

AlexKwak commented 7 years ago

Even the demo (http://rowanwins.github.io/leaflet-easyPrint/) doesn't work on the latest FireFox :-(

rowanwins commented 7 years ago

Thanks for the report @AlexKwak I'll try and take a look, I was hoping that dom-to-image was going to help make this plugin lots more robust but it's not looking like it at the moment :(

romanrehacek commented 7 years ago

Hi,

I fixed this issue with modify tile output. By default, tiles output as <img>. I changed to <div> with background-image style and it works.

L.TileLayer.ShowAsDiv = L.TileLayer.extend({
  createTile: function (coords, done) {
      var tile = document.createElement('div');

      if (this.options.crossOrigin) {
        tile.crossOrigin = '';
      }

      tile.style.backgroundImage = "url('"+this.getTileUrl(coords)+"')";
      tile.style.visibility = 'inherit'; 

      return tile;
  },
});

L.tileLayer.showAsDiv = function(args) {
    return new L.TileLayer.ShowAsDiv(args);
};

tileLayer = L.tileLayer.showAsDiv( YOUR_TILES_URL, { YOUR_OPTIONS }).addTo(map);
rowanwins commented 7 years ago

Hey @romanrehacek

That is awesome, thanks for sharing! I'll give it a bit of a test and have a think about how I could feasibly incorporate it.

I also wonder if the tilelayer crossOrigin option might be helpful here, I've never looked into it so dropping a mental note to take a squiz... possibly a deadend but worth a shot