neveldo / jQuery-Mapael

jQuery plugin based on raphael.js that allows you to display dynamic vector maps
https://www.vincentbroute.fr/mapael/
MIT License
1.01k stars 195 forks source link

Dynamic defaultPlot text visualization for multiple longitude/latitude locations in the same vicinity #276

Closed RoyLee closed 7 years ago

RoyLee commented 8 years ago

When there are multiple text labels that are in the same longitude/latitude vicinity of each other, the labels can cover each other. Is there an option to dynamically position the label if this happens? If not, can you point me to the code location where the text/label generation happens? I would like to contribute to the codebase to make this happen if possible.

Screenshot of this: image

neveldo commented 8 years ago

Hi @RoyLee ,

Thanks for wanting to contribute on Mapael, you are welcome !

There are two options text.position and text.margin that allow you to adjust the text position to avoid bas positioning. However, Mapael doesn't handle texts overflow automatically but it could be a great feature.

The text position (that is relative to the related path or the circle) is computed within the getTextPosition() function (L1923).

Indigo744 commented 7 years ago

Ok so I have though a little bit about it, and there are several approach to this.

When drawing/updating a text element:

  1. Get its Boundary Box, and check if it overlap with any other boundary box of texts, plots or links.
  2. Get its Boundary Box, and check if one of the corner coordinates (x,y, x2,y, x,y2, x2,y2, and maybe the center cx, cy?) overlap with another text, plot or link using the function getElementByPoint()

The first approach has sadly really poor performance, as computing the bbox for all other elements could take quite some time.

The second approach should be better performance wise (although some test may be needed) but it would be far less accurate, and it could miss some case where the point does not cross the text...

To avoid getting the expensive boundary box for every object, we could perform a guess on the size using options like its size and coordinates. For text it's harder, but we could compute a rough approximate size with its font-size and string length...

Whatever we head to, it will have an impact on performance. Since this is not a highly requested feature, I suggest postponing this to future Mapael version. Maybe it could come back as an extension.

neveldo commented 7 years ago

Hello @Indigo744 ,

I agree with you. A third and lot simpler approach is to fix these overlays manually with the options text.position and text.margin. I think it still a good approach if the plotted cities are fixed and if they is few overlays to fix.

Indigo744 commented 7 years ago

Agreed.