Skip To Content ArcGIS for Developers Sign In Dashboard

Add image overlays

Image overlays can be used to quickly render frequently changing images in a scene view. For example, rendering realtime sensor data, such as weather, where each static image represents a single frame from the radar. Similar to graphics overlays, which contain a collection of graphics based on geometry (points, lines, or polygons), image overlays manage a collection of image frames.

Image overlays and graphics overlays both render above all layers in the scene. Image overlays render below any graphics overlays you've added to the scene view. This ensures that graphics you want to display won't be obscured by your image overlays. For example, you might want to show graphics representing aircraft on top of image overlays showing the sensor data they are collecting.

Since they are designed for quick display, image overlays do not support the rich processing and rendering capabilities of a raster layer, which still provides the best option for workflows that require static image rendering, analysis, and persistence. See Add raster data for more information about working with raster layers.

Note:

Image overlays can only be added to a scene view. Map view does not currently support image overlays.

Add an image overlay to a scene view

A scene view manages a collection of image overlays. Each image overlay contains a single image frame that defines an image to display. Georeferenced images (those with a world file) are added at the correct geographic location. Otherwise, you must define a geographic extent for the image frame. If a spatial reference is not defined for the extent, it is assumed to be the same as the scene. If the spatial reference of the extent is different from that of the scene, the image will fail to render.

  1. If your image doesn't have georeference information, define an extent for the image using an envelope or quadrilateral polygon.

    The following example defines a geographic extent using an envelope defined with a center point, width, and height. You can also specify an extent using a polygon as long as it has exactly four points (to define each corner of the image).

    // Create an Envelope for displaying the image frame in the correct location
    MapPoint centerPoint = new MapPoint(-120.0724, 35.1310, SpatialReferences.Wgs84);
    double width = 15.0959;
    double height = 14.3770;
    Envelope pacificSouthwestEnvelope = new Envelope(centerPoint, width, height);

  2. Create an image frame and pass an image into the constructor. You can specify an image with a URI to a local or online source, supported formats are PNG, JPEG, TIFF, and GeoTIFF. If you need to define the extent explicitly, also pass the envelope or polygon to the constructor.

    Note:

    You can also specify an image by passing a RuntimeImage to the constructor. These formats are supported for RuntimeImage: BMP, GIF, JPG, PNG, and ICO. Animated GIF is not supported, but can be displayed as a static image.

    // Create a RuntimeImage to display using a local png file
    RuntimeImage image = new RuntimeImage(new System.Uri("file:///c:/radar/pacsouthwest_radaronly.png"));
    
    // Create an ImageFrame with a local image file and the extent envelope  
    ImageFrame imageFrame = new ImageFrame(image, pacificSouthwestEnvelope);

  3. Add the image frame to an image overlay. The image overlay has properties to control visibility and opacity of the image. Set the opacity less than 1.0 to make the image semi-transparent so data underneath can be seen.

    // Add the ImageFrame to an ImageOverlay and set it to be 50% transparent
    ImageOverlay imageOverlay = new ImageOverlay(imageFrame);
    imageOverlay.Opacity = 0.5;

  4. Add the image overlay to the scene view's image overlay collection. To zoom to the extent of the image, you can set the scene view's viewpoint using the image frame extent.

    // Add the ImageOverlay to the scene view's ImageOverlay collection
    MySceneView.ImageOverlays.Add(imageOverlay);
    
    // Set the viewpoint with the ImageFrame's extent
    await MySceneView.SetViewpointAsync(new Viewpoint(imageFrame.Extent));

    Note:

    Like the graphics overlays collection, a scene view image overlays collection can contain multiple overlays. Both types of overlays draw over data in the scene (base maps, operational layers, and so on). Graphics overlays display on top of image overlays in the view.

Image overlay showing a precipitation radar image
Note:

Radar data for the United States, like that shown in the preceding image, are available for download from the National Weather Service web site.

Animate an image overlay

You can animate the display of image overlays by changing the frame they contain at a specified interval. You might use a timer, for example, to read the next image in a sequence, use it to create a new image frame, and replace the current frame in the image overlay.

Note:

Animated GIF format is not supported. If added to an image overlay, it will display as a static image.

  1. Create a collection of images in the correct sequence. These may be added explicitly, read from a local folder, downloaded from a service, or perhaps read from a shared location that is periodically updated with new data.

    The example below creates a sequence of images and adds them to a list.

    // Create an array of images to display in sequence
    _radarImages = new List<RuntimeImage>();
    RuntimeImage image = new RuntimeImage(new System.Uri("file:///c:/radar/pacsouthwest_radaronly.png"));
    RuntimeImage image1 = new RuntimeImage(new System.Uri("file:///c:/radar/pacsouthwest_radaronly1.png"));
    RuntimeImage image2 = new RuntimeImage(new System.Uri("file:///c:/radar/pacsouthwest_radaronly2.png"));
    RuntimeImage image3 = new RuntimeImage(new System.Uri("file:///c:/radar/pacsouthwest_radaronly3.png"));
    RuntimeImage image4 = new RuntimeImage(new System.Uri("file:///c:/radar/pacsouthwest_radaronly4.png"));
    _radarImages.Add(image);
    _radarImages.Add(image1);
    _radarImages.Add(image2);
    _radarImages.Add(image3);
    _radarImages.Add(image4);

  2. Create a new timer and set it to call a function to change the image at the desired interval.

    The following example creates a timer that calls a function to change the image in the overlay every second.

    // Create a timer
    _timer = new DispatcherTimer(DispatcherPriority.Render)
    {
        // Fire the 'tick' event every second
        Interval = TimeSpan.FromMilliseconds(1000),
        IsEnabled = true
    };
    // When the tick event fires, call a function to change the image
    _timer.Tick += ChangeImageFrame;

  3. For each timer interval, create a new frame with the next image in the sequence and replace the current image frame in the overlay.

    The following example changes the image in the overlay while keeping it at the same spatial extent. If required by your workflow, you could also animate the overlay location by changing the image frame's extent.

    private void ChangeImageFrame(object sender, EventArgs e)
    {
        // If all images have been shown, start back at the first
        if(_index > _radarImages.Count - 1)
        {
           _index = 0;
        }
    
        // Get the next image in the sequence
        RuntimeImage nextImage = _radarImages[_index];
    
        // Get the extent from the current frame
        Envelope ext = _imageOverlay.ImageFrame.Extent;
    
        // Create a new image frame with the new image and the same extent
        ImageFrame frame = new ImageFrame(nextImage, ext);
    
        // Replace the image frame in the image overlay
        _imageOverlay.ImageFrame = frame;
    
        // Increment the image index
        _index++;
    }

Animated image overlay showing precipitation radar