# Displaying interactive maps from HTML file attachments

**URL:** <https://talk.observablehq.com/t/displaying-interactive-maps-from-html-file-attachments/7129>\
**Category:** Help\
**Created:** [October 11, 2022, 9:23pm UTC](https://talk.observablehq.com/t/displaying-interactive-maps-from-html-file-attachments/7129 "2022-10-11T21:23:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ericch99](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ericch99/32/7023_2.png) [@ericch99](https://talk.observablehq.com/u/ericch99)\
**Post date:** [October 11, 2022, 9:23pm UTC](https://talk.observablehq.com/t/displaying-interactive-maps-from-html-file-attachments/7129/1 "2022-10-11T21:23:48Z")

</div>

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](https://observablehq.com/@ericch99/us-ecoregions)

Thanks!

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [October 11, 2022, 10:02pm UTC](https://talk.observablehq.com/t/displaying-interactive-maps-from-html-file-attachments/7129/2 "2022-10-11T22:02:52Z")

</div>

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

> **[Displaying Folium maps in iframes](https://observablehq.com/@mcmcclur/displaying-folium-maps-in-iframes)**
>
> A response to this forum question

* * *

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?

---

<div class="post-metadata">

**Author:** ![ericch99](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ericch99/32/7023_2.png) [@ericch99](https://talk.observablehq.com/u/ericch99)\
**Post date:** [October 11, 2022, 10:14pm UTC](https://talk.observablehq.com/t/displaying-interactive-maps-from-html-file-attachments/7129/3 "2022-10-11T22:14:16Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [October 11, 2022, 11:43pm UTC](https://talk.observablehq.com/t/displaying-interactive-maps-from-html-file-attachments/7129/4 "2022-10-11T23:43:17Z")

</div>

> [@ericch99](#):
>
> mainly wanted to use Observable to “host” the visualizations in a lightweight manner.

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](https://observablehq.com/embed/@mcmcclur/displaying-folium-maps-in-iframes?cells=topmatter%2Cviewof+map_type%2Cmap)
