Slow image load and refresh rate in Dash

Dash Python
1

I’m looking for a way to speed up the load / refresh rate for a Dash app serving static map images. They are false color maps at 3000 x 2600, and reducing the resolution would make the app pretty pointless… I want the user to be able to zoom in and see the maximum amount of detail possible. Both with the original tiff files (44 and 23 MB) and png files (4 and 11 MB) the app takes minutes to load–I literally counted to 122 while waiting for it to load just now–and the crosshairs often lag when I hover over the map.

Surely this isn’t the case for everyone, so I was wondering what the next thing was to check or try in order to improve performance.

I just removed my whole anaconda installation this morning and installed miniconda and then dash. (I had to go to a source called ‘zeus1942’ in order to get up to date versions of the dash packages. Before I did the removal and reinstall, I had very stale versions of the dash packages and the images wouldn’t load at all.)

Package versions:

plotly= 4.6.0
dash= 1.9.1
dash_html_components= 1.0.2
dash_core_components= 1.8.1

Relevant app code:

import dash
import plotly
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from skimage import io

# figure loading
tc = io.imread('tcdisp.png')
pca = io.imread('pcdisp.png')
tcfig = px.imshow(tc)
pcafig = px.imshow(pca)

#...instantiate app...
    # left side figure
    html.Div(children=[
        dcc.Graph(figure=tcfig,style={'width':'95%','display':'inline-block'})
        ],
        style={'width':'49%','display':'inline-block'}
    ),
    # right side figure
    html.Div([
        dcc.Graph(figure=pcafig,style={'width':'95%','display':'inline-block'})
        ],
        style={'width':'49%','display':'inline-block'}
    ),
])

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

I have previously encountered a similar problems. The best solution for my case turned out to be setting up a tile server to serve the images. I used

You can then view the images with a map client, which provides pan, zoom and so on. I used Dash Leaflet,

https://dash-leaflet.herokuapp.com/

But you could use any map component that supports custom tile providers.

3

Thanks! That sounds a wee bit intimidating. I will wade into the documentation and see what I can make of it. I was hoping to be able to use Leaflet or something similar with the expectation that instead of pixel coordinates, I would be able to get latitude and longitude from my geotiff, so if this ends up enabling that as well that would be great.

4

If you already have a geotiff, Dash Leaflet can render it directly as an image on the map. This works well for smaller images, but for very large images tiling is necessary to achieve reasonable performance.