Switching layers in an ArcGISDynamicMapServiceLayer and rendering the new layer

BrianFrizzelle

I have a simple application where I'm generating a 5-class choropleth map using one of the ESRI demographic datasets. I want to be able to dynamically switch between different layers (i.e., states or counties) by only displaying one at a time. I'm able to render the quantiles on the initial layer (states), but when I switch to counties I can't figure out how to change the GenerateRendererTask to render the counties.

I plan on implementing this code in an application with many more layers than just two, so I don't want to go about hard-coding in the switch like I've done in the layer_changeHandler function. So in addition to the help with rendering, can someone help me with a more elegant way to do that switch?

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:mx="library://ns.adobe.com/flex/mx" 
               xmlns:esri="http://www.esri.com/2008/ags"
               minWidth="955" minHeight="600">
    
    <fx:Script>
        <![CDATA[
            import com.esri.ags.SpatialReference;
            import com.esri.ags.events.DetailsEvent;
            import com.esri.ags.events.GenerateRendererEvent;
            import com.esri.ags.events.LayerEvent;
            import com.esri.ags.geometry.Extent;
            import com.esri.ags.layers.supportClasses.AllDetails;
            import com.esri.ags.layers.supportClasses.DynamicLayerInfo;
            import com.esri.ags.layers.supportClasses.LayerDetails;
            import com.esri.ags.layers.supportClasses.LayerDrawingOptions;
            import com.esri.ags.layers.supportClasses.LayerMapSource;
            import com.esri.ags.renderers.ClassBreaksRenderer;
            import com.esri.ags.tasks.supportClasses.ClassBreaksDefinition;
            import com.esri.ags.tasks.supportClasses.GenerateRendererParameters;
            
            import mx.controls.Alert;
            import mx.events.IndexChangedEvent;
            import mx.events.ItemClickEvent;
            import mx.rpc.events.FaultEvent;
            
            import spark.components.supportClasses.DropDownController;
            import spark.events.IndexChangeEvent;
            
            
            /**************************************
             * Define variables below
             **************************************/
            
            private var dynamicLayerInfosArr:Array;
            private var layerMapSource:LayerMapSource;
            private var generateRendererParams:GenerateRendererParameters = new GenerateRendererParameters();
            private var classBreaksDefinition:ClassBreaksDefinition = new ClassBreaksDefinition();
            
            private var layerDetailsArr:Array = [];
            private var _breakCount:Number = 5;
            private var _classificationMethod:String = ClassBreaksDefinition.CLASSIFY_QUANTILE;
            private var _classificationField:String = "pop2000";
            
            [Bindable]
            private var colorRampFromColor:uint = 0xFFFFCC;
            [Bindable]
            private var colorRampToColor:uint = 0x253494;
            
            /**************************************
             * Functions below
             **************************************/
            
            protected function esriCensus_loadHandler(event:LayerEvent):void
            {
                dynamicLayerInfosArr = esriCensus.createDynamicLayerInfosFromLayerInfos();
                detailsTask.getAllDetails();
            }

            protected function detailsTask_getAllDetailsCompleteHandler(event:DetailsEvent):void
            {
                var details:AllDetails = event.allDetails;
                layerDetailsArr = details.layersDetails;
                var layerDetails:LayerDetails;
                
                for (var i:int = 0; i < layerDetailsArr.length; i++)
                {
                    layerDetails = layerDetailsArr;
                    if (layerDetails.name.toLowerCase() == "states" && dynamicLayerInfosArr)
                    {
                        layerMapSource = DynamicLayerInfo(dynamicLayerInfosArr).source as LayerMapSource;
                        generateRendererTask.source = layerMapSource;
                        classBreaksDefinition.breakCount = _breakCount;
                        classBreaksDefinition.classificationField = _classificationField;
                        classBreaksDefinition.classificationMethod = _classificationMethod;
                        classBreaksDefinition.colorRamp = colorRamp;
                        generateRendererParams.classificationDefinition = classBreaksDefinition;
                        generateRendererTask.execute(generateRendererParams);
                    }
                }
            }
            
            protected function esriService_faultHandler(event:FaultEvent):void
            {
                Alert.show("Error: " + event.fault.faultString, "Error code: " + event.fault.faultCode);
            }
            
            protected function generateRendererTask_executeCompleteHandler(event:GenerateRendererEvent):void
            {
                var renderer:ClassBreaksRenderer = event.renderer as ClassBreaksRenderer;
                var layerDrawingOptions:LayerDrawingOptions = new LayerDrawingOptions();
                layerDrawingOptions.layerId = layerMapSource.mapLayerId; //states layer id in the service
                layerDrawingOptions.renderer = renderer;
                esriCensus.alpha = 0.9;
                esriCensus.layerDrawingOptions = [ layerDrawingOptions ];
                legend.refresh(); // refresh the legend component to keep in-sync
            }
            
            protected function generateRenderer():void
            {
                classBreaksDefinition.breakCount = _breakCount;
                classBreaksDefinition.classificationField = _classificationField;
                classBreaksDefinition.classificationMethod = _classificationMethod;
                generateRendererParams.classificationDefinition = classBreaksDefinition;
                classBreaksDefinition.colorRamp = colorRamp;
                generateRendererTask.execute(generateRendererParams);
            }
            
            private function decimalToPercentage(decimalValue:Number):String 
            {
                var percentage:Number = decimalValue * 1000;
                var roundedPercentage:Number = Math.round(percentage);
                var roundedPercentage2:Number = roundedPercentage / 10;
                var percentAsString:String = roundedPercentage2 + "%";
                
                return percentAsString;
            }
            
            protected function layer_changeHandler(event:IndexChangeEvent):void
            {
                var selectedItem:Object = DropDownList(event.currentTarget).selectedItem;
                esriCensus.visibleLayers.removeAll();
                if (selectedItem.data == "states") 
                {
                    esriCensus.visibleLayers.addItem(3);
                }
                else
                {
                    esriCensus.visibleLayers.addItem(2);
                }
            }
            
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <esri:DetailsTask id="detailsTask"
                          fault="esriService_faultHandler(event)"
                          getAllDetailsComplete="detailsTask_getAllDetailsCompleteHandler(event)"
                          url="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer"/>
        <esri:GenerateRendererTask id="generateRendererTask"
                                   executeComplete="generateRendererTask_executeCompleteHandler(event)"
                                   fault="esriService_faultHandler(event)"
                                   url="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"/>
        <esri:AlgorithmicColorRamp id="colorRamp"
                                   algorithm="esriHSVAlgorithm"
                                   fromColor="{colorRampFromColor}"
                                   toColor="{colorRampToColor}"/>
        
    </fx:Declarations>
    
    <s:controlBarContent>
        <s:RichText width="100%">
            Project text here...
        </s:RichText>
    </s:controlBarContent>
    
    <!-- MAP ELEMENTS -->
    <esri:Map id="map" logoVisible="false">
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/arcgis/rest/services/Ocean_Basemap/MapServer"/>
        
        <!-- Define the dynamic layers below -->
        <esri:ArcGISDynamicMapServiceLayer id="esriCensus" name="Pop 2000"
                                           alpha="0.9"
                                           load="esriCensus_loadHandler(event)"
                                           url="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer"
                                           visible="true">
            <esri:visibleLayers>
                <s:ArrayList>
                    <fx:Number>3</fx:Number>
                </s:ArrayList>
            </esri:visibleLayers>
        </esri:ArcGISDynamicMapServiceLayer>
        
        <!-- Define the map extent below -->
        <esri:extent>
            <esri:Extent xmin="-16971000" ymin="615000" xmax="-4448000" ymax="8110000">
                <esri:SpatialReference wkid="102100"/>
            </esri:Extent>
        </esri:extent>
    </esri:Map>
    
    <!-- LAYER WINDOW -->
    <s:Group id="layerGroup"
             width="150" height="100"
             left="100" top="20">
        <s:RectangularDropShadow left="0" right="0" top="0" bottom="0"
                                 alpha="1"
                                 angle="90"
                                 blRadius="5"
                                 blurX="6"
                                 blurY="6"
                                 brRadius="5"
                                 color="#000000"
                                 distance="1"
                                 tlRadius="5"
                                 trRadius="5"/>
        <s:Rect left="0" right="0" top="0" bottom="0"
                radiusX="5"
                radiusY="5">
            <s:fill>
                <s:SolidColor alpha="0.7" color="0xC5C5C9"/>
            </s:fill>
        </s:Rect>
        <s:VGroup width="100%"
                  left="5" top="5"
                  paddingBottom="5"
                  paddingLeft="5"
                  paddingRight="5"
                  paddingTop="10">
            <s:HGroup width="100%"
                      gap="5"
                      verticalAlign="middle">
                <s:Label text="Layer"/>
                <s:DropDownList width="100%"
                                change="layer_changeHandler(event)"
                                requireSelection="true"
                                selectedIndex="0">
                    <s:dataProvider>
                        <s:ArrayList>
                            <fx:Object data="states" label="States"/>
                            <fx:Object data="counties" label="Counties"/>
                        </s:ArrayList>
                    </s:dataProvider>
                </s:DropDownList>
            </s:HGroup>
        </s:VGroup>
    </s:Group>
    
    <!-- LEGEND WINDOW -->
    <s:Group id="legendGroup"
             width="250" height="250"
             right="5" bottom="20">
        <s:RectangularDropShadow left="0" right="0" top="0" bottom="0"
                                 alpha="1"
                                 angle="90"
                                 blRadius="5"
                                 blurX="6"
                                 blurY="6"
                                 brRadius="5"
                                 color="#000000"
                                 distance="1"
                                 tlRadius="5"
                                 trRadius="5"/>
        <s:Rect left="0" right="0" top="0" bottom="0"
                radiusX="5"
                radiusY="5">
            <s:fill>
                <s:SolidColor alpha="0.7" color="0xC5C5C9"/>
            </s:fill>
        </s:Rect>
        <esri:Legend id="legend"
                     left="5" right="5" top="5" bottom="5"
                     layers="{[esriCensus]}"
                     map="{map}" 
                     skinClass="com.esri.ags.samples.skins.GRLegendSkin"
                     visible="{esriCensus.loaded}"/>
    </s:Group>
    
</s:Application>

RobertScheitlin__GISP

Brian,

  So here is the renderer changing based on your selection in the dropdown.

1. I had to change several things but notice the dropdownlist dataprovider uses the layer id from the map service as the data and not a string like you began with.
2. I use a dictionary to keep track of the layerMapSource info, base url, and layer id
3. In the detailsTask_getAllDetailsCompleteHandler I removed the if statement that only proceeded if it was the states layer.
4. In the layer_changeHandler I check for the dropdownlists data get proper url for the generate renderer function.

You have more work to do if you want this to work with more than one Map Service though.

<?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:mx="library://ns.adobe.com/flex/mx"   
               xmlns:esri="http://www.esri.com/2008/ags"  
               minWidth="955" minHeight="600">  
    
    <fx:Script>  
        <![CDATA[  
            import com.esri.ags.SpatialReference;
            import com.esri.ags.events.DetailsEvent;
            import com.esri.ags.events.GenerateRendererEvent;
            import com.esri.ags.events.LayerEvent;
            import com.esri.ags.geometry.Extent;
            import com.esri.ags.layers.supportClasses.AllDetails;
            import com.esri.ags.layers.supportClasses.DynamicLayerInfo;
            import com.esri.ags.layers.supportClasses.LayerDetails;
            import com.esri.ags.layers.supportClasses.LayerDrawingOptions;
            import com.esri.ags.layers.supportClasses.LayerMapSource;
            import com.esri.ags.renderers.ClassBreaksRenderer;
            import com.esri.ags.tasks.supportClasses.ClassBreaksDefinition;
            import com.esri.ags.tasks.supportClasses.GenerateRendererParameters;
            
            import mx.controls.Alert;
            import mx.rpc.events.FaultEvent;
            
            import spark.events.IndexChangeEvent;  
            
            
            /**************************************  
             * Define variables below  
             **************************************/  
            
            private var dynamicLayerInfosArr:Array;  
            private var layerMapSource:LayerMapSource;  
            private var generateRendererParams:GenerateRendererParameters = new GenerateRendererParameters();  
            private var classBreaksDefinition:ClassBreaksDefinition = new ClassBreaksDefinition();  
            
            private var layerDetailsArr:Array = [];  
            private var _breakCount:Number = 5;  
            private var _classificationMethod:String = ClassBreaksDefinition.CLASSIFY_QUANTILE;  
            private var _classificationField:String = "pop2000";  
            
            [Bindable]  
            private var colorRampFromColor:uint = 0xFFFFCC;  
            [Bindable]  
            private var colorRampToColor:uint = 0x253494;  
            private var layerMapSourceDict:Dictionary = new Dictionary();
            
            /**************************************  
             * Functions below  
             **************************************/  
            
            protected function esriCensus_loadHandler(event:LayerEvent):void  
            {  
                dynamicLayerInfosArr = esriCensus.createDynamicLayerInfosFromLayerInfos();  
                detailsTask.getAllDetails();  
            }  
            
            protected function detailsTask_getAllDetailsCompleteHandler(event:DetailsEvent):void  
            {  
                var details:AllDetails = event.allDetails;  
                layerDetailsArr = details.layersDetails;  
                var layerDetails:LayerDetails;  
                
                for (var i:int = 0; i < layerDetailsArr.length; i++)  
                {  
                    layerDetails = layerDetailsArr;  
                    if (dynamicLayerInfosArr)  
                    {
                        layerMapSource = DynamicLayerInfo(dynamicLayerInfosArr).source as LayerMapSource;
                        layerMapSourceDict = {
                            layermapsource: layerMapSource,
                            layerid: layerMapSource.mapLayerId,
                            baseurl: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer"
                        }
                        generateRendererTask.source = layerMapSource;  
                        classBreaksDefinition.breakCount = _breakCount;  
                        classBreaksDefinition.classificationField = _classificationField;  
                        classBreaksDefinition.classificationMethod = _classificationMethod;  
                        classBreaksDefinition.colorRamp = colorRamp;  
                        generateRendererParams.classificationDefinition = classBreaksDefinition;  
                        generateRendererTask.execute(generateRendererParams);  
                    }  
                }  
            }  
            
            protected function esriService_faultHandler(event:FaultEvent):void  
            {  
                Alert.show("Error: " + event.fault.faultString, "Error code: " + event.fault.faultCode);  
            }  
            
            protected function generateRendererTask_executeCompleteHandler(event:GenerateRendererEvent):void  
            {  
                var renderer:ClassBreaksRenderer = event.renderer as ClassBreaksRenderer;  
                var layerDrawingOptions:LayerDrawingOptions = new LayerDrawingOptions();  
                layerDrawingOptions.layerId = layerMapSource.mapLayerId; //states layer id in the service  
                layerDrawingOptions.renderer = renderer;  
                esriCensus.alpha = 0.9;  
                esriCensus.layerDrawingOptions = [ layerDrawingOptions ];  
                legend.refresh(); // refresh the legend component to keep in-sync  
            }  
            
            protected function generateRenderer():void  
            {  
                classBreaksDefinition.breakCount = _breakCount;  
                classBreaksDefinition.classificationField = _classificationField;  
                classBreaksDefinition.classificationMethod = _classificationMethod;  
                generateRendererParams.classificationDefinition = classBreaksDefinition;  
                classBreaksDefinition.colorRamp = colorRamp;  
                generateRendererTask.execute(generateRendererParams);  
            }  
            
            private function decimalToPercentage(decimalValue:Number):String   
            {  
                var percentage:Number = decimalValue * 1000;  
                var roundedPercentage:Number = Math.round(percentage);  
                var roundedPercentage2:Number = roundedPercentage / 10;  
                var percentAsString:String = roundedPercentage2 + "%";  
                
                return percentAsString;
            }  
            
            protected function layer_changeHandler(event:IndexChangeEvent):void  
            {  
                var selectedItem:Object = DropDownList(event.currentTarget).selectedItem;
                esriCensus.visibleLayers.removeAll();
                esriCensus.visibleLayers.addItem(layerMapSourceDict[selectedItem.data].layerid); 
                generateRendererTask.url = layerMapSourceDict[selectedItem.data].baseurl + "/" + layerMapSourceDict[selectedItem.data].layerid;
                layerMapSource = layerMapSourceDict[selectedItem.data].layermapsource;
                generateRenderer();
            }  
            
        ]]>  
    </fx:Script>  
    
    <fx:Declarations>  
        <esri:DetailsTask id="detailsTask"  
                          fault="esriService_faultHandler(event)"  
                          getAllDetailsComplete="detailsTask_getAllDetailsCompleteHandler(event)"  
                          url="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer"/>  
        <esri:GenerateRendererTask id="generateRendererTask"  
                                   executeComplete="generateRendererTask_executeCompleteHandler(event)"  
                                   fault="esriService_faultHandler(event)"  
                                   url="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3"/>  
        <esri:AlgorithmicColorRamp id="colorRamp"  
                                   algorithm="esriHSVAlgorithm"  
                                   fromColor="{colorRampFromColor}"  
                                   toColor="{colorRampToColor}"/>  
        
    </fx:Declarations>  
    
    <s:controlBarContent>  
        <s:RichText width="100%">  
            Project text here...  
        </s:RichText>  
    </s:controlBarContent>  
    
    <!-- MAP ELEMENTS -->  
    <esri:Map id="map" logoVisible="false">  
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/arcgis/rest/services/Ocean_Basemap/MapServer"/>  
        
        <!-- Define the dynamic layers below -->  
        <esri:ArcGISDynamicMapServiceLayer id="esriCensus" name="Pop 2000"  
                                           alpha="0.9"  
                                           load="esriCensus_loadHandler(event)"  
                                           url="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer"  
                                           visible="true">  
            <esri:visibleLayers>  
                <s:ArrayList>  
                    <fx:Number>3</fx:Number>  
                </s:ArrayList>  
            </esri:visibleLayers>  
        </esri:ArcGISDynamicMapServiceLayer>  
        
        <!-- Define the map extent below -->  
        <esri:extent>  
            <esri:Extent xmin="-16971000" ymin="615000" xmax="-4448000" ymax="8110000">  
                <esri:SpatialReference wkid="102100"/>  
            </esri:Extent>  
        </esri:extent>  
    </esri:Map>  
    
    <!-- LAYER WINDOW -->  
    <s:Group id="layerGroup"  
             width="150" height="100"  
             left="100" top="20">  
        <s:RectangularDropShadow left="0" right="0" top="0" bottom="0"  
                                 alpha="1"  
                                 angle="90"  
                                 blRadius="5"  
                                 blurX="6"  
                                 blurY="6"  
                                 brRadius="5"  
                                 color="#000000"  
                                 distance="1"  
                                 tlRadius="5"  
                                 trRadius="5"/>  
        <s:Rect left="0" right="0" top="0" bottom="0"  
                radiusX="5"  
                radiusY="5">  
            <s:fill>  
                <s:SolidColor alpha="0.7" color="0xC5C5C9"/>  
            </s:fill>  
        </s:Rect>  
        <s:VGroup width="100%"  
                  left="5" top="5"  
                  paddingBottom="5"  
                  paddingLeft="5"  
                  paddingRight="5"  
                  paddingTop="10">  
            <s:HGroup width="100%"  
                      gap="5"  
                      verticalAlign="middle">  
                <s:Label text="Layer"/>  
                <s:DropDownList width="100%"  
                                change="layer_changeHandler(event)"  
                                requireSelection="true"  
                                selectedIndex="0">  
                    <s:dataProvider>  
                        <s:ArrayList>  
                            <fx:Object data="3" label="States"/>  
                            <fx:Object data="2" label="Counties"/>  
                        </s:ArrayList>  
                    </s:dataProvider>  
                </s:DropDownList>  
            </s:HGroup>  
        </s:VGroup>  
    </s:Group>  
    
    <!-- LEGEND WINDOW -->  
    <s:Group id="legendGroup"  
             width="250" height="250"  
             right="5" bottom="20">  
        <s:RectangularDropShadow left="0" right="0" top="0" bottom="0"  
                                 alpha="1"  
                                 angle="90"  
                                 blRadius="5"  
                                 blurX="6"  
                                 blurY="6"  
                                 brRadius="5"  
                                 color="#000000"  
                                 distance="1"  
                                 tlRadius="5"  
                                 trRadius="5"/>  
        <s:Rect left="0" right="0" top="0" bottom="0"  
                radiusX="5"  
                radiusY="5">  
            <s:fill>  
                <s:SolidColor alpha="0.7" color="0xC5C5C9"/>  
            </s:fill>  
        </s:Rect>  
        <esri:Legend id="legend"  
                     left="5" right="5" top="5" bottom="5"  
                     layers="{[esriCensus]}"  
                     map="{map}"    
                     visible="{esriCensus.loaded}"/>  
    </s:Group>  
    
</s:Application>