This sample demonstrates how to add an animated GIF as an ImageElement in a MediaLayer and update its animation options.
How it works
First, create a new ImageElement and set the animation property.
// a url to an animated gif from the GOES satellite available from NOAA
const imageUrl = "https://cdn.star.nesdis.noaa.gov/GOES16/ABI/CONUS/GEOCOLOR/GOES16-CONUS-GEOCOLOR-625x375.gif";
// create an image element with a georeference
const imageElement = new ImageElement({
image: imageUrl,
georeference: new ExtentAndRotationGeoreference({
extent: new Extent({
spatialReference: {
wkid: 102498
},
xmin: -3640000,
ymin: 1590000,
xmax: 1400000,
ymax: 4600000
})
})
});
// set the animation options
imageElement.animationOptions = {
playing: true,
duration: 4,
repeatType: "oscillate",
repeatDelay: 0
};
Then, add the ImageElement to the MediaLayer.
// create a media layer with the image element as the source
const mediaLayer = new MediaLayer({
source: [imageElement]
});
Next, add the MediaLayer to the Map,
// create a map with the media layer and the feature layers
const map = new Map({
basemap: "topo-vector",
layers: [backgroundFeatureLayer, statesFeatureLayer, mediaLayer]
});
and then, add the Map to the MapView.
// create a map view
new MapView({
background: {
color: "black"
},
center: [-87, 30],
map,
container: "viewDiv",
scale: 25000000,
spatialReference: {
wkid: 102498
}
});
Finally, set up event listeners on Calcite Components to control the animation.
// update the image element animation options when the playing switch is toggled
playingSwitch.addEventListener("calciteSwitchChange", () => {
imageElement.animationOptions = {
...imageElement.animationOptions,
playing: !imageElement.animationOptions.playing
};
});