HOW TO

Switch between different basemaps using the Flex HSlider control

Last Published: April 25, 2020

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>

    Article ID:000011306

    Software:
    • ArcGIS API for JavaScript Prev
    • ArcGIS API for Flex Prev

    Receive notifications and find solutions for new or common issues

    Get summarized answers and video solutions from our new AI chatbot.

    Download the Esri Support App

    Related Information

    Discover more on this topic

    Get help from ArcGIS experts

    Contact technical support

    Download the Esri Support App

    Go to download options