OpenLayers: changing feature's style.
Shows switch of an image of a feature every two seconds.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/lib/OpenLayers.js"></script>
<div id="mapdiv"></div>
CSS
#mapdiv {
width: 500px;
height: 500px;
border: 1px solid #dddddd;
}
JavaScript
var map = new OpenLayers.Map("mapdiv", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoom(),
]
});
var baseAerial = new OpenLayers.Layer.OSM("MapQuest Open Aerial Tiles", null, {});
map.addLayer(baseAerial);
var vectorLayer = new OpenLayers.Layer.Vector("Vector");
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(44, 55), {}, {
externalGraphic: 'http://www.gatesms.eu/img/loga/java.png',
graphicHeight: 30,
graphicWidth: 30
});
vectorLayer.addFeatures([feature]);
map.addLayer(vectorLayer);
map.zoomToMaxExtent();
var switcher = true;
function imageSwitch() {
if (switcher) feature.style.externalGraphic = 'http://blog.tiger.com.pl/wp-content/uploads/2012/02/Duke256.png';
else feature.style.externalGraphic = 'http://www.gatesms.eu/img/loga/java.png';
feature.layer.drawFeature(feature);
switcher = !switcher;
setTimeout(imageSwitch, 2000);
}
setTimeout(imageSwitch, 2000);