OpenLayers labels overlapped

Question

I have a problem with OpenLayers rendering close labels. When two labels are close, it will render the labels texts unreadable.

My goal is that when two labels with text overlap each other, one could see the text clearly on a white background. So, if two labels overlap each other, one should be able to read the text of the one on top correctly.

For this I used the following characteristics:

pstyle.label = txt;
pstyle.fontColor = "#000000"   
pstyle.fontOpacity = 1;
pstyle.fontFamily="Arial";
pstyle.fontSize = "12 px";  //16px
pstyle.fontWeight = "bold";
pstyle.labelYOffset = -10;

pstyle.graphic = false;

pstyle.backgroundGraphic = "/ddrt_WEB/img/WhiteBackground.png";
pstyle.backgroundYOffset = 1;
pstyle.backgroundHeight = 20;
pstyle.backgroundWidth = 180;
pstyle.backgroundGraphicZIndex = 1

Which properties do I have to use to avoid this problems?

Answer 1

Probably you need to customize your styling. Use context in OpenLayers.Style(). See http://rndxpress.wordpress.com/2013/03/12/openlayers-custom-style-for-individual-features/ for example.

Regards, Nas

Answer 2

Try the labelOutlineColor and labelOutlineWidth properties, example:

var yourStyle = new OpenLayers.Style({
  'label' : '${name}',
  'fontColor' : '#222222',
  'fontSize' : '14px',
  'fontWeight': 'bold',
  'labelXOffset': 13,
  'labelYOffset': 10,

 'labelOutlineColor' : "#FFFFFF", 
 'labelOutlineWidth' : 2

});

This makes a 2 unit wide white border around the label.