Map on dash dashboard

📊 Plotly Python
1

Hi,
I want to show a map on my dash dashboard. I want to add a trace of polygons on it.

However, I need the map to not rely on internet connection. How can I change the configuration so the map is a geojson file of the world’s map I have locally on my computer? I don’t want it to go to somewhere on the internet looking for it.

Also, can I change the configuration of the mapbox to go to another server?

2

Hey Anat,

You need a server to serve map tiles locally to accomplish your objective. People tend to prefer Terracotta for a tile server.

This example which uses Terracotta with Dash can be a initial guide for your project.

Unfortunately, I am not sure about your second question.

Good luck!

3

This example is using mapbox which requires an API key but the same will work with px.choropleth or other px maps.

1. You can use geopandas

fig = px.choropleth_mapbox(gdf, geojson=gdf.geometry, locations=gdf.index)

2. Open the file

import json

with open("geojson_file.geojson", "r") as file:
    geojson = json.load(file)

fig = px.choropleth_mapbox(
    df, 
    geojson=geojson, 
    locations = 'ISO_2',
    featureidkey="properties.iso_2")

if using mapbox provide style and API key

 fig.update_layout( 
    mapbox_style=map_style,
    mapbox_accesstoken=api_token)

Locations column (ISO_2) should match the feature in geojson.

Consider using folium maps or leafmap and then put the output in an iframe, if exporting as PNG is not important to you.

If you want to make a choropleth map I recommend using mapclassify for creating categories for your data.

Also when it comes to editing geojson files I use geojson.io (sometimes you will need to use geopandas to separate multi polygons) and mapshaper.org for reducing the file size.

If using plotly maps and you find that nothing is rendered it is sometimes because of the geojson file, an easy solution for this is uploading the file to mapshaper. When exporting the file from mapshaper, select ‘console’ and type in $ -o gj2008.

1 Like
4

You can do this with this custom component: GitHub - ploomber/dash-react-simple-maps: React Simple Map for Dash

The geoURL argument also allows passing a .geo.json file.

geoUrl = json.loads(Path("world-population.geo.json").read_text())