streamlit add a click response function

[kongdd]

Dear Qiusheng,

I have two situations:

• points layer, click the point, streamlit record which point was selected, and update figure.

• raster layer, click the point, streamlit record the coordinate of the point, and then update figure.

I am trying to write a ChinaFlood monitor app by streamlit and leafmap (https://github.com/CUG-Flood/ChinaFloodWeb). Above two problems are the most chanlleging technique for me.

Could you give some guidance how to implement it?
Thanks

[giswqs]

Unfortunately, streamlit only supports folium, which does not support bidirectional functionality. It is impossible to get mouse clicking coordinates programmatically. See python-visualization/folium#1402

The recommended way is to use voila or solara.

Voila:

• Repo: https://github.com/opengeos/voila-geospatial
• Web app: https://opengeos.gishub.org/apps/voila

Solara:

• Repo: https://github.com/opengeos/solara-maxar
• https://huggingface.co/spaces/giswqs/solara-maxar

[giswqs]

Video tutorial: https://youtu.be/_VK10mjwpWI

[kongdd]

Thank u. I will have a try.

[kongdd]

It seems that streamlit can support bidirectional functionality, https://github.com/randyzwitch/streamlit-folium.
It will be great if leafmap could also support this feature.

import folium
import streamlit as st
from streamlit_folium import st_folium
# import leafmap.foliumap as leafmap
# from floodmap import *

st.set_page_config(layout="wide")

loc_cug = [30.46001618003947, 114.61223316513498]
col1, col2 = st.columns(2)

with col1:
  m = folium.Map(location=loc_cug, zoom_start=16)
  folium.Marker(loc_cug, popup="CUG", tooltip="CUG").add_to(m)
  st_data = st_folium(m, width=1200)

with col2:
  st_data

[kongdd]

It seems that streamlit_folium also works for leafmap.

import folium
import streamlit as st
from streamlit_folium import st_folium
import leafmap.foliumap as leafmap
# from floodmap import *

st.set_page_config(layout="wide")

loc_cug = [30.46001618003947, 114.61223316513498]
col1, col2 = st.columns(2)

with col1:
  # m = folium.Map(location=loc_cug, zoom_start=16)
  Map = leafmap.Map(location=loc_cug, zoom_start=16)
  # Map.add_xy_data(stationInfo, x="lon", y="lat", layer_name="sites")
  folium.Marker(loc_cug, popup="CUG", tooltip="CUG").add_to(Map)
  st_data = st_folium(Map, width=1200)

with col2:
  st_data