Augie Nav

This week was special for two reasons, we were able to implement using markers which was challenging at first, however, we created components that simplified the process which also gave us a cleaner code. Amongst the components we created are the CreateMarker, InfoBox, and Markers. Our Marker components use the CreateMarker component to create the markers which holds the InfoBox component which pulls the picture, Building name, location, and other attributes from firebase displays when clicked on the Map. This week was also special because we had our first sprint. We presented the progress we have so far to the entire class and it went well and received good feedback and ideas for our project from our Teacher/Advisor and our classmates. 

       This week, we decided on switching to Google Maps from Here Maps in React due to the time-consuming and confusing nature of its map implementation. The map is currently able to be displayed in hybrid mode, which shows a mix of normal and satellite views, and has the ability to be tilted at certain locations at higher zoom levels as shown below. It is also restricted to the Augustana College area and has icons turned off using styling. This API should prove much easier to work with, as well as provide features used by Google Maps. The next steps are to add markers for important locations. Source

     This week, we looked into how to add map markers for the buildings and other points of interest on campus. When clicked, they will display basic information about the location. Because a number of buildings and locations were not showing up on the basic map view, we decided that a satellite view (shown below) would be best to show what was not present on the other views. However, we are still trying to figure out how to implement this view in code. Source

 This week we mainly focused on our individual project that has a due date set for next week. We will be working hard on wrapping that up. For the team project this week we tried finding some tutorial that would help us in learning how to add custom objects on top of the map if we were to chose this map. 

 We found a great map that does pretty much everything we want and has 3D capability that we wanted as a bonus to our original idea.  Here is the link to their tutorial website https://developer.here.com/tutorials/react/ We are still trying to find more documentation and trying to implement the map in our code.  Additionally to this we are working on our individual project that has a code review data coming up.  Image below is from implementation of a map marker that we wanted to put on each building so that user can click and have the information from last weeks post shown to them. 

We set up a search box that we can type the name of the building and the code will retrieve the data from the data base.  We wanted to separate our api functions in case we change our code implementation but the idea of getting data about a specific building would sit work.  In the code above we pass the name of the building and get the information about that building only. We can change where we call and how we call this function but the core job that it's doing which is loading the information will always be working.   In the database we store the name of the building, description, and an URL to the image that is stored in the cloud.  The code above show how those elements are rendered back to the screen.