Created
September 10, 2018 16:53
-
-
Save escottalexander/bd9515720001470d61613b9f39bf074b 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
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