Put photos on a leash

[justinormont]

I'm looking to spread out the circle photos on the map. I need a UI element to show the user where the photos are really located.

Can someone put a dot and a line behind each circle photo, and connect the line to dot/circle? Then I'll code up a force directed graph layout algorithm to spread the photos nicely.

Before:

After:

[justinormont]

Here's a start on how one could do it in SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="0" y="0" width="150" height="150" xlink:href="http://farm9.staticflickr.com/8285/7736415366_79bb1888dc_q.jpg"></image>
  <line x1="75" y1="75" x2="250" y2="250" style="stroke: black; stroke-width: 3;"></line>
</svg>

Though, we're likely better doing it in CSS. Here's how to make a line in CSS: http://monkeyandcrow.com/blog/drawing_lines_with_css3/

There's also likely ways to do it in the Bing Maps API, which may be the best solution.

@mohamedmansour @jeremybenaim : Want to create this?