Map with Choroplethmapbox isn't showing in Dash

Question

I am trying to build a map with Choroplethmapbox in Dash, but I cannot plot in that.

I test the geojson with another tool and in that tools, the map is drawn correctly, but not with Choroplethmapbox.

Any idea about what I am doing wrong?

Thanks

GeoJson:

https://gist.github.com/Tlaloc-Es/5c82834e5e4a9019a91123cb11f598c0

Python Dash Code:

import json
with open('mexico.geojson') as f:
    counties = json.load(f)
fig = go.Figure(go.Choroplethmapbox(
    geojson=counties,
    locations=df['COV_'],
    z=df['Enero'],
    colorscale="Viridis", zmin=0, zmax=df['Enero'].max(),
    marker_opacity=0.5, marker_line_width=0))

fig.update_layout(mapbox_style="carto-positron",
                  mapbox_zoom=3, mapbox_center = {"lat": 37.0902, "lon": -95.7129})
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})

Answer 1

looks like you are missing the fig.show() at the bottom and import plotly.graph_objects as go at the top. The code below will open a map, but data is needed for the choropleth values. You have df in your code example but you did not include a csv. If you want to us the df that is in your code, import pandas, and create a data frame called df from the csv. Here is a link that can help with that. Pandas dataframes

import json
import plotly.graph_objects as go


with open(r'{insert file path here}.geojson') as f:
    counties = json.load(f)
fig = go.Figure(go.Choroplethmapbox(
    geojson=counties,
    colorscale="Viridis", zmin=0, zmax=100,
    marker_opacity=0.5, marker_line_width=0))

fig.update_layout(mapbox_style="carto-positron",
                  mapbox_zoom=3, mapbox_center = {"lat": 37.0902, "lon": -95.7129})
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
fig.show()

Here is an example of using pandas with you json.Further explanation of the code below can be found here

from urllib.request import urlopen
import json
with urlopen('https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json') as response:
    counties = json.load(response)

import pandas as pd
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv",
                   dtype={"fips": str})

import plotly.express as px

fig = px.choropleth(df, geojson=counties, locations='fips', color='unemp',
                           color_continuous_scale="Viridis",
                           range_color=(0, 12),
                           scope="usa",
                           labels={'unemp':'unemployment rate'}
                          )
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
fig.show()

Answer 2

I needed to add an id filed wit this code:

I used the code of this page: https://community.plot.ly/t/plot-a-shapefile-shp-in-a-choropleth-chart/27850

Answer 3

I had to solve a similar problem and this is my solution applied to your problem (although with px.choropleth_mapbox instead of graph_objects which I found confusing for choropleths).

• The data that you link does not (at least not at the time of writing) have the column 'Enero'.
• I do not have the GeoJSON of the counties in Mexico.
• You never define a Dash-app (app.layout = ...), while you can probably serve without it and just have fig.show() as suggested, explicit beats implicit. Thus creating a layout section is better.
• If I understand how it works, if you use GeoPandas you do not have to generate and 'id' or anything like that as you suggest in your own answer.

Anyways, hopefully my solution can serve as a working start for you. I added radio buttons so that you can select what data column to use for color.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.express as px

import geopandas as gpd

print('Loading data...')
gdf = gpd.read_file('https://gist.githubusercontent.com/Tlaloc-Es/5c82834e5e4a9019a91123cb11f598c0/raw/709ce9126861ef7a7c7cc4afd6216a6750d4bbe1/mexico.geojson')
gdf = gdf.to_crs(epsg=4326)

print('Done!')
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Div([
                dcc.RadioItems(
                    id='radio-color_on',
                    options=[{'label': i, 'value': i} for i in ['AREA','PERIMETER']],
                    value='AREA',
                    labelStyle={'display': 'inline-block'}
                ),
    ],style={'width': '40%', 'display': 'inline-block',}),

html.Div([], style={'width':'100%'}),

    html.Div([
                dcc.Graph(id="fig")
    ],style={'width': '100%', 'display': 'inline-block', 'padding': '0 10',},),
]) 

@app.callback(
    Output("fig", "figure"), 
    [Input("radio-color_on", "value")])
def draw_choropleth(color_on):
    fig = px.choropleth_mapbox(gdf, 
                            geojson=gdf.geometry, 
                            locations=gdf.index, 
                            color=color_on,
                            color_continuous_scale="Viridis",
                            #range_color=(0, 12),
                            mapbox_style="carto-positron",
                            zoom=4, 
                            center = {"lat":gdf.centroid.y.mean(), "lon":gdf.centroid.x.mean()},
                            opacity=0.5,
                            )
    fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0},
                        height=700,
                        )
    
    return fig

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

Saving this code to a file "myapp.py" and running it in the terminal as python myapp.py starts the development served, firing up a web browser, navigating to the url that it uses (it writes it out in the terminal, usually 172.0.0.1:8050) gives you this:

I am running these versions, from the defaults anaconda channel.

• dash 1.19.0
• dash-core-components 1.3.1
• dash-html-components 1.0.1
• dash-renderer 1.1.2
• flask 1.1.2
• geopandas 0.8.1

PS. I actually used the data to ask a question about dash choropleth mapbox selection behavior (Selection behavior in plotly-dash Choropleth mapbox plot). Thanks!

Answer 4

I have similar problems. With the show method, it works fine, sometimes with the dash too (using only callbacks). The problem occurs due to the really old version of dash, installed via default channel of anaconda (only one version 1.4.1). After installation via conda-forge channel newer version (in my case 1.13.4) it works.

conda install -c conda-forge dash dash-core-components \
                 dash-html-components dash-renderer dash-table