Background color for scalebar dijit-Scalrebar visibility on Imagery layer

[RahulMetangale1]

Hi All,

I have observed that scalebar is hard to see when base map is imagery. I am trying to add some background color to it by creating a div (with white background) and adding scale bar to it. However scalebar width changes based on extent so sometimes it goes outside of the div. Also in case of Bing base map Bing logo will appear on left hand side bottom so special handling is required for the same.

Is there a better way to achieve this?

Thanks,
Rahul

[Dan · Accepted solution]

Try this:


Css
-----
.cssScalebarContainer { left: 0; bottom: 0; color: Black; padding: 8px 32px 16px 8px; background-color: White; opacity: 0.7; filter: alpha(opacity=70); border-radius: 4px; }
.cssScalebarRuler { border:1px solid black; background-color: Black; }
.cssScalebarRulerBlock { background-color: Black; }
-----


Javascript
-----
/// Do this on load
function ftnSetupScalebar() {
'use strict';
var oScalebarContainer,
oScalebarRuler,
oScalebarRulerBlock,
oScalebarText,
i;

/// Find elements by class (sure wish they had IDs)
oScalebarContainer = dojo.query('.scalebar_bottom-left');
oScalebarRuler = dojo.query('.esriScalebarRuler');
oScalebarRulerBlock = dojo.query('.esriScalebarRulerBlock');
oScalebarText = dojo.query('.esriScalebarLabel');

if (oScalebarContainer !== null && oScalebarContainer.length > 0) {
dojo.addClass(oScalebarContainer[0], 'cssScalebarContainer');
}

if (oScalebarRuler !== null && oScalebarRuler.length > 0) {
dojo.addClass(oScalebarRuler, 'cssScalebarRuler');
}

if (oScalebarRulerBlock !== null && oScalebarRulerBlock.length > 0) {
oScalebarRulerBlock.addClass('cssScalebarRulerBlock');
}

if (oScalebarText !== null && oScalebarText.length > 0) {
for (i = 0; i < oScalebarText.length; i++) {
oScalebarText.style.color = 'black';
}
}
}
-----

Background will resize with scalebar.

Looks like this (click on image below to see actual size):
[ATTACH=CONFIG]19802[/ATTACH]

I had the same problem and did this to solve it. I'm hoping to eventually find a cleaner way.

Not a perfect solution, but works for now.

-Dan

[RahulMetangale1]

Perfect!!! Thank you Dan!

[Dan]

Glad to help.
-Dan

[BrittneyGibbons]

This worked pretty well for me:

.esriScalebar {padding: 12px 30px; background-color:#ffffff;}

[ATTACH=CONFIG]21809[/ATTACH]

There is a little extra padding to the left of the scalebar, but it doesn't look too bad overall. I think Dan's suggestion is much more elegant though, the transparency is a nice touch!

[OrenGal]

My solution was similar:
$(".esriScalebarRuler").parent().css("background-color", "white");
$(".esriScalebarRuler").parent().css('padding-left', '15px');
$(".esriScalebarRuler").parent().css('padding-right', '35px');
$(".esriScalebarRuler").parent().css('padding-top', '12px');
$(".esriScalebarRuler").parent().css('padding-bottom', '12px');
This was good for scalebar in right bottom.

[Dan]

Update: This is how I am doing it now for a dual-type scalebar positioned lower left - all CSS:

/* CSS */

.esriScalebar {

    padding: 6px 38px 4px 4px;

    background-color: white;

    border-radius: 4px;

    opacity: 0.6;

    width: auto;

    height: auto;

}

.esriScalebar:hover {

    opacity: 0.99;

}

.esriScalebarLabel {

    color: black;

    font-family: Trebuchet MS, Verdana, Tahoma;

    font-size: 9pt;  

}

.esriScalebarLine {

    border-color: black;

}

(May need to tweak CSS for older IE browsers.)

See ESRI reference: scalebar-amd | API Reference | ArcGIS API for JavaScript‌