ThinkGeo.com    |     Documentation    |     Premium Support

Adding labeling to a feature created by Openlayers.Feature.Vector

#1

Hi,


I am trying to create  Openlayers.Feature.Vector objects with externalGraphic, and label.  and here's my function to do so.


 


 


function createFeatureWithIconAndPopup (vectorlayer,featureTitle, featureId, lon, lat, iconFilePath, iconSize,  popupInfo)
{

 // geometry of the location object   
  var point = new OpenLayers.Geometry.Point(lon, lat);
  
  var iconFeature = new OpenLayers.Feature.Vector(point);
 
  if(featureId!="")
  iconFeature.id =featureId;
 
  if(featureTitle=="")
  {
  iconFeature.style ={
        externalGraphic:iconFilePath,
        graphicXOffset:-iconSize.w/2,
        graphicYOffset:-iconSize.h,
        graphicWidth:iconSize.w,
        graphicHeight:iconSize.h,
        pointRadius:0
        }
  }
  else
  {
   iconFeature.style ={
        externalGraphic:iconFilePath,
        graphicXOffset:-iconSize.w/2,
        graphicYOffset:-iconSize.h,
        graphicWidth:iconSize.w,
        graphicHeight:iconSize.h,
        label: featureTitle,
        labelAlign: 'cb',
        pointRadius:0
        }
  }
  iconFeature.attribute = {"description": popupInfo}

  vectorlayer.addFeatures(iconFeature);
     
}  I need to change the background color of the label to black, however, the Openlayers.Feature.Vector.style label doesn't seem to support html code.    Is there a way to change the background color of a feauture's label?  If not and I don't want to use popup or marker to do it , is there another way to do it? (I used to add the text with popup which caused performance issues when there are lot of such features. so I am changing the code now..)


so it's something like the below.  underneath the icon, there's the label in white in a black background. 



 


Thanks a lot!


 


Roson



#2

Or it can be done by changing something in css in the style sheet???  
  
 I very much appreciate your help! 
  
 Roson

#3

Hi, Lishan 
  
 The renderer of OpenLayers don’t support set the background color. Here is a workaround for you temporarily. You could draw a rectangle with black background color under the label.  
  
 Thanks, 
 Khalil 


#4

Hi Khalil, 
  
 Thanks for your reply. 
 I have thought about drawing a rectangle as you suggested too… but the thing is the label is dynamic…how wide to draw the rectangle would be a problem… I will try this it first… anyways. Thanks!  
  
 Roson

#5

Hi, Lishan



Also I have tried it and override the drawFeature funtion of OpenLayers.Renderer.VML ; the problem I have encountered is that I couldn't get the pixel width for label string width, and I just could approximate value. As you know, the pixel width will change every time you change the font size or font family. So you could refer the code in the attachment; it works well in IE. Please add OpenLayers javascript and externalGraphic with your own.



Thanks,

Khalil



1847-drawFeatureOfVMLRenderer.txt (3.48 KB)