aruballo / neighborhoodapp

Neighbood App for Udacity Course

Neighborhood App

Neighborhood Application for Udacity Course. This application requests your location and allows you to search for interesting locations near you. It presents this information on a large interactive map. You can access the live version here: Neighborhood Map

How to use

Users can select a category and a subcategory from the first 2 dropdowns in the dropdown mode, and select a distance (in miles) from their current location. Users can also switch into "Search Bar" mode to simply search by keywords. A green marker will mark the users current location (or the default location if geolocation is not enabled); red markers will mark matching results. Clicking on the red markers will bring up a content window with the location title, the latest Yelp review and Yelp rating, as well as a link to the Yelp listing. Users can also filter the current list of locations with the Filter Results input box above the Results list (simply begin entering text and the list and map will filter out accordingly).

Technologies used

This application makes use of Google Maps. The Google Maps API is documented here: Google Maps API

The locations are retrieved using the Yelp API. That API can be found here: Yelp API

Makes use of Async.js: Async.js

For MV*, this application makes use of Knockout.js: Knockout.js

Makes use of jQuery for AJAX requests: jQuery

Google map theme located here: Papuportal Dark

Issues

In Firefox if you deny the geolocation request, the error callback never fires. See bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=675533

neighborhoodapp's Issues

On ipad, the flex items are always in column order

On a native ipad device, the dropdown and search bar items are always in column order, regardless of CSS setting.

Responsive Design

Make this application more mobile friendly. Currently, the sizing of the elements is very static and the "Results" list overlaps the search options on smaller screens.

Add labels to dropdown options

Currently it is not clear what each drop down means. Add labels to make this more clear.

Move search options windows lower

Move the search options window lower, as it currently overlaps some of the google map options

Make results list scrollable

Results list is boring and just static. Consider making it a scrollable list and figure out a way to display it on smaller devices rather than just hiding it.

Spruce up the design

The design is pretty boring. Consider prettying it up

Darken/blur background when inputting location

Make it obvious that the current window in focus is the location input when that option is clicked. Right now, besides the window popping out, nothing really indicates that this is the only action you can currently take.

Add more detailed comments on Async.js usage

Add comments to each async.js function call to explain what they are being used for. Currently the code is not clear on its use.

Geolocation error callback does not fire in Firefox

Consider detecting Firefox users and use an example location instead or allow users to enter their own geolocation manually.

Cross Origin issue in Chrome

In Chrome, trying to load a local JSON file using an AJAX request triggers a cross origin error. Figure out an alternative way to load the relevant JSON file.

InfoWindow content HTML is using inline styling

The InfoWindow objects that come up when a marker is clicked contain html content that is using inline styling. Move all this styling out into a CSS file.

Hitting "Satellite" or "Map" button resets the google theme back to normal

The "Map" and "Satellite" buttons reset the styling for the google map. Need to figure out why this occurs.

Replace old location marker when changing location

Old location markers remain on the map when a new location is chosen.

On android, rotating causes a white border to appear around the google map.

A white border appears on my device on the bottom and right side of the google map when I rotate my device. It goes away when I rotate back.