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.<br>
<br>So...<br>
<br>I create vector layers with a function like so - I think the arguments are self explanatory:<br><br><span style="font-family: courier new,monospace;">Ext.ns("Layers");</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">...</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">Layers.createKmlLayer = function(name, url, style, visibility) {</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> var layer = new OpenLayers.Layer.Vector(name, {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
projection: wgs84,</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> styleMap: style,</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> strategies: [ </span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> new OpenLayers.Strategy.BBOX()</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> ],</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> protocol: new OpenLayers.Protocol.HTTP({</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> url: url,</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> format: new OpenLayers.Format.KML({</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
extractStyles: false,</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> extractAttributes: true</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> })</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> })</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> });</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> </span><a style="font-family: courier new,monospace;" href="http://layer.id" target="_blank">layer.id</a><span style="font-family: courier new,monospace;"> = name;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> layer.setVisibility(</span><span style="font-family: courier new,monospace;">visibility);</span><br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> layer.events.on({</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> //copy extended data if any to standard attributes </span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">
beforefeatureadded: function(event) {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> var a;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> var attributes = event.feature.attributes;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> for (a in attributes) {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> if (attributes[a].value) {</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> attributes[a] = attributes[a].value;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
}</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> },</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> featureselected: function(event) {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> Layers.onKmlFeatureSelect(</span><span style="font-family: courier new,monospace;">event.feature);</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> });</span><br><span style="font-family: courier new,monospace;"> if (typeof(Basemap) !== 'undefined') {</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> Basemap.Map.addLayer(layer);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> layer.refresh();</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> } else {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> Layers.layers.push(layer);</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> }<br style="font-family: courier new,monospace;"></span><span style="font-family: courier new,monospace;">};</span><br style="font-family: courier new,monospace;"><br>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.<br>
<br>One style looks like this - others are similar for polygons, with perhaps some rules applied:<br><br><span style="font-family: courier new,monospace;">Layers.GreenPolygon = new OpenLayers.StyleMap({</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> fillColor: '#ADDD8E',</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> strokeColor: 'white',</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">
fillOpacity: 0.6,</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> strokeWidth: 1,</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> strokeOpacity: 1,</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> name: 'Layers.GreenPolygon'</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">});</span><br><br>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.:<br>
<br><span style="font-family: courier new,monospace;">Ext.ns("Basemap");</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">... // a Basemap.Map is created in here somewhere</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">Basemap.</span><span style="font-family: courier new,monospace;">createVectorInfoControl = function() {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> var layers = Basemap.Map.getLayersByClass('</span><span style="font-family: courier new,monospace;">OpenLayers.Layer.Vector');</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> </span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> var control = new OpenLayers.Control.</span><span style="font-family: courier new,monospace;">SelectFeature(</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">
layers</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> );</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> </span><a style="font-family: courier new,monospace;" href="http://control.id" target="_blank">control.id</a><span style="font-family: courier new,monospace;"> = 'vectorinfocontrol';</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> </span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> Basemap.Map.addControl(control);</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> control.activate();</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">};</span><br><br>Here comes the problem...<br>
<br>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.<br>
<br>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.<br>
<br>Then I added this to my Basemap.createVectorInfoControl() function:<br><br><span style="font-family: courier new,monospace;"> control.events.on({</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> activate: function(event) {</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> var layers = event.object.layers;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> layers.each(function(layer){</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> layer.redraw();</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
});</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> },</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> deactivate: function(event) {</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> var layers = event.object.layers;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> layers.each(function(layer){</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> layer.redraw();</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> });</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }); </span><br><br>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).<br>
<br>But the problem with this solution (apart from its ugliness) is that IE crashes after toggling the control on/off a couple of times.<br><br>I'm using OpenLayers 2.8, but I've tried running this in 2.10 with no change.<br>
<br>Can anyone give me any clues as to why IE might not be obeying my styling intent when this SelectFeature control is activated/deactivated.<br>
<br>Thanks for reading,<br><br>Duncan<br><br>