How to show Folium HTML Plotly popup graphs on Flask? (Python)

Question

I want to deploy a web map apps which containing several points and Plotly graphs as folium popup. Everything is fine until I want to deploy my web map apps in Flask, which when I click the point, the pop up shows error message says

The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.

Here is the popup code

#make a dataframe which is used for plotting the well head point in folium
df_point = pd.DataFrame(list(zip(wells, html_list, Longitude, Latitude)), columns =['Well_Name', 'HTML_list', 'Longitude', 'Latitude'])

#Start plotting well head in map with well log plot as a pop up widget
for i in range(0,len(df_point)):
    html="""
    <iframe src=\"""" + df_point['HTML_list'][i] + """\" width="700" height="800"  frameborder="0">    
    """)
    
    popup = folium.Popup(folium.Html(html, script=True))
    
#     #Cirlce marker ver.
#     folium.CircleMarker([df_point['Latitude'].iloc[i],df_point['Longitude'].iloc[i]],
#                         popup=popup,radius=3.5,opacity=1,color='#ccd132').add_to(map1)
    
    #Marker with icon ver.
    folium.Marker([df_point['Latitude'].iloc[i],df_point['Longitude'].iloc[i]],
                  popup=popup,icon=folium.Icon( icon='glyphicon-pushpin')).add_to(map1)

I put the HTML file, coordinate and name on dataframe which is called df_point, here is the dataframes

    Well_Name    HTML_list      Longitude   Latitude
0   Well 1F   figWell 1F.html   96.083956   5.456862
1   Well 2F   figWell 2F.html   96.356427   5.328133

and here is my Flask app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def render_the_map():
    return render_template('testing_map.html')

if __name__ == '__main__':
    app.run(debug=True)

and also here is the path if someone need my file path information

How do I put the Plotly graphs in HTML format as pop up folium on Flask? I'm still new in Flask development. Any help I would appreciate it, Thanks!

Answer 1

I found a solution based on Sebastian's answer, if someone want to make a Folium map and the pop up marker showing plotly html in Flask, here's how to do it

first, in the app.py, make a route for the plotly plot

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def render_the_map():
    return render_template('testing_map.html')

@app.route('/figure1')
def figure_plotly1():
    return render_template('figWell 1F.html')

@app.route('/figure2')
def figure_plotly2():
    return render_template('figWell 2F.html')

if __name__ == '__main__':
    app.run(debug=True)

and then, search your plotly code in your folium map html and change the iframe source to the defined route, so for example, my plotly html graph name is figWell 1F.html, try to ctrl+F in your main HTML folium map and change the iframe src to be like this

<iframe src="{{url_for('figure_plotly1')}}" width="700" height="800"

and it works like a charm