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



5 Answers 5


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

if(!label.parentNode) {

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.

  • 1
    works perfectly for me, thanks! btw, In a simpler page I don't need this hack, that is mandatory in my complex webapp, where I use other libraries like jquery ui. I'm just curious to find the guilty code...
    – D_Guidi
    Commented Nov 23, 2012 at 17:00

It looks it is in VML.js in drawText method

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

if(!label.parentNode) {

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 ..


you probably "forgot to copy" these lines:

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

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


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.


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...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.