I'm going through Foursquare's tutorial and am getting this error message when I try to load the page:
Connecting failed
This app has a configuration problem and was unable to connect to your Foursquare account.
Cause of error: Callback uri is not valid for this consumer
The code is the exact same as the sample code with my credentials subbed in. Is my Foursquare Client id not the right thing to use as the apiKey under config?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>foursquare :: Explore Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" id="jquery"></script>
<link href="/styles/leaflet.css" type="text/css" rel="stylesheet" />
<link href="/styles/apisamples.css" type="text/css" rel="stylesheet" />
<script src="/scripts/apisamples.js" type="text/javascript"></script>
<script src="/scripts/third_party/jquery.ba-bbq.js" type="text/javascript"></script>
<script src="/scripts/third_party/leaflet.js" type="text/javascript"></script>
<script src="/scripts/third_party/wax.leaf.min.js" type="text/javascript"></script>
<style type="text/css">
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; }
/* Give our markers a background image */
.leaflet-marker-icon {
background: url(https://foursquare.com/img/pin-blue-transparent.png);
padding: 6px;
padding-bottom: 17px;
top: -6px;
left: -6px;
}
</style>
<script type="text/javascript">
var config = {
apiKey: '[my Foursquare Client id]',
authUrl: 'https://foursquare.com/',
apiUrl: 'https://api.foursquare.com/'
};
//<![CDATA[
/* Attempt to retrieve access token from URL. */
function doAuthRedirect() {
var redirect = window.location.href.replace(window.location.hash, '');
var url = config.authUrl + 'oauth2/authenticate?response_type=token&client_id=' + config.apiKey +
'&redirect_uri=' + encodeURIComponent(redirect) +
'&state=' + encodeURIComponent($.bbq.getState('req') || 'users/self');
window.location.href = url;
};
if ($.bbq.getState('access_token')) {
// If there is a token in the state, consume it
var token = $.bbq.getState('access_token');
$.bbq.pushState({}, 2)
} else if ($.bbq.getState('error')) {
} else {
doAuthRedirect();
}
/* HTML 5 geolocation. */
navigator.geolocation.getCurrentPosition(function(data) {
var lat = data['coords']['latitude'];
var lng = data['coords']['longitude'];
/* Create map. */
var map = new L.Map('map_canvas')
.setView(new L.LatLng(lat, lng), 15);
var mapboxUrl = 'http://a.tiles.mapbox.com/v3/[my Mapbox username].[my map id].jsonp';
wax.tilejson(mapboxUrl, function(tilejson) {
map.addLayer(new wax.leaf.connector(tilejson));
});
/* Query foursquare API for venue recommendations near the current location. */
$.getJSON(config.apiUrl + 'v2/venues/explore?ll=' + lat + ',' + lng + '&oauth_token=' + window.token, {}, function(data) {
venues = data['response']['groups'][0]['items'];
/* Place marker for each venue. */
for (var i = 0; i < venues.length; i++) {
/* Get marker's location */
var latLng = new L.LatLng(
venues[i]['venue']['location']['lat'],
venues[i]['venue']['location']['lng']
);
/* Build icon for each icon */
var leafletIcon = L.Icon.extend({
iconUrl: venues[i]['venue']['categories'][0]['icon'],
shadowUrl: null,
iconSize: new L.Point(32,32),
iconAnchor: new L.Point(16, 41),
popupAnchor: new L.Point(0, -51)
});
var icon = new leafletIcon();
var marker = new L.Marker(latLng, {icon: icon})
.bindPopup(venues[i]['venue']['name'], { closeButton: false })
.on('mouseover', function(e) { this.openPopup(); })
.on('mouseout', function(e) { this.closePopup(); });
map.addLayer(marker);
}
})
})
//]]>
</script>
</head>
<body>
<div style="width: 100%; height: 100%;" id="map_canvas"></div>
</body>
</html>
