Skip navigation
All People > csergent08 > Chris Sergent Lost in GIS > 2015 > January > 12

And Finally The Scalebar

Posted by csergent08 Champion Jan 12, 2015

Will this complete the template? No, but this will bring us to the end of the widgets that have minimal interactivity. The scalebar is easy to add just like the overview map was, but for me I am non too much for the display. The scalebar widget in Esri's example is here: Scalebar | ArcGIS API for JavaScript . It's fine if you have a light colored map, but I have found that it's not very visible on imagery which tends to have a lot of black or dark colors in it. One option is to make the scalebar white, which I had done originally, but then I thought what if someone turns the imagery layer off? The scalebar could disappear. For some reason while I was writing this post, scalebar appearance changed. It has a nice grid format now, but the numbers are all black, so I decided to keep the scalebar as is and a halo effect around the numbers. Here's how we do it.

Step 1

Add the scalebar in the require statement. As always, don't forget to add the variable in the following function so that you can use the scalebar.

"esri/dijit/Scalebar",  // Scalebar


Step 2

Add the scalebar to the map. There are options such as the types of units. I prefer dual. For other options, check out the Esri JS API.

// scalebar Begin
            var scalebar = new Scalebar({
                map: map,
                scalebarUnit: "dual"
            // scalebar End


Step 3

Add the CSS to style your scalebar.

/* Scalebar */

.esriScalebarLabel, .esriScalebarLineLabel,.esriScalebarSecondNumber, .esriScaleLabelDiv

    text-shadow:-1px -1px 0 #fff,  
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;

The text shadow provides a nice little halo affect around the black text.

I decided to make my scalebar look like this: scalebar1.png

To format the first the scalebar to look like this , I used a CSS generator. If you need a CSS generator, you can get a CSS generator here. I will be posting a question about this in the forums, but here is the CSS I generated for the first bar:

/* Scalebar */
/* Used CSS Gradient Generator - */
.esriScalebarLine, .esriScalebarMetricLine
    background: rgb(247,247,247); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(5,5,5,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(247,247,247,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(5,5,5,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#050505',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


If you would like to see the complete code of the updated applications which I now link to the version that corresponds to the topic I am writing about, check out the Esri based template, or the custom templates of gisWeb or gisMobile. Just a side note, I had to fix the scalebar because I listed my variable in the wrong order. You have to be careful of that. I am telling you and me that. Here is what you might get for a scalebar if it's in the wrong order: scalebar2.png


Now we have a scalebar. Next up will be the measurement tool. I apply my own custom CSS to that as well.