topic Re: Multiple screen - side by side layer comparison in ArcGIS API for Flex Questions

Multiple screen - side by side layer comparison

TracySchloss — Mon, 20 Dec 2010 20:32:33 GMT

I am starting out with a map and a combo box with 3 different layers in it. As you pick different layer names from the combo box, that layer is turned on and the other turns off.

<esri:Map id="mainMap" width="100%" height="100%"
     units="{Units.METERS}" visible="true" initialize"initMap()">

     <esri:extent >
              <esri:Extent id="startExtent" xmin="-10944809" ymin="4276422" xmax="-9568555" ymax="5020001">
               <esri:SpatialReference wkid="102100"/>
              </esri:Extent>
             </esri:extent>
<esri:ArcGISTiledMapServiceLayer id="medIncomeLayer" alpha="0.7" visible="true"
        url="http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Household_Income/MapServer" />

        <esri:ArcGISTiledMapServiceLayer id="socialVunLayer" alpha="0.7" visible="false"
        url="http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Social_Vulnerability_Index/MapServer" />

        <esri:ArcGISTiledMapServiceLayer id="unemployLayer" alpha="0.7" visible="false"
        url="http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Unemployment_Rate/MapServer"

   </esri:Map>

This is the combo box:

mx:ComboBox id="layerPickList1" change="changeMap(mainMap)"
paddingBottom="10" paddingTop="10"
paddingLeft="10" paddingRight="10"
dataProvider="{comboList}" x="67"/>

This is the array that is populating it:

           public var comboList:Array = ["Median Income","Social Vunerability","Unemployment"];
           public var LayerList:Array = ["medIncomeLayer","socialVunLayer","unemployLayer"];

           [Bindable]
           public var LayerArray:ArrayCollection = new ArrayCollection;
This is my function that changes the map:

public function changeMap (myMap:Map): void {
             var mapName:String = myMap.id;
          var chosenLayer:String = layerPickList1.text;
          var listPosition:Number = comboList.indexOf(chosenLayer);
          var displayLayer:Object = LayerList[comboList.indexOf(chosenLayer)];

       for each (var mapLayer:Layer in LayerArray) {
      trace (mapLayer.id);
          if (mapLayer.id == displayLayer) {
           mapLayer.visible=true;
           } else {
             mapLayer.visible=false;
            }
          }
         }

I have a function that runs when the map initializes that just puts the 3 layers of the map in an arraycollection.

public function initMap () : void {

LayerArray.addItem(medIncomeLayer);
LayerArray.addItem(socialVunLayer);
LayerArray.addItem(unemployLayer);
}

My issue is that I want to be able to open up additional maps and use the same 3 layers. I can't just use the arraycollection I've made on the 2nd /3rd / 4th maps because all this does is move the layers from my original main map and put it on the newly created maps.

I know I can add set more maps and use the same layers again with different names and set up more comboboxes too for each. However this sounds like such a sloppy hack-y way to go about it. Mostly I can't figure out a work around to the fact I can't seem to clone the arraycollection. I've looked all around and found some working examples on the web (http://nces.ed.gov/surveys/sdds/ed/index.asp is posted on the ESRI forum but without the code.

Re: Multiple screen - side by side layer comparison

TracySchloss — Wed, 22 Dec 2010 19:10:16 GMT

I've worked on this more and I am able to start a 2nd map with a new layer and it will inherit the map extent of the original map. This is sort of working now, but I'm stuck on the extent change listeners. It starts out to work OK, but since I have multiple maps, the changing extents are just looping around each other. I was wondering if maybe I should be finding a way to systematically be turning on/off the extent change listeners so I don't end up in an infinite loop. You'll see I have different functions for the extent change and that I'm attempting to turn the listeners off and on depending on which map has the focus.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:esri="http://www.esri.com/2008/ags"
    xmlns:components="components.*"
    layout="horizontal"
    pageTitle="" backgroundColor="#F8EEC5"
    initialize="initMap()">


    <mx:Script>
        <![CDATA[
         import com.esri.ags.SpatialReference;
         import com.esri.ags.Map;
         import mx.collections.ArrayCollection;
         import com.esri.ags.layers.Layer;
            import com.esri.ags.layers.ArcGISDynamicMapServiceLayer;
            import com.esri.ags.layers.ArcGISTiledMapServiceLayer;
            import com.esri.ags.geometry.Extent;
            import com.esri.ags.events.ExtentEvent;
            import com.esri.ags.geometry.Extent;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.utils.WebMercatorUtil;
            import com.esri.ags.Units;
            import mx.containers.Canvas;
            import mx.controls.Alert;
            import mx.utils.ObjectUtil;
            import flash.utils.ByteArray;
            import mx.managers.FocusManager;

           public var comboList:Array = ["Median Income","View Social Vunerability","View Unemployment"];
           public var LayerList:Array = ["medIncomeLayer","socialVunLayer","unemployLayer"];

//         public var medIncomeLayer:ArcGISTiledMapServiceLayer = new ArcGISTiledMapServiceLayer;
           public var socialVunLayer:ArcGISTiledMapServiceLayer = new ArcGISTiledMapServiceLayer;
           public var unemployLayer:ArcGISTiledMapServiceLayer = new ArcGISTiledMapServiceLayer;

           [Bindable]
           public var LayerArray:ArrayCollection = new ArrayCollection;

           public var canvasCounter:Number = 1;

           public var mapArray:ArrayCollection = new ArrayCollection;

           public var map2:Map = new Map ();
           public var map3:Map = new Map ();

   public function initMap() : void {

    socialVunLayer.id = "socialVunLayer";
    socialVunLayer.alpha=0.7;
    socialVunLayer.visible=true;
    socialVunLayer.url= "http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Social_Vulnerability_Index/MapServer";

    unemployLayer.id="unemployLayer";
    unemployLayer.alpha=0.7;
    unemployLayer.visible=true;
    unemployLayer.url="http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Unemployment_Rate/MapServer";

   }



            public function changeMap(): void {
          var chosenLayer:String = layerPickList1.text;

          if (canvasCounter < 3) {
      canvasCounter = canvasCounter + 1;
    var myMap:Map = new Map ();
    var eventName:String = "onExtentChange"+canvasCounter;

    myMap.id="map"+ canvasCounter;

     switch (eventName) {
      case "onExtentChange2":
      myMap = map2;
      myMap.id="map2";
      myMap.addEventListener(ExtentEvent.EXTENT_CHANGE, onExtentChange2);

      break;

      case "onExtentChange3":
      myMap = map3;
      myMap.id="map3";
      myMap.addEventListener(ExtentEvent.EXTENT_CHANGE, onExtentChange);

      break;
     }

      var beginExtent:Extent = mainMap.extent;
      var spatRef:SpatialReference = mainMap.extent.spatialReference;

     myMap.extent = beginExtent;
     myMap.extent.spatialReference = mainMap.extent.spatialReference;


     switch (chosenLayer) {
      case "View Social Vunerability":
      myMap.addLayer(socialVunLayer);

      break;

      case "View Unemployment":
      myMap.addLayer(unemployLayer);
      break;
     }

      mapBox.addChild(myMap);
    myMap.extent = mainMap.extent;
    myMap.extent.spatialReference = mainMap.extent.spatialReference;
    myMap.scale = mainMap.scale;          }else {
    Alert.show ("Maximum number of maps reached") ;
    }
    mainMap.addEventListener(ExtentEvent.EXTENT_CHANGE, onExtentChange);

         }

            public function onExtentOff () : void {
             trace ("extentEvent turned off");
            }
         public function onExtentChange(event:ExtentEvent):void {
          map2.removeEventListener(ExtentEvent.EXTENT_CHANGE,onExtentOff);
          map3.removeEventListener(ExtentEvent.EXTENT_CHANGE,onExtentOff);
          map2.extent = mainMap.extent;
          map3.extent = mainMap.extent;
          map2.addEventListener(ExtentEvent.EXTENT_CHANGE, onExtentChange2);
          map3.addEventListener(ExtentEvent.EXTENT_CHANGE, onExtentChange3);
         }

         public function onExtentChange2(event:ExtentEvent):void {
          mainMap.removeEventListener(ExtentEvent.EXTENT_CHANGE,onExtentOff);
          map3.removeEventListener(ExtentEvent.EXTENT_CHANGE,onExtentOff);
          mainMap.extent = map2.extent;
          map3.extent = map2.extent;
          mainMap.addEventListener(ExtentEvent.EXTENT_CHANGE, onExtentChange);
          map3.addEventListener(ExtentEvent.EXTENT_CHANGE, onExtentChange3);
         }

         public function onExtentChange3(event:ExtentEvent):void {
          mainMap.removeEventListener(ExtentEvent.EXTENT_CHANGE,onExtentOff);
          map2.removeEventListener(ExtentEvent.EXTENT_CHANGE,onExtentOff);
          mainMap.extent = map3.extent;
          map2.extent = map3.extent;
          mainMap.addEventListener(ExtentEvent.EXTENT_CHANGE, onExtentChange);
          map2.addEventListener(ExtentEvent.EXTENT_CHANGE, onExtentChange2);
         }

     ]]>
    </mx:Script>


<mx:VBox height="100%" width="100%">
      <mx:ComboBox id="layerPickList1" change="changeMap()"
         paddingBottom="10" paddingTop="10"
         paddingLeft="10" paddingRight="10"
        dataProvider="{comboList}" x="67"/>

      <mx:HBox visible="false" includeInLayout="false">
       <mx:Label text="Current map extent:" fontWeight="bold"/>
       <mx:Label text="xmin: {mainMap.extent.xmin.toFixed(3)}"/>
       <mx:Label text="ymin: {mainMap.extent.ymin.toFixed(3)}"/>
       <mx:Label text="xmax: {mainMap.extent.xmax.toFixed(3)}"/>
       <mx:Label text="ymax: {mainMap.extent.ymax.toFixed(3)}"/>
       <mx:Label text="Current map scale:" fontWeight="bold"/>
        <mx:Label text="1:{mainMap.scale.toFixed(0)}"/>
      </mx:HBox>

<mx:HBox height="100%" width="100%" id="mapBox">

    <esri:Map id="mainMap"
     units="{Units.METERS}" visible="true" >

     <esri:extent >
              <esri:Extent id="startExtent" xmin="-10944809" ymin="4276422" xmax="-9568555" ymax="5020001">
              </esri:Extent>
             </esri:extent>

        <esri:ArcGISTiledMapServiceLayer id="medIncomeLayer" alpha="0.7" visible="true"
        url="http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Household_Income/MapServer" />

   </esri:Map>
</mx:HBox>
</mx:VBox>
</mx:Application>

Re: Multiple screen - side by side layer comparison

MarkHoyland — Thu, 23 Dec 2010 03:46:51 GMT

Hi,
This project sounded like a fun way to wind down before the break, so here you are.
(rename to .mxml)

You can add/remove maps, click a map to make it "active" then change base layers on that map.
Change extent on the "active" map and all other maps will follow the extent.

If you are not sure how something is working I am happy to try to explain.

Merry Christmas.

Re: Multiple screen - side by side layer comparison

TracySchloss — Thu, 23 Dec 2010 12:40:52 GMT

Thank you very much. I will work with this. I had hoped that I could have any extent change on any map reset the remaining maps. Is this just wishful thinking? My current code actually does do that, but my multiple extent change listeners are at cross purposes with one another. The extents do all change, but the trace functions I've put in show that it is just looping around and around.

Re: Multiple screen - side by side layer comparison

TracySchloss — Thu, 23 Dec 2010 12:57:23 GMT

Now that I've played with it a bit more, it does seem to be listening and responding to extent changes from more than just the original map. Thanks very much and Merry Christmas!