title: Changing OpenLayers marker icon
body: <p>I have a problem with OpenLayers. If I want to change the icon of some marker on the fly (for instance, to paint the marker with another color to indicate a status change), the marker starts behaving buggy, not showing in the proper place and even leaving semi-randomly located copies of itself, noticeable when zooming the map in or out.</p>
  
  <p>I already realized that the problem happens when I reassign the marker.icon attribute, from some pre-loaded icon images which work fine otherwise. I have tried both with and without using icon.clone() to redraw.</p>
  
  <p>Here's a full but simplified example which moves the marker randomly and should modify its icon too. If you comment out the "troublesome code" snippet, it works well, except for the icon change:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;HTML&gt;
      &lt;HEAD&gt;
          &lt;TITLE&gt;Mapa&lt;/TITLE&gt;
          &lt;SCRIPT language="javascript" type="text/javascript" src="OpenLayers.js"&gt;&lt;/SCRIPT&gt;
          &lt;SCRIPT language="javascript" type="text/javascript"&gt;
              var vMapa;
              var prj0 = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
              var prj1 = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
              var vLon = 12.568142;
              var vLat = 55.676320;
              var vTimer = null;
              var vCont = 0;
          &lt;/SCRIPT&gt;
      &lt;/HEAD&gt;
      &lt;BODY onClose="vTimer = null; vLon = null; vLat = null;"&gt;
          &lt;DIV id="demoMap" style="height: 700px; width: 1000px;"&gt;&lt;/DIV&gt;&lt;DIV id="Contador"&gt;0&lt;/DIV&gt;
          &lt;SCRIPT&gt;
              var options = {
                  controls: [
                      new OpenLayers.Control.Navigation(),
                      new OpenLayers.Control.PanZoomBar(),
                  ]
              };
  
              vMapa = new OpenLayers.Map("demoMap", options);
              vMapa.addLayer(new OpenLayers.Layer.OSM());
              vMapa.setCenter(new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1), 15, false, false);
  
              var Navigation = new OpenLayers.Control.Navigation( { defaultDblClick: function(event) { return; } } );
  
              vMapa.addControl(Navigation);           
  
              var markers = new OpenLayers.Layer.Markers("Markers");
              vMapa.addLayer(markers);
  
              var size    = new OpenLayers.Size(12, 12);
              var offset  = new OpenLayers.Pixel(-6, -6);
              var iconOff = new OpenLayers.Icon('img/CircOff.png', size, offset);
              var iconOn  = new OpenLayers.Icon('img/CircOn.png', size, offset);
  
              var marker = new OpenLayers.Marker(new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1), iconOff.clone());
              marker.setOpacity(1.0);
              marker.events.register('mousedown', marker, function(evt) { vMapa.panTo(marker.lonlat); OpenLayers.Event.stop(evt); });
              marker.pfInfo = 'Vel: 0.0 km/h';
              markers.addMarker(marker);
              vTimer = setTimeout('TimerEvent()', 1000);
  
              function TimerEvent() {
                  vLon += ((Math.random() - 0.5) / 500);
                  vLat += ((Math.random() - 0.5) / 500);
  
                  // ------- Troublesome code -------
                  var ixIcon = Math.round(Math.random());
                  if (ixIcon == 0) {
                      marker.icon = iconOff.clone();
                  } else {
                      marker.icon = iconOn.clone();
                  }
                  // --------------------------------
  
                  var newLonLat = new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1);
                  var newPx = marker.map.getLayerPxFromViewPortPx(marker.map.getPixelFromLonLat(newLonLat));
                  marker.moveTo(newPx);
  
                  marker.draw();
  
                  vCont ++;
                  document.getElementById('Contador').innerHTML = vCont;
  
                  vTimer = setTimeout('TimerEvent()', 1000);
              }
          &lt;/SCRIPT&gt;
      &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>Thanks a lot in advance for your suggestions.</p>