Scatter_map not rendering in Django with plotly 5.24.1

Dash Python
,
1

Hello,

I’m trying to use the new version of Mapbox using maplibre with plotly 5.24.1.

It’s working well with Dash, but then when I switch to django_plotly_dash, it does not render properly.

Here are the versions used:
Django==4.0.0
django_plotly_dash==2.4.3
plotly==5.24.1

Here is my basic code:

import pandas as pd
import plotly.express as px
import dash
from dash import Dash, html, dcc, _dash_renderer
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc

from django_plotly_dash import DjangoDash


_dash_renderer._set_react_version('18.2.0')

external_stylesheets = [dbc.themes.CERULEAN]


app = DjangoDash("lgresults",
                external_stylesheets=external_stylesheets,
                # external_scripts = ["https://cdn.plot.ly/plotly-locale-fr-latest.js", "https://cdn.plot.ly/plotly-locale-en-latest.js"],
                )


data = pd.DataFrame({
    "City": ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"],
    "Latitude": [40.7128, 34.0522, 41.8781, 29.7604, 33.4484],
    "Longitude": [-74.0060, -118.2437, -87.6298, -95.3698, -112.0740],
    "Value": [8419600, 3980400, 2716000, 2328000, 1690000],  # Example metric (e.g., population)
})


fig_map1 = px.scatter_mapbox(
    data,
    lat='Latitude',
    lon='Longitude',
    color='Value',
    mapbox_style='open-street-map',
)

fig_map2 = px.scatter_map(
    data,
    lat='Latitude',
    lon='Longitude',
    color='Value',
    # map_style='open-street-map',
)

# Layout de l'application
def serve_layout():
    layout = dmc.MantineProvider(
        id="mantine-provider",
        children=[
            dmc.Title("Map1"),
            dcc.Graph(figure=fig_map1),
            dmc.Title("Map2"),
            dcc.Graph(figure=fig_map2),
        ],
    )

    return layout

app.layout = serve_layout

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

Only the scatter_mapbox is rendering, not the scatter_map. It works fine when I try this in a Jupyter notebook or a Dash. Could you help me?

Screenshot 2024-11-21 at 09.47.08
Screenshot 2024-11-21 at 09.47.081920×1093 84.4 KB

2

Are you getting any errors either from Django (eg look at sever logs, or the output when running a command line development instance), or in the browser (look in the developer tools/console, particularly the console and network tabs)?

Have you added dash_mantine_components to PLOTLY_COMPONENTS in your settings?

3

I found out the problem was the plotly.js version being used. As I was using Dash < 5.13, the plotly.js is not automatically updated. I managed to solve it by forcing a plotly.js version with the following line:
external_scripts = [“https://cdn.plot.ly/plotly-2.35.2.min.js”]