8.1.7 ScaleBar

8.1.7 ScaleBar (deprecated)

I’m guessing you haven’t been living under a rock all your life and are familiar with the concept of a scale bar. The ScaleBar widget has two main properties that you may want to set: style and unit. The unit property can be set to "metric", "imperial" or "dual". The style property can be set to "ruler" or "line". Here's an example that shows a map with two ScaleBar widgets:

See the Pen ScaleBar demo by Jim Detwiler (@jimdetwiler) on CodePen.

The difference between the two styles is that the ruler style conveys multiple distances at once (e.g., 25, 50, 75, and 100 km), whereas the line style only conveys a single distance. Setting the unit to dual will produce a line with the metric label on top and the imperial label on the bottom.