title: Create a smart, interactive map like the ones used on the FourSquare site
body: <p>First off, I'm trying to create something like this using Angular.js: <a href="https://foursquare.com/explore?mode=url&amp;near=San%20Francisco%2C%20CA&amp;q=comedy" rel="nofollow">https://foursquare.com/explore?mode=url&amp;near=San%20Francisco%2C%20CA&amp;q=comedy</a></p>
  
  <p>In summary, here are the tools I've tried:</p>
  
  <ul>
  <li>Mapbox.js</li>
  <li>Leaflet.js</li>
  <li>Angular-Leaflet directive</li>
  </ul>
  
  <p>For each, I've attempted to create a directive that would manage a list of locations that is associated with a map displaying those locations such that, when the user hovers over a list item, a tooltip appears above the location's marker on the map, and when they hover atop the location's marker on the map, a tooltip appears above that marker. (If this isn't clear, just visit the link above.) Hyperlinks, image, etc. should be able to appear within the tooltip. None of the above seem to give me the map portion of this functionality straight out of the box. Also, in order to even get markers to appear on the map, I have to essentially break away from idiomatic Angular, since the markers are vector items that are generated via the Leaflet/Mapbox toolkit. Writing this code feels wrong. Yes, I'm able to see the marker, but I can't really associate them with anything in the DOM. I'm confused.</p>
  
  <p>I'm just at a loss for how to create a smart, interactive map that is associated with other elements on my page. Libraries like Angular-leaflet allow you to get a map on your page pretty easily, but customization is PAINFUL (or so it seems). Is Angular.js, in combination with any of the above three tools, the way to go? Is there something I'm simply failing to understand?</p>