I have a dataset of points representing a To/From status - something like distribution centres and delivery addresses.

When the user clicks on a point I'd like to show the relationships between this point and its related points using lines. Eg when clicking on an address, show the path to the delivery centre.

This works fine, except when there are multiple overlapping lines. In this situation I'm looking for a method to separate the lines automatically, so that it's clear there are multiple lines, and each can be interrogated.

I've put a simple example on JS Fiddle - this sample creates 5 overlapping lines. Is there any way to displace them automatically, while retaining the start and end nodes?

enter image description here

This is the effect I'm aiming for, ideally handling multiple overlapping lines automatically:

enter image description here

This example uses Google Maps, but an answer in ArcGIS Server's JS API would be acceptable too.


If you apply a function jitter to your data points, it will provide that effect.

| improve this answer | |
  • This approach, although clever, looks doomed. The question explicitly asks to keep ("retain") the positions of the start and end nodes. If you jitter them so little that they will appear to be retained, then that won't resolve the overlap of the lines; but if you jitter them enough to resolve the overlap, it would be difficult to construe that as "retaining" the points. – whuber Mar 6 '15 at 19:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.