1

I need to zoom in really close to a map designed with Leaflet and OpenStreetMap, and then take a screenshot of the map that includes and extends beyond the portion of the map that appears on my screen.

I know that I can use Google Map Saver to accomplish this with a Google map, but I don't know how to do this with a Leaflet/OpenStreetMap map. Any ideas?

5
  • 1
    If you're using an X-based system, then xrandr will create you a virtual desktop of any size that your memory allows. I often use this to create a screen-shot of an image that is bigger than my physical screen size, without the loss of detail that comes with scaling.
    – AFH
    Nov 24, 2017 at 22:48
  • Unfortunately I'm on Windows 7. . . .
    – user826233
    Nov 25, 2017 at 0:18
  • SnagIT can take screenshots larger than the screen. I’m sure there are other 3rd party tools that can do it. Nov 25, 2017 at 1:52
  • It helps to let us know your environment when you formulate a question. In general, an image larger than the screen which can be panned through by scrolling can be saved complete with Save Image As..., either by right-clicking or from Page Info in the Tools menu (Firefox). Unfortunately what OpenStreetMap displays is a series of tiles, which you would need to save individually, then piece together afterwards.
    – AFH
    Nov 25, 2017 at 12:19
  • Note that OpenStreetMap's tiles at the borders of the scrolled area will be the full tiles for that part of the map, so the composite will be larger than the scrolled area.
    – AFH
    Nov 25, 2017 at 12:49

1 Answer 1

0

If the webpage were designed correctly you could just use Chrome or Firefox's zoom out feature and then take a screenshot within the browser which would record all the pixels rendered not just the ones getting to the screen. Unfortunately its not going to help you even if you used some other tool without editing the page itself.

You can test that this is not the fault of OSM by going here: http://www.openstreetmap.org/ and using Ctrl+- and seeing that more field of view is rendered when zooming out. And when looking at Leaflet here: http://leafletjs.com/examples/mobile/example.html it also behaves this way.

Therefor you will need to hack it to do what you want. Use your web browsers style editor and add the following:

html, body {
    height: 100%;
}
#main_map {
    height: 100vw;
    width: 64.64vw;
}

then tick the zoom in and out on the leaflet UI then you can use the browsers zoom features.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.