Skip To Content

Styling and skinning navigation

In this topic

Version 3.7

About styling and skinning navigation

The navigation slider is used to display layers at predefined scales. It consists of a slider, and zoom-in and zoom-out buttons. This topic shows how you can change the default look of the navigation control to suit your project.

Screen shot showing the navigation control.

The following table shows various ways to change the navigation slider:

Different ways of changing the navigation slider

Changing the location of the navigation slider using Cascading Style Sheets (CSS):

Horizontal navigation slider using an alternate skin:

Different zoom-in and zoom-out button using a custom skin:

Screen shot showing changing the location of the navigation slider.

Screen shot showing horizontal navigation slider using an alternate skin.

Screen shot showing different zoom-in and zoom-out button using a custom skin.

Changing the location of the navigation slider using styles

The CSS style property places the slider at a distance of 30 pixels from the top and right margin on the map. Since the left property is a default property, you have to use the not a number (NaN) value so that the left property value is not used.

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

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

Changing the orientation of the navigation slider using an alternative skin

The default orientation of the navigation slider is vertical. Depending on your application requirements, you can change the orientation of the navigation slider to horizontal. An alternate skin is available in the application programming interface (API) that can be used for this purpose. The reference to this alternate skin class is set as shown in the following code:

<fx:Style>
@namespace esri "http://www.esri.com/2008/ags";
esri|Navigation
{
skin-class: ClassReference("com.esri.ags.skins.NavigationHorizontalSkin");
}
</fx:Style>

Changing the zoom-in and zoom-out button using skinning

Creating a custom skin can further enhance the look of the navigation slider. In the following screen shot, alternate images are used for the zoom-in and zoom-out button, and the tooltip is customized to display tile level (instead of map scale).

You can modify the default skin class of the navigation control to create an alternate look. Do the steps in the following sections to create this new look:

Copying the default skins used by the navigation control into your project

By default, the navigation control uses the NavigationSkin.mxml, NavigationZoominButtonSkin.mxml, and NavigationZoomoutButtonSkin.mxml skin classes. Copy these three files from the <Extracted_API_Download_Location>/skins/src folder into the /src folder of your Flex project, then rename the files. See the following:

  1. Rename NavigationSkin.mxml to MyNavigationSkin.mxml.
  2. Rename NavigationZoominButtonSkin.mxml to MyNavigationZoominButtonSkin.mxml.
  3. Rename NavigationZoomoutButtonSkin.mxml to MyNavigationZoomoutButtonSkin.mxml.

Screen shot showing the skin files.

Modifying the MyNavigationSkin.mxml skin class

This is the default skin class that consists of the slider, and buttons for zooming in and out of the map. Modify this skin to provide a new format for the tooltip and change the skins for the zoom-in and zoom-out buttons.

  1. Do the following to modify tooltip value:

    Refer to the function formatSliderDataTip. This function is used to calculate the value for the tooltip that is visible when the thumb of the slider is pressed. By default, the tooltip is set to the scale of the map. It is modified as follows to display the tile level:

    private function formatSliderDataTip(value:Number):String
    {
        const lod:LOD = hostComponent.map.lods[value];
        return lod ? (lod.level + 1).toString() : "Error";
    }
  2. Do the following to modify the ToolTip appearance:

    CSS properties are used to change the ToolTip appearance. The modified ToolTip has a blue background with a bold font type. The CSS class selector looks like the following:

    <fx:Style>
        .tooltipStyle
        {
            backgroundAlpha: 1.0;
            backgroundColor: haloBlue;
            fontWeight: bold;
            color: white;
        }
    </fx:Style>

    The defined style class is set to the dataTipStyleName property of the slider as shown in the following code:

    <mx:VSlider id="slider"
                dataTipFormatFunction="formatSliderDataTip"
                ...
                dataTipStyleName="tooltipStyle"/>
  3. Do the following to change the skin class for the zoom-in and zoom-out buttons:

    Set new skin class references to the zoom-in and zoom-out button. The new skin classes change the icons for the buttons. You will create these referenced skin classes in the subsequent step.

    <s:Button id="zoomInButton"
                ...
                skinClass="MyNavigationZoomInButtonSkin"
                ... />
    ...
    <s:Button id="zoomOutButton"
                ...
                skinClass="MyNavigationZoomOutButtonSkin"
                ... />

    The modified MyNavigationSkin.mxml file looks like the following:

    <?xml version="1.0" encoding="utf-8"?>
    <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">
    
        <fx:Metadata>
        [HostComponent("com.esri.ags.components.Navigation")]
        </fx:Metadata>
    
        <fx:Declarations>
    <mx:NumberFormatter id="numberFormatter" rounding="nearest"/>
        </fx:Declarations>
    
        <fx:Script>
            <![CDATA[
                import com.esri.ags.layers.supportClasses.LOD;
    
                private function formatSliderDataTip(value:Number):String
                {
                    const lod:LOD = hostComponent.map.lods[value];
                return lod ? (lod.level + 1).toString() : "Error";
                }
            ]]>
        </fx:Script>
        <fx:Style>
            .tooltipStyle
            {
                backgroundAlpha: 1.0;
                backgroundColor: haloBlue;
                fontWeight: bold;
                color: white;
            }
        </fx:Style>
    
        <s:states>
            <s:State name="normal"/>
            <s:State name="disabled"/>
            <s:State name="normalWithSlider"/>
            <s:State name="disabledWithSlider"/>
        </s:states>
    
        <s:Rect bottom="0"
                left="0"
                radiusX="10"
                radiusY="10"
                right="0"
                top="0">
            <s:fill>
                <s:SolidColor alpha="0.5" color="0x000000"/>
            </s:fill>
        </s:Rect>
    
        <s:VGroup gap="2"
                  horizontalAlign="center"
                  minHeight="34"
                  paddingBottom="5"
                  paddingLeft="3"
                  paddingRight="3"
                  paddingTop="4">
    
            <s:Button id="zoomInButton"
                      enabled.disabled="false"
                      enabled.disabledWithSlider="false"
                      skinClass="MyNavigationZoomInButtonSkin"
                      toolTip="{resourceManager.getString('ESRIMessages', 'zoomInTooltip')}" />
    
            <mx:VSlider id="slider"
                        dataTipFormatFunction="formatSliderDataTip"
                        dataTipPlacement="left"
                        enabled.disabled="false"
                        enabled.disabledWithSlider="false"
                        enabled.normalWithSlider="true"
                        height="160"
                        includeIn="normalWithSlider,disabledWithSlider"
                        liveDragging="false"
                        maximum="{hostComponent.map.lods.length - 1}"
                        showDataTip="true"
                        snapInterval="1"
                        tickColor="#000000"
                        tickInterval="1"
                        tickLength="3"
                        tickOffset="-3"
                        tickThickness="1"
                        value="{hostComponent.map.level}"
                  dataTipStyleName="tooltipStyle"/>
    
            <s:Button id="zoomOutButton"
                      enabled.disabled="false"
                      enabled.disabledWithSlider="false"
                      skinClass="MyNavigationZoomOutButtonSkin"
                      toolTip="{resourceManager.getString('ESRIMessages', 'zoomOutTooltip')}"/>
        </s:VGroup>
    
    </s:Skin>

Modifying the MyNavigationZoomInButtonSkin.mxml skin class

Change the bitmap image that is used as the icon image to display the zoom-in button. The following code shows an image file named home_icon.png that is used as the source for the bitmap image to display the button:

<s:BitmapImage
    bottom="0"
    ...
    source="@Embed(source='/assets/home_icon.png')"
    source.disabled="@Embed(source='/assets/home_icon.png')"
    source.down="@Embed(source='/assets/home_icon.png')"
    source.over="@Embed(source='/assets/home_icon.png')"
/>

The modified MyNavigationZoomInButtonSkin.mxml file looks like the following:

<?xml version="1.0" encoding="utf-8"?>

<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"
        minHeight="10"
        minWidth="10">

    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <s:states>
        <s:State name="disabled"/>
        <s:State name="down"/>
        <s:State name="over"/>
        <s:State name="up"/>
    </s:states>

    <s:BitmapImage
        bottom="0"
        left="0"
        right="0"
        source="@Embed(source='/assets/home_icon.png')"
        source.disabled="@Embed(source='/assets/home_icon.png')"
        source.down="@Embed(source='/assets/home_icon.png')"
        source.over="@Embed(source='/assets/home_icon.png')"
        top="0"
    />
</s:Skin>

Modifying the MyNavigationZoomOutButtonSkin.mxml skin class

Change the bitmap image that is used as the icon image to display the zoom-out button. The image file, globe_icon.png, is used as the source for the bitmap image that is used to display the button.

<s:BitmapImage
    bottom="0"
    ...
    source="@Embed(source='/assets/globe_icon.png')"
    source.disabled="@Embed(source='/assets/globe_icon.png')"
    source.down="@Embed(source='/assets/globe_icon.png')"
    source.over="@Embed(source='/assets/globe_icon.png')"
/>

The modified MyNavigationZoomOutButtonSkin.mxml file looks like the following:

<?xml version="1.0" encoding="utf-8"?>
<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"
        minHeight="10"
        minWidth="10">

    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <s:states>
        <s:State name="disabled"/>
        <s:State name="down"/>
        <s:State name="over"/>
        <s:State name="up"/>
    </s:states>

    <s:BitmapImage
        bottom="0"
        left="0"
        right="0"
        source="@Embed(source='/assets/globe_icon.png')"
        source.disabled="@Embed(source='/assets/globe_icon.png')"
        source.down="@Embed(source='/assets/globe_icon.png')"
        source.over="@Embed(source='/assets/globe_icon.png')"
        top="0"
    />
</s:Skin>

Referencing the modified navigation skin class in your application

The modified skin class can now be used in your application by setting the reference in the skin class property. The following code shows the modified skin class referenced 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|Navigation
        {
            skin-class: ClassReference("MyNavigationSkin");
        }
    </fx:Style>

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