Streamlit and Map Data

hello, in today’s article we will be dealing with map data with streamlit. we will not only deal with data, but also with the storage and reuse of this data.

where can we use such an application?

when you need to receive map input from users and store it, or if you need to perform an operation with map input, you can use it as you like using these methods. so let’s get started.

firstly, requirements

our application will be very simple, we need 2 different libraries and their variations

import streamlit as st
import folium as fl
from streamlit_folium import st_folium
from folium import Popup

together with streamlit, we will also use folium libraries customised for streamlit.

Since our main concern is to store the data and use it later, we will first store such data in session_state and then call it when needed.

if "current_state" not in st.session_state:
    st.session_state.current_state = "get_pickup_location"
    st.session_state.pickup_lat = None
    st.session_state.pickup_lon = None
    st.session_state.dropoff_lat = None
    st.session_state.dropoff_lon = None

for a clearer understanding, let’s build our application as a taxi application. the user will create a route for the taxi by selecting where to board and disembark. we will track the user’s state via current_state, we will store the user’s boarding and disembarking locations as latitute and longitute.

we will ask the user to select a boarding point, then a disembarkation point, and store both data at this time. so when the user selects the disembarkation point, he will be able to see where he selected the boarding point.

if (st.session_state.current_state == "get_pickup_location"):
    st.subheader("Select pickup location")

    m = fl.Map(
        tiles="OpenStreetMap",
        zoom_start=11,
        location=[40.78910688411592, -73.98452568420909],
    )
    m.add_child(fl.LatLngPopup())
    map_ny = st_folium(m, height=400, width=700)

    if map_ny["last_clicked"]:
        st.session_state.pickup_lat = map_ny["last_clicked"]["lat"]
        st.session_state.pickup_lon = map_ny["last_clicked"]["lng"]
        st.session_state.current_state = "get_dropoff_location"
        st.rerun()

We redefine the map variable we defined with m with st_folium and use it in streamlit. When we construct our code in this way, we should see a map like this.

Our variable m creates a map centred on New York City using OpenStreetMap with a zoom level of 11. When we make any click, this appears directly as a popup.

We track whether the user has made any clicks with the map_ny[‘last_clicked’] variable. if the user has made any clicks, this variable returns true and we get our data from here, save them in variables on session_state, change our current_state and rerun() our streamlit application.

let’s say we’ve chosen this point,

the first time we click the pop-up appears and we have selected our pick-up point. now we are in a different current_state value. unlike our previous map, we should be able to see our pick-up point on this map. let’s write our code for our current drop-off point.

elif st.session_state.current_state == "get_dropoff_location":
    st.subheader("Select drop-off location")

    m = fl.Map(
        tiles="OpenStreetMap",
        zoom_start=11,
        location=[40.78910688411592, -73.98452568420909],
    )
    popup = Popup("Alış", parse_html=True, show=True)
    fl.Marker(
        [st.session_state.pickup_lat, st.session_state.pickup_lon], popup=popup
    ).add_to(m)
    m.add_child(fl.LatLngPopup())
    map_ny = st_folium(m, height=400, width=700)

    if map_ny["last_clicked"]:
        st.session_state.dropoff_lat = map_ny["last_clicked"]["lat"]
        st.session_state.dropoff_lon = map_ny["last_clicked"]["lng"]
        st.session_state.distance = haversine(
            [st.session_state.pickup_lat, st.session_state.pickup_lon],
            [st.session_state.dropoff_lat, st.session_state.dropoff_lon],
        )

In the same way, we define our map with the variable named m, here we add a new popup and name it ‘alış’, in fact this is our pickup location. we add it to the map.

Then we eliminate this location as a Marker by feeding it with the variables we store in session_state. the rest is the same as our previous code.

In this way, both the user’s pickup point from the previous map and the destination that the user has chosen now can be seen clearly. that’s it!

We were able to get data from the map in a few lines and store and use the data we received between sessions.

See you in the next article!