Generate screenshot of map

Question

How can I generate a image of a div, the div contain a map of leaflet (base layers, overlays)?

You can provide a print button to print map area. You can also make use of a leaflet print plugin. https://github.com/rowanwins/leaflet-easyPrint — SSA, Oct 07 '15 at 08:57

score 1 · Answer 1 · answered Oct 08 '15 at 18:16

1

Mapbox's leaflet-image plugin will allow you to kick out an image file of your map container clientside.Enabling canvas mode is required, as seen in their instructions. A more involved server-side approach would include the use of Mapfish/Geoserver and a leaflet plugin, which has a lot more flexibility, but also a lot more configuration.

answered Oct 08 '15 at 18:16

snkashis

2,951
1
18
35

I tried with leaflet-image, but he problem is leaflet-image doesn't work with layers wms and legends – Kenyo Joel Oct 13 '15 at 15:58
Yeah, sounds like you may need to go with the mapfish route. – snkashis Oct 13 '15 at 16:38
@snkashis can you provide any sample usage of leaflet-image plugin? – M. Atif Riaz Aug 28 '16 at 13:12

score 0 · Answer 2 · answered May 05 '19 at 18:46

What I did on a project was run a nodejs rest api that would launch a chromium instance using puppeteer take a screenshot of a map using long lat and then return the image as a base64. It might be more efficient to generate a map image serverside using leaflet or something else rather than taking a screenshot of a browser.

https://github.com/lastlink/re-store/tree/master/webscraper

Generate screenshot of map

2 Answers2