[GIS] OpenLayers labels overlapped

openlayers-2

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?

Best Answer

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.

Related Question