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

43

Few things that I need to know:

  1. When I clone the project you have sent I get a message that I need to upgrade my account as this is not operational in free version. ( I can only look on the code )

  2. The code you wrote, (I assume) suppose to be in Anvil side, and again since I don’t have the full version I can’t import third parties libs.

Is there a way to use the free version and check the Folium?

Btw, changing the uplink code to the app provided I get this error:

  • [An internal error has occurred] - see browser console for more details
  • global code@https://zrywpdeecgj4tkyq.anvil.app/debug/KAK5OIFXDS4O6GANIKACISQGZSU73SRZ%3DPVIWDY3UAW5IHPDCTENRURQX/_/debug:4:57 appendChild@[native code] b@https://anvil.works/runtime-new/runtime/node_modules/jquery/dist/jquery.min.js?sha=f7f6a5894f1d19ddad6fa392b2ece2c5e578cbf7da4ea805b6885eb6985b6e3d:2:850 Pe@https://anvil.works/runtime-new/runtime/node_modules/jquery/dist/jquery.min.js?sha=f7f6a5894f1d19ddad6fa392b2ece2c5e578cbf7da4ea805b6885eb6985b6e3d:2:48537 @https://anvil.works/runtime-new/runtime/node_modules/jquery/dist/jquery.min.js?sha=f7f6a5894f1d19ddad6fa392b2ece2c5e578cbf7da4ea805b6885eb6985b6e3d:2:50985 $@https://anvil.works/runtime-new/runtime/node_modules/jquery/dist/jquery.min.js?sha=f7f6a5894f1d19ddad6fa392b2ece2c5e578cbf7da4ea805b6885eb6985b6e3d:2:32396 set@https://anvil.works/runtime-new/runtime/dist/runner.bundle.js?sha=b6ecb18007c0071dc735fa131953a1f0fcdb06469083d5182462543175bf0ddb:578:399 setProp@https://anvil.works/runtime-new/runtime/dist/runner.bundle.js?sha=b6ecb18007c0071dc735fa131953a1f0fcdb06469083d5182462543175bf0ddb:28:64264 tp$call@[native code] @https://anvil.works/runtime-new/runtime/js/lib/skulpt.min.js?sha=67bbffb9cca6ca5667367801a5e6a5c0757ceca021b36bec26e8b37f5435e180:206:67 $add_folium_btn_click889$@ @ q@https://anvil.works/runtime-new/runtime/js/lib/skulpt.min.js?sha=67bbffb9cca6ca5667367801a5e6a5c0757ceca021b36bec26e8b37f5435e180:424:318 m@https://anvil.works/runtime-new/runtime/js/lib/skulpt.min.js?sha=67bbffb9cca6ca5667367801a5e6a5c0757ceca021b36bec26e8b37f5435e180:424:373 promiseReactionJob@[native code]
45

Please provide a clone link of your app, you’ve provided a link to the live app above but not a clone link.
(without a clone link I can’t test your code properly)

I’ve tested the code above as an uplink script and it works as expected.

So there must be a difference between uplink script/client side script compared with the one above.

46
47

Thanks for the clone - I added the uplink code above and I saw a map loaded with no errors.

If you want to try the paid version you can request a trial for the Python 3.10 beta
Going to settings → Python Version

Then you’d need to add folium to the packages once your trial was ready.

This might be useful while you’re in the initial stages of your project.
That said there should be no obvious difference between having a python callable registered on Anvil’s server vs your own uplink script.

I’d also try a couple of other browsers - see if it’s different in chrome vs firefox etc.
(I’m using chrome on mac)

48

The Python interpreter uses indentation instead of braces, so it is absolutely essential. If the indentation is messed up, all the interpreters (machine and human) will not see the needed nesting and scoping.

49

Just to be sure, you say that you run the code I provided without any changes, and you saw a map?
( I also tried Google Chrome and I still don’t get any map. )
Btw how do you run the Colab side?

50

Not quite - I ran the uplink code I suggested above using your clone.

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

If I run your original uplink code I don’t see a map.
(I don’t see any errors either)
(If I add width and height parameters to your original colab code I do see a map)

I didn’t use a colab notebook - instead I ran a local script that does the same job.

Maybe worth double checking which version of folium you are running

>>> folium.__version__
'0.14.0'

Also double checking the code you expect to be executing is running by logging print statements inside the colab function calls
These should be output in your colab notebook

But other than that I’m not able to reproduce the errors you’re seeing and I’m out of suggestions i’m afraid.

51

What do you mean by:
(If I add width and height parameters to your original colab code I do see a map)
What did you add?
Here is my full Colab code, can you tell me what should I add to it?

import os
import pickle
import datetime
import folium

!pip install anvil-uplink

import anvil.server

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

m = folium.Map(location=[45.5236, -122.6750], zoom_start=13)

@anvil.server.callable
def get_map_html():
  html_string = m.get_root().render()
  return html_string
  
folium.__version__

anvil.server.wait_forever()
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)

53

Unbelievable! it worked! The thing that changed everything is this line of code that you mentioned.

It seems that with out width and height it simply doesn’t work. ( I wonder why there is no default value there…)
Thank you for the help!