What I’m trying to do:
I am trying to call to a function in my Colab that creates HTML map file. When I try to call to another function that creates a different HTML I receive an error which say:
[An internal error has occurred] - see browser console for more details- `SyntaxError: Identifier ‘map’ has already been declared at https://anvil.works/runtime-
It seems that the HTML created use the same variable name ‘map’ inside.
Is there a way to reset the HTML container? in order to use the same parameter?
What I’ve tried and what’s not working:
I have tried:
self.html_panel = HtmlTemplate()
self.add_component(self.html_panel)
srcdoc = anvil.server.call("get_map_html")
self.html_panel.html = "<iframe anvil-name='iframe'></iframe>"
self.html_panel.dom_nodes["iframe"].srcdoc = srcdoc
I get a very tiny image in my GUI.
(Probably need to somehow define a bigger iframe?)
And I still get the same error if I use the following code:
Code Sample:
# this is a formatted code snippet.
if (a == 'something' and self.drop_down_1.selected_value == 'b'):
self.html_panel.remove_from_parent()
self.html_panel.html = anvil.server.call('get_map_html_second')
self.add_component(self.html_panel)
# paste your code between ```
if you set the html property on an HtmlTemplate to something like this multiple times
<script>
let map = "foo";
</script>
Then you’ll get the error you describe
That’s because a script tag executes in the javascript window namespace.
And when using the let keyword you can only declare that variable once.
The second time you set the html property, the script tag is executed on the window namespace again and you get this error.
Wrapping the html in an iframe works well because then the javascript is scoped inside its own namespace.
If you want it to look prettier than you can adjust your html to add some style.
# previous code
html = "<iframe style='width: 100%; height=100%; border: none;' anvil-name='iframe'></iframe>"
self.html_panel.html = html
# rest of code
1 Like
It seems that nothing appears. ( In the previous code I saw a small map, now I get blank screen)
Here is the full Client code:
self.html_panel = HtmlTemplate()
srcdoc = anvil.server.call("get_map_html")
self.html_panel.html = "<iframe anvil-name='iframe'></iframe>"
self.html_panel.dom_nodes["iframe"].srcdoc = srcdoc
html = "<iframe style='width: 100%; height=100%; border: none;' anvil-name='iframe'></iframe>"
self.html_panel.html = html
self.add_component(self.html_panel)
I think you’ve misunderstood where the code should go. It’s not in addition to the previous suggestion, it replaces some of it.
self.html_panel = HtmlTemplate()
srcdoc = anvil.server.call("get_map_html")
html = "<iframe style='width: 100%; height=100%; border: none;' anvil-name='iframe'></iframe>"
self.html_panel.html = html
self.html_panel.dom_nodes["iframe"].srcdoc = srcdoc
self.add_component(self.html_panel)
If you go through the code you pasted line by line it should make sense why nothing appeared.
You replaced the html with an an entirely new iframe that knew nothing about the srcdoc you’d just set.
The style property I’m suggesting may not be perfect. You may need to change the height for example. It will depend on your preferences.
1 Like
Hi,
That indeed work however the frame (no matter what size I choose) appear as a thin bar, and doesn’t spread all over the window as the previous solution.
Like I said you will need to adjust the style to suit your needs
In this snippet i use height=400px instead of height=100%
self.html_panel.html = "<iframe style='width: 100%; height=400px; border: none;' anvil-name='iframe'></iframe>"
When folium generates their iframe version they use the following:
self.html_panel.html = """
<div style="width:100%;">
<div style="position:relative;width:100%;height:0;padding-bottom:60%;">
<iframe anvil-name='iframe' style="position:absolute;width:100%;height:100%;left:0;top:0;border:none" allowfullscreen></iframe>
</div>
</div>
"""
It seems that this lines produce the best result:
html = "<iframe style='position:absolute;width:80%;height:100%;left:20%;top:0;border:none' anvil-name='iframe' ></iframe>"
Without this paramter:
position:absolute
No matter what hight or width you put in you get a small window
