Add geo.center attribute to specify map view without rescaling

[brian428]

When using an autosized plot, focusing on a map area by using ranges on scattergeo lat long causes the plot width and height to change. I don't think this should happen. The plot should always use all available space.

I created a codepen to demonstrate the issue: http://codepen.io/brian428/pen/EWbKgQ

Just change the setRange flag to true to see the effect it has on the plot size.

[etpinard]

That's the intended behavior I'm afraid. Can I ask why this shouldn't happen?

[brian428]

I assumed that the geo range would set the extent of what you SEE in the map, but I don't understand why it would change the width and height. If you don't set a range and you zoom into the plot, it doesn't alter the size. So if this is the desired behavior when setting the range, is there some way to specify the visible extent being shown on the map without changing the size of the map itself?

[etpinard]

@brian428 that's more like it! Pro tip: opening an issue saying something should work a certain way without explanation is one way to make a OSS maintainer pissed off. On that topic, you might want to read this.

---

As you point out, geo subplots are missing a few attributes to fully described the state. At first, I was convinced that lonaxis.range and lataxis.range were and should be enough, but no.

To better explain the problem here's a little background information: in general one can't satisfy (or fill) both given a width and height without distorting the map. That's because a map's width and height aren't independent: they are constrained by the map projection. So, plotly fills one dimension to its maximum (in your case your map has full height) and the width is then determined by the map projection. When setting the lon/lat ranges you essentially set the bounds for which width/height constrain is applied. If you're interested, the logic is here.

But now, how does one show a subset of a map without rescaling it? At the moment, you can't. So I'm thinking about adding a geo.center attribute similar to how mapbox subplot are specified. Together with geo.scale one could then get your desired result.

It's about time I give this a shot as this will also resolved #292 fairly easily.

[brian428]

Thanks, Étienne. I actually do know what it feels like to be an OSS maintainer (having maintained or helped maintain a number of OSS projects). My intent wasn't to piss you off. I thought this was a genuine bug, and thought that my Codepen sufficiently showed the apparent oddness of what was going on. :-)

I was able to get a bit closer to what I was looking for by scouring the API and finding geo.scale and geo.rotation. These aren't documented (as far as I can tell), but I created a TypeScript definition (TSD) generator for Plotly and found these via the TSD. (I believe your colleague Ben Postlethwaite already forwarded it to you. I'm with the folks who were funding the scattergl fixes. Having full code completion and inline API docs for Plotly has been a big help for me!)

Setting the rotation.lat/rotation.lon seems to center the map, and scale will zoom it in, but the problem there is that a specific extent of min/max lat/lon is difficult to accurately translate to a scale value.

I get that the width and height of the map is eventually limited by the map projection, but that only happens when you hit the maximum scale (1). It seems like anything beyond scale:1 would should have "enough map" available to fill any width/height, right? (Or, if not any width/height, at least most of them.)

I like your idea of geo.center, though I'm not totally sure it's needed, assuming that geo.rotation is basically doing the same thing? That said, it would be great if the map width/height always used the full size of its parent container (as long as it doesn't butt up against the max width/height of the chosen projection).

Edit: Actually, I'll have to double check that...the map may already fill the available space as much as the projection allows, when using geo.scale to specify a zoom level.)

Let me know what you think. Thanks.

[brian428]

A late reply here, but just wanted to note that using geo.rotation doesn't work. It does center the map, but it does something wonky which skews the map itself in bizarre ways (probably depending on which projection is used). So I think a dedicated ability to center is needed.

This also should really include the ability to set an initial zoom scale or set an initial lat/lon extent to make it possible to scale (zoom) and center the map on a relevant location. I've tried setting a lat/lon extent using lataxis/lonaxis range, but that causes the map's width and height to shrink.

[brian428]

In the meantime, is there really NO way to do this, even via a hack? Some non-public function or layout value that can be set when creating the layout?

[etpinard]

A late reply here, but just wanted to note that using geo.rotation doesn't work.

Would you mind sharing a reproducible example?

[brian428]

Here's an example that shows both problems. At the top of the JS, turn on the scale/rotate to see the map become skewed (zoom out on the map to see it). Then turn that off and turn on the use of a lat/lon range to see the size of the map shrink instead of just scaling the map to show the relevant ranges.

https://codepen.io/brian428/pen/vJZJaE?editors=0010#0

[brian428]

Étienne, did that show you what you needed? Were you able to see the scale/rotate skewing and the range causing the map to shrink?

[etpinard]

Yes I was able to see it.

That is the intended -- albeit potentially not ideal -- behavior. You seem very vocal about how bad the intended behavior is, so I didn't bother commenting.

[brian428]

To be fair, I never said it was bad. I just said that using scale and rotate isn't an option for specifying an initial center point for the map.

I would probably say the way specifying a lat/lon range behaves borders on bad, though. It seems odd for Plotly to resize the entire map instead of maintaining the size and simply filling it with the specified range. Would you agree?

[etpinard]

@brian428 significant improvements are coming to geo subplots in #2030

[brian428]

@etpinard awesome, thanks Étienne! Do you happen to know if the geo.center will also let you set the scaling and/or range that is shown? (In particular, letting you set the range without the width-shrinking behavior I showed in my earlier Codepen?)

I'd also be curious whether this change will make the current geo scale/range accessible in the Plotly element's layout object? I had been talking with Rob, Ben and Alex about the need to capture plot range from the element so I can restore it after rebuilding a chart. We're basically trying to keep as much of the charts intact as we can, even if we have to re-create them.

For scatter, I'm able to pull the current (after zoom) range from el.layout.{x/y}axis.range. But we realized that the geo plot doesn't seem to update the el.layout with the current scale/range.

Any idea if #2030 would make this available? If not, let me know and I can create a separate ticket for it.

Thanks again.

[etpinard]

@brian428 see 4d9b566 for an example of how to position a map using geo.center - which is based on the codepen you posted above.

[brian428]

Étienne, is this enabled in the current release (1.30.1)? I tried this out using the example config in 4d9b566, but am not seeing the same behavior. https://codepen.io/brian428/pen/veppWq?editors=0010

Just trying to determine if this should be working in 1.30.1, or if it's coming in the next release?

[etpinard]

See https://github.com/plotly/plotly.js/releases for the most up-to-date release info. Thanks

[brian428]

Well the thing that confuses me is that your commit (4d9b566) doesn't look like it has any Plotly changes, only the addition of the mock file. And the release notes don't mention anything about this issue. So it's not clear if this functionality is something that already existed and just needed an example provided, or if it involved changes to Plotly that aren't released yet.