Switch between different basemaps using the Flex HSlider control

Summary

Instructions provided describe a method for switching between basemaps using the HSlider control.

This sample shows the way of allowing users to switch between different basemaps by using the HSlider control in Adobe Flex 4 SDK. The HSlider control lets user select a basemap by moving the slider thumb between the end points of the slider track.

One of the easiest ways to experiment with this is by simply creating a blank Flex application, adding a reference to the appropriate Esri Flex API swc file, copying the following code snippet in the mxml page, and finally building and executing the application to load it in a browser.

Procedure

Code:
<?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"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   pageTitle="Toggle between Map Services with HSlider Control">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		 .customHSliderStyle{
			 color: White;
		}
	</fx:Style>

	<fx:Script>
		<![CDATA[
			import com.esri.ags.geometry.MapPoint;
			import com.esri.ags.layers.TiledMapServiceLayer;
			import mx.events.FlexEvent;
			
			private function layerShowHandler(event:FlexEvent):void
			{
				var tiledLayer:TiledMapServiceLayer = event.target as TiledMapServiceLayer;
				myMap.lods = tiledLayer.tileInfo.lods;
			}
		]]>
	</fx:Script>
	
	<esri:Map id="myMap" level="4" load="myMap.centerAt(new MapPoint(-11713000, 4822000))">
		<esri:ArcGISTiledMapServiceLayer show="layerShowHandler(event)"
			  url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
			  visible="{hSlider.value == 0}"/>
		<esri:ArcGISTiledMapServiceLayer show="layerShowHandler(event)"
			  url="http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
			  visible="{hSlider.value == 1}"/>
		<esri:ArcGISTiledMapServiceLayer show="layerShowHandler(event)"
			  url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
			  visible="{hSlider.value == 2}"/>
	</esri:Map>
	
	<s:VGroup right="10" top="10">
		<mx:VBox borderStyle="solid" borderColor="white" backgroundColor="black" backgroundAlpha="0.7" cornerRadius="10">	
			<mx:Label width="280" color="red" paddingTop="10" paddingLeft="10" fontWeight="bold"
				text="Use the slider to switch the base map layers" />
			<mx:HSlider id="hSlider" maximum="2" snapInterval="1" tickInterval="1" width="300" labelStyleName="customHSliderStyle" 
				labels="['Streets', 'U.S. Topo','Imagery']" />
		</mx:VBox>	
	</s:VGroup>
</s:Application>