jorgeas80 · December 7, 2014 10:53
diff --git a/leaflet.html b/leaflet.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Leaflet example | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  </head>
  <body>
    <div id="map"></div>
      
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    
    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    <script>
        // Foursquare
        var CLIENT_ID = 'YOUR_FOURSQUARE_CLIENT_ID_HERE';
        var CLIENT_SECRET = 'YOUR_FOURSQUARE_CLIENT_SECRET';   
        
        // https://developer.foursquare.com/docs/explore#req=venues/search
        var API_ENDPOINT = 'https://api.foursquare.com/v2/venues/search' +
            '?client_id=CLIENT_ID' +
            '&client_secret=CLIENT_SECRET' +
            '&ll=LATLON' +
            '&v=20141205' +
            '&intent=browse' +
            '&radius=800' +
            '&callback=?';
        
        
        function main() {
            var map = new L.Map('map', {
              zoomControl: true,
              center: [37.88748, -4.77708],
              zoom: 16
            });
            
            // Keep our place markers organized in a nice group.
            var foursquarePlaces = L.layerGroup().addTo(map);

            L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
              attribution: 'Stamen'
            }).addTo(map);

            cartodb.createLayer(map, 'http://team.cartodb.com/api/v2/viz/f6bfb6b8-7baf-11e4-8723-0e9d821ea90d/viz.json')
             .addTo(map)
             .on('done', function(layer) {

              layer.setInteraction(true);

              layer.on('featureOver', function(e, pos, latlng, data) {
                cartodb.log.log(e, pos, latlng, data);
              });

              layer.on('error', function(err) {
                cartodb.log.log('error: ' + err);
              });
            }).on('error', function() {
              cartodb.log.log("some error occurred");
            });
            
            // If you want to enable click interaction on map, uncomment this part
            /*
            var popup = L.popup();

            function onMapClick(e) {
                popup
                    .setLatLng(e.latlng)
                    .setContent("You clicked the map at " + e.latlng.toString())
                    .openOn(map);
            }

            map.on('click', onMapClick);
            */
            
            
            // Use jQuery to make an AJAX request to Foursquare to load markers data.
            $.getJSON(API_ENDPOINT
                .replace('CLIENT_ID', CLIENT_ID)
                .replace('CLIENT_SECRET', CLIENT_SECRET)
                .replace('LATLON', map.getCenter().lat +
                    ',' + map.getCenter().lng), function(result, status) {
                
                if (status !== 'success') 
                    return alert('Request to Foursquare failed');                
                
                // Transform each venue result into a marker on the map.
                for (var i = 0; i < result.response.venues.length; i++) {
                    
                    var venue = result.response.venues[i];
                    var latlng = L.latLng(venue.location.lat, venue.location.lng);
                    var marker = L.marker(latlng)
                        .bindPopup('<strong><a href="https://foursquare.com/v/' + venue.id + '">' + venue.name + '</a></strong>')
                        .addTo(foursquarePlaces);
                }
                
            });
        }

        // you could use $(window).load(main);
        window.onload = main;
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet example \| CartoDB.js</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
	<style>
	html, body, #map {
	height: 100%;
	padding: 0;
	margin: 0;
	}
	</style>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
	</head>
	<body>
	<div id="map"></div>

	<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>

	<!-- include cartodb.js library -->
	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

	<script>
	// Foursquare
	var CLIENT_ID = 'YOUR_FOURSQUARE_CLIENT_ID_HERE';
	var CLIENT_SECRET = 'YOUR_FOURSQUARE_CLIENT_SECRET';

	// https://developer.foursquare.com/docs/explore#req=venues/search
	var API_ENDPOINT = 'https://api.foursquare.com/v2/venues/search' +
	'?client_id=CLIENT_ID' +
	'&client_secret=CLIENT_SECRET' +
	'&ll=LATLON' +
	'&v=20141205' +
	'&intent=browse' +
	'&radius=800' +
	'&callback=?';


	function main() {
	var map = new L.Map('map', {
	zoomControl: true,
	center: [37.88748, -4.77708],
	zoom: 16
	});

	// Keep our place markers organized in a nice group.
	var foursquarePlaces = L.layerGroup().addTo(map);

	L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
	attribution: 'Stamen'
	}).addTo(map);

	cartodb.createLayer(map, 'http://team.cartodb.com/api/v2/viz/f6bfb6b8-7baf-11e4-8723-0e9d821ea90d/viz.json')
	.addTo(map)
	.on('done', function(layer) {

	layer.setInteraction(true);

	layer.on('featureOver', function(e, pos, latlng, data) {
	cartodb.log.log(e, pos, latlng, data);
	});

	layer.on('error', function(err) {
	cartodb.log.log('error: ' + err);
	});
	}).on('error', function() {
	cartodb.log.log("some error occurred");
	});

	// If you want to enable click interaction on map, uncomment this part
	/*
	var popup = L.popup();

	function onMapClick(e) {
	popup
	.setLatLng(e.latlng)
	.setContent("You clicked the map at " + e.latlng.toString())
	.openOn(map);
	}

	map.on('click', onMapClick);
	*/


	// Use jQuery to make an AJAX request to Foursquare to load markers data.
	$.getJSON(API_ENDPOINT
	.replace('CLIENT_ID', CLIENT_ID)
	.replace('CLIENT_SECRET', CLIENT_SECRET)
	.replace('LATLON', map.getCenter().lat +
	',' + map.getCenter().lng), function(result, status) {

	if (status !== 'success')
	return alert('Request to Foursquare failed');

	// Transform each venue result into a marker on the map.
	for (var i = 0; i < result.response.venues.length; i++) {

	var venue = result.response.venues[i];
	var latlng = L.latLng(venue.location.lat, venue.location.lng);
	var marker = L.marker(latlng)
	.bindPopup('<strong><a href="https://foursquare.com/v/' + venue.id + '">' + venue.name + '</a></strong>')
	.addTo(foursquarePlaces);
	}

	});
	}

	// you could use $(window).load(main);
	window.onload = main;
	</script>
	</body>
	</html>