Streamlit ve Harita Verisi

merhaba, bugünki yazımızda streamlit’le birlikte harita verileriyle uğraşacağız. sadece verilerle uğraşmakla kalmayıp, ayrıca bu verilerin saklanması ve tekrardan kullanılmasını da ele alacağız.

böyle bir uygulamayı nerede kullanabiliriz?

kullanıcılardan harita girdisi alıp, bunu saklamanız gerektiğinde veya harita girdisiyle bir işlem yapmanız gerekirse, bu yöntemleri kullanarak istediğiniz gibi kullanabilirsiniz. o zaman başlayalım.

önce gereksinimler

uygulamamız çok basit olacak, ihtiyacımız olan 2 farklı kütüphane ve varyasyonları var

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

streamlit ile birlikte, bir de streamlit için özelleştirilmiş folium kütüphanelerini kullanacağız.

temel kaygımız, verinin saklanması ve daha sonrasında kullanılabilmesi olduğu için, bu tarz verileri öncelikle session_state üzerinde saklayacağız. daha sonrasında gerektiği yerde çağıracağız.

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

daha net anlayabilmek adına, uygulamamızı bir taksi uygulaması olarak kurgulayalım. kullanıcı, bineceği ve ineceği yeri seçerek, taksi için rota oluşturmuş olacak. current_state üzerinden kullanıcının durumunu takip edeceğiz, kullanıcının biniş ve iniş yerlerini latitute ve longitute olarak saklayacağız.

kullanıcıdan önce bir biniş noktası, daha sonrasında iniş noktası seçmesini isteyeceğiz ve bu sırada bu iki veriyi de saklayacağız. böylece kullanıcı iniş noktasını seçerken, biniş noktasını nereden seçtiğini de görebilecek.

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()

m ile tanımladığımız harita değişkenini, st_folium ile tekrardan tanımlayıp, streamlit içerisinde kullanıyoruz. kodumuzu bu şekilde kurguladığımızda karşımızda şöyle bir harita görünmeli.

m ile tanımladığımız harita değişkenini, st_folium ile tekrardan tanımlayıp, streamlit içerisinde kullanıyoruz. kodumuzu bu şekilde kurguladığımızda karşımızda şöyle bir harita görünmeli.

m isimli değişkenimiz, OpenStreetMap kullanarak New York City’i merkez alan ve zoom seviyesi 11 olan bir harita oluşturuyor. herhangi bir tıklama yaptığımızda, bu direkt olarak pop-up olarak görünmekte.

kullanıcının herhangi bir tıklama yapıp yapmadığını, map_ny[“last_clicked”] değişkeni ile takip ediyoruz. herhangi bir tıklama yaparsa bu değişken true’ya dönüyor ve biz de buradan verilerimizi alıp, bunları session_state üzerindeki değişkenlere kaydedip, current_state’imizi değiştirip streamlit uygulamamızı rerun() ediyoruz.

kullanıcının herhangi bir tıklama yapıp yapmadığını, map_ny[“last_clicked”] değişkeni ile takip ediyoruz. herhangi bir tıklama yaparsa bu değişken true’ya dönüyor ve biz de buradan verilerimizi alıp, bunları session_state üzerindeki değişkenlere kaydedip, current_state’imizi değiştirip streamlit uygulamamızı rerun() ediyoruz.

diyelim şu noktayı seçtik,

ilk tıkladığımızda açılır pencere görünür ve alma noktamızı seçmiş oluruz. şimdi farklı bir current_state değerindeyiz. önceki haritamızdan farklı olarak, alma noktamızı bu haritada görebilmeliyiz. mevcut bırakma noktamız için kodumuzu yazalım.

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],
        )

Aynı şekilde m isimli değişken ile haritamızı tanımlıyoruz, burada yeni bir popup ekliyoruz ve adını ‘alış’ koyuyoruz, aslında bu bizim pickup konumumuz. haritaya ekliyoruz.

Daha sonra bu konumu session_state’de sakladığımız değişkenlerle besleyerek bir Marker olarak eliyoruz. geri kalanı önceki kodumuzla aynı.

bu şekilde hem kullanıcının bir önceki haritada seçmiş olduğu alış noktası hem de şimdi seçtiği varış noktası net bir şekilde görülebilmekte. işte bu kadar!

birkaç satırda haritadan veri alıp, aldığımız veriyi sessionlar arasında saklayıp kullanabildik.

bir sonraki yazıda görüşmek üzere!