3

I have to display a multitude of labels on-screen without overlap. The label positions should be as close as possible to the features they describe. The features may be points, lines, or polygons on-screen (imagine any variety of map). I have to satisfy the following requirements in my application:

  • labels must be positioned to avoid overposting (overlap) with other labels
  • labels must be positioned to avoid overlapping with other features (polygons and line segments)
  • optimum position for a label is above and to the right of the feature they describe
  • below and to the right is less acceptable
  • least acceptable positions are to the left

I need to come up with a method for doing this.

Before I just start attempting to do this at random, I am hoping someone here may have already done this and be able to give me some advice as to where to start.

Basically, with the labels, I could use bounding boxes to compare them to each other. Although I don't know a good way to do this. With the line segments and polygons onscreen that they are labeling, I really don't have a clue what I should do to avoid overlap. I am hoping it won't require much more effort on top of avoiding the overlap of the labels themselves.

I think repulsion would work if I only had to deal with labels overlapping other labels. But if I have a line segment drawn across half the screen, I don't know how I can avoid overlap with that using the repulsion technique.

The language I am using is Actionscript 3 and the Flex framework. I don't believe Flex has any layout manager classes like there are in Java Spring that can do this work for me.

Anyway, links or suggestions would be welcome. I can allow for some brute force; I don't see how I can accomplish this otherwise. Thank you!

PS I believe the technical term for this problem is "overposting".

jpwrunyan
  • 530
  • 5
  • 22
  • Can I ask why do you need to do this? – J_A_X May 18 '11 at 14:03
  • Of course. It is for a map. The viewable area is dynamic. The positions of map features is the only data provided. But labels must be displayed to describe those features (features may be points, lines, or polygons). The rules for displaying the labels are as I described above. – jpwrunyan May 18 '11 at 23:51
  • Are you really going to have that many labels that you need to avoid overlapping? Seems like way too much info to have on the screen. It's like saying when you search in google maps, it doesn't add the marker, but the info bubble as well, for all the them... – J_A_X May 19 '11 at 03:26
  • Yes, of course. I will just tell my client: "Seems like you have way too much information on-screen". I'm sure they will understand. ;-) – jpwrunyan May 20 '11 at 07:46

1 Answers1

0

I don't see any way to accomplish this without having a reference to all the labels and the other shapes / lines you need to avoid. Assuming you have those references, just tie into the Flex Framework methods.

In updateDisplayList() loop over your labels; and position them in conjunction with to everything else on screen. You can use the getExplicitOrMeasuredWidth() and getExplicitOrMeasuredHeight() methods to determine the space needed for the item in question.

If you use a built in Flex Container, such as a VBox or HBox the labels and other lines will be positioned in accordance to each other. Or, if you're using Spark a VGroup or HGroup will offer the same functionality.

JeffryHouser
  • 39,401
  • 4
  • 38
  • 59