Sourcetype 'image' for mapbox_layers is not working

[meteoDaniel]

I want to overlay an image to mapbox, but it will not displayed.

My code:

import plotly.graph_objects as go

fig = go.Figure(go.Scattermapbox(
    lat=[],
    lon=[],
    mode='markers',
    marker=go.scattermapbox.Marker(
        size=5,
        symbol=['marker']
    ),
    text=['None'],
))

fig.update_layout(
    mapbox=go.layout.Mapbox(
        bearing=0,
        center=go.layout.mapbox.Center(
        lat=50,
        lon=10
    ),
        pitch=0,
    zoom=5),
margin = {"r": 0, "t": 0, "l": 0, "b": 0},
mapbox_style = "open-street-map",
mapbox_layers = [
    {
        "sourcetype": "image",
        "below": '',
        "source": [
            f"https://176.9.117.210/radar/data/2020/01/10/16/55/radar_de.png"

        ],
        "coordinates": [[1.0700,  55.7750629], [17.095451751, 55.7750629], [17.095451751,  45.510], [1.0700, 45.510]],

    },
    ])
fig.show()

Here is the console output from my browser:

plotly version: '4.4.1'

[empet]

I saw your remark on mapbox_layers posted on Plotly forum, too.
mapbox_layers is working very well with sourcetype='image', as you can check it running this piece of code:

fig = go.Figure(go.Scattermapbox(), layout=dict(width=600, height=450))
mapboxt = open(".mapbox_token").read().rstrip() 
mapbox = dict(zoom= 4.5, 
              accesstoken=mapboxt,
              style='light', 
              center=dict(
                        lat=42, 
                        lon=-74.5), 
              layers=[
                  dict(
                  below ='',    
                  source = "https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif", 
                  sourcetype= "image", 
                  coordinates =  [
                          [-80.425, 46.437], [-71.516, 46.437], [-71.516, 37.936], [-80.425, 37.93]
                                 ])
                     ])             
fig.update_layout(mapbox=mapbox) 

Trying to download directly the image from your source: https://176.9.117.210/radar/data/2020/01/10/16/55/radar_de.png I'm getting
the following error net::err_cert_authority_invalid error on Google Chrome (see also the attached image).

It is quite likely that the error is due to expired SSL certificate installed on the web server where the website is hosted on. I suspect that this issue blocks mapbox uploading the image from the given source.

[meteoDaniel]

@empet you can also access the image via http. This is not the problem. In both ways it is not working.

[empet]

I don't think it's a Plotly issue, as long as plotly mapbox works with other images. You should search on your system to identify what is blocking the image to be displayed.

[rsinger104]

I'm getting this same error. However, it looks like it may be a timeout issue with the Mapbox promise. The image in my case is 180MB and is taking about 15 seconds to download. Unfortunately it seems like there's an issue with a timeout in the react code or the image is too large to be properly handled by Mapbox.

I used Chrome console to debug the request and validate that there were no errors.

Unfortunately I cannot post the URL to the image, nor the exact coordinates, here. But I have manually validated all for corners of the array are correct.

fig = px.scatter_mapbox(pd_gps, lat="latitude", lon="longitude", color_discrete_sequence=["fuchsia"], zoom=15, height=720)
fig.update_layout(
    mapbox_style="white-bg",
    mapbox_layers=[
        {
            "below": 'traces',
            "sourcetype": "raster",
            "source": [
                "https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}"
            ]
        },
        {
            "sourcetype": "image",
            "below": "",
            "source": "https://<valid fqdn>/images/file_OrthoJPEG.jpg",
            "minzoom": 14,
            "maxzoom": 24,
            "coordinates": [
              [pd_gps.longitude[0], pd_gps.latitude[0]],
              [pd_gps.longitude[1], pd_gps.latitude[1]],
              [pd_gps.longitude[2], pd_gps.latitude[2]],
              [pd_gps.longitude[3], pd_gps.latitude[3]]
            ]
        }
      ])
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
fig.show()

This is the error I receive in Chrome. But again, I've validated that the HTTPS request is indeed successful and the image file is transmitted to the browser.

Uncaught (in promise) Error: Mapbox error.
at a.r (plotly-latest.min.js:61)
   at a.Mt.fire (plotly-latest.min.js:35)
   at r.Mt.fire (plotly-latest.min.js:35)
   at r.Mt.fire (plotly-latest.min.js:35)
   at r.Mt.fire (plotly-latest.min.js:35)
   at plotly-latest.min.js:35
   at plotly-latest.min.js:35```