Interactive Mapbox Component for Streamlit: An intuitive and customizable interface integrating Streamlit with Plotly Mapbox. Enables four interactive events - click point, select point, hover point, and relayout, returning their respective responses to the Python user. Designed using React.js
MIT License
This Repository is heavily inspired my Null Jones - Plotly Events
Since it didn't cover scattermaps in a way I need. I decided to reuse her repository and fit it to the needs of a scattermap
Install via Pip!
pip install streamlit-plotly-mapbox-events
Import the component, and use it like any other Streamlit custom component!
import streamlit as st
from streamlit_plotly_mapbox_events import plotly_mapbox_events
import plotly.express as px
import pandas as pd
# Create a sample dataframe
df = pd.DataFrame({
'lat': [49.058, 50.383, 49.599, 50.677, 53.036, 50.541, 51.524, 54.992, 49.88],
'lon': [11.115, 12.528, 11.231, 10.408, 8.185, 8.055, 7.639, 11.636, 7.678],
'hover': [1, 2, 3, 4, 5, 6, 7, 8, 9],
'color_1': [3, 3, 4, 3, 5, 5, 5, 4, 2],
'color_2': [5, 5, 3, 1, 1, 2, 5, 2, 2],
'color_3': [3, 2, 1, 5, 3, 2, 5, 2, 2]
})
# Create a Plotly Mapbox figure
mapbox = px.scatter_mapbox(df, lat="lat", lon="lon", hover_name="hover", zoom=5.5, height=600)
mapbox.update_layout(mapbox_style="carto-positron")
mapbox.update_layout(margin={"r":0, "t":0, "l":0, "b":0})
# Create an instance of the plotly_mapbox_events component
mapbox_events = plotly_mapbox_events(
mapbox,
click_event=True,
select_event=True,
hover_event=True,
override_height=600
)
# Display the captured events
plot_name_holder_clicked = st.empty()
plot_name_holder_selected = st.empty()
plot_name_holder_hovered = st.empty()
plot_name_holder_clicked.write(f"Clicked Point: {mapbox_events[0]}")
plot_name_holder_selected.write(f"Selected Point: {mapbox_events[1]}")
plot_name_holder_hovered.write(f"Hovered Point: {mapbox_events[2]}")
A tuple consisting of lists or dictionaries for the captured events:
Click Event Select Event Hover Event For selected, click, and hover events, a list of dictionaries containing marker details is returned (in case multiple overlapping markers have been clicked/selected/hovered). The dictionary format is as follows:
{
'lat': int (lat value of point),
'lon': int (lon value of point),
'pointNumber': (index of selected point),
'pointIndex': (index of selected point)
}
Currently, a number of plotly events can be enabled. They can be enabled/disabled using kwargs on the plotly_event()
function.
click_event
(defaults to True
): Triggers event on mouse click of markerselect_event
: Triggers event when markers have been selectedhover_event
: Triggers event on mouse hover of markerrelayout_event
: Triggers if the layout has changed. Occurs on Zoom and Moving