Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question

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.

share|improve this answer

Probably you need to customize your styling. Use context in OpenLayers.Style(). See for example.

Regards, Nas

share|improve this answer

Why don't you use a server side styling in order to avoid that complicated client side style?

Geoserver, Mapserver, ArcGIS server, they all have their own label engine that produce them in proper places and sizes, so you don't have to worry about overlaping or so... just, let those things to you map server

At the server side you'll only have to write a SLD and attach it to your layer.

share|improve this answer
I have a similar problem where my markers are moving around in real time as GPS data is received from the vehicles. Several vehicles can be next to each other and even when one zooms all the way in the labels still overlap. How can I use "server side styling" to avoid the labels from colliding? – CramerTV Dec 11 '13 at 0:04

I Agree with @Chan Petrelli, Do it on the server side. Check out the Geoserver Labeling notes here. There is a whole bunch of options that will solve this for you in a Server Side SLD file.



share|improve this answer

Your Answer


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.