Hi.

Hello all, I'm trying to get my custom StyleMap to work with the Modify Feature example that comes with OpenLayers 2.12. Without the label attribute it seems to work fine in IE 8.0.7601 (I can select and drag the features around), but with the label being displayed I can sometimes select, but not modify the features. Any ideas?

I know, I know, upgrade my browser. Unfortunately that's not an option.

Thanks in advance. Below is the relevant code:

var map, vectors, controls;
        function init(){
            map = new OpenLayers.Map('map');
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});

            var myStyles = new OpenLayers.StyleMap({
                "default": new OpenLayers.Style({
                    label:'ASDF',
                    strokeColor: "#00FF00",
                    strokeOpacity: 1,
                    strokeWidth: 3,
                    fillColor: "#FF5500",
                    fillOpacity: 0.5,
                    pointRadius: 6,
                    pointerEvents: "visiblePainted"
                })
            });
            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

            vectors = new OpenLayers.Layer.Vector("Vector Layer", {
                renderers: renderer,
                styleMap: myStyles
            });

            map.addLayers([wms, vectors]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());
           
            controls = {
                point: new OpenLayers.Control.DrawFeature(vectors,
                            OpenLayers.Handler.Point),
                line: new OpenLayers.Control.DrawFeature(vectors,
                            OpenLayers.Handler.Path),
                polygon: new OpenLayers.Control.DrawFeature(vectors,
                            OpenLayers.Handler.Polygon),
                regular: new OpenLayers.Control.DrawFeature(vectors,
                            OpenLayers.Handler.RegularPolygon,
                            {handlerOptions: {sides: 5}}),
                modify: new OpenLayers.Control.ModifyFeature(vectors)
            };
           
            for(var key in controls) {
                map.addControl(controls[key]);
            }
           
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
            document.getElementById('noneToggle').checked = true;
        }
       
        function update() {
            // reset modification mode
            controls.modify.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
            var rotate = document.getElementById("rotate").checked;
            if(rotate) {
                controls.modify.mode |= OpenLayers.Control.ModifyFeature.ROTATE;
            }
            var resize = document.getElementById("resize").checked;
            if(resize) {
                controls.modify.mode |= OpenLayers.Control.ModifyFeature.RESIZE;
                var keepAspectRatio = document.getElementById("keepAspectRatio").checked;
                if (keepAspectRatio) {
                    controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
                }
            }
            var drag = document.getElementById("drag").checked;
            if(drag) {
                controls.modify.mode |= OpenLayers.Control.ModifyFeature.DRAG;
            }
            if (rotate || drag) {
                controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
            }
            controls.modify.createVertices = document.getElementById("createVertices").checked;
            var sides = parseInt(document.getElementById("sides").value);
            sides = Math.max(3, isNaN(sides) ? 0 : sides);
            controls.regular.handler.sides = sides;
            var irregular =  document.getElementById("irregular").checked;
            controls.regular.handler.irregular = irregular;
        }

        function toggleControl(element) {
            for(key in controls) {
                var control = controls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }