Displaying interactive maps from HTML file attachments

Community Help
1

Hi there!

I have some interactive Folium maps saved as HTML files, and was wondering how (or if it’s possible) to display them in a notebook cell. I’m currently loading the maps in as FileAttachments, but I’m not sure how to parse the resulting HTMLDocument object so that I can actually show the maps, which were generated in Python.

I’ve tried looking at some of the individual DOM elements, but the most I can do is show the legend, which is contained inside in the body tag. The map itself, as well as the interactivity, is defined inside of a script tag, which I’m not sure how to parse.

I’m admittedly a total novice when it comes to web languages, so I’d appreciate any pointers – I suspect this is a harder problem than it seems to me.

Here’s the notebook to see how I’m loading in the files: Interactive Map: U.S. Ecoregions / Eric Chen / Observable

Thanks!

1 Like
2

You could embed them in an iframe and display that. Here’s how:

It does seem to be a bit of a roundabout way to get a map into Observable. Perhaps, it meets your needs at the moment, though?

1 Like
3

Thank you so much – this is exactly what I needed!

Yeah, I only have a passing familiarity with HTML/CSS/JS, but mainly wanted to use Observable to “host” the visualizations in a lightweight manner.

Appreciate it!

1 Like
4

Glad that helped! It might be worth mentioning that the absolute lightest way to host it is probably via the embed URL: https://observablehq.com/embed/@mcmcclur/displaying-folium-maps-in-iframes?cells=topmatter%2Cviewof+map_type%2Cmap

1 Like