Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question
add comment

5 Answers

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.

share|improve this answer
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 Nov 23 '12 at 17:00
add comment

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 ..
}
share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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