Hello,
I solved the problem 
. I edited the def folium_static to receive the legend parameters and then adicionar new legend after folium.Figure(). The new legend is created from the def add_categorical_legend (This def is not created for me) :
The main alteration was:
fig = folium.Figure().add_child(fig)
fig = add_categorical_legend(fig, title,
colors=colors,
labels=labels)
The full defs is:
Summary
def folium_static(fig,width=700, height=500,colors=['#5e4fa2', '#89d0a4', '#fffebe', '#f88c51', '#9e0142'],
labels=['Muito Baixo', 'Baixo', 'Médio', 'Médio - Alto', 'Alto'], title='Criticidade'):
"""
Renders `folium.Figure` or `folium.Map` in a Streamlit app. This method is
a static Streamlit Component, meaning, no information is passed back from
Leaflet on browser interaction.
Parameters
----------
fig : folium.Map or folium.Figure
Geospatial visualization to render
width : int
Width of result
Height : int
Height of result
Note
----
If `height` is set on a `folium.Map` or `folium.Figure` object,
that value supersedes the values set with the keyword arguments of this function.
Example
-------
>>> m = folium.Map(location=[45.5236, -122.6750])
>>> folium_static(m)
"""
# if Map, wrap in Figure
if isinstance(fig, folium.Map):
fig = folium.Figure().add_child(fig)
fig = add_categorical_legend(fig, title,
colors=colors,
labels=labels)
return components.html(
fig.render(), height=(fig.height or height) + 10, width=width
)
# if DualMap, get HTML representation
elif isinstance(fig, folium.plugins.DualMap) or isinstance(
fig, branca.element.Figure
):
return components.html(fig._repr_html_(), height=height + 10, width=width)
def add_categorical_legend(folium_map, title, colors, labels):
if len(colors) != len(labels):
raise ValueError("colors and labels must have the same length.")
color_by_label = dict(zip(labels, colors))
legend_categories = ""
for label, color in color_by_label.items():
legend_categories += f"<li><span style='background:{color}'></span>{label}</li>"
legend_html = f"""
<div id='maplegend' class='maplegend'>
<div class='legend-title'>{title}</div>
<div class='legend-scale'>
<ul class='legend-labels'>
{legend_categories}
</ul>
</div>
</div>
"""
script = f"""
<script type="text/javascript">
var oneTimeExecution = (function() {{
var executed = false;
return function() {{
if (!executed) {{
var checkExist = setInterval(function() {{
if ((document.getElementsByClassName('leaflet-top leaflet-right').length) || (!executed)) {{
document.getElementsByClassName('leaflet-top leaflet-right')[0].style.display = "flex"
document.getElementsByClassName('leaflet-top leaflet-right')[0].style.flexDirection = "column"
document.getElementsByClassName('leaflet-top leaflet-right')[0].innerHTML += `{legend_html}`;
clearInterval(checkExist);
executed = true;
}}
}}, 100);
}}
}};
}})();
oneTimeExecution()
</script>
"""
css = """
<style type='text/css'>
.maplegend {
position: relative;
z-index:9999;
border:2px solid grey;
background-color:rgba(255, 255, 255, 0.8);
border-radius:6px;
padding: 10px;
font-size:14px;
right: 20px;
top: 20px;
float:right;
}
.maplegend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight: bold;
font-size: 90%;
}
.maplegend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.maplegend .legend-scale ul li {
font-size: 80%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
}
.maplegend ul.legend-labels li span {
display: block;
float: left;
height: 18px;
width: 18px;
margin-right: 5px;
margin-left: 0;
border: 0px solid #ccc;
}
.maplegend .legend-source {
font-size: 80%;
color: #777;
clear: both;
}
.maplegend a {
color: #777;
}
</style>
"""
folium_map.get_root().header.add_child(folium.Element(script + css))
return folium_map