Plotly / Dash map is taking long time to build

Dash Python
1

Plotly v ‘5.22.0’, Dash v ‘2.8.1’, Mac OS.

As the title suggests, I have a map that takes long time to compile.

The data file is stored as parquet file and is about 50 Mb (geojson data is about 150Mb). I read the parquet file as geopandas data frame, then convert it to geojson object. The purpose of having the same data in two different formats is to use both in Plotly express choropleth_mapbox. The reading of the data takes about 7 seconds but building the map takes more than 30 seconds. So, together they take about 40 seconds. I have this map in my Dash app, where a user can check the checkbox and show this map layer. Since it takes 40 seconds to load the layer (i.e., to compile the map layer) this is bad for user experience.

Now, my main question is how can I make this work faster?

Less important question, how can I hide the color scale (on the right hand side) that comes with the choropleth map?

Below is the code snippet for the map layer that takes 40 seconds to compile:

# Polygon layer, urban areas borders:
def polygon_layer():
    # Read data
    # Construct the path to the data file
    parquet_path = os.path.join(root_dir, 'data', 'tatorter_1980_2020.parquet')

    # Create a GeoDataFrame from the list of dictionaries
    gdf = gpd.read_parquet(parquet_path)

    # Convert to geojson
    geojson_data = gdf.to_json()

    # Parse the GeoJSON string
    geojson_obj = json.loads(geojson_data)

    # Create the polygon layer
    layer_data = px.choropleth_mapbox(gdf, geojson=geojson_obj, featureidkey='properties.TATORTSKOD',
                           locations='TATORTSKOD', color='BEF',
                           
                           color_continuous_scale="Viridis",
                           mapbox_style="open-street-map",
                           #zoom=3, center = {"lat": 55, "lon": 12},
                           opacity=0.5,
                           labels={'BEF':'Population'},
                           hover_data={'TATORT': True, 'BEF': True, 'TATORTSKOD': False}
                          )
    layer_data.update_layout(coloraxis_showscale=False)
    return layer_data.data[0]

GitHub link of the project: https://github.com/parviz11/map-app/blob/main/utils/graphs.py

One row of the geojson data (WGS 84 coordinates):

{'id': '0',
 'type': 'Feature',
 'properties': {'OBJECTID': 1,
  'UUID': 'B4149D75-D853-449A-BED5-AB865EF36919',
  'TATORTSKOD': '1233TB107',
  'TATORT': 'Skanör med Falsterbo',
  'KOMMUN': '1233',
  'KOMMUNNAMN': 'Vellinge',
  'LAN': '12',
  'LANNAMN': 'Skåne',
  'AREA_HA': 589,
  'BEF': 7452,
  'AR': '2020',
  'X_koord': 363412.182171204,
  'Y_koord': 6141644.79596346,
  'ValidFrom': '2020-12-31',
  'ValidTo': '2023-12-31'},
 'geometry': {'type': 'Polygon',
  'coordinates': [[[12.84157287767734, 55.41471895013031],
    [12.841645999091725, 55.414723111592195],
    [12.841695163194993, 55.414743838511775],
    [12.841774243119408, 55.41477012763944],
    [12.84178540508783, 55.41482819614138],
    [12.841761448729219, 55.41483990541776],
    [12.841969183943458, 55.41495580756859],
...
    [12.86260375232936, 55.39495187675406],
    [12.862570666221757, 55.394918321108804],
    [12.862533200213793, 55.39488630222952],
    [12.862491216694972, 55.39485591208061],
    ...]]}}
Output is truncated. View as a scrollable element or open in a text editor. Adjust cell output settings...
2

I’m struggling with similar stuff. Did you manage to solve this?

3

Assuming the data is static, you could do the conversion as a preprocessing step and host the geojson file as a (static) asset. I guess that would bring you < 30s.

If you need it faster, you could strip unused data properties and/or simplify the polygons to reduce the amount of data.

If that is not a possibility and/or not enough, I would suggest to slice the geojson into tiles and serve it using a tileserver. That requires a bit more work though.

1 Like
4

Would that mean displaying it as a raster layer using TileLayer?

I can see there’s an open issue (Add vectorgrid support · Issue #84 · emilhe/dash-leaflet · GitHub) to add vectorgrid support to Dash leaflet, but not sure if any alternative exists

5

Both options are possible. I guess the ideal solution would be vector tiles. That approach would require some work on dash-leaflet though.

6

Thank you for your reply. Yes, borders polygons do not change and they are static. This gave me another idea: I could build borders layer and store as html and then add this html as a layer to the map. Will try this when I continue working on this project again.

7

Hi. I think Emil’s answer below might be useful.