Dash Choropleth mapbox not working

Dash Python
1

I am attempting to use choropleth maps in dash and I can’t seem to get it to work.

This is the result - trying just a simple dropbox tied to a choropleth but the chorpleth map does not show up.

image
image1266×454 3.1 KB

from urllib.request import urlopen
import json
import pandas as pd
import dash
import plotly.graph_objects as go
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import requests
import plotly.express as px

with urlopen(‘https://raw.githubusercontent.com/codeforamerica/click_that_hood/master/public/data/calgary.geojson’) as response:
geojson = json.load(response)

url = ‘https://mycalgary.com/crime-statistics/bankview-crime-activity-update/’
header = {
“User-Agent”: “Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.75 Safari/537.36”,
“X-Requested-With”: “XMLHttpRequest”
}

r = requests.get(url, headers=header)
tables = pd.read_html(r.text)
df=tables[1]

df.rename(columns={‘Unnamed: 0’:‘Neighbourhood’}, inplace=True)
df.replace([‘Richmond-Knob Hill’], ‘Richmond’, inplace=True)
df.set_index(‘Neighbourhood’, drop=True, inplace=True)

app = dash.Dash()
app.layout = html.Div([
dcc.Dropdown(id=‘time-picker’,
options = [{‘label’: i, ‘value’:i} for i in df.columns],
value= df.columns[0]
),
html.Div([
dcc.Graph(id=‘map’)
])
])

app callbacks ---------------------------------------------

@app.callback(
Output(‘map’, ‘figure’),
[Input(‘time-picker’,‘values’)])
def update_choropleth(time):

fig = go.Figure(data=go.Choroplethmapbox(
    geojson=geojson,
    featureidkey = "properties.name",
    locations=df.index,
    z=df[time],
    colorscale='Teal',
    zmin = 0,
    zmax = 20,
    marker_opacity=0.5
    ))

fig.update_layout(mapbox_style='open-street-map',
                  mapbox_zoom=14,
                  mapbox_center = {'lat':51.033, 'lon':-114.105},
                  height=1000)
return fig

if name == ‘main’:
app.run_server()

If I run the plotly go for Choropleth mapbox standalone I do get what I want. The code to create the figure is essentially the same as in the dash function, but returning the figure doesn’t seem to work in the callback.

fig = go.Figure(data=go.Choroplethmapbox(
geojson=geojson,
featureidkey = “properties.name”,
locations=df.index,
z=df[df.columns[0]],
colorscale=‘Teal’,
zmin = 0,
zmax = 20,
marker_opacity=0.5
))

fig.update_layout(mapbox_style=‘open-street-map’,
mapbox_zoom=13,
mapbox_center = {‘lat’:51.033, ‘lon’:-114.105},
height=1000)

fig.show()

image