Trying to display an HTML file in Anvil, how to do it?

Anvil Q&A
52

Change your colab code to the following


import folium

!pip install anvil-uplink

import anvil.server

anvil.server.connect("<your uplink key here>")


default_js =  [
    ('leaflet', 'https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js'),
    # ('jquery', 'https://code.jquery.com/jquery-1.12.4.min.js'),
    # ('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js'),
    ('awesome_markers', 'https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js')
]

default_css =  [
    ('leaflet_css', 'https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css'),
    # ('bootstrap_css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css'),
    # ('glyphicons_css', 'https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'),
    # ('awesome_markers_font_css', 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css'),
    ('awesome_markers_css', 'https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css'),
    ('awesome_rotate_css', 'https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css')
]


# folium.__version__ 0.12.0+
folium.Map.default_js = default_js
folium.Map.default_css = default_css


@anvil.server.callable
def get_map_html():
    print("getting map html")
    m = folium.Map(location=[45.5236, -122.6750], zoom_start=13)
    html_string = m.get_root()._repr_html_()
    return html_string

anvil.server.wait_forever()

Please notice the difference in the method used to generate the html string.

Also you shouldn’t post your uplink key publicly. You’ll want to reset your uplink key (otherwise anyone can register a callable function for your app).

re width and height you can do
m = folium.Map(location=[45.5236, -122.6750], zoom_start=13, width=500, height=500)