Help setting opacity/transparency of Basemap

Question

Hi,

I am completely new to JS and am trying to find a way to dim the esri basemap under my layers. So far the basemap is loaded/called like this: (I think)

map = new Map("map", {
        basemap: "satellite",
        center: [-117.719, 34.100],
        zoom: 14,
      });

I have searched through the forums and JS API developers site trying different methods I am finding but either I am writing the code wrong or have not found the correct format to make this work.

Any suggestions?

Thanks,

Tait

ManishkumarPatel · Answer

Hi Tait,

Owen suggestion is one way of doing it. Alternatively you can also try setting the opacity as below:    
var lyrOpac = map.getLayer(map.getLayer[0]); //assuming your the layer is at 0 index.
lyrOpac.setOpacity(0.5);

This can also help to set the opacity for any layer you want just need to set the specific index for that layer.

for further details please refer to the below link:

https://developers.arcgis.com/javascript/jsapi/layer-amd.html#setopacity

Hope this helps.

Regards,
Manish

OwenEarley · Answer

See this example: http://jsbin.com/hehihima

The key is to add the basemap layer the old way as an ArcGISTiledMapServiceLayer:    var map, baseLyr;
    require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"], function(Map,ArcGISTiledMapServiceLayer) {
      
      // create map
      map = new Map("mapDiv", {
        center: [-117.719, 34.100],
        zoom: 14
      });
     
      // add basemap with 50% opacity
      baseLyr = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", {opacity:0.5});
      map.addLayer(baseLyr);
            
    });

Hope this helps.

Owen
www.spatialxp.com.au