Problems for Insert a Map of Colombia Country in a Dashboard with mapbox

Dash Python
1

Hello Dash community

I am trying to build a dashboard with mapbox but i am having problem with the colombian map. I tested with US map and work well. But the colombian map works bad.

The file Libro1.csv contain the follow:

NOMBRE_DPT,unemp
ANTIOQUIA,5.3
ATLANTICO,5.4
BOLIVAR,8.6

This is my code:

import pandas as pd
import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import json
from urllib.request import urlopen


token = 'pk.eyJ1IjoibmV3dXNlcmZvcmV2ZXIiLCJhIjoiY2o2M3d1dTZiMGZobzMzbnp2Z2NiN3lmdyJ9.cQFKe3F3ovbfxTsM9E0ZSQ'

with urlopen('https://gist.githubusercontent.com/john-guerra/43c7656821069d00dcbc/raw/be6a6e239cd5b5b803c6e7c2ec405b793a9064dd/Colombia.geo.json') as response:
    counties = json.load(response)

df = pd.read_csv("Libro1.csv")

app = dash.Dash(__name__, external_stylesheets=['https://codepen.io/uditagarwal/pen/oNvwKNP.css'])

app.layout = html.Div(children=[
    html.Div(
        children=[html.H2(children="Colombia Dashboard", className='h2-title'),],
        className='study-browser-banner row'
    ),
    html.Div(
        className='row app-body', 
        children=[
                    
        
        dcc.Graph(
            id='map-plot3',
            figure={ 
                'data': [go.Choroplethmapbox(
                    geojson=counties,
                    locations=df.NOMBRE_DPT,
                    z=df.unemp,
                    colorscale='Viridis',
                    colorbar_title="Thousands USD"
                )],
                'layout': go.Layout(
                        mapbox_style="carto-positron",
                        mapbox_accesstoken=token,
                        mapbox_zoom=3,
                        mapbox_center = {"lat": 4.570868, "lon": -74.2973328}
                    )
            }
        )
])])


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

Hi @salascorp, welcome to the forum! It does not work because go.Choroplethmapbox looks for an id field in the geojson file for the correspondence between locations and geojson file, and your geojson entries do not have these id entries. You can add them as below. I made the figure as a plotly figure (outside of a Dash app) for faster diagnosis, but you can pass this figure directly to the figure attribute of dcc.Graph as in your example.

import plotly.graph_objects as go
import json
from urllib.request import urlopen
with urlopen('https://gist.githubusercontent.com/john-guerra/43c7656821069d00dcbc/raw/be6a6e239cd5b5b803c6e7c2ec405b793a9064dd/Colombia.geo.json') as response:
    counties = json.load(response)
locs = ['ANTIOQUIA', 'ATLANTICO', 'BOLIVAR']
for loc in counties['features']:
    loc['id'] = loc['properties']['NOMBRE_DPT']
fig = go.Figure(go.Choroplethmapbox(
                    geojson=counties,
                    locations=locs,
                    z=[1, 2, 3],
                    colorscale='Viridis',
                    colorbar_title="Thousands USD"))
fig.update_layout(mapbox_style="carto-positron",
                        mapbox_zoom=3,
                        mapbox_center = {"lat": 4.570868, "lon": -74.2973328})
fig.show()

image
image764×414 72.1 KB

1 Like
3

Excelent… I tested it and works well. I had to days trying to solve this problem.
Thank you.

4

Great, glad it worked out. I found the solution by reading the docstring of Chorplethmapbox which mentions that locations look for the id field. Users often look for solutions in documentation tutorials, but there is also a lot of information in the docstrings.

1 Like