Taking screenshot of map

[Luca Bertoncello]

Hi list!

I got to draw the airspaces in likely ICAO-style on the map.
Now the next step: take a screenshot of the map. My goal is to export
the map with a given route as PDF.

So, I tried https://github.com/grinat/leaflet-simple-map-screenshoter

It works, but it is very slow...
To get a screenshot of a 2000x1000px div it need about a minute. Since
the rendering of the map itself needs about 9 seconds, I cannot explain
me this difference...

Do someone have an explanation and maybe a suggestion how to speed up
the export?

Thanks
Luca

[Bodo Minea]

You could try using a plugin/technique made for generic web pages, not a leaflet plugin which maybe attempts to redraw all the map details.

You could look into using html2canvas or the Screen Capture API in order to externally snap a picture of the current page contents.

Good luck!

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/a9b6565278a12e8bfd75af0e95cfe5e8%40lucabert.de.

--

Cu stimă,

Minea Claudiu Bogdan

(+40) 722 992 306

https://www.linkedin.com/in/mineabogdan

https://www.facebook.com/b0dominea

[Luca Bertoncello]

Am 06.04.2022 10:46, schrieb Bodo Minea:

Hi!

> You could try using a plugin/technique made for generic web pages, not
> a leaflet plugin which maybe attempts to redraw all the map details.
>
> You could look into using html2canvas or the Screen Capture API in
> order to externally snap a picture of the current page contents.

I already tried html2canvas. Even slower....
I'll search other plugins.

Thanks
Luca

[Luca Bertoncello]

Am 06.04.2022 12:40, schrieb Luca Bertoncello:

Hi again

> I already tried html2canvas. Even slower....
> I'll search other plugins.

I found this project: https://github.com/hersle/leaflet-route-print
It seems very good, but currently I have a problem in the Javascript and
I cannot solve it (I'm not a big expert in Javascript)...

I include the file so:

<script src="https://unpkg.com/lea...@1.3.1/dist/leaflet.js"

integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script type="module"
src="http://my.server.intra/leaflet-route-print.js"></script>

then I try to instanciate the constructor:

var map = L.map('map', {preferCanvas:
true}).setView([51.134333333333, 13.768], 10);
....
var routePrinter = new L.Control.PrintRouteControl();
routePrinter.addTo(map);

as explained in the documentation.
It does not work and always give me the error:

Uncaught TypeError: L.Control.PrintRouteControl is not a constructor
<anonymous> file:///tmp/i/index.html:300

Can someone say me what I'm doing wrong?

Thanks
Luca