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
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.
I've run into a problem with a folium map inside a Dash app.
Here's my code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 |
import pandas as pd import branca import folium # Import Dash and Dash Bootstrap Componentsimport dashimport dash_daq as daqfrom dash import Input, Output, dcc, html, dash_table, callbackimport dash_bootstrap_components as dbcapp = 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.serverapp.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) |
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.