Plotly 6 map attribution box positioning

📊 Plotly Python
1

Since the upgrade to plotly 6.0, the attribution box in map plots appears below the map (see e.g., Density heatmap in Python) instead of hovering above the map as in previous releases.

This is not ideal, if the map is to be included in some wrapping interface. I put together some CSS to place the attribution box in the lower right corner of the map again and remove the small spacing below the map. I hope this saves someone the trouble I went through :blush:.

/* The following styles ensure the attribution tag floats above the map and should be removed if the issue is fixed in a future plotly release. */
.maplibregl-ctrl-bottom-right {
  bottom: 10px;
  right: 10px;
}

.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right {
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.maplibregl-map {
  font: 12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
}

.maplibregl-ctrl-attrib-inner {
  background-color: gray;
  border-radius: 20px;
}

/*This is necessary to remove spacing below the canvas.*/
.maplibregl-canvas {
  display: block;
}

.maplibregl-ctrl-attrib-button {
  visibility: hidden;
}
2 Likes