Cannot render Plotly figure involving tile maps on user interface

[ma-luca-fantin]

Hello everyone, I am working on a chatbot built in Python with Chainlit and trying to render (inline) a plotly.graph_objects.Figure.Scattermap object as part of my chatbot's response. This figure is built from a sequence of points, specified through their coordinates. After many attempts, I suspect Chainlit cannot render plotly figures involving tile maps, and I could not find anything related to this possibility online. Here is the code generating the figure:

import plotly.graph_objects as go

# my_df is the pandas DataFrame containing the coordinates to be used, made of columns 'lat' and 'lon'
fig = go.Figure(
    data=[go.Scattermap(y=my_df["lat"], x=my_df["lon"])],
    layout_title_text="An example figure"
)

When I execute this code on its own, outside of the chatbot, it works (this is what I see after zooming in on the points):

But then, when I generate a Figure to be appended to the chatbot's response:

import chainlit as cl

"""
MapCreatorCallback is a class handling the figure's creation,
on_tool_end wraps the above code and saves the figure inside of the object,
get_results returns the dictionary {"plot": <generated figure>}
"""
msg.content = "Hard coded test message"
tmp = MapCreatorCallback()
tmp.on_tool_end(output="",name="")
attachments = tmp.get_results()

if attachments.get("plot"):
    msg.content += " with plot attached"
    msg.elements.append(
        cl.Plotly(name="chart", figure=attachments["plot"], display="inline")
    )

I get this "blank" figure: the layout_title_text is shown, but the figure itself is not rendered: I suspect Chainlit cannot render figures involving tile maps because I see a correct figure when replacing the Scattermap object with a Scatter object (and replacing the parameters lat, lon with y, x as needed):

Software/package versions:

• Python: 3.11.5
• chainlit: 1.3.2
• plotly: 6.0.1
• pandas: 2.2.2

[cesi08]

@dokterbob @dosubot any suggestion?

[dosubot[bot]]

Hello there, @ma-luca-fantin! I'm here to help you out with any bugs, questions, or contributions you might have. Let's tackle this issue together!

Chainlit does support rendering Plotly figures, including those with tile maps like Scattermapbox ^[1]. However, there might be specific issues related to how the figure is being created or passed to Chainlit.

Here are a few suggestions to troubleshoot and potentially resolve the issue:

1. Check the Plotly Object: Ensure that the Scattermap object is correctly configured. For map-based plots, you might need to use Scattermapbox instead of Scattermap, as Scattermapbox is specifically designed for mapbox maps in Plotly.

2. Mapbox Token: If you are using Scattermapbox, ensure you have a valid Mapbox access token set. Without this, the map tiles may not render.

3. Verify Data: Double-check that the data being passed to the Scattermap or Scattermapbox is correct and that the DataFrame my_df contains valid latitude and longitude values.

4. Debugging: Try rendering the figure outside of Chainlit to ensure it works as expected. If it does, the issue might be with how the figure is integrated into Chainlit.

5. Chainlit Version: Ensure you are using the latest version of Chainlit, as there might have been updates or bug fixes related to rendering Plotly figures.

If these steps do not resolve the issue, consider simplifying the figure to the most basic form that still reproduces the problem and testing it in isolation. This can help identify if there is a specific configuration or data issue.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[ma-luca-fantin]

@dokterbob @dosu

The correct Plotly object is displayed when using Scattermapbox instead of Scattermap: (another dataset has been used) While updating to the latest version of Chainlit (2.4.201) and keeping Scattermap does not solve the issue: Suggestions 2,3,4 were already checked before creating the issue: the first image is the map created and plotted outside of the Chainlit application, using the same datasets.

I highly suggest implementing the support for Scattermap Figures and other Figures based on MapLibre, since it is free and Plotly has deprecated Mapbox figures (https://plotly.com/python/tile-scatter-maps/#mapbox-maps).

[dosubot[bot]]

It seems that Scattermap figures are not currently supported in Chainlit, as you've discovered. While Scattermapbox works, Scattermap does not render correctly within Chainlit. This might be due to the internal handling of Plotly figures in Chainlit, which may not fully support all types of map-based visualizations, especially those relying on MapLibre.

Your suggestion to implement support for Scattermap and other MapLibre-based figures is valid, especially considering Plotly's deprecation of Mapbox figures. This would be a valuable feature for users who rely on free mapping solutions.

For now, using Scattermapbox with a valid Mapbox token seems to be the workaround. If you have further suggestions or need more assistance, feel free to ask!

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[github-actions[bot]]

This issue is stale because it has been open for 14 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale.