ThinkGeo.com    |     Documentation    |     Premium Support

Change Layer Opacity ClientSide

#1

 Hi,


I have a map application that uses World Map Kit Online as the base layer, and then add about 20 FeatureLayers to the Map.CustomOverlays (each with its own coloration).


How can I change the opacity of these 20 layers on the client side without having to postback to the server?


This is what I have done clientside with no luck:


function SetOpacity(opacityValue){


     map = Map1.GetOpenLayersMap();


     for(var i=1; i< map.layers.length; i++){ // starting at index 1 since index 0 = base layer


          map.layers.setOpacity(opacityValue);


     }


}


I even tried adding map.layers.redraw() after the last line of code above - no luck.


 


Your help and guidance is greatly appreciated!.


 


Cheers,

Chris



#2

Hi Chris, 
  
 You should know after set opacity in client side, if you pan or zoom, that will cause postback and reset the opacity. So if possible please set server side opacity. 
  
 So please notice add "return false" is important, that will prevent map control post back after JS code run. 
  
 I did some try in a project and finally set the opacity succeed in client side like this: 
  
 Client side: 
  
<script type="text/javascript">
        function SetOpacity(opacityValue) {
            map = Map1.GetOpenLayersMap();
            for (var i = 1; i < map.layers.length; i++) { // starting at index 1 since index 0 = base layer                
                map.layers[i].setOpacity(opacityValue);                
                map.layers[i].redraw();
            }
        }
    </script>

 <button onclick="javascript:SetOpacity(0.2);return false;">
    Test        
    </button>
 
 Server side: 
 
protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                Map1.MapBackground.BackgroundBrush = new GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"));
                Map1.CurrentExtent = new RectangleShape(-131.22, 55.05, -54.03, 16.91);
                Map1.MapUnit = GeographyUnit.DecimalDegree;


                WorldMapKitWmsWebOverlay worldMapKitOverlay = new WorldMapKitWmsWebOverlay();                
                Map1.CustomOverlays.Add(worldMapKitOverlay);

                LayerOverlay overlay = new LayerOverlay();
                overlay.IsBaseOverlay = false;                
                ShapeFileFeatureLayer countyLayer = new ShapeFileFeatureLayer(MapPath("~/SampleData/world/cntry02.shp"));
                countyLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.CreateSimpleAreaStyle(GeoColor.SimpleColors.Red, GeoColor.FromArgb(100, GeoColor.SimpleColors.Blue));
                countyLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;

                overlay.Layers.Add(countyLayer);
                Map1.CustomOverlays.Add(overlay);                
            }
        }
 
  
 Wish helpful. 
  
 Regards, 
  
 Don

#3

Hi, 

I tried your sample code and it works great ! 

However I tried to also set the new opacity on server side so that it does not change when panning or zooming as you said, but with no luck.... 

Do you have an idea how this could be done ? 

Thank you very much for your help.


 


Edit: Of course I didn't want to refresh the map that's why I used your client code ! I tried to set server side with AJAX but can't make it work....



#4

Hello Gautier, 
  
 Have you set the opacity in the client side too to make the map synchronize? I’m confused with your last information, looks like Don provide the code to set the opacity in the client side but you didn’t use it? If you only set it in the server side, because ajax, it won’t synchronize to the client side automatically, so you can’t see any changes in the client side. 
  
 Please let me know if I misunderstanding something, and it’s better to provide some of your code. 
  
 Regards, 
  
 Gary