Mapbox w/ Foursquare

v1.0.02 Mapbox

by Kyle Pennell

HTML

<script src="http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.js"></script>
<link rel="stylesheet" href="http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.css">
<div class="map-controls"></div>

<div id="map" style="width: 100%; height: 500px;">
</div>

JavaScript

var map =  L.mapbox.map('map', 'iamdangavin.map-seme9ull');
	map.scrollWheelZoom.disable();
	
  //var features, markerLayer, interaction, container, items;

	navigator.geolocation.getCurrentPosition(function(data) {
		var lat = data['coords']['latitude'];
		var lng = data['coords']['longitude'];

		map.setView( [ lat, lng ], 12);

		$(function(){
			loadMarkers();
			map.on('dragend', function(e){
				map.markerLayer.clearLayers();
				loadMarkers();
			});
		});

		function loadMarkers() {
			map.markerLayer.clearLayers();
			bounds = map.getBounds();
			centerPoint = map.getSize().divideBy(2), targetLatLng = map.containerPointToLatLng(centerPoint);
			var latitude = targetLatLng.lat;
			var longitude = targetLatLng.lng;
			bounds = bounds._northEast.lat + ',' + bounds._northEast.lng + ',' + bounds._southWest.lat + ',' + bounds._southWest.lng;
			$.ajax({
				cache: true,
				url: 'https://api.foursquare.com/v2/venues/explore?ll='+latitude+','+longitude+'&radius=9999&query=tacos&oauth_token=1JB3POF44JPEC5FDIENCBZRSIUD3SM0YUS5CTV3E2245LNHW&v=20120101&limit=999&bounds='+ bounds+'&callback=?',
				dataType: 'json',
					beforeSend : function(){
						$('.map-controls').append('<div class="loading">\
			                    <img src="http://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif?p' + new Date().getTime()+ '" />\
			                    </div>');
			        $loading = $('.loading');
			        $loading.hide();
			        $loading.fadeIn(201, function(){
				        loading = true;
							});
		      },
		      success: function(data){

						venues = data.response.groups[0].items;
						// Place marker for each venue.

						var features = [];

						for (var i = 0; i < venues.length; i++) {
					  	var foursquareIcon = 'https://foursquare.com/img/categories_v2/food/burger_64.png';
					    var latitude = venues[i].venue.location.lat;
					    var longitude = venues[i].venue.location.lng;

					    features.push({
						  	type: 'Feature',
						 ...