[OpenLayers-Users] Problem with IE changing style of polygons when SelectFeature control is activated

[Duncan Sayers]

I'm battling a problem where something in IE changes the style of vector
polygons when a SelectFeature control is activated. Works fine in firefox.
Normally I fix this sort of stuff by running my javascript through jslint to
find the odd stray comma here and there, but this time the problem is
sticking around.

So...

I create vector layers with a function like so - I think the arguments are
self explanatory:

Ext.ns("Layers");
...
Layers.createKmlLayer = function(name, url, style, visibility) {
  var layer = new OpenLayers.Layer.Vector(name, {
    projection: wgs84,
    styleMap: style,
    strategies: [
      new OpenLayers.Strategy.BBOX()
    ],
    protocol: new OpenLayers.Protocol.HTTP({
      url: url,
      format: new OpenLayers.Format.KML({
        extractStyles: false,
        extractAttributes: true
      })
    })
  });
  layer.id = name;
  layer.setVisibility(visibility);

  layer.events.on({
    //copy extended data if any to standard attributes
     beforefeatureadded: function(event) {
      var a;
      var attributes = event.feature.attributes;
      for (a in attributes) {
        if (attributes[a].value) {
          attributes[a] = attributes[a].value;
        }
      }
    },
    featureselected: function(event) {
      Layers.onKmlFeatureSelect(event.feature);
    }
  });
  if (typeof(Basemap) !== 'undefined') {
    Basemap.Map.addLayer(layer);
    layer.refresh();
  } else {
    Layers.layers.push(layer);
  }
};

Layers.onKmlFeatureSelect(feature) makes a GeoExt.Popup - I don't think the
details are relevant here. Also don't worry too much about how the layer
gets added to the map...it all has to do with at what stage in the
applications initialization that the layer gets added.

One style looks like this - others are similar for polygons, with perhaps
some rules applied:

Layers.GreenPolygon = new OpenLayers.StyleMap({
  fillColor: '#ADDD8E',
  strokeColor: 'white',
   fillOpacity: 0.6,
  strokeWidth: 1,
  strokeOpacity: 1,
  name: 'Layers.GreenPolygon'
});

I add the control to the map and activate it via an ext toggle button using
the following handler that grabs any vector layers that have been added by
the user or the application and creates and activates the control (TODO:
test that there are some layers). The layers could be a mix of polygons and
points...or lines I suppose, but I don't have any in use yet.:

Ext.ns("Basemap");
... // a Basemap.Map is created in here somewhere
Basemap.createVectorInfoControl = function() {
  var layers = Basemap.Map.getLayersByClass('OpenLayers.Layer.Vector');

  var control = new OpenLayers.Control.SelectFeature(
     layers
  );
  control.id = 'vectorinfocontrol';

  Basemap.Map.addControl(control);
  control.activate();
};

Here comes the problem...

In firefox all of this works just fine. However in IE (I'm testing v8 but 7
reportedly does the same thing) all polygon layers in the map are redrawn
with black borders and white fill. As soon as a feature is selected, it
reverts back to its configured (via O'Layers) style. When deactivating the
control (using another handler on the ext toggle toggle button called
Basemap.destroyVectorInfoControl()) the polygon layers go back to the black
bordered, white filled style. Juggling the zoom redraws the map back to it's
configured style.

One thing I tried was to send to my layer creating function a null style
thereby using the defaults in case there was something wrong with my style,
but this didn't change anything apart from start color (orange) and selected
color (blue). It would still make the polygons white when adding/removing
the SelectFeature control.

Then I added this to my Basemap.createVectorInfoControl() function:

  control.events.on({
    activate: function(event) {
      var layers = event.object.layers;
      layers.each(function(layer){
        layer.redraw();
      });
    },
    deactivate: function(event) {
      var layers = event.object.layers;
      layers.each(function(layer){
        layer.redraw();
      });
    }
  });

And lo and behold, the style stays as intended (actually in the blink of an
eye, the layer is redrawn bringing back the intended style).

But the problem with this solution (apart from its ugliness) is that IE
crashes after toggling the control on/off a couple of times.

I'm using OpenLayers 2.8, but I've tried running this in 2.10 with no
change.

Can anyone give me any clues as to why IE might not be obeying my styling
intent when this SelectFeature control is activated/deactivated.

Thanks for reading,

Duncan
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20110221/517394e6/attachment-0001.html