How do I display multiple maps within my Streamlit selection?

Question

I am learning how to use Streamlit, and I would like to add a side-selection which lets the user select which radius they would like displayed on a Folium map. So far, I have been able to display the map and the select side-bar, but I do not know how to map the various radius selections to my folium map.

add_select = st.sidebar.selectbox("What radius do you want to assign?",
                                  ("1 mile", "2 miles","3 miles"))

#Map code

lat= 51.64270
lon = -0.20747
map_fs = folium.Map(location=[lat, lon], zoom_start=11.2)

df.apply(lambda row:folium.Circle(location=[row["longitude"], row["latitude"]], 
                                              radius=4828, Popup=row['cook'])
                                             .add_to(map_fs), axis=1)

df.apply(lambda row: folium.Marker(location=[row["longitude"], row["latitude"]],
    popup=row['C1'],
    icon=folium.Icon(color='red', icon='Default', prefix = 'fa'),
).add_to(map_fs), axis = 1)

folium_static(map_fs)

Essentially, what I would like is a way to reference the 'radius' option in the

folium.Circle

method by my st.sidebar.selection options. Can someone please point me in the right direction?

I imagine I write some kind of if statement that maps x metres to the mile selected but I am not sure.

score 1 · Accepted Answer · answered Feb 22 '22 at 07:00

Your selection is in miles you need to convert it to meters because the radius is in meters. Here is a sample code and result.

Code

import streamlit as st
from streamlit_folium import folium_static
import folium


if "radius" not in st.session_state:
    st.session_state.radius = "0.1 mile"


def miles_to_meters(miles):
    return miles*1609


data = {
    "0.1 mile": 0.1,
    "1 mile": 1,
    "2 miles": 2,
    "3 miles": 3
}

st.sidebar.selectbox(
    label="What radius do you want to assign?",
    options=("0.1 mile", "1 mile", "2 miles", "3 miles"),
    key="radius"
)

radius = miles_to_meters(data[st.session_state.radius])

lat, lon = 51.64270, -0.20747
m = folium.Map(location=[lat, lon], zoom_start=16)
folium.Marker([lat, lon]).add_to(m)
folium.Circle([lat, lon], radius=radius).add_to(m)  # radius is in meters

folium_static(m)

How do I display multiple maps within my Streamlit selection?

1 Answers1

Code

Output