gmaps icon indicating copy to clipboard operation
gmaps copied to clipboard

High resolution PNG export

Open CharlesFr opened this issue 7 years ago • 6 comments

Is there a way to export a high resolution version of a heatmap?

CharlesFr avatar Oct 16 '17 09:10 CharlesFr

I found a temporary solution, running the following snippet will make the map full-width. Of course, you're limited to your monitors resolution and I've yet to find a way to increase height.

from IPython.core.display import display, HTML
display(HTML("<style>.container { width:100% !important; }</style>"))

CharlesFr avatar Oct 16 '17 13:10 CharlesFr

Thanks for raising this. We definitely need a way to have higher resolution on screenshots.

Google Maps does not provide a way to generate exports directly (as far as I can tell). We use html2canvas for the export, which, as far as I understand, just takes a screenshot programatically. It would be useful for someone to dig through the html2canvas code and understand if we can increase the resolution somehow.

Drawing a large map is probably your best bet. You can set the width and height programatically with something like:

import gmaps
import gmaps.geojson_geometries

gmaps.configure(api_key="AIzaSy...")

countries_geojson = gmaps.geojson_geometries.load_geometry('countries')

f = gmaps.figure()
f._map.layout.width = '500px' # Supports any CSS length
f._map.layout.height = '1000px' # Supports any CSS length

gini_layer = gmaps.geojson_layer(countries_geojson)
f.add_layer(gini_layer)
f

Note that, as far as I can tell, there is no point in setting the width above 100% of the screen width, as html2canvas only works for areas of the page that are actually rendered on the screen.

pbugnion avatar Oct 17 '17 06:10 pbugnion

Thanks for your prompt response, it would be great to be able to export hi-res (beyond screen size). For the time being this will solve my problem.

CharlesFr avatar Oct 17 '17 07:10 CharlesFr

Thanks!

Let's leave the issue open, so I or other contributors know that this is something they can work on.

pbugnion avatar Oct 17 '17 08:10 pbugnion

If I set the CSS size as instructed above and click the download button I get failed download with Network Error.

Any ideas?

CharlesFr avatar Oct 17 '17 10:10 CharlesFr

I cannot reproduce that. What browser are you using? Does the JavaScript console say anything useful? Could the download size be too large for some firewall on your network?

pbugnion avatar Oct 18 '17 06:10 pbugnion