More

Javascript API Scalebar halo CSS Styling

Javascript API Scalebar halo CSS Styling


I am very new to HTML, CSS, and JS.

I have added a scalebar to my map and figured out how to add a halo around the labels so they can be seen better against dark or light backgrounds, but I can't seem to replicate this on the line itself. Below is the sample I found online that i'm using for the labels.

.esriScalebarLabel, .esriScalebarLineLabel, .esriScalebarSecondNumber, .esriScalebarLabelDiv { text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }

I have tried applying this same code (along with other CSS properties like box-shadow, outline, text-shadow) to the .esriScalebarLine selector but the closest I have gotten is a boarder around the lines container, and not the actual line itself.

My bar currently looks like this:

And I need it to look more like this:

Notice the 1px white outline surrounding the line? I need that! Any ideas on how to do that? Am I using the wrong selector?


I couldn't figure it out, not sure if it is possible. You can get a white box the size of the whole scale bar area, which looks pretty silly. You can do this with by changing the .esriScalebarLine css to border-bottom-color: white; border-bottom-style: solid; border-bottom-width: 5px; Or you could add another div and change the background-color for the div to mask the whole area around the scale bar div.

Maybe you could duplicate the scale bar and make one thicker.

I also really don't think it is a big deal. I have never been concerned about the difficulty of reading a scale on a web map. MOST people won't even look at it and those that do will look closely or move the map to a more readable background if necessary.

If you have a dark styled map, you can change the css for the scalebar and make the whole thing white, by overriding the border css for .esriScalebarLine to border-color: white.