Created
December 7, 2014 10:53
-
-
Save jorgeas80/97e42f6a9a0978bceb53 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment