Skip to content

Instantly share code, notes, and snippets.

@dhcole
Created June 1, 2012 17:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dhcole/2854037 to your computer and use it in GitHub Desktop.
Save dhcole/2854037 to your computer and use it in GitHub Desktop.

###2

We’re going to start with some basic code. All I’ve done is set up the HTML structure of the page. For this example, I will use JQuery, JQuery BBQ, Leaflet, and the MapBox API.

Gist: https://gist.github.com/2853889

###3 Gist: https://gist.github.com/2853899

###4

Now that we have an access token for the user, we’re going to use the HTML5 geolocation API to determine the user’s location. We’re then going to create a map using Leaflet and the MapBox API that is centered on the user’s location. Note: Make a custom map and get your own API URL at MapBox.com/foursquare.

Gist: https://gist.github.com/2853912

###5

The final step is querying the foursquare API for recommended venues and placing a marker on the map for each venue. The venues/explore endpoint responds to GET requests so you can attach parameters to the URL. In this case, we’re sending the user’s latitude and longitude via the ll parameter. You must include the access token when making an authenticated request. We’ll also label each marker with its category icon from the foursquare API and use css to add a background image to frame them.

Gist: https://gist.github.com/2853853
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment