# Python Dash app doesn't display scatter\_mapbox properly in callback **URL:** \ **Category:** Dash Python\ **Tags:** question\ **Created:** [March 31, 2022, 2:25pm UTC](https://community.plotly.com/t/python-dash-app-doesnt-display-scatter-mapbox-properly-in-callback/62544 "2022-03-31T14:25:24Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![ryangifford](https://avatars.discourse-cdn.com/v4/letter/r/65b543/32.png) [@ryangifford](https://community.plotly.com/u/ryangifford)\ **Post date:** [March 31, 2022, 2:25pm UTC](https://community.plotly.com/t/python-dash-app-doesnt-display-scatter-mapbox-properly-in-callback/62544/1 "2022-03-31T14:25:24Z")
I’m trying to create an interactive Dash app to show a map of prices that change when a drop-down is updated. I have successfully created this plot in a Jupyter notebook and inside a Dash app without a callback. The issue seems to be happening with the callback portion. This is what I expect to see: [![enter image description here](https://i.stack.imgur.com/nMPFa.png)](https://i.stack.imgur.com/nMPFa.png) But this is what I see: ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/f/6/f681e8e160ce6f32a2e29f24333984fc4338f5d3.png) Here is a portion of the code that I am using for the Dash app: ```auto ################### Create App ########## app = dash.Dash( __name__ ) server = app.server ############# CREATE CODE DROPDOWN ####### codes = df1.code.unique() # unique codes for dropdown menu codes.sort() ############### APP LAYOUT ############### app.layout = html.Div([ html.Div([ # labels for dropdowns html.Label("Service Code", style = {'margin-left':22, 'display': 'inline-block', 'width': '200px', 'font-weight': 'bold', 'font-size': 12, 'font-family': 'Arial'}) ]), html.Div([ # code dropdown dcc.Dropdown(id='group-select', options=[{'label': i, 'value': i} for i in codes], value=43239, style={'width': '200px', 'margin-left': 10, 'margin-right':10, 'margin-bottom':5, 'display': 'inline-block', 'font-family': 'Arial' }) ]), html.Div( # chart [dcc.Graph('graph2' ) ], ) ]) @app.callback( Output(component_id = 'graph2', component_property = 'figure'), Input(component_id = 'group-select', component_property = 'value') ) def update_graph2(grpname): df1 = df1[(df1.code == grpname)] fig2 = px.scatter_mapbox(df1, lat='lat', lon='long', color ='price', size_max=15, zoom=10, width = 500) fig2.update_layout( mapbox_style="carto-positron") fig2.update_traces(marker={'size': 15}) fig2.update_layout(margin={"r":0,"t":0,"l":0,"b":0}) return (fig2) if __name__ == ' __main__': app.run_server(debug=False) ``` Is there something obvious that I am missing that is making the call back not work properly? Again, if I don’t use a callback and just return the map, everything appears as it should. @adamschroeder I have been watching your tutorials so maybe you would be able to help me here. I appreciate the time. ---
**Author:** ![akroma](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/akroma/32/20346_2.png) [@akroma](https://community.plotly.com/u/akroma)\ **Post date:** [March 31, 2022, 4:03pm UTC](https://community.plotly.com/t/python-dash-app-doesnt-display-scatter-mapbox-properly-in-callback/62544/2 "2022-03-31T16:03:18Z")
Hey @ryangifford , welcome to community. I created some fake data and run your code. ![example_figure](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/9/b/9bded15546c51dc266cea1cd88151ff665de9156.png) ```auto import pandas as pd #------------------------------------ import dash import dash_table import dash_core_components as dcc import dash_bootstrap_components as dbc import dash_html_components as html from dash.dependencies import Input, Output, State #------------------------------------ import plotly.graph_objects as go import plotly.express as px app = dash.Dash( __name__ ) server = app.server #FAKE DATA df1 = pd.DataFrame() df1['code'] = ['Ankit', 'Ankita', 'Yashvardhan'] df1['lat'] = ['38', '39', '40'] df1['long'] = ['24', '25', '26'] df1['price'] = ['2224', '2225', '2226'] ############# CREATE CODE DROPDOWN ####### codes = df1.code.unique() # unique codes for dropdown menu codes.sort() ############### APP LAYOUT ############### app.layout = html.Div([ html.Div([ # labels for dropdowns html.Label("Service Code", style = {'margin-left':22, 'display': 'inline-block', 'width': '200px', 'font-weight': 'bold', 'font-size': 12, 'font-family': 'Arial'}) ]), html.Div([ # code dropdown dcc.Dropdown(id='group-select', options=[{'label': i, 'value': i} for i in codes], value=43239, style={'width': '200px', 'margin-left': 10, 'margin-right':10, 'margin-bottom':5, 'display': 'inline-block', 'font-family': 'Arial' }) ]), html.Div( # chart [dcc.Graph('graph2' ) ], ) ]) @app.callback( Output('graph2', 'figure'), Input('group-select', 'value') ) def update_graph2(grpname): df2 = df1[(df1.code == grpname)] #if i use df1 here instead df2 it gives me error -> "UnboundLocalError: local variable 'df1' referenced before assignment" fig2 = px.scatter_mapbox(df2, lat='lat', lon='long', color ='price', size_max=15, zoom=10, width = 500) fig2.update_layout( mapbox_style="carto-positron") fig2.update_traces(marker={'size': 15}) fig2.update_layout(margin={"r":0,"t":0,"l":0,"b":0}) return fig2 ``` Have a nice day. ---
**Author:** ![ryangifford](https://avatars.discourse-cdn.com/v4/letter/r/65b543/32.png) [@ryangifford](https://community.plotly.com/u/ryangifford)\ **Post date:** [March 31, 2022, 5:15pm UTC](https://community.plotly.com/t/python-dash-app-doesnt-display-scatter-mapbox-properly-in-callback/62544/3 "2022-03-31T17:15:36Z")
@akroma This worked perfectly. Thanks for the help. Just out of curiosity, where did you find the error “UnboundLocalError: local variable ‘df1’ referenced before assignment”? ---
**Author:** ![akroma](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/akroma/32/20346_2.png) [@akroma](https://community.plotly.com/u/akroma)\ **Post date:** [March 31, 2022, 5:21pm UTC](https://community.plotly.com/t/python-dash-app-doesnt-display-scatter-mapbox-properly-in-callback/62544/4 "2022-03-31T17:21:38Z")
![out](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/a/0/a0090321729b55d98f6539126f4e66f14c9a6b5e.png)