Map Layers On/Off for Multiple Map Services

AmySmith — Tue, 24 Aug 2010 22:23:30 GMT

Hello,

I'm interested in an interface feature that would allow users to check map layers on and off, much like this example - http://help.arcgis.com/en/webapi/flex/samples/index.html?sample=Dynamic_TOC - but with a data grid fed by various dynamic and tiled map service layers. Does anyone have any thoughts on how to carry this out using the API for Flex?

Take care,

Amy Smith

Re: Map Layers On/Off for Multiple Map Services

AmySmith1 — Sat, 11 Dec 2021 15:14:44 GMT

Hello!

If anyone's interested, I was able to develop a data grid component that allows the user to turn map layers on and off, sourcing from multiple tiled and dynamic map services (with a good kick start by the example I linked to in my previous post - thanks!).

For the Data Grid

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    creationComplete="populateArray()">
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.Map;
   import com.esri.ags.layers.ArcGISDynamicMapServiceLayer;
   import com.esri.ags.layers.ArcGISTiledMapServiceLayer;
   import com.esri.ags.layers.Layer;
   import com.esri.ags.layers.supportClasses.LayerInfo;
   
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.utils.ObjectUtil;
   
   private var _map:Map;
   private var dp:ArrayCollection = new ArrayCollection();
   
   public function get map():Map
   {
    return _map;
   }
   
   public function set map(value:Map):void
   {
    _map = value;
   }
   
   private function populateArray():void
   {
    var NumLayers:int = _map.layerIds.length;
    var mapLayer:Layer = new Layer();
    var layerInfos:Array = new Array();
    
    for (var i:int=0; i<NumLayers; i++)
    {
     mapLayer = (_map.getLayer(_map.layerIds));
     
     if (mapLayer.className == 'ArcGISDynamicMapServiceLayer')
     {
      layerInfos = ArcGISDynamicMapServiceLayer(mapLayer).layerInfos;
      var infoArrayLength:int = layerInfos.length;
      
      for (var n:int; n<infoArrayLength; n++)
      {
       dp.addItem({name: layerInfos.name, defaultVisibility: layerInfos.defaultVisibility, mapType: mapLayer.className, mapID: mapLayer.id, layerID: layerInfos.id});
      }
     }
      
     else if (mapLayer.className == 'ArcGISTiledMapServiceLayer')
     {
      dp.addItem({name: mapLayer.id, defaultVisibility: mapLayer.visible, mapType: mapLayer.className, mapID: mapLayer.id})
     }
    }
    
    setDataProvider();
   }
   
   private function setDataProvider():void
   {
    dataProvider = dp;
   }
   
   public function showLayer(layerIndex:int):void
   {
    if (dp[layerIndex].mapType == 'ArcGISTiledMapServiceLayer')
    {
     _map.getLayer(dp[layerIndex].mapID).visible = true;
    }
     
    else if (dp[layerIndex].mapType == 'ArcGISDynamicMapServiceLayer')
    {
     var visibleLayers:ArrayCollection = (ArcGISDynamicMapServiceLayer(_map.getLayer(dp[layerIndex].mapID)).visibleLayers)
     
     visibleLayers.addItem(dp[layerIndex].layerID); 
    }
   }
   
   public function hideLayer(layerIndex:int):void
   {
    if (dp[layerIndex].mapType == 'ArcGISTiledMapServiceLayer')
    {
     _map.getLayer(dp[layerIndex].mapID).visible = false;
    }
     
    else if (dp[layerIndex].mapType == 'ArcGISDynamicMapServiceLayer')
    {
     
     var visibleLayers:ArrayCollection = (ArcGISDynamicMapServiceLayer(_map.getLayer(dp[layerIndex].mapID)).visibleLayers)
     var idIndex:int = visibleLayers.getItemIndex(int(dp[layerIndex].layerID));
     
     if (idIndex != -1)
     {
      visibleLayers.removeItemAt(idIndex);
     } 
     
    }
    
   }
   
   private function removeBusyCursor(event:Event):void
   {
    cursorManager.removeBusyCursor();
   }
   
  ]]>
 </fx:Script>
 
 <mx:columns>
  <mx:DataGridColumn dataField="defaultVisibility" headerText="Visibility" width="70" itemRenderer="components.LayerVisibilityRenderer"/>
  <mx:DataGridColumn dataField="name" headerText="Layer Name"/>
 </mx:columns>
 
</mx:DataGrid>

For the Renderer

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx" horizontalAlign="center"
   implements="mx.controls.listClasses.IDropInListItemRenderer">
 
 <fx:Script>
  <![CDATA[
  import com.esri.ags.layers.supportClasses.LayerInfo;
  
  import mx.controls.Alert;
  import mx.controls.listClasses.BaseListData;
  
  private var _listData:BaseListData;
  
  public function get listData():BaseListData
  {
  return _listData;
  }
  
  public function set listData(value:BaseListData):void
  {
  _listData = value;
  }
  
  private function clickHandler(event:MouseEvent):void
  {
  var layerIndex:int = listData.rowIndex;
  
  if (cb.selected)
  {
  LayerVisibility(listData.owner).showLayer(layerIndex);
  
  }
  else
  {
  LayerVisibility(listData.owner).hideLayer(layerIndex);
  }
  }
  ]]>
 </fx:Script>
 
 <mx:CheckBox id="cb" selected="{data.defaultVisibility}" click="clickHandler(event)"/>
 
</mx:HBox>

Have a lovely Wednesday!

- Amy Smith

Re: Map Layers On/Off for Multiple Map Services

tanyabisen — Tue, 26 Jul 2011 10:17:05 GMT

Hey Amy,

I am trying to implement your code.. just wanted to clarify if you could share the code with me so that I will be able to understand the process in a better manner.. I have a DynamicMapService and i want the one layer to be seen when the map loads alongwith its ON in TOC..and later user can turn ON other layers..

Can you please help me with this..I am a flex newbie and struggling big time to understand the things

Thanks

topic Re: Map Layers On/Off for Multiple Map Services in ArcGIS API for Flex Questions

Map Layers On/Off for Multiple Map Services

Re: Map Layers On/Off for Multiple Map Services

Re: Map Layers On/Off for Multiple Map Services