streamlit-plotly-mapbox-events 0.1.2

A Streamlit component that integrates Plotly's interactive Mapbox visualizations, enabling bidirectional communication between the map and Streamlit. It allows for seamless rendering of Mapbox plots within Streamlit applications while supporting event handling, such as click, select, hover, and relayout events, to facilitate dynamic interactions and data updates.

Streamlit Plotly MapBox Events

First things first

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

Installation

Install via Pip!

pip install streamlit-plotly-mapbox-events

Usage

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]}")

Parameters

• plot_fig (Plotly Figure): Plotly figure that we want to render in Streamlit.
• click_event (boolean, default: True): Watch for click events on plot and return point data when triggered.
• select_event (boolean, default: False): Watch for select events on plot and return point data when triggered.
• hover_event (boolean, default: False): Watch for hover events on plot and return point data when triggered.
• override_height (int, default: 450): Integer to override component height. Defaults to 450 (px).
• override_width (string, default: '100%'): String (or integer) to override width. Defaults to 100% (whole width of iframe).
• key (str or None): An optional key that uniquely identifies this component. If this is None, and the component's arguments are changed, the component will be re-mounted in the Streamlit frontend and lose its current state.

Return Value

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

Events

Currently, a number of plotly events can be enabled. They can be enabled/disabled using kwargs on the plotly_event() function.

• Click click_event (defaults to True): Triggers event on mouse click of marker
• Select select_event: Triggers event when markers have been selected
• Hover hover_event: Triggers event on mouse hover of marker
• Relayout relayout_event: Triggers if the layout has changed. Occurs on Zoom and Moving

Deprecation Warning

The relayout_event parameter is deprecated and will have no effect. Relayout events have been removed due to interferences with Streamlit.