[OpenLayers-Users] labels in IE

[Kris Geusebroek]

Hi all,

 

I'm using the new label functionality and modified it a bit to show a
colored border around the label. This is successfully within IE6, but
within IE7 the value of textbox.clientWidth is always 2 so my border is
a 2px wide rectangle.

The clientHeight is correctly set so I now have a label of 14px high and
2 px wide.

Can somebody explain me why clientWidth is not working in IE7?

 

Heres my adjusted code for the VML renderer:

var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX,
"olv:rect");

var textbox = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX +
"_textbox", "olv:textbox");

                

var resolution = this.getResolution();

label.style.left = (location.x/resolution - this.offset.x).toFixed() +
"px";

label.style.top = (location.y/resolution - this.offset.y).toFixed() +
"px";

label.style.flip = "y";

textbox.innerText = style.label;

 

if (style.fillColor) {textbox.style.color = style.fontColor;}

if (style.fontFamily) {textbox.style.fontFamily = style.fontFamily;}

if (style.fontSize) {textbox.style.fontSize = style.fontSize;}

if (style.fontWeight) {textbox.style.fontWeight = style.fontWeight;}

textbox.style.whiteSpace = "nowrap";

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

 

if(!label.parentNode) {

  label.appendChild(textbox);

  this.textRoot.appendChild(label);

}

 

var align = style.labelAlign || "cm";

var xshift = textbox.clientWidth
*(OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(0,1)]);

if (style.pointRadius) {xshift += style.pointRadius *
(OpenLayers.Renderer.VML.LABEL_RADIUS_SHIFT[align.substr(0,1)]);}

var yshift = textbox.clientHeight *
(OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(1,1)]);

if (style.pointRadius) {yshift += style.pointRadius *
(OpenLayers.Renderer.VML.LABEL_RADIUS_SHIFT[align.substr(1,1)]);}

yshift -= index * (textbox.clientHeight);

label.style.left = parseInt(label.style.left)-xshift+"px";

label.style.top = parseInt(label.style.top)+yshift+"px";

label.style.width = textbox.clientWidth + ((style.labelStrokeWidth) ?
style.labelStrokeWidth : 0);

label.style.height = textbox.clientHeight + ((style.labelStrokeWidth) ?
style.labelStrokeWidth : 0);

                               

if (style.labelStrokeColor) { 

  label.setAttribute("strokecolor", style.labelStrokeColor); 

  label.setAttribute("strokeweight", style.labelStrokeWidth + "px"); 

} else {label.setAttribute("stroked", "false");}

var strokes = label.getElementsByTagName("stroke");

var stroke = (strokes.length == 0) ? null : strokes[0];

if (!style.labelStrokeColor) {

  if (stroke) {label.removeChild(stroke);} else {

    if (!stroke) {

      stroke = this.createNode('olv:stroke', label.id + "_stroke");

      label.appendChild(stroke);

    }

    stroke.setAttribute("opacity", style.labelStrokeOpacity);

  }

}

 

The index var is used to make multiple labels for clustered features BTW
;-)

Also I'm not able to apply the same logic to the SVG renderer so help on
that side is valued also.

 

Cheers Kris

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20090508/04a410d9/attachment.html