Fixes scale control for globe on zoom out (#4897)

* Modification du fichier scale_control.ts

Correction de l'échelle lorsque la carte montre plus que le globe

* Update .gitignore

* Revert "Update .gitignore"

This reverts commit 71f9276.

* changelog and minimum maxWidth

* Update .gitignore

* Update CHANGELOG.md

* Update scale_control.ts

* Update package-lock.json

* Update .gitignore

---------

Co-authored-by: Harel M <[email protected]>

CHANGELOG.md

@@ -5,6 +5,7 @@
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
+- Fixes scale control for globe on zoom out ([#4897](https://github.com/maplibre/maplibre-gl-js/pull/4897))
 - _...Add new stuff here..._
 
 ## 5.0.0-pre.6

src/ui/control/scale_control.ts

@@ -99,11 +99,16 @@ function updateScale(map, container, options) {
     // container with maximum length (Default) as 100px.
     // Using spherical law of cosines approximation, the real distance is
     // found between the two coordinates.
-    const maxWidth = options && options.maxWidth || 100;
-
+    // Minimum maxWidth is calculated for the scale box.
+    const optWidth = options && options.maxWidth || 100;
     const y = map._container.clientHeight / 2;
-    const left = map.unproject([0, y]);
-    const right = map.unproject([maxWidth, y]);
+    const x = map._container.clientWidth / 2;
+    const left = map.unproject([x - optWidth / 2, y]);
+    const right = map.unproject([x + optWidth / 2, y]);
+
+    const globeWidth = Math.round(map.project(right).x - map.project(left).x);
+    const maxWidth = Math.min(optWidth, globeWidth, map._container.clientWidth);
+
     const maxMeters = left.distanceTo(right);
     // The real distance corresponding to 100px scale length is rounded off to
     // near pretty number and the scale length for the same is found out.