ScaleControl display incorrect values at low zoom levels

[confusingstraw]

The React version of the ScaleControl uses incorrect scale values at lower zoom levels (when the full map is entirely in the viewport). It correctly scales up to the 200km value range, but then begins to bounce between 50 and 10km when zooming out further.

When I switched to using the built-in mapboxgl.ScaleControl the issue went away, and upon looking at the source code it seems this library uses a slightly different method for calculating the distances for the scales. It appears at first glance to be caused by how this library decides upon the top-left and top-right positions, which will begin to scale the opposite way when the map is fully zoomed out (at least it looks that way). The mapboxgl.ScaleControl implementation seems to use the map.unproject function to determine the top-left and top-right positions.

mapboxgl.ScaleControl scale calculation: scale_control.js react-mapbox-gl.ScaleControl scale calculation: scale-control.tsx

[raphael-leger]

I noticed this issue as well, can be seen on the all-shapes demo here when fully zooming out.

[callmeYe]

I noticed this issue as well

[guiferrpereira]

+1

[sraisty1c]

+1