English

How To: 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.
[O-Image]

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>

    Related Information