Openlayers renderer in IE8 - Labels not visible

Question

I copied the source code of http://openlayers.org/dev/examples/vector-features-with-text.html. This url works just fine in IE8.

I put the html page as it is in the webfolder in our network. I opened this page from the local site But what found was labels were not visible in IE but in chrome they seemed just fine.

What should I do to make it work in IE also? WHat is preventing the labels to render in IE but the same code works from the public site above. Ifyou right click and see the code you can see the code as follows:

 renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

        var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
            styleMap: new OpenLayers.StyleMap({'default':{
                strokeColor: "#00FF00",
                strokeOpacity: 1,
                strokeWidth: 3,
                fillColor: "#FF5500",
                fillOpacity: 0.5,
                pointRadius: 6,
                pointerEvents: "visiblePainted",
                // label with \n linebreaks
                label : "name: ${name}\n\nage: ${age}",

                fontColor: "${favColor}",
                fontSize: "12px",
                fontFamily: "Courier New, monospace",
                fontWeight: "bold",
                labelAlign: "${align}",
                labelXOffset: "${xOffset}",
                labelYOffset: "${yOffset}",
                labelOutlineColor: "white",
                labelOutlineWidth: 3
            }}),
            renderers: renderer
        });

Thanks

Vijay

Answer 1

I ran into simmilar problem. It looks it is in VML.js in drawText method:

if(!label.parentNode) {
    label.appendChild(textbox);
    this.textRoot.appendChild(label);
}

the condition is not met and so the label is not appended. I suspect some javascript library interfering. Anyways my dirty solution is to override the method through:

 OpenLayers.Renderer.VML.prototype.drawText = function(){..copied code with the condition removed..}

For the problem doesn't show in the example above, I think it is not OpenLayers bug.

Answer 2

It looks it is in VML.js in drawText method

I agree with that. But as for me, i tried

if(!label.parentNode) {
    label.appendChild(textbox);
    this.textRoot.appendChild(label);
}

and it didn't help. So i changed this line

textbox.inset = "1px,0px,0px,0px"; 

to this

textbox.inset = "2px,0px,0px,0px"; 

And lables became visible in IE7, but a little shifted to the left, so i changed 2px to 3px in this line.

So, as was said by zamorem:

Anyways my dirty solution is to override the method through:

OpenLayers.Renderer.VML.prototype.drawText = function() {
    ..copied code with changed textbox.inset ..
}

Answer 3

Vijay,

you probably "forgot to copy" these lines:

<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
 src="../OpenLayers.js"></script>

Replace '../' with absolute path (a quick guess : 'http://openlayers.org/dev/') and see if it gets better.

Answer 4

OpenLayers uses SVG to render the layers. However, this doesn't work on IE 8 and older. Whenever I try to set a layer containing labels visible, I get an unknown error in my JS console. So, this is probably not your fault (or we both did the same mistake somewhere).

Now, I am not sure if OpenLayers offers other technologies than SVG to draw the labels. However, SVG works fine on IE 9 and the labels are rendered correctly. Therefore, your application could advise the user to upgrade to IE 9. The problem is that IE 9 is unavailable until Vista and I believe there are still many XP users out there who won't be able to do the upgrade...

So, my solution is an IE hack. Check if the browser is IE 8 or less. If yes, set the style.label to null. Then, the uglier way is to use popups to display the text. The nicer solution is to create another overlay - a markers layer, where each marker icon would be a pre-rendered text.

Answer 5

try to use vml renderer for this issue.. I hope that works without trouble.

var vector = new OpenLayers.Layer.Vector("Cosmetic Layer", {
strategies: [Strategy],
renderers: ["CustomSVG", "VML"], //VML only for IE <= 8, labels are not rotated
protocol: new OpenLayers.Protocol.HTTP({
format: new OpenLayers.Format.GML()
})
});

i hope it helps you...