topic Re: Background color for scalebar dijit-Scalrebar visibility on Imagery layer in ArcGIS JavaScript Maps SDK Questions

Background color for scalebar dijit-Scalrebar visibility on Imagery layer

RahulMetangale1 — Fri, 07 Dec 2012 14:09:01 GMT

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

Re: Background color for scalebar dijit-Scalrebar visibility on Imagery layer

Dan — Fri, 07 Dec 2012 18:55:49 GMT

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

Re: Background color for scalebar dijit-Scalebar visibility on Imagery layer

RahulMetangale1 — Sat, 08 Dec 2012 03:14:15 GMT

Perfect!!! Thank you Dan!

Re: Background color for scalebar dijit-Scalrebar visibility on Imagery layer

Dan — Mon, 10 Dec 2012 12:10:03 GMT

Glad to help.
-Dan

Re: Background color for scalebar dijit-Scalrebar visibility on Imagery layer

BrittneyGibbons — Thu, 14 Feb 2013 19:19:31 GMT

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!

Re: Background color for scalebar dijit-Scalrebar visibility on Imagery layer

OrenGal — Sat, 28 Dec 2013 14:18:55 GMT

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.

Re: Background color for scalebar dijit-Scalrebar visibility on Imagery layer

Dan — Tue, 29 Jul 2014 16:17:13 GMT

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‌