Skip to content

Instantly share code, notes, and snippets.

@escottalexander
Created September 10, 2018 16:53
Show Gist options
  • Save escottalexander/bd9515720001470d61613b9f39bf074b to your computer and use it in GitHub Desktop.
Save escottalexander/bd9515720001470d61613b9f39bf074b to your computer and use it in GitHub Desktop.
const STORE = {
mapId: 0,
lat: 0,
lon: 0,
categoriesSettings: {
url: 'https://api.foursquare.com/v2/venues/categories',
data: {
client_id: 'KQZRJLBTVACPKJ2NYBQXS3AZ1ALG0HOWLJVNKI3MKHOPEI3O',
client_secret: 'MNYP4FZLA33QRUFKTMXCXSYJ00OYBYO2M5IHGL3IUOKD1SW4',
v: '20180823'
},
dataType: 'jsonp',
type: 'GET',
success: pushCategories
},
geoLocateSettings: {
url: 'https://maps.googleapis.com/maps/api/geocode/json',
data: {
latlng: returnLatLon,
key: 'AIzaSyDiXUZ7Xr5xmORnIYMRrFh5-Y3HnnMzBc8'
},
dataType: 'json',
type: 'GET',
success: showGeoLocatedAddress
},
foursquareSearchSettings: {
url: 'https://api.foursquare.com/v2/venues/search',
data: {
client_id: 'KQZRJLBTVACPKJ2NYBQXS3AZ1ALG0HOWLJVNKI3MKHOPEI3O',
client_secret: 'MNYP4FZLA33QRUFKTMXCXSYJ00OYBYO2M5IHGL3IUOKD1SW4',
v: '20180823',
limit: 10,
radius: 10000,
intent: 'browse',
near: `${$('input[type=address]').val()},${$('input[type=city]').val()},${$('input[type=state]').val()},${$('input[type=zip]').val()}`,
query: `${$('input[type=search]').val() === undefined ? '' : $('input[type=search]').val()}`,
categoryId: `${$('select[type=dropdown]').val() === 'all' ? '' : $('select[type=dropdown]').val()}`
},
dataType: 'jsonp',
type: 'GET',
success: renderResponse
}
};
const FOURSQUARE_SEARCH_URL = 'https://api.foursquare.com/v2/venues/search';
const FOURSQUARE_VENUE_URL = 'https://api.foursquare.com/v2/venues';
// page load events and click events handling
$(event => {
getCategoriesApiResponse(pushCategories);
$('#submit').on('click', searchForResults);
$('#locate').on('click', geoLocateUser);
});
function geoLocateUser() {
event.preventDefault();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(reverseGeoLocateApi);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function reverseGeoLocateApi(position) {
STORE.lat = position.coords.latitude;
STORE.lon = position.coords.longitude;
$.ajax(STORE.geoLocateSettings);
}
function returnLatLon () {
return `${STORE.lat},${STORE.lon}`;
}
function showGeoLocatedAddress(response) {
let houseNum = response.results[0].address_components[0].short_name;
let roadName = response.results[0].address_components[1].short_name;
let cityName = response.results[0].address_components[2].short_name;
let stateName = response.results[0].address_components[5].short_name;
let zipCode = response.results[0].address_components[7].short_name;
$('input[type=address]').val(`${houseNum} ${roadName}`);
$('input[type=city]').val(cityName);
$('input[type=state]').val(stateName);
$('input[type=zip]').val(zipCode);
}
function getCategoriesApiResponse() {
$.ajax(STORE.categoriesSettings);
}
function pushCategories(results) {
for (let i = 0; i < results.response.categories.length; i++) {
let categoryName = results.response.categories[i].name;
let categoryId = results.response.categories[i].id;
$('#categories').append(`<option value=${categoryId}>${categoryName}</option>`);
}
}
function searchForResults() {
event.preventDefault();
let location = `${$('input[type=address]').val()},${$('input[type=city]').val()},${$('input[type=state]').val()},${$('input[type=zip]').val()}`;
let query = $('input[type=search]').val();
let categoryId = $('select[type=dropdown]').val();
getSearchApiResponse(location, query, categoryId);
}
function getSearchApiResponse(location, query, categoryId) {
// const settings = {
// url: FOURSQUARE_SEARCH_URL,
// data: {
// client_id: 'KQZRJLBTVACPKJ2NYBQXS3AZ1ALG0HOWLJVNKI3MKHOPEI3O',
// client_secret: 'MNYP4FZLA33QRUFKTMXCXSYJ00OYBYO2M5IHGL3IUOKD1SW4',
// v: '20180823',
// limit: 10,
// radius: 10000,
// intent: 'browse',
// near: location,
// query: `${query === undefined ? '' : query}`,
// categoryId: `${categoryId === 'all' ? '' : categoryId}`
// },
// dataType: 'jsonp',
// type: 'GET',
// success: renderResponse
// };
$.ajax(STORE.foursquareSearchSettings);
}
function renderResponse(results) {
console.log(results);
let listOfVenues = results.response.venues;
$('#results').empty();
for (let i = 0; i < listOfVenues.length; i++) {
let venueId = listOfVenues[i].id;
let venueName = listOfVenues[i].name;
let venueLocation = `${listOfVenues[i].location.formattedAddress[0]} ${listOfVenues[i].location.formattedAddress[1]}`;
let lat = listOfVenues[i].location.lat;
let lon = listOfVenues[i].location.lng;
$('#results').append(`${getVenueApiResponse(venueId, renderVenue)}${renderMap(lat, lon, venueName)}`);
}
}
function getVenueApiResponse(venueId, renderVenue) {
const settings = {
url: `${FOURSQUARE_VENUE_URL}/${venueId}`,
data: {
client_id: 'KQZRJLBTVACPKJ2NYBQXS3AZ1ALG0HOWLJVNKI3MKHOPEI3O',
client_secret: 'MNYP4FZLA33QRUFKTMXCXSYJ00OYBYO2M5IHGL3IUOKD1SW4',
v: '20180823',
},
dataType: 'jsonp',
type: 'GET',
success: renderVenue
};
$.ajax(settings);
}
function renderVenue(venueInfo) {
console.log(venueInfo);
let name = venueInfo.response.venue.name;
let photoUrl = venueInfo.response.photos.url;
let distanceAway = venueInfo;
return `
<h3>${name}- ${distanceAway}</h3>
<div class="venue-info hidden">
<img src=${photoUrl} />
<div class="map">
</div>
</div>
`;
}
function renderMap(lat, lon, venueName) {
let mapId = STORE.mapId;
STORE.mapId++;
return `
<div id="map_${mapId}"><img src='https://maps.googleapis.com/maps/api/staticmap?markers=color:blue%7C${lat},${lon}&zoom=18&size=400x400&key=AIzaSyDiXUZ7Xr5xmORnIYMRrFh5-Y3HnnMzBc8'/></div>
`;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment