Styling and skinning the scale bar

Version 3.7

The position and visual attributes of the scale bar can be changed by using the Cascading Style Sheets (CSS) style properties and/or a custom skin.

Changing the navigation slider

The following are the different ways to change the navigation slider:

  • Change the position of the scale bar using CSS styling.
  • Show only metric units using an alternate skin. See the following:
    Screen shot showing metric units using an alternate skin.
  • Different looking scale bar using a custom skin:
    Screen shot showing scale bar using a custom skin.

Changing the position of the scale bar using styles

By default, the scale bar is positioned at the lower left hand corner on the map. Modifying the style properties enables you to change this default position. The following code positions the scale bar at the bottom right hand corner on the map:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:esri="http://www.esri.com/2008/ags">
    <fx:Style>
        @namespace esri "http://www.esri.com/2008/ags";
        esri|ScaleBar
        {
            left: NaN;
            right: 5;
            bottom: 5;
        }
    </fx:Style>

    <esri:Map id="myMap" >
        <esri:ArcGISTiledMapServiceLayer id="tiled"
        url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
    </esri:Map>
</s:Application>

Notice the "@namespace" directive and the qualified reference to the scale bar "esri | ScaleBar". Components whose attributes are changed need to be uniquely identified to avoid class name collision.

Since the "left" property is the default property, set it to not a number (NaN) to allow other position properties such as "right" and "bottom" to take effect.

Similarly, the following code snippet positions the scale bar in the upper right hand corner on the map.

<fx:Style>
    @namespace esri "http://www.esri.com/2008/ags";
    esri|ScaleBar
    {
        left: NaN;
        right: 5;
        top : 5;
    }
</fx:Style>

Choosing the unit system to display (for example, only metric units) using an alternate skin

The scale bar by default displays distances in both the U.S. and metric systems. Depending upon the requirement of your application, you may want to display the distance only in metric units. To satisfy this requirement, specify an alternate SkinClass for the scale bar.

The default skin class used by the scale bar is "com.esri.ags.skins.ScaleBarSkin." There are some alternate skin classes available at <Extracted_API_Download_Location>/skins/src" such as "com.esri.ags.skins.ScaleBarMetricSkin" and "com.esri.ags.skins.ScaleBarUSSkin". To use one of these alternate skin classes for the scale bar, reference the skin class shown as follows:

<fx:Style>
    @namespace esri "http://www.esri.com/2008/ags";
    esri|ScaleBar
    {
        skin-class: ClassReference("com.esri.ags.skins.ScaleBarMetricSkin");
        left: NaN;
        right: 5;
        top : 5;
    }
</fx:Style>

Changing the visual appearance using a custom skin

You can modify the default skin class of the ScaleBar component to create an alternate look for the scale bar. To modify the skin class for the ScaleBar component, see the following sections.

Copying the default skin class for the ScaleBar component

The ArcGIS API for Flex ships with the source code for the default skin classes of all the visual components. The default skin class used by the ScaleBar component is "com.esri.ags.skins.ScaleBarSkin" and is located under the <Extracted_API_Download_Location>/skins/src" folder.

Copy the file ScaleBarSkin.mxml in to the "src" folder of your Flex project and rename the file to MyScaleBarSkin.mxml. See the following:

Screen shot showing the src folder.

Modifying the skin class

Since you only need metric units displayed in the scale bar, delete the code for calculating U.S. units, label for displaying U.S. units, and the line components. The modified code of the skin resembles the following:

<s:Skin xmlns:fx=http://ns.adobe.com/mxml/2009
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="200">

    <fx:Metadata>
        [HostComponent("com.esri.ags.components.ScaleBar")]
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
            override protected function measure():void
            {
                labelMetric.text = hostComponent.textMetric;
                labelMetric.x = hostComponent.lengthMetric - labelMetric.getExplicitOrMeasuredWidth() * 0.5;

                super.measure();
            }
        ]]>
    </fx:Script>

    <s:Label id="labelMetric" fontFamily="Verdana" fontSize="9" y="0"/>
</s:Skin>

You can now add a rectangle to display the distance in metric units. The code for the skin class resembles the following:

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="200">

    <fx:Metadata>
        [HostComponent("com.esri.ags.components.ScaleBar")]
    </fx:Metadata>

    <fx:Declarations>
        <s:SolidColorStroke id="solidColorStroke" color="0x000000" weight="2"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[

            override protected function measure():void
            {
                labelMetric.text = hostComponent.textMetric;
                labelMetric.x = hostComponent.lengthMetric + 5;

                super.measure();
            }
        ]]>
    </fx:Script>

    <s:Rect width = "{hostComponent.lengthMetric}" height="5">
        <s:fill>
            <s:SolidColor color="0xFF0000"/>
        </s:fill>
    </s:Rect>
    <s:Label id="labelMetric" fontFamily="Verdana" fontSize="9" y="0" fontWeight="bold"/>

</s:Skin>

You have now added a rectangle with red as the fill color. Also note that the "x" position of the label "labelMetric" has been adjusted to be placed at the end of the rectangle.

Setting a reference to the modified skin class

Now that you have modified the skin class, it needs to be referenced using the "skin-class" property in the application. The following code snippet shows how to reference the modified skin class in the application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:esri="http://www.esri.com/2008/ags">
    <fx:Style>
        @namespace esri "http://www.esri.com/2008/ags";
        esri|ScaleBar
        {
            skin-class: ClassReference("MyScaleBarSkin");
        }
    </fx:Style>
    <esri:Map >
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" />
    </esri:Map>
</s:Application>

You can see that by changing the skin class, you can create different variations for the visual appearance of the scale bar without changing any of the business logic of how the distances are calculated.