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

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

SampleScalebarCss.jpg