Changing from scattermapbox to densitymapbox

Dash Python
1

Hello!

A huge thank you for developing Dash!

I was looking for a solution to this issue I encountered. There is a question almost similar to mine: Problem with Densitymapbox chart type but still haven’t found a resolution. My dropdown menu consists of scattermapbox and densitymapbox as i wanted to juggle between these. However, when changing from scattermapbox to densitymapbox, it results to the image below:

Untitled
Untitled.png1360×500 71 KB

I have attached here the code as well, I have already updated my Dash version but with no luck.

# Import required libraries
import dash
import copy
import pathlib
import dash
import numpy as np
import math
import datetime as dt
import pandas as pd
from dash.dependencies import Input, Output, State, ClientsideFunction
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import plotly.graph_objs as go


# get relative data folder
PATH = pathlib.Path(__file__).parent
DATA_PATH = PATH.joinpath("data").resolve()

external_scripts = [
‘https://cdn.plot.ly/plotly-1.39.1.min.js’
]

external_stylesheets = [
‘https://codepen.io/etpinard/pen/wxwPXJ’
]

app = dash.Dash(
    __name__, 
    external_scripts=external_scripts,
    external_stylesheets=external_stylesheets
)

server = app.server

# Load data
df = pd.read_excel("Clean_TR(6.8.19).xlsx")

group_name = df['gname'].unique()

mapbox_access_token = <your token>

app.layout = html.Div(
    [
        dcc.Store(id = 'aggregate_data'),
        dcc.Dropdown(
            id = 'map_plot',
            options = [{'label':i, "value":i} for i in ['Scatter', 'Density']],
            value = ['Scatter']
        ),
        dcc.Graph(id = 'mindanao-map')
    ]
)

@app.callback(
    Output('mindanao-map', 'figure'),
    [Input('map_plot', 'value')]
)
def update_map(map_plot):
    if map_plot == "Density":
        maptype = 'densitymapbox'
    else:
        maptype = 'scattermapbox'
        
    return {
        'data' : [{
                'lat':df['latitude'],
                'lon':df['longitude'],
                'marker':{
                    'color': df['freq'],
                    'size': 8,
                    'opacity': 0.6
                },
                'customdata': df['idno'],
                'type': maptype
        }],
        'layout': {
            'mapbox': {
                'accesstoken': mapbox_access_token,
                'style':"light",
                'center': dict(lon=123.30, lat= 7.50),
                'zoom':'6',
            },
            'hovermode': 'closest',
            'margin': {'l': 0, 'r': 0, 'b': 0, 't': 0}
        }
    }
    
if __name__ == "__main__":
    app.run_server(debug=True)

To pick my data, I have uploaded it in this link: