Monday, September 7, 2009

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.

No comments: