--- step-5/index.html	2023-07-02 13:20:09.119154723 +0000
+++ step-6/index.html	2023-07-02 13:20:09.119154723 +0000
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>Step 5: moving the attribution text</title>
+    <title>Step 6: adding a scale ruler</title>
     <script src="../OpenLayers.js"></script>
     <script src="../OpenStreetMap.js"></script>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
@@ -13,6 +13,13 @@
         padding: 4px; 
         opacity: 0.60;
       }
+      .olControlScaleLine {
+        bottom: 0px;
+        left: 0px;
+        background-color:white; 
+        padding: 4px; 
+        opacity: 0.60;
+      }
     </style>
 
     <script>
@@ -26,11 +33,15 @@
 
         overviewMap = new OpenLayers.Control.OverviewMap();
 
+        scale = new OpenLayers.Control.ScaleLine();
+        scale.geodesic = true; // get the scale projection right, at least on small zoom levels
+
         map = new OpenLayers.Map("demoMap", 
                                  { theme:    null,
                                    controls: [ new OpenLayers.Control.Navigation(),    // direct panning via mouse drag
                                                new OpenLayers.Control.Attribution(),   // attribution text
                                                new OpenLayers.Control.PanZoomBar(),    // larger navigation control
+                                               scale,                                  // scale ruler
                                                overviewMap                             // overview map
                                              ]
                                  }