topic Re: Base Map Transparency Slider Code Please in ArcGIS API for Flex Questions

Base Map Transparency Slider Code Please

maryandrews — Thu, 09 Dec 2010 17:35:33 GMT

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!

Re: Base Map Transparency Slider Code Please

MattiasEkström — Fri, 10 Dec 2010 06:16:54 GMT

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.

Re: Base Map Transparency Slider Code Please

maryandrews — Fri, 10 Dec 2010 16:36:24 GMT

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>

Re: Base Map Transparency Slider Code Please

maryandrews — Mon, 20 Dec 2010 21:17:09 GMT

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?

Re: Base Map Transparency Slider Code Please

maryandrews — Sun, 12 Dec 2021 01:58:43 GMT

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"/>

Re: Base Map Transparency Slider Code Please

haThach — Thu, 10 Feb 2011 22:09:42 GMT

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

Re: Base Map Transparency Slider Code Please

LeeAllen — Tue, 22 Feb 2011 13:17:29 GMT

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