Fix mapbox getView scale for Retina display

[archmoj]

cc: https://github.com/plotly/dashboard-engine/issues/828

Tested with Safari on iPad Pro 12.9 2021

@plotly/plotly_js

[alexcjohnson]

@archmoj Can you give me a test case that would break previously but works with this PR? I have a mac with both retina and non-retina monitors so ideal to verify this with ;)

I wonder if this will work correctly with maps with pitch - in that case lower areas on the map have a larger scale than those higher up, so the midpoint of the diagonal won't match the center lat/lon.

Could we not just use window.devicePixelRatio?

> window.devicePixelRatio // with the window on my big non-retina monitor
<- 1
> window.devicePixelRatio // after moving the window to my built-in laptop screen (retina)
<- 2

[archmoj]

@archmoj Can you give me a test case that would break previously but works with this PR? I have a mac with both retina and non-retina monitors so ideal to verify this with ;)

I wonder if this will work correctly with maps with pitch - in that case lower areas on the map have a larger scale than those higher up, so the midpoint of the diagonal won't match the center lat/lon.

Could we not just use window.devicePixelRatio?

> window.devicePixelRatio // with the window on my big non-retina monitor
<- 1
> window.devicePixelRatio // after moving the window to my built-in laptop screen (retina)
<- 2

Good call. I agree we should try pixelRatio.

[archmoj]

@alexcjohnson you could apply your pixelRatio suggestion on this PR now that you also have the right monitors to debug and test.
Thanks!

[alexcjohnson]

Sure, happy to take over this PR if you can give me a clear test case :)

[archmoj]

Sure, happy to take over this PR if you can give me a clear test case :)

Great. This is what I did when testing on browserstack. I added a cosole log in the if statement which tests the center longitude and inspect if it is between start and end longitudes.
If we apply pixelRatio to the width and the height of the canvas it should just work without needing that if statement.

[alexcjohnson]

When you make a canvas, the way to give it correct resolution for a retina display is to set the style width and height to the css pixel size, and the width and height attributes to that size times window.devicePixelRatio - so we just needed to switch to style.

[archmoj]

Nicely done.
💃