diff --git a/main.js b/main.js
index e6531488..d4dc39e9 100644
--- a/main.js
+++ b/main.js
@@ -481,7 +481,7 @@ function doWorkOnZoom(isScaleChanged, isPositionChanged) {
 
   if (isScaleChanged) {
     invokeActiveZooming();
-    drawScaleBar();
+    drawScaleBar(scale);
   }
 
   // zoom image converter overlay
@@ -652,7 +652,7 @@ async function generate() {
     randomizeOptions();
     placePoints();
     calculateVoronoi(grid, grid.points);
-    drawScaleBar();
+    drawScaleBar(scale);
     await HeightmapGenerator.generate();
     markFeatures();
     markupGridOcean();
diff --git a/modules/ui/measurers.js b/modules/ui/measurers.js
index e6c2addc..488aafe4 100644
--- a/modules/ui/measurers.js
+++ b/modules/ui/measurers.js
@@ -536,11 +536,11 @@ class Planimeter extends Measurer {
 }
 
 // Scale bar
-function drawScaleBar(scaleLevel = scale) {
+function drawScaleBar(scaleLevel) {
   if (scaleBar.style("display") === "none") return; // no need to re-draw hidden element
   scaleBar.selectAll("*").remove(); // fully redraw every time
 
-  const distanceScale = distanceScaleInput.value;
+  const distanceScale = +distanceScaleInput.value;
   const unit = distanceUnitInput.value;
   const size = +barSizeInput.value;
 
diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js
index aa3e4e63..535b7e14 100644
--- a/modules/ui/units-editor.js
+++ b/modules/ui/units-editor.js
@@ -11,6 +11,8 @@ function editUnits() {
     position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
   });
 
+  const drawBar = () => drawScaleBar(scale);
+
   // add listeners
   document.getElementById("distanceUnitInput").addEventListener("change", changeDistanceUnit);
   document.getElementById("distanceScaleOutput").addEventListener("input", changeDistanceScale);
@@ -19,9 +21,9 @@ function editUnits() {
   document.getElementById("heightExponentInput").addEventListener("input", changeHeightExponent);
   document.getElementById("heightExponentOutput").addEventListener("input", changeHeightExponent);
   document.getElementById("temperatureScale").addEventListener("change", changeTemperatureScale);
-  document.getElementById("barSizeOutput").addEventListener("input", drawScaleBar);
-  document.getElementById("barSizeInput").addEventListener("input", drawScaleBar);
-  document.getElementById("barLabel").addEventListener("input", drawScaleBar);
+  document.getElementById("barSizeOutput").addEventListener("input", drawBar);
+  document.getElementById("barSizeInput").addEventListener("input", drawBar);
+  document.getElementById("barLabel").addEventListener("input", drawBar);
   document.getElementById("barPosX").addEventListener("input", fitScaleBar);
   document.getElementById("barPosY").addEventListener("input", fitScaleBar);
   document.getElementById("barBackOpacity").addEventListener("input", changeScaleBarOpacity);
@@ -46,18 +48,18 @@ function editUnits() {
       prompt("Provide a custom name for a distance unit", {default: ""}, custom => {
         this.options.add(new Option(custom, custom, false, true));
         lock("distanceUnit");
-        drawScaleBar();
+        drawScaleBar(scale);
         calculateFriendlyGridSize();
       });
       return;
     }
 
-    drawScaleBar();
+    drawScaleBar(scale);
     calculateFriendlyGridSize();
   }
 
   function changeDistanceScale() {
-    drawScaleBar();
+    drawScaleBar(scale);
     calculateFriendlyGridSize();
   }
 
@@ -136,7 +138,7 @@ function editUnits() {
     localStorage.removeItem("barBackColor");
     localStorage.removeItem("barPosX");
     localStorage.removeItem("barPosY");
-    drawScaleBar();
+    drawScaleBar(scale);
 
     // population
     populationRate = populationRateOutput.value = populationRateInput.value = 1000;