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’.
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