javascript - Create a smart, interactive map like the ones used on the FourSquare site -

javascript - Create a smart, interactive map like the ones used on the FourSquare site -

first off, i'm trying create using angular.js: https://foursquare.com/explore?mode=url&near=san%20francisco%2c%20ca&q=comedy

in summary, here tools i've tried:

mapbox.js leaflet.js angular-leaflet directive

for each, i've attempted create directive manage list of locations associated map displaying locations such that, when user hovers on list item, tooltip appears above location's marker on map, , when hover atop location's marker on map, tooltip appears above marker. (if isn't clear, visit link above.) hyperlinks, image, etc. should able appear within tooltip. none of above seem give me map portion of functionality straight out of box. also, in order markers appear on map, have break away idiomatic angular, since markers vector items generated via leaflet/mapbox toolkit. writing code feels wrong. yes, i'm able see marker, can't associate them in dom. i'm confused.

i'm @ loss how create smart, interactive map associated other elements on page. libraries angular-leaflet allow map on page pretty easily, customization painful (or seems). angular.js, in combination of above 3 tools, way go? there i'm failing understand?

in angular-leaflet-directive, can bind marker events. here illustration implements dragend event (taken here). should able utilize mouseover event, hovered marker events arguments , show it's popup.

var app = angular.module("demoapp", ["leaflet-directive"]); app.controller('markerssimplecontroller', [ '$scope', function($scope) { var mainmarker = { lat: 51, lng: 0, focus: true, message: "hey, drag me if want", draggable: true }; angular.extend($scope, { london: { lat: 51.505, lng: -0.09, zoom: 8 }, markers: { mainmarker: angular.copy(mainmarker) }, position: { lat: 51, lng: 0 }, events: { markers: [ 'dragend' ] } }); $scope.$on("leafletdirectivemarker.dragend", function(event, args){ $scope.position.lat = args.model.lat; $scope.position.lng = args.model.lng; }); } ]);

javascript angularjs leaflet mapbox angular-leaflet-directive