I'm working on my first ESRI web map project. In the Default.Aspx page the scale bar is initiated as shown below :

map.on('load', function () {
     //resize the map when the browser resizes
     var scalebar = new esri.dijit.Scalebar({ map: map, scalebarUnit: 'english' });

Which produces the scale bar as shown below :

enter image description here

How do I change the default grey color for the bar to red?

Console Output :

Console Output

I'm using ArcGIS API for JavaScript version 3.x.


you can use the css classes named esriScalebarRuler and esriScalebarRulerBlock

I can't find a ruler example to see available css properties on these classes, but if you right click the scale bar and inspect it in the console, look for border styles to set to red, such as:

   color:red !important;

.esriScalebarRuler { 
   border: 2px solid #ff0000;

.esriScalebarRulerBlock {
    background-color: red;

reference: https://developers.arcgis.com/javascript/jsapi/scalebar-amd.html

  • I've added the screenshot of the console output. So from this point what would I do? – yams Aug 18 '15 at 19:34
  • your screen shot cuts off right above where the styles are shown. In any case, add those classes, with properties set to red, to a css file that is loaded with your page. – toms Aug 18 '15 at 19:37
  • Ok Updated screenshot, so add which classes? – yams Aug 18 '15 at 19:40
  • you need to find the style properties for those css classes - not shown in your screenshot. You're showing the html elements. Those elements have classes, which have styles: that is what you need to change. Is this hosted somewhere? – toms Aug 18 '15 at 19:54
  • or just add the code I put in the answer into your css and see what happens – toms Aug 18 '15 at 19:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.