Export Leaflet Map To PDF

How to add leaflet map to pdf report?

We using the the libarary “Leaflet” in order to display map

I was asked to export an image of the leaflet map in order to add it to report

The original plan was to export an image in the client and then post it to the </br>server the will generate the report.

After research I found the plugin ”leaflet-image”, it seems that it is work well for </br>standard markers but we have a special markers:

So, I succeeded to export the map to image but without the markers, ouch…

The above plugin “leaflet-image” has the following limitation: </br>“This library does not rasterize HTML because browsers cannot rasterize </br>HTML. Therefore, L.divIcon and other HTML-based features of a map, like zoom</br> controls or legends, are not included in the output, because they are HTML.”

I also tried html2canvas but it also did not help.

The solution we found:

After brainstorming , It was suggested that we will generate the map in the </br>server, Our server is Node and we using  jsreport to generate the report. </br>The jsreport based on the library phantomjs when it generate pdf report, which</br> give us the ability of web “Full web stack No browser required”, therefore</br> theoretically we can generate a leaflet map like in the client.

We added “client” code to node server, include all the third party libaries </br>(‘leaflet’, ‘leaflet.awesome-markers’, ‘leaflet.markercluster’ etc) and execute it in </br>the report template. </br>Since we want to export the same map like in the client, we posted the current </br>‘zoom’ & the current ‘center’.

The result:

Exporting the map to pdf report!!!!

Although this solution requires duplicating code, it is the only solution that gave us the desired result.

To see example of pdf with leaflet map click here

I’d like to mention Felix Piskunov that help to find the final solution

Front End Developer

Frontend Group
Thank you for your interest!

We will contact you as soon as possible.

Send us a message

Oops, something went wrong
Please try again or contact us by email at info@tikalk.com