search

mohamedmansour / hackathon-letsgo.io

letsgo.io - Photo Hack Day 4 project
http://letsgo.io
5 stars 6 forks source link

Put photos on a leash #22

Open justinormont opened 11 years ago

justinormont commented 11 years ago

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: clustered - finished

After: unclustered - finished

justinormont commented 11 years ago

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>

SVG example

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?