Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Use choropleth_mapbox in Dash app

Hi
I am trying to display a choropleth_mapbox map with geojson in a dash app.
I first wrote a plotly function that generate my figure and I get exactly what I want :

from urllib.request import urlopen
import json
import pandas as pd
import numpy as np
import plotly.express as px

with urlopen('https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements-version-simplifiee.geojson') as response:
    geojson = json.load(response)
df = pd.DataFrame([x['properties'] for x in geojson['features']])
df['randNumCol'] = np.random.randint(0, 10, df.shape[0]).astype('str')

fig = px.choropleth_mapbox(df, geojson=geojson, featureidkey='properties.code', locations='code', 
                        color="randNumCol", center = {"lat":47, "lon":2}, zoom=4.3, mapbox_style="carto-positron",
                        opacity=0.5)

fig.update_layout(mapbox_style="open-street-map",
                  showlegend=False,
                  margin={"r":0,"t":0,"l":0,"b":0}, 
                  width=600, 
                  height=500
                  )

fig.show()

And I get a school map with the french departments

I now try to use this map in a Dash app. I directly used this figure and try not to modify it

import json
from urllib.request import urlopen

import dash_core_components as dcc
import numpy as np
import pandas as pd
import plotly.express as px
from dash import Dash


with urlopen('https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements-version-simplifiee.geojson') as response:
    geojson = json.load(response)

df = pd.DataFrame([x['properties'] for x in geojson['features']])
df['randNumCol'] = np.random.randint(1, 10, df.shape[0]).astype('str')

fig = px.choropleth_mapbox(df, geojson=geojson, featureidkey='properties.code', locations='code', 
                        color="randNumCol", center = {"lat":47, "lon":2}, zoom=4.3, mapbox_style="carto-positron",
                        opacity=0.5)
fig.update_layout(mapbox_style="open-street-map",
                showlegend=False,
                margin={"r":0,"t":0,"l":0,"b":0}, 
                width=600, 
                height=500
                )

app = Dash()
app.layout = dcc.Graph(id="graph", figure=fig)

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

This time I get this image without the colored geojson defined regions:

Do you have an idea of what I do wrong ?

Thanks a lot for your help

I posted it to Heroku and now it is working


Any idea why I cannot see the geojson infos on localhost ?

Hi @smazoyer welcome to the forum :-). I executed the Dash app locally (thanks for sharing standalone working codes) and it works well, I could not reproduce the problem. Did you try checking in the browser console (in the developers tools) if there is an error message in Javascript? Also did you try with another web browser?

@smazoyer
Age you using jupyter by any chance?

Thanks for your answers.

I think I have found my issue.

Here is the package versions that I used for the local python environment (installed via anaconda)

# Name                    Version                   Build  Channel
blas                      1.0                         mkl
brotlipy                  0.7.0           py38he774522_1000
ca-certificates           2020.7.22                     0
certifi                   2020.6.20                py38_0
cffi                      1.14.3           py38h7a1dbc1_0
click                     7.1.2                      py_0
cssmin                    0.2.0                    pypi_0    pypi
dash                      1.16.2                     py_0
dash-core-components      1.3.1                      py_0
dash-html-components      1.0.1                      py_0
dash-leaflet              0.1.4                    pypi_0    pypi
dash-renderer             1.1.2                      py_0
dash-table                4.4.1                      py_0
flask                     1.1.2                      py_0
flask-assets              2.0                      pypi_0    pypi
flask-compress            1.5.0                      py_0
future                    0.18.2                   py38_1
geobuf                    1.1.1                    pypi_0    pypi
intel-openmp              2020.2                      254
itsdangerous              1.1.0                      py_0
jinja2                    2.11.2                     py_0
markupsafe                1.1.1            py38he774522_0
mkl                       2020.2                      256
mkl-service               2.3.0            py38hb782905_0
mkl_fft                   1.2.0            py38h45dec08_0
mkl_random                1.1.1            py38h47e9c7a_0
numpy                     1.19.1           py38h5510c5b_0
numpy-base                1.19.1           py38ha3acd2a_0
openssl                   1.1.1h               he774522_0
pandas                    1.1.2            py38ha925a31_0
pip                       20.2.3                   py38_0
plotly                    4.11.0                     py_0
protobuf                  3.13.0                   pypi_0    pypi
pycparser                 2.20                       py_2
python                    3.8.5                h5fd99cc_1
python-dateutil           2.8.1                      py_0
python-dotenv             0.14.0                   pypi_0    pypi
pytz                      2020.1                     py_0
pyyaml                    5.3.1            py38he774522_1
retrying                  1.3.3                      py_2
setuptools                50.3.0           py38h9490d1a_1
six                       1.15.0                     py_0
sqlite                    3.33.0               h2a8f88b_0
vc                        14.1                 h0510ff6_4
vs2015_runtime            14.16.27012          hf0eaf9b_3
webassets                 2.0                      pypi_0    pypi
werkzeug                  1.0.1                      py_0
wheel                     0.35.1                     py_0
wincertstore              0.2                      py38_0
yaml                      0.2.5                he774522_0
zlib                      1.2.11               h62dcd97_4

and here is the packages installed by heroku (via pip)

Flask-Assets==2.0
Jinja2==2.11.2
MarkupSafe==1.1.1
Werkzeug==1.0.1
brotli==1.0.9
click==7.1.2
cssmin==0.2.0
dash==1.16.3
dash-core-components==1.12.1
dash-html-components==1.1.1
dash-leaflet==0.1.4
dash-renderer==1.8.2
dash-table==4.10.1
flask==1.1.2
flask-compress==1.7.0
future==0.18.2
geobuf==1.1.1
gunicorn==20.0.4
itsdangerous==1.1.0
numpy==1.19.2
pandas==1.1.3
plotly==4.11.0
protobuf==3.13.0
python-dateutil==2.8.1
pytz==2020.1
retrying==1.3.3
six==1.15.0
webassets==2.0

When I create a local environnement with the same packages that on heroku server, it works correctly on localhost.

There is probably an incompatability in the inital packages.