Why isn't my CSS for my scalebar working?

ChrisSergent · ‎11-14-2014

I am trying to change the background to the scalebar to white using CSS and it appears to have no affect? Any ideas? Here is my code:

<!DOCTYPE html>

<html>

<head>

<title>Create a Map</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

}

.esriScalebarRuler

{

background-color:White;

}

</style>

var map;

require(["esri/map",

"esri/dijit/Scalebar",

"esri/geometry/Extent",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ArcGISTiledMapServiceLayer",

"dojo/dom",

"dojo/on",

"dojo/parser",

"dojo/domReady!"], function (Map, Scalebar, Extent, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, dom, on, parser

) {

// declare initial map extent with spatial reference

var initialExtent = new Extent({ "xmin": 777229.03, "ymin": 1133467.92, "xmax": 848340.14, "ymax": 1185634.58, "spatialReference": { "wkid": 3435} });

map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "small",

extent: initialExtent

});

// add imagery

var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// set operational layers

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

// add operational layers

map.addLayer(operationalLayer);

var scalebar = new Scalebar({

map: map,

scalebarUnit: "dual"

});

}

);

</script>

</head>

</body>

</html>

RobertScheitlin__GISP · ‎11-17-2014

Chris,

I Think this is what you are looking for:

.esriScalebarLabel, .esriScalebarLineLabel, .esriScalebarSecondNumber, .esriScaleLabelDiv

{

text-shadow:

-1px -1px 0 #fff,

1px -1px 0 #fff,

-1px 1px 0 #fff,

1px 1px 0 #fff;

}

View solution in original post

RobertScheitlin__GISP · ‎11-14-2014

Chris,

The maps scalebar is made of multiple divs and it is not going to be possible to get a nice white background behind the whole scaleabar using css of the existing divs. If you want to learn more on what elements on the screen have what styles applied to them though css or inline style declarations then just right click on the element on the screen and choose inspect element. This will bring up the inspector and you will be able to see the css rules applied to that element.

ChrisSergent · ‎11-17-2014

I decided I wanted a white border around the scalebar and I got the line to work, but I am still having problems with the labels. I used inspect element and thought that I made the necessary changes in my CSS, but no change. Here is my modified code.

<!DOCTYPE html>

<html>

<head>

<title>Create a Map</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

}

.esriScalebarLine, .esriScalebarMetricLine

{

border-color:White;

}

.esriScalebarLabel, .esriScalebarLineLabel,.esriScalebarSecondNumber, .esriScaleLabelDiv

{

text-shadow:White;

}

</style>

var map;

require(["esri/map",

"esri/dijit/Scalebar",

"esri/geometry/Extent",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ArcGISTiledMapServiceLayer",

"dojo/dom",

"dojo/on",

"dojo/parser",

"dojo/domReady!"], function (Map, Scalebar, Extent, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, dom, on, parser

) {

// declare initial map extent with spatial reference

var initialExtent = new Extent({ "xmin": 777229.03, "ymin": 1133467.92, "xmax": 848340.14, "ymax": 1185634.58, "spatialReference": { "wkid": 3435} });

map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "small",

extent: initialExtent

});

// add imagery

var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// set operational layers

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

// add operational layers

map.addLayer(operationalLayer);

var scalebar = new Scalebar({

map: map,

scalebarUnit: "dual"

});

}

);

</script>

</head>

</body>

</html>

RobertScheitlin__GISP · ‎11-17-2014

Chris,

I Think this is what you are looking for:

.esriScalebarLabel, .esriScalebarLineLabel, .esriScalebarSecondNumber, .esriScaleLabelDiv

{

text-shadow:

-1px -1px 0 #fff,

1px -1px 0 #fff,

-1px 1px 0 #fff,

1px 1px 0 #fff;

}

ChrisSergent · ‎11-17-2014

Awesome! Thanks!

OwenEarley · ‎11-15-2014

You can do this using the optional srcNodeRef parameter when constructing the scalebar - see this example.

The trick is to place a div over the map and use it as the scalebar container.

<style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{padding:0;}
      #scalebar-container{
        position: absolute;
        bottom: 10px;
        left: 10px;
        background-color: #fff;
        width: 120px;
        height: 30px;
        z-index:1;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 12px;
      }
</style>
…
<div id="map" data-dojo-type="dijit/layout/ContentPane" 
     data-dojo-props="region:'center'"
     style="overflow:hidden;">
        <div id="scalebar-container"></div>
 </div>
…
<script>
...
        // Apply the scalebar to the scalebar-container div
        var container = document.getElementById('scalebar-container');
        var scalebar = new Scalebar({ map: map,  scalebarUnit: "dual" }, container);
...
</script>

The problem with this approach is that the width of the ESRI scalebar width is dynamic and the container does not automatically expand/contract when the scalebar size changes. This can lead to the scalebar over-running the container div. A JavaScript hack can help to get around this:

map.on("zoom-end", function(evt) {           
          // Get max width of child divs
          var w = 0;
          var esriSbDiv = container.childNodes[0];
          for (var i = 0; i < esriSbDiv.childNodes.length; i++) {             
                    if(esriSbDiv.childNodes.offsetWidth > w) {
                              w = esriSbDiv.childNodes.offsetWidth; 
                    }       
          }
          // Apply new width to scalebar container
          container.setAttribute("style","width:" + (w + 40) + "px");
});

You may need to play around with the width value (+40) in the zoom-end function depending on your scalebar style.