User can access a page that shows a map of dropped pins and list of restaurants visited

[itsahsiao]

Requires the following:

• User profile html
• Route to render template to user profile html, showing all of user's visited restaurants and map
• Database querying to find list of visited restaurants and coordinates/addresses
  • Pass information as JSON file from Python to Javascript
  • Pass user id into query - use session to get user id of logged in user
• AJAX request to get the JSON file and use in Javascript
• Map with markers and info windows for each visited restaurant
  • Map to display city of user (need to pass in the corresponding coordinates for map center)
• List of restaurant visits next to map

[itsahsiao]

Look into Google Maps and Mapbox API's
https://www.mapbox.com/mapbox-gl-js/api/
https://developers.google.com/maps/get-started/

Get this feature working by end of first week

[itsahsiao]

Decided to go with Google Maps API due to easier-to-read documentation

Created a test route /user-profile, that renders to user_profile.html
Implemented Google Maps API on user_profile.html and tested with markers
Map is able to plot multiple markers based on user's visited restaurant history (uses Jinja)
https://github.com/ashleyhsia0/hb-project-breadcrumbs/blob/master/templates/user_profile.html#L70-L84

[itsahsiao]

Uncommon to pass Jinja into Javascript.

Need to re-write code using data attributes and having Javascript act on the DOM to get the coordinates for the markers. Or JSON???

[itsahsiao]

Data attributes can work for one set of coordinates, but I need to iterate through multiple sets of coordinates to show all of user's visited restaurants.

Had issues understanding what JSON is and why we use it:

Use JSON as the data format to pass between Python and Javascript so they can communicate with one another. AJAX is used in Javascript to send requests or get responses from back-end to front-end. AJAX will get the JSON from Python, so that it can be used in Javascript (can also send info back to Python)

jQuery is just a library of Javascript that can act on the DOM's for a page.

Need to create a route in flask app for the JSON file and then pass into Javascript via AJAX.

[itsahsiao]

Created route for JSON, and got JSON passed through to Javascript, but came across a few errors (refer to Issue #12 ).

Scrapped the route /user-profile and used the proper route /users/int:user_id, so that user information can be displayed properly along with the map.

Established for loop in the JS code for the map and markers, and multiple markers now plotted on map.

Need to work on info windows

[itsahsiao]

Had issues with getting info windows appearing for each marker when clicked. Initially for my code, I had the info window and event handler inside of the for loop, which caused the info window to only appear for the last marker. Other markers were unclickable and info windows did not show up.

Found solution for multiple info windows here: http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

Info windows now appearing for each marker when clicked.

Remaining todo's for this feature:

• Need to center the map based on user's city. Added point to todo list above.
• Need to get user id to pass into the query (as tested everything with user_id=1). Might need to use session to get logged in user's user id and information. Added point to todo list above.

[itsahsiao]

After completing the user login feature and storing the user id in session, route for JSON is now able to query by user id and get all visits for the logged in user, rather than previous test user_id=1

# Query to get all visits for current logged in user (pass in user id from session)
user_visits = db.session.query(Visit).filter(Visit.user_id == session["current_user_id"]).all()

https://github.com/ashleyhsia0/hb-project-breadcrumbs/blob/master/server.py#L105-L106

[itsahsiao]

Added list of restaurant visits (recent 5) next to map per commit # c3fe707