How to capture any interactive map larger than screen easily?

There are a few nice tools, which help you to get your map larger than the screen of your desktop. However, all of them are predominantly focused on Google Maps, which is the most popular interactive map platform. If you want to have your Google Map bigger than your screen, even up to 12000x12000Px resolution you can use for instance Google Maps Server or Universal Map Downloader. Personally, I wouldn’t recommend it, as you have an additional tool to install on your device, although whatever is better for you. This tool is good anyway. I would personally advise using some web-based tool instead, which will work on the same basis.

Pic. 1 Google Map larger than the screen of your device (Superuser.com/Imgur.com).

In my point of view, the best way of capturing Google Maps larger than my screen is using the web-based Google Maps Customizer, which is very convenient to use.  Apart from the standard map dimension changes, you can also do some basic customizations of your map (Pic. 2, 3) visible also in the permalink.

Pic. 2 The interface of Google Map Customizer (Chengfolio.com).

Pic. 3 Our map customization is visible even in the permalink. It means, that by knowing the symbology and hex colors, you can tailor your map straight away (Chengfolio.com).

When everything is ready, you can save the map by using the FireShot plugin for Chrome and selecting the “Capture entire page” option, as shown below (Pic. 4).

Pic. 4 The “Capture entire page” option in our FireShot Chrome plugin.

Next, you can save your image by selecting the .webp or .pdf format (Pic. 5).

Pic. 5 Saving our screenshot in the FireShot plugin.

In the end, I would like to show you some examples I did by using this tool (Pic. 6, 7).

Pic. 6, 7 – Google Map Customizer output examples: 6 – customized Google Map; 7 – Satellite imagery. Click to enlarge.

Interesting is the option with the “Custom URL“. You can copy any other interactive map and paste it into this box. It should work, although not necessarily. Some of the websites might be blocked there, making the maps displayed not correctly (Pic. 8).

Pic. 8 Mapy.cz loaded in the Google Map Customizer doesn’t work properly. The first thing, which comes to mind is the permalink, which has been “eaten” by the major link of this tool. Instead of the location link pasted from Mapy.cz service, we have only the “customlink”, although it’s not the main reason for this open failure.

You can make a try, but remember that the primary goal of this tool is Google Maps, so don’t anticipate, that all other interactive maps included will work correctly. If we want to make sure, that the output from the map service other than Google  (i.e. OpenStreetMaps and so on) will hit our expectations, we should use Mozilla Firefox developer tools. This is a great help that comes from the Firefox browser, which includes the large-screen capture option when you toggle the Responsive Design Mode (RDM) as pointed out in this thread. In my case, it works perfectly (Pic. 9, 10). I tried with 4000x6000Px size, but the maximum size is 9999x9999Px.

Pic. 9 OpenStreetMap larger than screen – Luton town, United Kingdom. Click to enlarge.

Pic. 10 The CityOfLondon Ordnance Survey interactive map is larger than our screen for the east Cambridge area (Mapping.CityOfLondon.gov.uk). Click to enlarge.

Before you enjoy your large-map captures, make sure, that they are loaded properly! As you expand the resolution, the browser will need more time to load the map. Just in case, you can use the sliders and check the loading process. The map should be always clear and sharp. If you have some pixelated, blurred, or blank areas, then apparently you need to wait. See an example below, showing how your map might look if you capture it too early (Pic. 11).

Pic. 11 The CityOfLondon Ordnance Survey interactive map was captured too early. In turn, we have frozen the map, which was already loading (Mapping.CityOfLondon.gov.uk). Click to enlarge.

If you don’t use the Mozilla Firefox browser, you can use the same option available in Google Chrome, which has been described here or here. There are effectively two steps to do so. First, you right-click and select “Inspect“, then select the responsive icon and set the dimensions. The second step is clicking Crtl+Shift+P and selecting “Capture full-size screenshot“. Unfortunately, this option does not always work. If your Chrome browser suddenly stops without the Save As dialog box,  then there is only one reasonable option available assuming, that you want to do it not programmatically. Sadly, it’s not possible to use any kind of interactive map. The privileged maps must have an export option available. Since you can export the visible map canvas straight from the portal, then it’s possible to make it larger than your device screen.
The rule is simple – just click the “Crtl -“ at once in order to zoom out your map. Keep doing it until you are able to see the icons in the map panel. It can be preferably 50% of your original zoom (Pic. 7).

Pic. 12 The simple solution of capturing a map larger than the screen when using a browser other than Firefox. The map portal has to have an export option in order to do so (Openreach.co.uk).

Obviously, same as mentioned above, let your map be fully loaded. When you are using the biggest zoom level on your map, it can be quite misleading for two main reasons:
– your map has a lot of detail, which requires more time to load
– the difference between the biggest zoom levels isn’t spectacular, so you might not notice which area has been already loaded, and which has not yet
Your attention should be drawn to some blank areas (Pic. 13), especially the pixelated or blurry regions.

Pic. 14 The example of a map larger than our screen device when loading, where: A – still blank regions, which are loading; B – areas where loading is still in progress, as they feature a different level of detail, what can be misleading when zoomed out significantly; C – an alert informing us, that map is still loading. The used zoom level here was 33%.

Try always to take a look at the very bottom, where you should spot some alert informing you, that map is still loading.
If everything is right, you should get a map larger than the standard format exported. The quality will be saved, which is the best proof you can see below (Pic. 15).

Pic. 15 The quality of the map captured, when using the “Ctrl – ” zoom-out function in Windows.

Concluding everything should be fine in this case. See my examples below from the CityOfLondon.gov.uk interactive map portal based on the Ordnance Survey topographic maps (Pic. 16 – 18).

Pic. 16 – 18 An example of large-scale Ordnance Survey maps captured from the CityOfLondon.gov.uk mapping portal: 17 – The fragment of Hyde Park in London; 18 – the surroundings of Paddington Station in London; 19 – The Beachy Head area. All the maps have been captured at a 33% zoom level.

Sometimes you may exaggerate with the zoom-out level. If, for instance, you wish to get some maps not necessarily in the standard graphic format (.webp or .jpg), but for example .geotiff then it’s some likelihood, that the mapping server will return an error. The reason is simple, the map canvas is too large to proceed in the given format, as the size of the downloaded file might be restricted. Remember about it and please do not exceed the zoom-out level that much.
Concluding I have shown you effectively three options to capture your map larger than displayed on your device. As the best, I would like to suggest you use the Mozilla Firefox browser feature, which gives you the rough resolution of the map you want to download. You can be also sure, that nothing is going to happen along the way unlike in other ways considered.

Mariusz Krukar

Links:

1. http://www.codres.de/google-map-saver
2. https://addons.mozilla.org/en-US/firefox/addon/fireshot/
3. https://itectec.com/superuser/create-an-image-or-print-a-webpage-larger-than-the-screen-from-a-web-browser/
4. http://www.novolume.co.uk/blog/how-to-create-large-scale-google-map-images/
5. http://dylanbrowndesigns.com/tutorials/how-to-save-or-print-high-resolution-images-from-google-earth/
6. http://www.chengfolio.com/google_map_customizer
7. Universal Map Downloader
8. https://www.bpwebs.com/print-a-large-google-map-larger-than-the-screen/
9. https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
10. https://www.howtogeek.com/423558/how-to-take-full-page-screenshots-in-google-chrome-without-using-an-extension/
11. https://www.computerworld.com/article/3408017/capture-screenshots-chrome.html

Forums:

1. https://superuser.com/questions/145642/how-to-take-a-screenshot-of-a-something-bigger-than-the-screen
2. https://superuser.com/questions/1198899/create-an-image-or-print-a-webpage-larger-than-the-screen-from-a-web-browser/1198900#1198900
3. https://webapps.stackexchange.com/questions/3825/get-google-maps-to-print-entire-map-displayed
4. How to capture/print a large Google map – larger than the screen?
5. https://stackoverflow.com/questions/22210034/making-screenshot-of-google-map-bigger-than-my-device-screen
6. https://superuser.com/questions/295938/how-to-take-a-screenshot-of-a-window-larger-than-the-screen
7. https://www.quora.com/How-can-I-copy-and-print-large-high-resolution-maps-using-Google-Earth-or-any-other-tool-to-create-a-wall-sized-map
8. How do you make a map bigger than the screen?
9. https://www.reddit.com/r/chrome/comments/d5in54/full_size_screenshot_not_working_properly/

Youtube: