topic Re: LayerDrawingOptions and transparency in ArcGIS JavaScript Maps SDK Questions

LayerDrawingOptions and transparency

ChrisGarrard — Fri, 21 Dec 2012 00:02:13 GMT

I have a map service with multiple layers, but I would like some of the layers to draw semi-transparent. I set the transparency in the mxd, and the REST endpoint reports the default transparency values, but the layers draw completely opaque (although the color doesn't match the legend-- it's like it's lightening the color instead of making it semi-transparent). So I thought I'd try using a LayerDrawingOptions object. Using that, I can change the renderer, but changing the transparency property has no effect. And kind of like before, changing the alpha value for the symbol color in the renderer changes the color but not the transparency. The only way I've been able to get any transparency is to set it when I create the ArcGISDynamicMapServiceLayer, but that changes the transparency of all layers in the map service, which is not what I want.

I know I could just create a different ArcGISDynamicMapServiceLayer for each layer in the service, but if I have to do that, what's the point of the LayerDrawingOptions? And why isn't ArcGIS Server using the default transparency for a layer by default?

Thanks!
Chris

Re: LayerDrawingOptions and transparency

RichardGwozdz — Wed, 27 Mar 2013 19:10:29 GMT

Chris -

Did you ever resolve this? We are having this exact same problem...have tried javascript api 3.3 and 3.4. Can't set transparency for individual layers.

Rich

Re: LayerDrawingOptions and transparency

RichardGwozdz — Wed, 27 Mar 2013 19:43:17 GMT

Chris -

We just figured out what the problems was for us. Image format needs to be png32; we had it original set to png24.

Rich

Re: LayerDrawingOptions and transparency

jasonwriter — Thu, 18 Sep 2014 18:22:03 GMT

Hi Chris,

I am having the same issue with trying to set transparency for an individual layer within a dynamic map service even after I set the image format to png32.

Do you think you might be able to show me your relevant code that you got working? Here is my failed attempt:

baseAll = new ArcGISDynamicMapServiceLayer(urlBaseAll, {});

baseAll.id = "baseAll";

//set up drawing options to make species range transparent

var optionsArray = [];

var drawingOptions = new LayerDrawingOptions();

drawingOptions.transparency = 60;

optionsArray[8] = drawingOptions;

baseAll.setImageFormat('png32');

baseAll.setLayerDrawingOptions(optionsArray);

Any help would be greatly appreciated.

Thanks.

Jason

Re: LayerDrawingOptions and transparency

ChrisGarrard — Fri, 19 Sep 2014 17:51:41 GMT

Hi Jason,

I would, except I honestly don't remember if I ever got it to work and no

longer have the services I was playing with running. If I remember right, I

was putting together a proof-of-concept for something, but it didn't end up

going anywhere. I've been working on completely unrelated (and funded)

projects ever since and haven't gotten back to anything related to ArcGIS

Server. Sorry about that!

Chris

Re: LayerDrawingOptions and transparency

jasonwriter — Fri, 19 Sep 2014 17:55:53 GMT

No problem. I got it figured out. Thank you for responding.

Re: LayerDrawingOptions and transparency

BillBrodie1 — Thu, 29 Mar 2018 22:18:58 GMT

I had same issue and concur with the solution: setting the imageFormat to 'png32' was the key issue. My service was returning 'png8' images by default - which does not seem to support transparency for this API. Below is my code.

// Code is TypeScripty

// Specified map service has 4 layers
this.myDataLayer = new ArcGISDynamicMapServiceLayer(`${mapServiceUrl}${mapServicePath}/MapServer/`, { "visible": true, "id": "My_Data"} );

let layerDrawingOptions: LayerDrawingOptions[]= [];

let drawingOption2 = new LayerDrawingOptions();

// Set 10 percent transparency for layers 0 and 1
drawingOption2.transparency = 10;
layerDrawingOptions[0] = drawingOption2;
layerDrawingOptions[1] = drawingOption2;

// Set 50 percent transparency for layers 2 and 3
let drawingOption = new LayerDrawingOptions();
drawingOption.transparency = 50;
layerDrawingOptions[2] = drawingOption;
layerDrawingOptions[3] = drawingOption;

this.myDataLayer.setLayerDrawingOptions(layerDrawingOptions);

// The following line is required or transparency setting does not work! Default 'png8' does not support transparency.
this.myDataLayer.setImageFormat("png32");

this.map.addLayer(this.myDataLayer);