Bing maps - animated tile layer - opacity - bing-maps

Question

In bing maps v8, How can i set opacity on AnimatedTileLayer? The opacity value I set below (0.2) is not working.
var tileSources = [];
for (var i = 0; i < timeStamps.length; i++) {
var path = 'https://api.weather.com/v3/TileServer/tile/radarFcst?fts={fts}&ts={ts}&xyz={x}:{y}:{zoom}&apiKey={apiKey}';
path = path.replace('{apiKey}', weatherApiKey);
path = path.replace('{fts}', timeStamps[i]);
path = path.replace('{ts}', tsNow);
var tileSource = new Microsoft.Maps.TileSource({
uriConstructor: path
});
tileSources.push(tileSource);
}
EmptyOverlay.prototype = new Microsoft.Maps.CustomOverlay();
function EmptyOverlay() {
}
EmptyOverlay.prototype.onAdd = function () {
var container = document.createElement('div');
this.setHtmlElement(container);
};
var overlay = new EmptyOverlay();
vm.map.layers.insert(overlay);
var animatedLayer = new Microsoft.Maps.AnimatedTileLayer({
mercator: tileSources,
frameRate: 500,
opacity: 0.2,
loadingScreen: overlay
});
vm.map.layers.insert(animatedLayer);

Answer 1

The AnimatedTileLayer doesn't have an opacity option: https://msdn.microsoft.com/en-us/library/mt772207.aspx I'll add this as a feature request.
If you need this right way there is a hack that can be used to do this:
var opacity = 0.2;
//Add an event handler that fires for each frame of the animation.
Microsoft.Maps.Events.addHandler(animatedLayer, 'onFrameLoaded', function (e) {
//Check the opacity of the root html element used by the animated tile layer if it is not set to the current opacity.
if (animatedLayer._htmlElement && animatedLayer._htmlElement.style.opacity !== opacity) {
animatedLayer._htmlElement.style.opacity = opacity;
}
});
Note, this is a hack and is not officially supported, so it can break at anytime, and is not recommended for use in production apps.