can openlayers 3 render the animated marker using gif -
i wanna ask how make marker show animated gif picture openlayers 2 do...it can show animated marker..what want show animated gif marker not make marker move..it 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 make https://articulate-heroes.s3.amazonaws.com/uploads/rte/kgrtehja_dancingbannana.gif displayed animated gif in map? possible or not create animated features in openlayers 3..i don't find article contain solving...thanks
yes there way bit tricky not sure whether fit needs. need add marker instead , use css style marker. check this
your html 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 }) }); //this postion of 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 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 fiddle here dancing banana (nice gif though :)))) )
Comments
Post a Comment