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.