can openlayers 3 render the animated marker using gif

Question

I wanna ask how to make the marker show animated gif picture like openlayers 2 do...it can show the animated marker..what I want is show animated gif marker not make a marker move..it is possible or not?

style = {
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                anchor: anchor,
                opacity: 1,
                src: 'https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif',
                scale: 1,
            };

var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ (style))
        });

var iconFeature = new ol.Feature({
            position: data.coordinate,
            geometry: new ol.geom.Point([0,0]),
        });

iconFeature.setStyle(iconStyle);

How to make https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif displayed animated as a gif in a map? is it possible or not create animated features in openlayers 3..I don't find any article with contain this solving...thanks

Answer 1

Yes there is a way do it but is a bit tricky so I am not sure whether it fit to your needs. You need to add a marker instead and use css to style the marker. check this

your html with the dom element

<div id="map" class="map"></div>
<div id="marker" title="Marker"></div>

your js here

var layer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
  layers: [layer],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});
// the position of your marker
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 your css here

#marker {
  width: 365px;
  height: 360px;
  background: url("https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_DancingBannana.gif") no-repeat scroll 0% 0% transparent;
}

and a fiddle here with the dancing banana (nice gif though :)))) )

Answer 2

This can definitely be done with a feature or layer style, with the help of a gif decoder that extracts the frames from the gif and controls an animation. Using gifler, the relevant code could look something like this:

const gifUrl = "./data/kgrtehja_DancingBannana.gif";
const gif = gifler(gifUrl);
gif.frames(
  document.createElement("canvas"),
  (ctx, frame) => {
    if (!iconFeature.getStyle()) {
      iconFeature.setStyle(
        new Style({
          image: new Icon({
            img: ctx.canvas,
            imgSize: [frame.width, frame.height]
          })
        })
      );
    }
    ctx.clearRect(0, 0, frame.width, frame.height);
    ctx.drawImage(frame.buffer, frame.x, frame.y);
    map.render();
  },
  true
);

The above code sets an icon style with the animated gif on an existing feature. The feature is stored in a variable iconFeature.

See https://codesandbox.io/s/beautiful-fire-cdrou?file=/main.js for a working example.