# Adding drag and drop effects to a plotly map

**URL:** <https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500>\
**Category:** Dash Python\
**Created:** [February 9, 2023, 1:18pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500 "2023-02-09T13:18:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bahageel88](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bahageel88/32/22563_2.png) [@Bahageel88](https://community.plotly.com/u/Bahageel88)\
**Post date:** [February 9, 2023, 1:18pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/1 "2023-02-09T13:18:26Z")

</div>

Good morning my beloved companions at plotly dash community:  
I am currently working on a comprehensive dashboard for statistics on Saudi Arabia, I would like to draw a map of Saudi Arabia to study population growth trends as well as I want to add an interactivity to this map in a such way that whenever I drag a city from that map into a graph it instantly draws a plot line chart , bar chart and so on based on a drop down menu any way I have seen this in your dash gallery concerning a dashboard called US poison induced death I do wonder how can I achieve this effect on my project by just dragging any state in Saudi Arabia to get a graph drawn instantly?  
Please help me with your suggestions and ideas  
With best regard @adamschroeder  
BAHAGEEL

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/f/3/f39a3521dc1f00c4b6b2eab8a5d2719564ada7d6.jpeg)

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [February 9, 2023, 1:31pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/2 "2023-02-09T13:31:39Z")

</div>

Hi @Bahageel88 ,

you could plot the cities as markers and on marker click (instead of drag&drop) display the information you want. I did this here:

> **[GitHub - AIMPED/plotly\_dash\_autumn\_2022](https://github.com/AIMPED/plotly_dash_autumn_2022)**
>
> Contribute to AIMPED/plotly\_dash\_autumn\_2022 development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Bahageel88](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bahageel88/32/22563_2.png) [@Bahageel88](https://community.plotly.com/u/Bahageel88)\
**Post date:** [February 9, 2023, 1:46pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/3 "2023-02-09T13:46:01Z")

</div>

Ok thank you brother for your suggestion I will have a look at it  
but If you could just help me with the drag and drop effect cos I want the same effect on the attached dashboard picture  
With best regards

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [February 9, 2023, 2:36pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/4 "2023-02-09T14:36:59Z")

</div>

> [@Bahageel88](#):
>
> could just help me with the drag and drop

This is not a built in feature of plotly. You would need to create it yourself via javascript.

What are you refering to with this?

> [@Bahageel88](#):
>
> same effect

---

<div class="post-metadata">

**Author:** ![Bahageel88](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bahageel88/32/22563_2.png) [@Bahageel88](https://community.plotly.com/u/Bahageel88)\
**Post date:** [February 9, 2023, 2:57pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/5 "2023-02-09T14:57:53Z")

</div>

I will figure out how to do it with pure Python  
With best regards

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [February 9, 2023, 5:38pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/6 "2023-02-09T17:38:34Z")

</div>

hi @Bahageel88 the drag and drop feature is not an easy thing to accomplish inside a Dash app with just Python. Is that a really important feature for you? Or can you do it with the dropdown? maybe you do it so when a user clicks on a city in the bar chart or line chart, it updates the map. Or the opposite way around…

---

<div class="post-metadata">

**Author:** ![Bahageel88](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bahageel88/32/22563_2.png) [@Bahageel88](https://community.plotly.com/u/Bahageel88)\
**Post date:** [February 9, 2023, 5:54pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/7 "2023-02-09T17:54:58Z")

</div>

Hi Adam  
Exactly I want to click on the area on the map and consequently the line chart gets updated can I accomplish this one ? Cos I found someone who made it with pure Python I will you the repository Adam  
Here is the repository where someone just did accomplish drag and drop with Python

[https://github.com/plotly/dash-sample-apps/blob/main/apps/dash-opioid-epidemic/app.py](https://github.com/plotly/dash-sample-apps/blob/main/apps/dash-opioid-epidemic/app.py)  
And the dashboard is available on dash gallery  
Have a look at it and explain for me what he did  
With best regards

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [February 9, 2023, 5:58pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/8 "2023-02-09T17:58:19Z")

</div>

Hello @Bahageel88,

That isnt drag and drop, that is selectedData. 🙂

Just use the selectedData prop as an input. 😃

---

<div class="post-metadata">

**Author:** ![Bahageel88](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bahageel88/32/22563_2.png) [@Bahageel88](https://community.plotly.com/u/Bahageel88)\
**Post date:** [February 9, 2023, 6:11pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/9 "2023-02-09T18:11:51Z")

</div>

Hi @jinnyzorYes I confused the term however I want to accomplish the same effect with slight modifications  
Would you please elaborate on how he built the call back in this situation using selectedData prop as input?  
With best regards

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [February 9, 2023, 6:14pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/10 "2023-02-09T18:14:41Z")

</div>

Here is how the interaction works for the callback:

```auto
@app.callback(
    Output("selected-data", "figure"),
    [
        Input("county-choropleth", "selectedData"),
        Input("chart-dropdown", "value"),
        Input("years-slider", "value"),
    ],
)
def display_selected_data(selectedData, chart_dropdown, year):
    if selectedData is None:

```

Using an input mechanism similar to that will get you to show the selected data’s information.

---

<div class="post-metadata">

**Author:** ![Bahageel88](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bahageel88/32/22563_2.png) [@Bahageel88](https://community.plotly.com/u/Bahageel88)\
**Post date:** [February 9, 2023, 6:29pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/11 "2023-02-09T18:29:58Z")

</div>

Obviously the call back has three inputs simultaneously, selectedData ,the drop down and the year slider this is precisely what I want to achieve  
Final question though  
How does the selectedData as input work ? Because I understand slider and drop down are dcc components but what about selectedData?  
With kind regards

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [February 9, 2023, 6:32pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/12 "2023-02-09T18:32:05Z")

</div>

Here, check out here:

> **[Part 4. Interactive Graphing and Crossfiltering | Dash for Python...](https://dash.plotly.com/interactive-graphing)**
>
> Graphs can be inputs as well as outputs: bind interactivity to the Dash \`Graph\` component whenever you hover, click, or select points on your chart.

---

<div class="post-metadata">

**Author:** ![Bahageel88](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bahageel88/32/22563_2.png) [@Bahageel88](https://community.plotly.com/u/Bahageel88)\
**Post date:** [February 9, 2023, 6:44pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/13 "2023-02-09T18:44:34Z")

</div>

Thank you very much indeed  
This is really astonishing  
I will check it out  
Thank you again my beloved teachers  
With best regards

---

<div class="post-metadata">

**Author:** ![hoatran](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hoatran/32/21447_2.png) [@hoatran](https://community.plotly.com/u/hoatran)\
**Post date:** [February 10, 2023, 3:58am UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/14 "2023-02-10T03:58:14Z")

</div>

In the past I used below code to return new chart when click on map. Hope this help:

```auto
@callback(Output('div_1', 'children'),
          [Input('map_1', 'clickData'),
           Input('store_data', 'data'),
           Input(ThemeChangerAIO.ids.radio("theme"), "value")])

def update_bar_chart(clickdata,store_data,theme):
    if clickdata:
        points = clickdata['points'][0]['location']
        dff_z = dff[dff['county_fips'] == points]

        dff_z_1 = dff_z.pivot_table(values='sale_dollars',
                          index=['store_name'],
                          aggfunc=np.sum).reset_index()
        dff_z_1 = dff_z_1.sort_values(['sale_dollars'], ascending=[False]).head(30)
        fig = px.bar(dff_z_1,x='sale_dollars',y='store_name',orientation='h')
        fig.update_traces(marker_color='rgba(50, 171, 96, 0.6)',
                      marker_line_color='rgba(50, 171, 96, 1.0)',
                      marker_line_width=0.5)
        fig.update_layout(template=template_from_url(theme), margin=dict(l=0, r=0, t=0, b=0),yaxis_title=None, xaxis_title=None)

        dff_z_2 = dff_z.pivot_table(values='sale_dollars',
                                index=['category_name'],
                                aggfunc=np.sum).reset_index()
        dff_z_2 = dff_z_2.sort_values(['sale_dollars'], ascending=[False]).head(30)
        fig_2 = px.bar(dff_z_2, x='sale_dollars', y='category_name',orientation='h')
        fig_2.update_traces(marker_color='rgba(50, 171, 96, 0.6)',
                        marker_line_color='rgba(50, 171, 96, 1.0)',
                        marker_line_width=0.5)
        fig_2.update_layout(template=template_from_url(theme),
                        margin=dict(l=0, r=0, t=0, b=0),
                        yaxis_title=None,
                        xaxis_title=None)
        dff_z_3 = dff_z.pivot_table(values='sale_dollars',
                                index=['item_description'],
                                aggfunc=np.sum).reset_index()
        dff_z_3 = dff_z_3 .sort_values(['sale_dollars'], ascending=[False]).head(30)
        fig_3 = px.bar(dff_z_3, x='sale_dollars', y='item_description',orientation='h')
        fig_3.update_traces(marker_color='rgba(50, 171, 96, 0.6)',
                        marker_line_color='rgba(50, 171, 96, 1.0)',
                        marker_line_width=0.5)
        fig_3.update_layout(template=template_from_url(theme),
                        margin=dict(l=0, r=0, t=0, b=0),
                        yaxis_title=None,
                        xaxis_title=None)

        return html.Div(dbc.Row([
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            dbc.Row([
                                dbc.Col([
                                    html.Span(f'1. Top sold store by each county'),
                                    dcc.Loading(children=[dcc.Graph(figure=fig,
                                                                    id='bar_1',
                                                                    style={'height': 350})],
                                                color='rgba(50, 171, 96, 0.6)', type='dot')
                                ], width={'size': 4}),
                                dbc.Col([
                                    html.Span(f'2. Top sold category by each county'),
                                    dcc.Loading(children=[dcc.Graph(figure=fig_2,
                                                                    id='bar_2',
                                                                    style={'height': 350})],
                                                color='rgba(50, 171, 96, 0.6)', type='dot')
                                ], width={'size': 4}),
                                dbc.Col([
                                    html.Span(f'3. Top sold items by each county'),
                                    dcc.Loading(children=[dcc.Graph(figure=fig_3,
                                                                    id='bar_3',
                                                                    style={'height': 350})],
                                                color='rgba(50, 171, 96, 0.6)', type='dot')
                                ], width={'size': 4})
                            ]),
                        ])
                    ])
                ], xs=12),
            ], className='p-2 align-items-center')
        )

```

You can see full code here, it’s quite messy but hope this help: [GitHub - hoatranobita/multiple\_page\_app](https://github.com/hoatranobita/multiple_page_app)

---

<div class="post-metadata">

**Author:** ![Bahageel88](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bahageel88/32/22563_2.png) [@Bahageel88](https://community.plotly.com/u/Bahageel88)\
**Post date:** [February 10, 2023, 4:30am UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/15 "2023-02-10T04:30:53Z")

</div>

Good evening @hoatran  
Really great I will have a look at it and discuss with you every aspect of this call back  
Thank you very much indeed  
With best regards

---

<div class="post-metadata">

**Author:** ![Bahageel88](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bahageel88/32/22563_2.png) [@Bahageel88](https://community.plotly.com/u/Bahageel88)\
**Post date:** [February 14, 2023, 1:42pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/16 "2023-02-14T13:42:03Z")

</div>

Good morning my beloved companions  
Morning to you @hoatran  
I wish your doing well my brother  
I have a question for you with regard to click on the map to get chart up dated I do not have fips points I have locations codes I want to click on the map and get the other chart filtered to that location how can I achieve this ? Please help me  
I have location codes like AFG for Afghanistan and so on I want to click on afghististan and get my chart updated accordingly  
With best regards

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [February 14, 2023, 2:15pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/17 "2023-02-14T14:15:01Z")

</div>

Hello @Bahageel88,

Sounds like you could use a choropleth instead.

> **[Choropleth](https://plotly.com/python/choropleth-maps/)**
>
> Over 10 examples of Choropleth Maps including changing color, size, log axes, and more in Python.

---

<div class="post-metadata">

**Author:** ![hoatran](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hoatran/32/21447_2.png) [@hoatran](https://community.plotly.com/u/hoatran)\
**Post date:** [February 14, 2023, 2:32pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/18 "2023-02-14T14:32:52Z")

</div>

How did you try?  
As you see in my code, I make choropleth as below:

```auto
fig_7 = px.choropleth_mapbox(df9,
                             locations=df9["county_fips"],
                             geojson=counties,
                             featureidkey="properties.geoid",
                             color=df9['sale_dollars'],
                             hover_name="county",
                             range_color=(0, df9['sale_dollars'].iloc[0]),
                             zoom=5,
                             center={"lat": 42.01604, "lon": -92.91157},
                             color_continuous_scale="Viridis")

```

And with `clickData` I tried to return `county_fips` and then use it to filter my data. So I think if you want to use location codes, you should make choropleth with locations as location code and then use it to filter your data. Something as below:

```auto
if clickdata:
    points = clickdata['points'][0]['location']
    dff_z = dff[dff['county_fips'] == points]

```

---

<div class="post-metadata">

**Author:** ![Bahageel88](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bahageel88/32/22563_2.png) [@Bahageel88](https://community.plotly.com/u/Bahageel88)\
**Post date:** [February 14, 2023, 2:33pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/19 "2023-02-14T14:33:55Z")

</div>

Hi @jinnyzor

Yes I have gone through them What I want now is to use the locations on the map to update a line chart very much like the selectedData example but I wonder how to accomplish it?

---

<div class="post-metadata">

**Author:** ![Bahageel88](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bahageel88/32/22563_2.png) [@Bahageel88](https://community.plotly.com/u/Bahageel88)\
**Post date:** [February 14, 2023, 2:38pm UTC](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500/20 "2023-02-14T14:38:21Z")

</div>

Good morning @hoatran  
Ok I will try using this approach, I have location codes and I successfully plotted the cholorpleth map now I want to click on every country and get the neighboring chart updated Do I need geojson?  
Any way  
Thanks very much indeed  
With best regards

[Next page](https://community.plotly.com/t/adding-drag-and-drop-effects-to-a-plotly-map/72500.md?page=2)