pbugnion / gmaps

Google maps for Jupyter notebooks
https://jupyter-gmaps.readthedocs.io/en/stable/
Other
760 stars 146 forks source link

High resolution PNG export #189

Open CharlesFr opened 7 years ago

CharlesFr commented 7 years ago

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

CharlesFr commented 7 years ago

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>"))
pbugnion commented 7 years ago

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.

CharlesFr commented 7 years ago

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.

pbugnion commented 7 years ago

Thanks!

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

CharlesFr commented 7 years ago

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

Any ideas?

pbugnion commented 7 years ago

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?