Base Map Transparency Slider Code Please

[maryandrews]

I have three base maps: aerial, topo and streets.  I would like to create a slider to change the transparency for the three layers such as this map from the code gallery- http://maps.hamiltontn.gov/hcflex/

Can anyone point me in the direction of this code? 

If I try it with just two layers I'm thinking I have to sent the alpha to the inverse of the slider for on of the two layers?  I have a slider working but only for one layer at a time.

Thanks in advance!

[MattiasEkström]

Since you already have a slider working for one basemap, you could try something like this:

Change the maximum of the slider to 2 and use this code on the change event.

if (fader.value < 1){
basemap3.alpha = 0;
basemap1.alpha = 1 - fader.value;    
}else{
basemap1.alpha = 0;
basemap3.alpha = fader.value - 1;
}

With this code you need all of your basemaps to be visible and basemap1 ans basemap3 need to be on top of basemap2. (fader is the id of the slider).

This was just a quick test (I only use basemaps in my application), there's probably a lot of improvements to do, but it's a start.

[maryandrews]

Thanks so much Mattias! 🙂 With help from you and a coworker I came up with this which does the trick!!


<esri:Map id="MaryMap">
 
<esri:ArcGISTiledMapServiceLayer
   visible="true"
   url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
<esri:ArcGISTiledMapServiceLayer
   visible="true"
   alpha="{Math.max(1-mapTrans.value)}"
   url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" />
<esri:ArcGISTiledMapServiceLayer
  visible="true"
  alpha="{Math.min(mapTrans.value-1)}"
  url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" />
</esri:Map>
<s:Group left="10" right="10" top="10" bottom="10">
   <s:HSlider
    id="mapTrans" width="20%"
    minimum="0" maximum="2"
    snapInterval=".1"
    value="1"
    liveDragging="true" x="654" y="56">
   </s:HSlider>
   <s:Label text="Map Base Layer Transparency" paddingLeft="10" id="TransparencySlider" paddingRight="10" paddingTop="10" paddingBottom="10" x="653" y="16"/>
</s:Group>

[maryandrews]

Now that I have the slider working!!!
I would like to add three buttons which will set the slider value. 
Anyone know how to do this?

[maryandrews]

Here is how I got the three buttons to work with the transparency slider!

 <s:HSlider
    id="mapTrans" width="199" 
    minimum="0" maximum="2" 
    snapInterval=".1" 
    value="1" 
    liveDragging="true" x="10" y="58">
     
   </s:HSlider>
   <s:ToggleButton x="10" y="5" label="Aerial" width="54" height="46" 
       id="aerialButton"
       click="{mapTrans.value=0}" chromeColor="#1293BE"
       toolTip="Aerial Photo"/>
   
   
   <s:ToggleButton x="74" y="5" label="Base Map" width="54" height="46"
       id="baseButton"
       click="{mapTrans.value=1}"
       toolTip="Base Map"/>
   
   <s:ToggleButton x="145" y="5" label="Topo" width="54" height="46"
       id="topoButton"
       click="{mapTrans.value=2}"
       toolTip="Topo Map"/>

[haThach]

Mary,

I'm new to Flex api, just have a question as to how do you uses your code to work in Flexviewer2.2.
All I want to do is create a transparency slider to work for all 3 basemap layer.
Thanks,


Ha Tak

[LeeAllen]

Could you please post code with directions on how to implement in a zip file that can be downloaded?  Thanks!!