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

Anvil Q&A
42

Did you try changing your uplink code to be the example linked above?

import folium

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():
    m = folium.Map(location=[45.5236, -122.6750], zoom_start=13)
    html_string = m.get_root()._repr_html_()
    return html_string

It works just fine for me

See the docs: Using folium with flask — Folium 0.14.0 documentation

The default css and js are adjusted from the docs also:
https://python-visualization.github.io/folium/modules.html

1 Like