[GIS] Layer vs. Color Transparency with ArcGIS Javascript API

arcgis-javascript-apiarcgis-server

When creating services with ArcGIS Server, I have paid attention to the warning that Layer Transparency will make response time slower and that I should change to color transparency instead so I have been changing it when I "share" the service. Maybe I'm not doing this correctly because I'm not getting the result that I want or maybe I need to ignore the warning.

Currently all my layers are in the same service and I can set opacity to some value 0.5 (and/or can set it individually for different layers e.g. just the layer on top) but the layers on top still cover layers on the bottom. I'd like to see the parcel boundaries underneath the other polygon layers.

mylayer[2].setOpacity(0.1);

Even if I set layer 2 to something almost invisible (like 0.1 as shown in code above; and as rendered below) it covers the parcels underneath (see parcel 0353 in the screenshot below). How should I be doing this instead? Do I need to ignore the warning?

enter image description here

Best Answer

By default, the image format for a dynamic map service is PNG24, which doesn't include an alpha band.

To enable transparency, you will need to pass in some additional options when constructing the dynamic layer in your JavaScript code:

var imageParameters = new ImageParameters();
imageParameters.format = "png32";
var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(yourMapServiceURL,{"imageParameters":imageParameters});

edit: There are other image formats that support transparency besides PNG32.

Related Solutions

[GIS] ArcGIS JavaScript API layer order

I'm sure there is a better way of doing this but here is how I did it:

I stored the layers to be added in a module level variable (layersToAdd) and in each layer onLoad event I pushed the layer in to this array. I then called a function addLayers which checked if the length of addLayers was equal to the total layers to be added. The function sorts the array based on index and then adds them.

For the missing layer in the onError event I removed the item from the array and called addLayer.

There will be a performance hit but I couldn't think of another way. I guess another option would be to add the layers as soon as they are available and then re-order the layers once the total count is reached.

for (var i = 0; i < mapConfig.Services.length; i++) {
    layer = this.loadMapService(mapConfig.Services[i], true);
    if (layer != null) {
        //In Internet Explorer, due to resource caching, the onLoad event is fired as soon as the layer is constructed. Consequently you should check whether the layer's loaded property is true before registering a listener for the onLoad event:
        //http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_events.htm
        layer.index = i;
        if (layer.loaded) {
            this.layersToAdd.push(layer);
            this.addLayers();
        }
        else {
            dojo.connect(layer, "onLoad", dojo.hitch(this, function (addlayer) {
                this.layersToAdd.push(addlayer);
                this.addLayers();
            }));

            dojo.connect(layer, "onError", dojo.hitch(this, function (err) {
                var self = this;
                //log error
                dojo.forEach(self.configData.Map.Services, function (entry, ix) {
                    if (entry.ServiceID == layer.id) {
                        self.configData.Map.Services.splice(ix, 1);
                    }
                }, self);
                self.addLayers();
            }));
        }
    }
};


addLayers: function () {
        if (this.layersToAdd.length == this.configData.Map.Services.length) {
            this.layersToAdd.sort(function(a, b) {
                return a.index - b.index;
            });
            dojo.forEach(this.layersToAdd, function (entry, i) {
                this.map.addLayer(entry);
            }, this);
            this.layersToAdd = null;
        }
 },

[GIS] ArcGIS Javascript API Feature Layer retrieval

A feature service returns graphics that the client browser must render. If you used a MapServer service you might have better results. 50k features is a lot to display, a heat map might be a better approach for performance and usability. If your data does not change very often, a tiled layer map be your best bet.

Best Answer

Related Solutions

[GIS] ArcGIS JavaScript API layer order

[GIS] ArcGIS Javascript API Feature Layer retrieval

Related Question