diff --git a/debug/7438.html b/debug/7438.html
new file mode 100644
index 00000000000..238152a0ade
--- /dev/null
+++ b/debug/7438.html
@@ -0,0 +1,34 @@
+
+
+
+ Mapbox GL JS debug page
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/ui/control/scale_control.js b/src/ui/control/scale_control.js
index e53b8bf7b9b..021a1fe4547 100644
--- a/src/ui/control/scale_control.js
+++ b/src/ui/control/scale_control.js
@@ -140,6 +140,11 @@ function getDistance(latlng1, latlng2) {
}
+function getDecimalRoundNum(d) {
+ const multiplier = Math.pow(10, Math.ceil(-Math.log(d) / Math.LN10));
+ return Math.round(d * multiplier) / multiplier;
+}
+
function getRoundNum(num) {
const pow10 = Math.pow(10, (`${Math.floor(num)}`).length - 1);
let d = num / pow10;
@@ -147,7 +152,8 @@ function getRoundNum(num) {
d = d >= 10 ? 10 :
d >= 5 ? 5 :
d >= 3 ? 3 :
- d >= 2 ? 2 : 1;
+ d >= 2 ? 2 :
+ d >= 1 ? 1 : getDecimalRoundNum(d);
return pow10 * d;
}
diff --git a/test/unit/ui/control/scale.test.js b/test/unit/ui/control/scale.test.js
index e98ce0da161..b96a7295d3b 100644
--- a/test/unit/ui/control/scale.test.js
+++ b/test/unit/ui/control/scale.test.js
@@ -33,3 +33,16 @@ test('ScaleControl should change unit of distance after calling setUnit', (t) =>
t.match(contents, /mi/);
t.end();
});
+
+test('ScaleControl should respect the maxWidth regardless of the unit and actual scale', (t) => {
+ const map = createMap(t);
+ const maxWidth = 100;
+ const scale = new ScaleControl({ maxWidth: maxWidth, unit: 'nautical' });
+ const selector = '.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-scale';
+ map.addControl(scale);
+ map.setZoom(12.5);
+
+ const el = map.getContainer().querySelector(selector);
+ t.ok(parseFloat(el.style.width, 10) <= maxWidth, 'ScaleControl respects maxWidth');
+ t.end();
+});