Background color in orthographic Map Projections

plotly.js
1

Hello,
I am using Map Projection and I wish to set a transparent background for the “world”.
I tried to set paper_bgcolor and plot_bgcolor in layout as following:

"layout": {
            "paper_bgcolor": 'rgba(0, 0, 0, 0)',
            "plot_bgcolor":"#000",
}

but it doesn’t work.

2

Have you tried (if this is wrapping CSS styles)

"paper_bgcolor": 'transparent'
3

Maybe helpful:

4

Hi,
I tried using following options:

"paper_bgcolor": 'transparent',
 "plot_bgcolor":"transparent",

but without success.
So, by inspecting html, I have the following style:

<rect style="pointer-events: all; fill: rgb(255, 255, 255); fill-opacity: 1;" x="177.50001292363066" y="25.5" width="528.9999741527386" height="529"></rect>

where fill: rgb(255, 255, 255) option is set automatically.

5

I am using JS plotly.
Based on this disccussion, I tried to set bgcolor as following:

        "layout": {
            "geo": {
                "projection": {
                    "type": "orthographic"
                }
            },
            "title": "",
            "font": { 'color': '#FFF' },
            "paper_bgcolor": 'transparent',
            "plot_bgcolor":"transparent",
            "bgcolor":'transparent'
        },

but with no changes

6

rgba(0,0,0,0)

7

I tied using

"paper_bgcolor": 'rgba(0,0,0,0)',
"plot_bgcolor":"rgba(0,0,0,0)",
"bgcolor":'rgba(0,0,0,0)

without success

8

I tried using

 "paper_bgcolor": 'rgba(0,0,0,0)',
"plot_bgcolor":"rgba(0,0,0,0)",
"bgcolor":'rgba(0,0,0,0)

withous success

9

I tried using

            "paper_bgcolor": 'rgba(0,0,0,0)',
            "plot_bgcolor":"rgba(0,0,0,0)",
            "bgcolor":'rgba(0,0,0,0)

without success

10

Maybe you should put the rgba(0,0,0,0) on all map elements

import plotly.graph_objects as go

fig = go.Figure(go.Scattergeo())
fig.update_geos(
    resolution=50,
    showcoastlines=True, coastlinecolor="rgba(0,0,0,0)",
    showland=True, landcolor="rgba(0,0,0,0)",
    showocean=True, oceancolor="rgba(0,0,0,0)",
    showlakes=True, lakecolor="rgba(0,0,0,0)",
    showrivers=True, rivercolor="rgba(0,0,0,0)"
)
fig.update_layout(height=300, margin={"r":0,"t":0,"l":0,"b":0})
fig.show()
11

Hi,
I am using JS plotly, not python.
Is there the equivalent way for javascript?
Thanks.

12
13

I tried to use following options, but showland, showocean, rivercolor, etc. seems are not read.

        "layout": {
            "geo": {
                "projection": {
                    "type": "orthographic"
                },
                "showland": true,
                "showcoastlines": true,
                "showocean": true,
                "showlakes": true,
                "showrivers": true,
                "coastlinecolor":"rgba(0,0,0,0)",
                "landcolor":"rgba(0,0,0,0)",
                "oceancolor":"rgba(0,0,0,0)",
                "lakecolor":"rgba(0,0,0,0)",
                "rivercolor":"rgba(0,0,0,0)",
                "visible": true,
                "countrycolor": "#000" /* added for test */
            },
            "autosize": true,
            "showlegend": false,
            "margin": {
                "r": 0,
                "l": 0,
                "t": 0,
                "b": 0
            },
            "font": { 'color': '#FFF' },
            "paper_bgcolor": 'rgba(0,0,0,0)',
            "plot_bgcolor":"rgba(0,0,0,0)",
            "bgcolor":'rgba(0,0,0,0)'
        },

I also tried to add countrycolor for testing purpose, but the color is not changed.

14

JavaScript Figure Reference: layout.geo

  • geo
    Parent: layout
    Type: object containing one or more of the keys listed below.
    • bgcolor
      Parent: layout.geo
      Type: color
      Default: "#fff" Set the background color of the map
2 Likes