diff --git a/www/assets/js/map_mapbox.js b/www/assets/js/map_mapbox.js
index 0086e32..d7e192c 100644
--- a/www/assets/js/map_mapbox.js
+++ b/www/assets/js/map_mapbox.js
@@ -46,6 +46,14 @@ function mapboxMap() {
             }), 'top-left'
             );
 
+    if (getStorage("mapscale") !== "false") {
+        map.addControl(
+                new mapboxgl.ScaleControl({
+                    unit: getStorage("units") == "imperial" ? "imperial" : "metric"
+                })
+                );
+    }
+
     map.startLocateControl = function () {
         // stub
     }
diff --git a/www/assets/js/settings.js b/www/assets/js/settings.js
index 6e402a1..291392a 100644
--- a/www/assets/js/settings.js
+++ b/www/assets/js/settings.js
@@ -102,6 +102,13 @@ $('.item-link[data-setting=mapsource] select').on("change", function () {
     reloadMap();
 });
 
+$('.item-content[data-setting=mapscale] .toggle input').on("change", function () {
+    var checked = $(this).prop('checked');
+    setStorage("mapscale", checked ? "true" : "false");
+
+    reloadMap();
+});
+
 $('.item-content[data-setting=maptype] .toggle input').on("change", function () {
     var checked = $(this).prop('checked');
     setStorage("maptype", checked ? "leaflet" : "mapbox");
diff --git a/www/routes.js b/www/routes.js
index 0e042d4..84ff958 100644
--- a/www/routes.js
+++ b/www/routes.js
@@ -541,6 +541,14 @@ var routes = [
                                 }
                             ]
                         },
+                        {
+                            setting: "mapscale",
+                            title: "Map Scale Ruler",
+                            text: "Show a scale in the corner of the map.",
+                            toggle: true,
+                            checked: localStorage.getItem("mapscale") !== "false",
+                            onclick: ""
+                        },
                         {
                             setting: "maptype",
                             title: "Alternative map",