Team Project Showcase

Augie Nav📡




Augie Nav is an application designed to help prospective students or even current students who might want or need to learn more about campus. It allows students to find buildings around campus, get information about the route that ACES follows, and find information about different locations throughout campus.

Technologies Used

  • React

    • Visual Studio Code

  • Firebase

    • Picture storage

    • Text information storage

  • Google Maps API

    • Interactive map and its functionalities

  • Adobe Illustrator

    • Creating icons



App Architecture








The extent of the map is restricted to Augustana College and the surrounding areas. Google Maps API was used to provide the functionalities of the map such as Street View, which can be accessed by dragging the small yellow person to a location. We used Firebase for storing data about the buildings on campus, including descriptions and images. In order for the data in Firebase to be displayed properly (for example, markers), the string had to match the name of the document in Firebase exactly.




Markers is a class in the Google Maps API that enables the creation of markers at different locations. By using object-oriented programming, we created a CreateMarker class that allowed new markers to be displayed by simply adding the name, coordinates, and type according to the Firebase.

The InfoBox was set up to display the name and description of a location along with an image when a marker was clicked in a small container. The icons for the markers were custom-made in Adobe Illustrator and help differentiate between the types of building such as academic, recreational, residence hall, etc.



Google Maps API also allows for the drawing of Polylines, which we used to draw the routes for ACES and directions between a few of the academic buildings on campus. Polylines display a line by connecting a number of coordinates which it reads from a list. The lists were stored in a separate file in the utility folder. The color, weight, and style of the lines can be customized as well. These routes can be shown and hidden by clicking on the buttons in the upper right hand corner.



We have also included a search function that works a little bit differently. It searches the combination of letters being entered and removes markers as the letters are being entered, leaving only the ones containing the letters.

 


 

Comments

Post a Comment

Popular posts from this blog

Week 11

Image
 The time has finally come, the final week of work on our presentations. We had lots of work on our table, but we managed to come out with a good final product. We were able to successfully implement routes between certain buildings, a search function, as well as some other CSS things as well as custom icons for the different locations throughout campus. We were also able to clean up some of the code and iron out some errors that we were having.  This is our final transmission as we present our project this Tuesday from 9-11 to the rest of our peers. This has been a challenging project for many different reasons but overall we are happy with the outcome of our project.
Read more

Week 7: Switching to Google Mpas

Image
       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
Read more

Week 10

Image
 This week we were able to help students get around campus. We were able to implement a button that shows the current ACES vans route around campus. This just shows where the ACES van goes and is able to pick students up from different locations around campus. You can show the route, or hide it with the simple click of a button. We have also been able to implement more locations around campus and information about them. The red line represents the the ACES route.  We have entered the final week of this sprint. We are working on finishing up some final functionalities such as a search function, different icons for the different types of buildings, the hiding of different infoboxes when others are opened, and the ability to get directions around campus.
Read more