Python/Dash - TypeError: Object of type 'Figure' is not JSON serializable

I am trying to build a simple app. The objective is to create a drop-down and use the drop-down as a filter. The filtered data will be shown on a Google Map. Here is my code:

Unfortunately, it keeps giving me the following error message: "TypeError: Object of type 'Figure' is not JSON serializable". I followed the same format, using the drop-down menu to filter a dataset and the code worked fine. This issue only came whenever I tried to map out the data. But for this school project, I have to use Google Map API in Python and this is so far the only way I know how. Would appreciate it if you could advise how to work around that issue. Thanks a lot

#import necessary packages
import plotly.plotly as py
import plotly.graph_objs as go
import pandas as pd
import gmaps
import gmaps.datasets
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
gmaps.configure(api_key="") #Google Map API
df = pd.read_excel('') #read the Map file in

def create_data(choice): #this function takes in a keyword and filter the dataframe based on the keyword
data = df[df['Primary'] == choice]
return data

def create_map(data): #create a map with customized annotations
info_box_template = """
<dl>
<dt>Community Partner: </dt><dd>CommunityPartner</dd>
<dt>Address: </dt><dd>Address</dd>
</dl>
"""
dict1 = data.to_dict('records')
partner_info = [info_box_template.format(**partner) for partner in dict1]
marker_layer = gmaps.symbol_layer(data[['Lat', 'Longitude']], info_box_content=partner_info,
fill_color='rgba(0, 255, 0, 0.0)', stroke_color='rgba(200, 0, 0, 0.4)', scale=2)

omaha_coordinates = (41.25, -95.99)
fig = gmaps.figure(center=omaha_coordinates, zoom_level=12) #create the foundation map focused on Omaha first
fig.add_layer(marker_layer)
return fig

app = dash.Dash('') #create a Dash app

available_indicators = df.Primary.unique() #create a list of unique primary areas for options in the app.layout section later

app.layout = html.Div([ #this part is the dropdown
dcc.Dropdown(
id='dropdown-a',
options=['label': i, 'value': i for i in available_indicators],
multi=False, placeholder='Filter by Primary Mission...'),
html.Div(id='output-a')
])

@app.callback( #this callback is to create the result of the dropdown action
dash.dependencies.Output('output-a', 'children'),
[dash.dependencies.Input('dropdown-a', 'value')])

def update_map(dropdown_value): #update the table
word = create_data(dropdown_value)
fig = create_map(word)
return fig

app.css.append_css("external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css") #the css to make it more beautiful

if __name__ == '__main__':
app.run_server()


0

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy