Deploy HTML Version of Panel App on Github Pages

Panel
1

I have been reading the deployment docs but I can’t find a clear answer on this.

I have a simple Panel app (an interactive choropleth created using Geoviews):

interactive_region_map
interactive_region_map1112×1652 251 KB

I created the plot and saved it as an HTML file using the following:

## UK REGIONS POPULATION ESTIMATE MAP.
regions_map = gv.Polygons(regions, 
                          label = "UK Regions Map"
                          ).opts(tools=["hover","tap"],
                                 cmap = "coolwarm",
                                 width=600, height=900)

regions_map = pn.Row(regions_map * gvts.OSM())


regions_map.save("/home/datasci/notebooks/interactive_region_map.html",embed=True)

I then want to display this interactive html version on a Github Pages website.

Currently I can display the above static image and link to the interactive version when the user clicks on the image:

https://mark-mcdougall.github.io/

However, if it were possible, I want the interactive version to just display directly on the web page. Is this possible and if so can anyone refer me to an example?

I found this, which seems related, but I couldn’t really understand what to do with it:

Thanks

2

As you already have the interactive map on a second page, then one way to do it would be to use an iframe to embed the interactive map on second page in the front page.

Check out HTML iframe tag (w3schools.com)

I would recommend using the version with no border.

3

Two alternatives would be

  1. To manually merge the two html files

  2. Create a Custom Template from the HTML of your front page and add the regions_map panel to the template.

4

If it can help I already do it in my github.io:
Example panel embed in github.io

2 Likes
5

Hi @xavArtley . Could you share a direct link to the code? It would also be helpful if you added it to the static page also, so that if your web site is what I would like to copy, then I can find the code :slight_smile:

Thanks.

6
1 Like
7

@xavArtley . As far as I can see that only links to html and .js files. Where do I find the python files?

Thanks.

8

There is no python files, it’s just some experimental notebook exported in .html

9

@Marc thanks a lot for the suggestions.
I played around with iframes, html and CSS and managed to get it working with a few test examples. It’s so much better than redirecting from a static image!

@xavArtley, your site looks awesome. That is definitely the eventual aim, will need to do a bit of reading before attempting that though!

Thanks

1 Like