Fade between basemaps tool

[Anonymous User]

There was a pretty large discussion about how to Fade between basemaps on the old forum page.  Since those pages are now closed for posting, I wanted to bring back the discussion.  Here is the link to the old forum topic - http://forums.esri.com/Thread.asp?c=158&f=2421&t=286723

The tool envisioned would enable a HSlider or VSlider to fadeout of one basemap and fadein to another.  We started to stub out what a good implementation of this functionality would look like, but in case we don't get there here's a pic of the plan.

Thanks Chris Olsen and Chelsea Wang. 

[notes: whole number]  Math.round(MySlider.value - 0.5);





Regards,
Doug Carroll, ESRI Support Services SDK Team

[RobertScheitlin__GISP]

Doug,

   Thanks for resurecting that thread. It reminded me I hadn't published a new widget in a while...

Here are some screen shots of what it will look like:

[ATTACH=CONFIG]8549[/ATTACH]

Hopefully ready in a week or so.

Enhanced Map Switcher widget.

[ChristopherOlsen]

We did get it to work, but it's a little jumpy when it hits the next map service.  Essentially, it should adjust for any number of map services as long as you change the slider value to correspond to however many layers you include with it.

Robert- I'm sure yours is a bit smoother based on your screenshot....  Looking forward to seeing it!

<?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" minWidth="955" minHeight="600">

    <fx:Script>
         <![CDATA[
             import com.esri.ags.layers.ArcGISDynamicMapServiceLayer;
             
             import mx.collections.ArrayCollection;
                      
             protected function MySlider_changeHandler(event:Event):void
             {
                 var x:Number = Math.round(MySlider.value - .5);
                 var y:Number = MySlider.value;
                 var z:Number = x + 1;

                 var lyr1:ArcGISTiledMapServiceLayer = MyMap.layers;
                 var lyr2:ArcGISTiledMapServiceLayer = MyMap.layers;
                 
                 lyr1.alpha = y - x;
                 lyr2.alpha = 1 - (y - x);

             }
         ]]>
    </fx:Script>

    <fx:Declarations>
         
    </fx:Declarations>
    <esri:Map id="MyMap">
         <esri:ArcGISTiledMapServiceLayer id="l0" url="http://server1/ArcGIS/rest/services/Basemaps/map1/MapServer" alpha="0"/>
         <esri:ArcGISTiledMapServiceLayer id="l1" url="http://server1/ArcGIS/rest/services/Basemaps/map2/MapServer" alpha="0"/>
         <esri:ArcGISTiledMapServiceLayer id="l2" url="http://server1/ArcGIS/rest/services/Basemaps/map3/MapServer" alpha="0"/>
         <esri:ArcGISTiledMapServiceLayer id="l3" url="http://server1/ArcGIS/rest/services/Basemaps/map4/MapServer" alpha="0"/>
         <esri:ArcGISTiledMapServiceLayer id="l4" url="http://server1/ArcGIS/rest/services/Basemaps/map5/MapServer" alpha="0"/>
             
    </esri:Map>
    <s:Panel id="aPanel" title="Slider" height="100" width="500" bottom="20" horizontalCenter="0">
   
 <s:HSlider width="90%" id="MySlider" minimum="0" maximum="3.99" stepSize=".05" value="0" change="MySlider_changeHandler(event)" />
   
    </s:Panel>
    
    
</s:Application>

[MarkHoyland]

Try this one.

This is a modification from my post at http://forums.esri.com/Thread.asp?c=158&f=2421&t=291069&mc=12#920431

<?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" 
      minWidth="955" minHeight="600">
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.layers.Layer;
   
   import mx.events.FlexEvent;
   
   private var baseLayers:Vector.<Layer> = new Vector.<Layer>();
   
   protected function MySlider_changeHandler(event:Event):void
   {
    var currentValue:Number = event.currentTarget.value;
    var floorValue:Number = Math.floor(event.currentTarget.value);
    
    trace("Current Value: " + currentValue + " Floor Value: " + floorValue);
    
    //set the alpha if it is les than the the max value 
    if (currentValue < event.currentTarget.maximum)
    {
     baseLayers[floorValue].alpha = currentValue - floorValue;
     trace("Alpha (Current - Floor): " + (currentValue - floorValue));
    }
    //set the alpha for the previous layer one OR the last layer
    baseLayers[floorValue - 1].alpha = 1 - (currentValue - floorValue);
    trace("Previous Alpha: " + (1 - (currentValue - floorValue)));
    
    //reset the alpha to zero for the layers that are not being merged.
    //This is needed to cater for a track click
    for (var i:int = 0; i < baseLayers.length; i++)
    {
     if (i > floorValue || i < floorValue - 1)
     {
      baseLayers.alpha = 0;
     }
    }
   }
   
   /*
   Load the layers into the vector. Layers can be loaded by any method.
   This method adds all ArcGISTiledMapServiceLayer's that are in the map.
   You could hard code the layers to add.
   You could also use an xml file or webservice etc.
   */
   protected function MyMap_creationCompleteHandler(event:FlexEvent):void
   {
    for each (var layer:ArcGISTiledMapServiceLayer in MyMap.layers)
    {
     baseLayers.push(layer);
    }
    MySlider.minimum = 1;
    MySlider.maximum = baseLayers.length;
    MySlider.value = 0;
   }
   
  ]]>
 </fx:Script>
 
 <fx:Declarations>
 </fx:Declarations>
 
 <esri:Map id="MyMap" creationComplete="MyMap_creationCompleteHandler(event)">
  <esri:ArcGISTiledMapServiceLayer id="l0" url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" alpha="1"/>
  <esri:ArcGISTiledMapServiceLayer id="l1" url="http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer" alpha="0"/>
  <esri:ArcGISTiledMapServiceLayer id="l2" url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer" alpha="0"/>
  <esri:ArcGISTiledMapServiceLayer id="l3" url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" alpha="0"/>
  <esri:ArcGISTiledMapServiceLayer id="l4" url="http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer" alpha="0"/>
 </esri:Map>
 <s:Panel id="aPanel" title="Slider" height="100" width="500" bottom="20" horizontalCenter="0">
  <s:layout>
   <s:VerticalLayout paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10"/>
  </s:layout>
  <s:HSlider width="100%" id="MySlider" 
       minimum="1" maximum="5" 
       stepSize=".01" 
       value="0" 
       change="MySlider_changeHandler(event)" />
 </s:Panel>
</s:Application>

[ChristopherOlsen]

Mark-
Thanks!  This looks great.  I gave it a run and everything is looking good.  I was even able to load a FeatureService on top of everything, which is what I wanted.

The only issue I ran into was incorporating Bing maps into it.  For some reason, no matter where I put it in the code, it always sits on top.  Is it because it's not defined in the creationCompleteHandler?

[ChristopherOlsen]

I might have spoken too soon- the Feature Service is not working in the app anymore...

[MarkHoyland]

It should work with any subclass of com.esri.ags.layers.Layer.
I do not have a Bing Maps key so I can not test, but a VETiledLayer is a subclass of Layer.

You need to add the layers to 'baseLayers'. My original code is only looking for ArcGISTiledMapServiceLayers.

protected function MyMap_creationCompleteHandler(event:FlexEvent):void
{
 baseLayers.push(yourBingLayer);
 
 MySlider.minimum = 1;
 MySlider.maximum = baseLayers.length;
 MySlider.value = 0;
}

What is a Feature Service?
Do you mean ArcGISDynamicMapServiceLayer or FeatureLayer.

Either way they both subclass Layer and will work. The code below now includes an ArcGISDynamicMapServiceLayer and FeatureLayer in the Map.
You can manually add the layers to 'baseLayers'.

//Manually add to 'baseLayers'
baseLayers.push(l5);
baseLayers.push(l6);


<esri:Map id="MyMap" creationComplete="MyMap_creationCompleteHandler(event)">
 <esri:ArcGISTiledMapServiceLayer id="l0" url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" alpha="1"/>
 <esri:ArcGISTiledMapServiceLayer id="l1" url="http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer" alpha="0"/>
 <esri:ArcGISTiledMapServiceLayer id="l2" url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer" alpha="0"/>
 <esri:ArcGISTiledMapServiceLayer id="l4" url="http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer" alpha="0"/>
 <esri:ArcGISDynamicMapServiceLayer id="l5" url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer" alpha="0" />
 <esri:FeatureLayer id="l6" definitionExpression="TYPE='city' AND POP1990 &gt; 50000"
        outFields="[CITY_NAME,CAPITAL,DIVORCED,POP1990,MALES,FEMALES]"
        url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0" alpha="0">
  <esri:renderer>
   <esri:UniqueValueRenderer attribute="CAPITAL">
    <esri:defaultSymbol>
     <esri:SimpleMarkerSymbol color="0xCCCCCC"
            size="12"
            style="x"/>
    </esri:defaultSymbol>
    <esri:UniqueValueInfo value="Y">
     <esri:symbol>
      <esri:CompositeSymbol>
       <!-- Star in circle -->
       <esri:SimpleMarkerSymbol color="0xFF0000"
              size="22"
              style="circle"/>
       <esri:SimpleMarkerSymbol color="0xFFFFFF"
              size="20"
              style="triangle"/>
       <esri:SimpleMarkerSymbol angle="180"
              color="0xFFFFFF"
              size="20"
              style="triangle"/>
      </esri:CompositeSymbol>
     </esri:symbol>
    </esri:UniqueValueInfo>
    <esri:UniqueValueInfo value="N">
     <esri:symbol>
      <esri:SimpleMarkerSymbol color="0xFF0000"
             size="18"
             style="diamond"/>
     </esri:symbol>
    </esri:UniqueValueInfo>
   </esri:UniqueValueRenderer>
  </esri:renderer>
 </esri:FeatureLayer>
</esri:Map>

[RobertScheitlin__GISP]

All,

   I have published my BaseMap Fader Widget for Flex Viewer:

http://www.arcgis.com/home/item.html?id=7156b0acf6574f848ddfd3d7e155746b