Tile Layer place holder not working right.

[meteoDaniel]

I am using a tile layer and plotly scattermapbox is not able to source the z, x, and y images. I hope anyone can help me.

  tile_source = "https://api.meteointelligence.com/radar/data/2020/03/12/16/45/{z}/{x}/{y}.png"
    fig.update_layout(
        mapbox=go.layout.Mapbox(
            bearing=0,
            center=go.layout.mapbox.Center(
            lat=lat,
            lon=lon
        ),
            pitch=0,
        zoom=zoom),
    margin = {"r": 0, "t": 0, "l": 0, "b": 0},
    mapbox_style = "open-street-map",
    mapbox_layers = [
        {
            "below": 'traces',
            "sourcetype": "raster",
            "source": [
                tile_source
            ]
        },
    ])

[nicolaskruchten]

Can you try merging the mapbox_style and mapbox_layers into the mapbox=dict( ... ) ? I wonder if maybe the "magic underscores" and dict are stepping on each other's toes here...

[meteoDaniel]

This is how it looks now:

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

    tile_source = "https://api.meteointelligence.com/radar/data/2020/03/12/16/45/{z}/{x}/{y}.png"
    fig.update_layout(
        mapbox=go.layout.Mapbox(
            bearing=0,
            center=go.layout.mapbox.Center(
            lat=lat,
            lon=lon,

        ),
            style="open-street-map",
            layers=[
        {
            "sourcetype": "raster",
            "source": [
                tile_source
            ]
        },
    ],
            pitch=0,
        zoom=zoom),
    margin = {"r": 0, "t": 0, "l": 0, "b": 0})

If I am using a leaflet app:

leaflet_radar.zip

Everything works fine. Leaflet is using other x/y image coordinates.

[empet]

I tested your code with another raster file and it works:

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

tile_source = 'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg' #"https://api.meteointelligence.com/radar/data/2020/03/12/16/45/{z}/{x}/{y}.png"
fig.update_layout(
     mapbox=go.layout.Mapbox(
               bearing=0,
               center=dict(
                        lat= 51.1657, 
                        lon=12.4515),
               style="open-street-map",
               layers=[ {
                              "sourcetype": "raster",
                              "source": [ tile_source],
                              "minzoom": 0, 
                               "maxzoom": 22 }],
               pitch=0,
               zoom=5.5),
         margin = {"r": 0, "t": 0, "l": 0, "b": 0})

As I can remember you had a similar issue a while ago, and then I also illustrated that your code worked with another image and supposed that your server settings caused that issue. I think that both issues have the same origin.

[meteoDaniel]

@empet and @nicolaskruchten I found out that leaflet is working because the TMS attribute is set to True which means that the y coordinates are inverted. I am using gdal2tiles. Is there a way to get over this problem in plotly?
Maybe you can recommend another software for creating tile layers?

[nicolaskruchten]

Does swapping the positions of {x} and {y} in the URL help?

[meteoDaniel]

@nicolaskruchten no the y coordinate is not in the right orientation.
https://gist.github.com/tmcw/4954720

Seems that this is a feature request?

[nicolaskruchten]

OK, so what's going under the hood is that Plotly.py uses Plotly.js for rendering, and Plotly.js uses Mapbox GL for rendering tile maps. We basically pass along data from the layers object to Mapbox GL. Mapbox GL expects a "source" https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/ to be in the TileJSON format defined here https://github.com/mapbox/tilejson-spec/tree/master/2.2.0 and TileJSON has a scheme attribute which defaults to xyz whereas you need tms.

It doesn't seem like any of our attributes at the moment map down to the scheme attribute that Mapbox GL accepts, so yes, this will need to be a Plotly.js feature request.

[meteoDaniel]

@nicolaskruchten I will close this feed and create a feature request in plotly.js. Thanks for supporting me.