Choropleth inset map with plotly.js : can we anchor a geo layout to another?

plotly.js
1

Hello,
I am trying to create inset map using Choropleth.
In the same way we are using the “anchor” attribute to adjust one layout on the main map (example here), I am trying to adjust one geo layer on the over.
For now, I could roughly adjust the geo2 layer using the domain attribute to create the overlap, but positionning it seems to refer to the whole plotly, not the geo layer. As a consequence, the geo2 position is depending on the div dimensions as shown on theses captures :

plotly_inset_size1
plotly_inset_size1512×524 129 KB

plotly_inset_size2
plotly_inset_size2782×520 144 KB

Do you have an idea to anchor geo2 to geo1, independantly from the plotly container dimensions ?

2

Hi @julienv ! Welcome on the forum! :tada:

Can you share your code to see how you built the layers for this example?

3

Sure. The whole code is a bit complex, but I have created a codepen sample here
Please try to resize your browser window. You may see inset map position changing.
I would like to keep fixed position regarding main map

4

I find a workaround.
The idea is to keep the width/height ratio for the div container.
In order to do that I just added the following css to the div :

#graph {
   width:20%;
  aspect-ratio: 1/1;
}

In that way, the ploty container always keeps the same proportions and the subplot stays at the same position.

1 Like
5

Yes, I think that’s the best way to do! :ok_hand: