Strange results when using current

[amenk]

My browser window looks like this:

I try to print using current size:

    L.easyPrint({
        title: 'Print',
        position: 'topleft',
        sizeModes: ['A4Landscape', 'Current'],
        tileWait: 500
    }).addTo(map);

and get some strange result like this (only a little piece of the map is printed)

A4 Size is working better, but I really want to have the currently displayed size.

Is that normal behaviour?

Both in Chrome 66 and Firefox 60 (Quantum)

[rowanwins]

Hmm that's a bit weird @amenk . I'm probably going to find it hard to provide any advice with seeing your url, could you possibly send it via twitter to me?

[amenk]

Hi @rowanwins - thanks for your offer to check - what's your twitter name? Can you ping me at Twitter "s3lf" or at alex dot menk at gmail dot com

[amenk]

Rowan gave me some tips to debug.

What I did:

In https://github.com/rowanwins/leaflet-easyPrint/blob/gh-pages/src/index.js#L85 set the size of the popup very big

In set the timeout very hight.

No I get the screen attached

So that seems to be the case here:

If the image is not correctly sized when it gets pasted into that popup window something has gone wrong upstream.

@rowanwins Do you mean the upstream projects used such as dom-to-image ?

[rowanwins]

It feels like there is something about the sizing of your leaflet map div that is throwing things out but I can't quite work out what or why... It's printing wider than it needs to but also not as deep it needs.

Perhaps you can put a breakpoint around here to check the width and height that is being picked up by the plugin.

[amenk]

leaflet-easyPrint/src/index.js

Line 92 in 75b3193

mapHeight: this.mapContainer.style.height,

is querying style.height - my map has style="height: 400px" but a CSS tag of height: 100% !important;

Not sure if this should be fixed in my page with a workaround or in leaflet easy print...

[amenk]

Two problems:

• this.mapContainer.style.height seems to ignore the applied CSS (which would be 100%)
• there is no code in easyPrint to handle a percentage height - it might not even be possible

I do not understand this whole sizing code too much. Wouldn't it be easier to use mapContainer.offsetHeight and mapContainer.offsetWidth
This would simplify the code a lot. But it's probably needed?

It kind of works if I set - before printing - the style tag of the map container to the currentWidth in px.
But now, when printing I get two empty pages (one before and one after the map)

[amenk]

Here is a fiddle:

https://jsfiddle.net/r30e9yet/

the question is just why I don't remove the style="height: 100px" --- i currently comes from wordpress plugin which i might just fix.

What do you think?

[rowanwins]

That certainly might provide a good temporary solution although it's worth looking into the bigger issue. Thanks for the test case!

[amenk]

I realized it is not really solving it ... the map has the proper aspect ratio and covered area but it is very small on the output page ... how can I make the current view covering the full A4 page?

 width: 98% !important; height: auto!important;

In the print CSS solves the issue. Shall I make a pull request for that code?

[amenk]

While this CSS does not seem to always solve the problem ... maybe some strange caching issues (but I am sure, the code is loaded)