Highlight clicked Marker in scattermapbox graph

Dash Python
1

Hi everybody,

at the moment I’m working on a map, that has many measurement stations as markers in it. The color of these markers is generally set by a calculated model efficiency and the use of e.g. colorscale='Viridis'. If the user clicks on any of these markers, I update a second graph on the page and show some time series data. So far so good. What I can’t achieve is to somehow highlight the clicked marker. Of course I could update the entire map each time the user clicks on a marker and set the marker for the clicked data manually. But this is rather slow. The Box select or Lasso select are working pretty fast, but I need to work with clicks on marker points, not selection with the selection tools. Is there a similar property I’m unable to find, that lets the user specify a behaviour for the clicked data point? Something like highlight the clicked data point by colourizing it red our outline it?

Since this is more of a general question, I didn’t attach a code example, but I can add one if needed.

1 Like
2

Wow, sounds really cool. Would love to see this app or a screenshot of it if you are able to share it!

Ideally, we’ll add a “click” mode for selectedData. We’re discussing this one here: Persistent, stateful hover, click, and selection properties · Issue #1848 · plotly/plotly.js · GitHub and Selection by click · Issue #2143 · plotly/plotly.js · GitHub.

This is the best solution right now unfortunately.

3

Hi Chris,

thank you as always for your fast reply. Okay so it’s as I thought and found the GitHub issue in the mean time. Guess I’ll wait then for a possible update, since repainting isn’t really an option for me here.

And of course I can show you some pictures, but it’s nothing fancy, just some basic dashboard I would say that I use for exploring the data of my current research project. Might publish it with the manuscript, once the paper is done, until then it only serves for me and my colleagues to explore the data.

Here are some images:

dash3
dash3.jpg1848×968 489 KB
dash2
dash2.jpg1847×962 517 KB

2 Likes
4

Thanks for asking this question @fkratzert and thanks for the reply too @chriddyp. I am working on something similar but on a different domain. I have managed to get to a point when a dropdown filters a heatmap but wanted to highlight the point in a map based on the dropdown selected. I suppose I can wait for this to be implemented hopefully soon. I will proceed to the workaround of updating the map using a callback.

Cheers

5

Hi @chriddyp,

I was wondering is there any update on this matter?
In docs I saw selected property for scattermapbox and I have set it to change color and opacity of clicked point on the map but when I click, nothing changes on the map itself.

Here is my map figure code:

  fig = go.Figure(go.Scattermapbox(
        lat=get_latitude(),
        lon=get_longitude(),
        mode='markers',
        marker=go.scattermapbox.Marker(
            size=9, color='green'
        ),
        selected=go.scattermapbox.Selected(
            marker = {
                "color":"red",
                "size":25,
                'opacity': 0.3
                }
            ),
        text=get_locations_name(),
        customdata=stations_general['id'],
    ))

    fig.update_layout(
        uirevision='foo',
        hovermode='closest',
        clickmode='event+select',
        mapbox=dict(
            accesstoken=token,
            bearing=0,
            center=go.layout.mapbox.Center(
                lat=21,
                lon=-158
            ),
            pitch=0,
            zoom=6
        ),
        margin = dict(l=0, r=0, t=0, b=0)
    )

So after a click marker stays size 9 and green, it never updates to 25-red. Could you please help me on this? Thanks!