Animated gif in OpenLayers 3

Question

There is a gif that animates a radar image I want to use in my openlayers 3 map. I am defining the layer as a ol.layer.Image, and the source is ol.source.ImageStatic. When I do this the radar does not animate.

I am assuming this is because I am defining it as ImageStatic, but I get errors when I try to add the image to the map with any of the other source options.

Does anyone know what I should be using for the source for an animated image gif? Any examples of where this has been done would also be awesome. Thanks!

Answer 1

1. Add a div to your html document.

    <div id="map" class="map"></div>
    <div style="display: none;">
    <div id="marker" title="Marker"></div>
    </div>
   

2. Configure your div with css to contain your animated gif

   #marker {
   width: 150px;
   height: 150px;
   background: url("http://netanimations.net/animated_earth_84.gif") no-repeat scroll 0% 0% transparent;
   }
   

3. Add the div element to your map as an ol.Overlay

   var pos = ol.proj.fromLonLat([23.3725, 35.208889]);
   var marker = new ol.Overlay({
   position: pos,
   positioning: 'center-center',
   element: document.getElementById('marker'),
   stopEvent: false
   });
   map.addOverlay(marker);
   

and a fiddle to see it in action