Apr-23-2022, 03:18 PM
Hi everyone,
I've run into a problem with a folium map inside a Dash app.
Here's my code
Any ideas what can be causing this? Any way to solve this? Thank you in advance!
Disclaimer: this project is being developed by a non-profit NGO. No commercial use will be made from the solution provided here.
I've run into a problem with a folium map inside a Dash app.
Here's my code
import pandas as pd import branca import folium # Import Dash and Dash Bootstrap Components import dash import dash_daq as daq from dash import Input, Output, dcc, html, dash_table, callback import dash_bootstrap_components as dbc app = dash.Dash(__name__,title='CONFIRM - FÁTIMA 2022',suppress_callback_exceptions=True,update_title=None, meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}], ) app.css.config.serve_locally = False app.scripts.config.serve_locally = False server = app.server app.layout = html.Div( children=[ dcc.Interval( id='interval-component', interval=60 * 1000, # in milliseconds , 20 seconds every refresh n_intervals=0 ), html.Div(id='target'), ] ) @app.callback(Output('target', 'children'), [Input('interval-component', 'n_intervals')]) def embed_iframe(value): # Data Treatment df = pd.read_csv('https://docs.google.com/spreadsheets/d/e/2PACX-1vQzLHhweuUH0meMW0QfQrNCbat0Rw73fEBpBgKU-LQOlSqOTVQ0xMHhquDh-gAo9SNj50xbP1bULh87/pub?gid=617652868&single=true&output=csv') df = df.fillna('NO INFO') # Define Center location = df['lat'].mean(), df['lon'].mean() # Design Popup def popup_html(row): i = row name = df['entidade'].iloc[i] local = df['local'].iloc[i] address = df['morada'].iloc[i] hours = str(df['opening_hours'].iloc[i]) person = str(df['person_in_charge'].iloc[i]) contact_phone = str(df['mobile_contact'].iloc[i]) institution_img="VOSTPT_Logotype.png" left_col_color = "#273B80" right_col_color = "#f2f9ff" html_popup = """ <!DOCTYPE html> <html> <head> <script src="https://kit.fontawesome.com/3544964b82.js" crossorigin="anonymous"></script> </head> <body> <center><h4 style="margin-bottom:5"; width="700px">{}</h4>""".format(name) + """</center> <center><img src=\"""" + institution_img + """\" alt="logo" width=50 height=50></center> <center><table style="height: 126px; width: 700px;"></center> <tbody> <tr> <td style="background-color: """+ left_col_color +""";"><span style="color: #ffffff;"><center>Morada</center></span></td> <td style="width: 350px;background-color: """+ right_col_color +""";">"""+ address + """</td> </tr> <tr> <td style="background-color: """+ left_col_color +""";"><span style="color: #ffffff;"><center>Local</center></span></td> <td style="width: 350px;background-color: """+ right_col_color +""";">"""+ local + """</td> </tr> <tr> <td style="background-color: """+ left_col_color +""";"><span style="color: #ffffff;"><center>Pessoa Responsável</center></span></td> <td style="width: 350px;background-color: """+ right_col_color +""";">"""+ person + """</td> </tr> <tr> <td style="background-color: """+ left_col_color +""";"><span style="color: #ffffff;"><center>Contacto</center></span></td> <td style="width: 400px;background-color: """+ right_col_color +""";">"""+ contact_phone + """</td> </tr> <tr> <td style="background-color: """+ left_col_color +""";"><span style="color: #ffffff;"><center>Horário</center></span></td> <td style="width: 400px;background-color: """+ right_col_color +""";">"""+ hours + """</td> <td style="width: 10px;background-color: """+ right_col_color +""";"><i class="fa-solid fa-at"></i></td> </tr> </tbody> </body> </html> """ return html_popup # Design Map map_fatima = folium.Map(location=location,zoom_start=8) for i in range(0,len(df)): institution_type = df['entidade'].iloc[i] if institution_type == 'Movimento da Mensagem de Fátima': color = 'green' icon = 'info' elif institution_type == 'Ordem de Malta': color = 'red' icon = 'map-marker' else: color = 'gray' html_popup = popup_html(i) popup = folium.Popup(folium.Html(html_popup, script=True), max_width=700) folium.Marker([df['lat'].iloc[i],df['lon'].iloc[i]], popup=popup,icon=folium.Icon(color=color, icon=icon, prefix='fa')).add_to(map_fatima) out_map = "assets/map_fatima.html" map_fatima.save(out_map) return html.Iframe( src='assets/map_fatima.html', style={"width":"100%","height":"900px"} ) # ------------------------------------------------------------------------------------- # -------------------------------- START THE APP ------------------------------------- # ------------------------------------------------------------------------------------- if __name__ == "__main__": app.run_server(host='0.0.0.0', debug=True)When I run the app the map doesn't show. If I delete the script reference to the Font Awesome Kit everything works as predicted but the icons do not show, and I really need to show the icons on this popup.
Any ideas what can be causing this? Any way to solve this? Thank you in advance!
Disclaimer: this project is being developed by a non-profit NGO. No commercial use will be made from the solution provided here.