Interactive map marker

leofernandeso · January 20, 2020, 9:49pm

Hi,

I would like to know if it is possible to use interactive markers using the scattermapbox. For example: If the user clicks on the marker on the map, I want the app to call a callback function in order to draw another plot. Is this possible?

Thank you very much!

Emil · February 13, 2020, 6:01pm

I am not sure about the default Plotly maps, but you can do it with Dash Leaflet. Just add a the appropriate callback to the map click event, see e.g. example 1 here,

github.com

thedirtyfew/dash-leaflet/blob/master/usage_gallery.py#L23


mapbox_ids = ["light-v9", "dark-v9", "streets-v9", "outdoors-v9", "satellite-streets-v9"]


# region Example 1


MAP_ID = "map-id"
BASE_LAYER_ID = "base-layer-id"
BASE_LAYER_DROPDOWN_ID = "base-layer-drop-down-id"
COORDINATE_CLICK_ID = "coordinate-click-id"




def render_example1():
    comment = """ Marker with default icon, marker with custom icon, circle marker (fixed pixel radius), 
    circle (fixed physical radius), polyline, polygon and rectangle, all supporting tooltips and popups. """
    return [
        html.H1("Example 1: Basic components"),
        html.P(comment),
        dl.Map(id=MAP_ID, style={'width': '1000px', 'height': '500px'}, center=[56.05, 10.25], zoom=10, children=[
            dl.TileLayer(id=BASE_LAYER_ID),
            # Marker with tool tip and popup.
            dl.Marker(position=[56, 9.8], children=[
                dl.Tooltip("Marker tooltip"),

Topic		Replies	Views
Callback for handling click on a scattermapbox marker Dash Python	0	1024	March 3, 2021
The callback for the Scattermapbox type is problematic Dash Python question	8	666	December 16, 2022
Markers on map as a button? Dash Python	3	938	September 17, 2020
Update leaflet center from callback Dash Python	10	1352	November 27, 2023
[Help needed] Updating Graph depending on point clicked in Map (callback not working) Dash Python	3	7707	May 24, 2019

Interactive map marker

Related Topics