Horizontal Map Slider

A customer emailed me asking me how to create a horizontal map slider using the Flex API for AGS. The Map component has a property navigationClass to enable users to define a custom navigation class.

    <esri:Map navigationClass="com.esri.sample.MyNavigation">

In this sample, I defined a reference to the class com.esri.sample.MyNavigation which is a subclass of the Navigation class.

    public class MyNavigation extends Navigation
    {
        public function MyNavigation()
        {
            mx_internal::layoutObject.direction = BoxDirection.HORIZONTAL;
            navigationSliderClass = MyNavigationSlider;
        }

        /**
         * Override the order of the components.
         */
        override protected function addZoomInZoomOutComponents(zoomInButton:UIComponent, zoomOutButton:UIComponent):void
        {
            addChild(new Spacer());
            addChild(zoomOutButton);
            addChild(zoomInButton);
            addChild(new Spacer());
        }
    }

In the constructor, I defined the box direction (note the mx_internal :-) and my own custom slider. In addition, I've overwritten the addZoomInZoomOutComponents function to specify the order of the in/out buttons. Lastly, I defined a custom navigation slider to ensure the direction is horizontal.

    public class MyNavigationSlider extends NavigationSlider
    {
        public function MyNavigationSlider()
        {
            direction = SliderDirection.HORIZONTAL;
            maxHeight = 25;
        }
    }

Here is the final result, and like usual the source code is here.