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

Thanks,

I will have a look.
But it seems that even if I can present the HTML, I will be constrained with what I can show and play with it.
I need a pro tool to put many layers and start building a framework for future product.
Currently it seems that Anvil isn’t the correct tool for this task.

Well, if your use case is “display a map with layers and markers and allow user interaction with it”, there are Anvil-centric ways of doing that that.

Which is? Through the Google maps object?

If you do some searching in the forum you’ll find different approaches. I’ve seen people use Google maps, and others use MapBox.

Here is something very simple that I tried to do with iFrame.
I took this template, which basically just run HTML file, and replaced the property with my path of the local drive to the HTML. Again nothing appears.
I wonder if it must be a site with HTTPS? ( Becuase if I replace this field with regular internet site it works, just not local file)

That’s right, iframes do not display local files. They display remote sites. That’s why you need step 1 from Trying to display an HTML file in Anvil, how to do it? - #21 by jshaffstall

So it seems that it is a dead end…

I don’t know how you came to that conclusion. There are two steps to get the alternate approach using an iframe working. You skipped step 1 and went right to step 2. That didn’t work, because you skipped step 1.

At this point you have all the information you need to get this working with iframes. Since further questions are probably going to be about writing the HTTP endpoint or using an alternative mapping solution, you should probably start a new topic for those questions.

Best of luck.

As we have seen step 1 didn’t work.
And step 2 indeed require writing HTTP endpoint which seems like a bit overhead for this small task.
At the end giving the tools provided in Anvil I guess using Streamlit is better.
Thanks for you help in this matter I really appriciate it.

You didn’t do step 1 (write the HTTP endpoint). Without step 1, step 2 (the iframe) won’t work.

The HTTP endpoint would be half a dozen lines of code at most.

Honestly, though, I would never approach a mapping feature the way you’re doing it, using a collab notebook and a library that produces an HTML page. I’d integrate a map using Javascript mapping libraries, such as Google Maps, MapBox, etc. That would be more work but would integrate into the web app much more cleanly.

But hey, you do you. If Streamlit works better for you, go for it.

Yes, well you are right but since it is a part of a bigger project. I was looking for a pro GUI tool that can be integrated easily with Google Colab.
I am aware of the fact that it is not ideal.

Just in case it’s relevant.

2 Likes

Thanks I will check :slight_smile:

As in the last time the map didn’t appear.
This is the code:

#Colab Side:
@anvil.server.callable
def get_map_html():
  html_string = m.get_root().render()
  return html_string

#Anvil side:
class Form1(Form1Template):
  def __init__(self, **properties):
  self.folium_placeholder = HtmlTemplate()

  def button_1_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.folium_placeholder.html = anvil.server.call('get_map_html')
    self.add_component(self.folium_placeholder)
pass

When I press the button the screen turn white (like he is reading something) but the map doesn’t appear

We need to see the indentation, same as Python does. Put
``` python
before your snippet’s first line of code, and
```
after its final line.

Done, I didn’t know of this trick, thanks :slight_smile: now the code is much clearer

Several problems here.

With this indentation,

and all following lines are outside of class Form1.

Also, all of the class Form1’s normal startup code, necessary for it to work, have been removed from function Form1.__init__. At minimum, this function needs

        self.init_components(**properties)

If this is typical of the program’s code, and form settings, then many of our usual assumptions have to go out the window. You would then want to post a clone link, as @stucork did, so that the volunteers here can see more of what’s going on.

I thought you just need the basic code to see what is going on, didn’t thought that the indentation is mandatory.
I changed it now exactly as it is in the code.

We’ll need to see a clone link now to help further.

If you’re using uplink please provide the server code so that we can run the app.

I can’t see that you applied the suggested fixes from the other folium solution above? i.e. removing bootstrap and other js/css elements from the rendered html that conflict with anvil.

This is the link, the code is running on Google Colab, and not something that is running all day.
However on the server side there is nothing besides:

#Colab Side:
import folium
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