Mapbox map loads quickly in older version of Dash but not on latest version

@venki wrote:

Hi Dash Community, I am trying to build an app with dash. When I use latest version of dash(1.4.1) and dash core components(1.3.1), the mapbox map is taking longer time (more than 5 mins) to load. When I use older version of dash(0.28.5) and dash core components(0.28.0), it is taking 5 to 7 seconds. But I can’t add loaders with these older versions as loader component is introduced in latest versions.

Please help me to load mapbox map quickly with latest versions or is there any way to add loader in dash app with older versions? I searched on web but couldn’t find any solution. My code is below

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import pandas as pd
import numpy as np
import re
import json
from itertools import chain
import plotly.express as px
import plotly.graph_objects as go

app = dash.Dash(__name__)

server = app.server

with open('ed.geojson') as geofile:
    j_file = json.load(geofile)

df = pd.read_excel('loc_crs.xlsx', 'summary')
df2 = pd.read_excel('loc_crs.xlsx', 'combined')

mapbox_access_token = open(".mapbox_token").read()

app.layout = html.Div(children=[

    html.Div([

        html.Iframe(id='map',
                    srcDoc=open(
                        'F:/e_map/python/e_dash_board/choropleth_map.html', 'r').read(),
                    style={'border': 'none', 'width': '100%', 'height': '100%'}),

        
    ], style={'height':500}),
    
    html.Div(children=[
        dcc.Graph(id='marker_plot')

    ], style={'width': '70%', 'float': 'left', 'border-style':'solid'}),
    html.Div([
        html.Div([
            html.Label('Service provider:'),
            dcc.Dropdown(
                id='service_provider',
                options=[{'label': 'All', 'value': 'All'}]+[{'label': i.title(), 'value': i}
                                                            for i in df2['Supplier_Name'].unique()],
                value='All'
            )
        ], style={'padding':'10px'}),

        html.Div([
            html.Label('Postcode District:'),
            
            dcc.Dropdown(
                id='district',
                options=[{'label': i, 'value': i}
                            for i in df['area_code'].values],
                value='B'
            )
        ], style={'padding':'10px'}),
        html.Div([
            html.Label('Zoom level:'),
            html.P(
                dcc.Slider(
                    id='zoom',
                    min=3,
                    max=15,
                    step=1,
                    value=5
                ))
        ], style={'padding':'10px'})
    ],style={'width':'25%','float':'right'})
    
])

@app.callback(
    Output('marker_plot', 'figure'),
    [Input('service_provider', 'value'),
        Input('district', 'value'),
        Input('zoom', 'value')])
def update_graph(ser_provider_value, district_value, zoom_value):

    latitude = df[df['area_code'] == district_value]['Latitude'][0]

    longitude = df[df['area_code'] == district_value]['Longitude'][0]
    print(longitude)
    print(zoom_value)
    if ser_provider_value == 'All':        
        traces=[]
        for ser_type in df2['Service'].unique():
            df2_st_data = df2[df2['Service'] == ser_type]
            traces.append(go.Scattermapbox(
                lat=df2_st_data['Lat'],
                lon=df2_st_data['Lng'],
                mode='markers',
                name=ser_type,                
                marker=go.scattermapbox.Marker(
                    size=13
                ),
                text=df2_st_data['Supplier_Name'],
            ))
        layout = dict(
            autosize=True,
            height=900,
            #width='100%',
            hovermode='closest',
            mapbox=go.layout.Mapbox(
                accesstoken=mapbox_access_token,
                style='basic',
                bearing=0,
                layers=[dict(
                    sourcetype='geojson',
                    source=j_file,
                    type='fill',
                    color='#F9E418',
                    opacity=1,
                    below="water"
                )],
                center=go.layout.mapbox.Center(
                    lat=latitude,
                    lon=longitude
                ),
                pitch=0,
                zoom=zoom_value
            ),
        )
    else:
        ser_provider_data = df2[df2['Supplier_Name'] == ser_provider_value]
        traces = []
        if len(ser_provider_data['Service'].unique())>1:
            for ser_type in ser_provider_data['Service'].unique():
                df2_st_data = ser_provider_data[ser_provider_data['Service'] == ser_type]
                traces.append(go.Scattermapbox(
                    lat=df2_st_data['Lat'],
                    lon=df2_st_data['Lng'],
                    mode='markers',
                    name=ser_type,
                    marker=go.scattermapbox.Marker(
                        size=13
                    ),
                    text=df2_st_data['Supplier_Name'],
                ))
                layout = dict(
                    autosize=True,
                    height=900,
                    hovermode='closest',
                    mapbox=go.layout.Mapbox(
                        accesstoken=mapbox_access_token,
                        style='basic',
                        bearing=0,
                        layers=[dict(
                            sourcetype='geojson',
                            source=j_file,
                            type='fill',
                            color='#F9E418',
                            opacity=1,
                            below="water"
                        )],
                        center=go.layout.mapbox.Center(
                            lat=latitude,
                            lon=longitude
                        ),
                        pitch=0,
                        zoom=zoom_value
                    ),
                )

        else:
            traces.append(go.Scattermapbox(
                lat=ser_provider_data['Lat'],
                lon=ser_provider_data['Lng'],
                mode='markers',
                marker=go.scattermapbox.Marker(
                    size=13
                ),
                text=ser_provider_data['Supplier_Name'],
            ))
            layout = dict(
                autosize=True,
                height=900,
                hovermode='closest',
                mapbox=go.layout.Mapbox(
                    accesstoken=mapbox_access_token,
                    style='basic',
                    bearing=0,
                    layers=[dict(
                        sourcetype='geojson',
                        source=j_file,
                        type='fill',
                        color='#F9E418',
                        opacity=1,
                        below="water"
                    )],
                    center=go.layout.mapbox.Center(
                        lat=latitude,
                        lon=longitude
                    ),
                    pitch=0,
                    zoom=zoom_value
                ),
            )
        
    
    return {'data':traces, 'layout':layout}

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

This code is workig fine but it has performance issues.

Posts: 2

Participants: 2

Read full topic