Streamlit folium, AttributeError: 'TemplateModule' object has no attribute 'script'

🧩 Custom Components streamlit-folium
1

Hi,

Before i get started, i love streamlit.
I’m definietly not an experienced streamlitter(?) but it has greatly improved my workflow, so many thanks to all of you for creating this awesome library! :slight_smile:

What I’m trying to do at the moment is to visualise popups as explained in
Quickstart — Folium 0.12.1 documentation and the example “Vincent/Vega and Altair/VegaLite Markers”
I’ve also looked at this stackexchange question
python - Unable to insert altair visualisation as popup in folium map - Stack Overflow

However the program throws an error message when i get to the line
streamlit_folium.st_folium(map_geo)
AttributeError: ‘TemplateModule’ object has no attribute ‘script’

So I think i might be managing to create the popups and assigning them to the markers correctly(?)

I’m also writing the map before sending it to st_folium and it gives me a bunch of text I can’t really make sense of.
not all but some of it:
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>

<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.js&quot;&gt;&lt;/script&gt;
<script src="https://code.jquery.com/jquery-2.1.0.min.js&quot;&gt;&lt;/script&gt;
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js&quot;&gt;&lt;/script&gt;
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css&quot;/&gt;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css&quot;/&gt;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css&quot;/&gt;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css&quot;/&gt;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css&quot;/&gt;
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css&quot;/&gt;

import streamlit_folium
import altair as alt
import folium 
import pandas as pd

map_geo = folium.Map(location=[57.46901, 14], zoom_start=13, width=1200)
with st.sidebar:
 for key in get_data():
    df_to_plot = pd.DataFrame()
    x = get_data()[key]['X'][0]
    y = get_data()[key]['Y'][0]
    df_to_plot['E-modul']= get_data()[key]['E-modul']
    df_to_plot['Djup mum']= get_data()[key]['Djup mum']

    chart = alt.Chart(df_to_plot).mark_line().encode(
            x='E-modul',
            y='Djup mum',
            color='E-modul')

    popup = folium.Popup(max_width=650)

    folium.Vega(chart, height=350, width=650).add_to(popup)

    folium.features.VegaLite(chart, height=350, width=650).add_to(popup)

    folium.Marker([x,y], popup=popup).add_to(map_geo)
    

map_geo
streamlit_folium.st_folium(map_geo)