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/GOES19/ABI/CONUS/GEOCOLOR/GOES19-CONUS-GEOCOLOR-625x375.gif";
// create an image element with a georeference
const imageElement = new ImageElement({
image: imageUrl,
georeference: new ExtentAndRotationGeoreference({
extent: new Extent({
spatialReference: new 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, set the map property to a new instance of a Map to add the media layer.
const viewElement = document.querySelector("arcgis-map");
viewElement.map = new Map({
layers: [backgroundFeatureLayer, statesFeatureLayer, mediaLayer],
});
viewElement.background = new ColorBackground({
color: new Color([0, 0, 0]),
});
viewElement.spatialReference = new 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,
};
});