Bike Stations
Introduction
During a course I took in college, one of the projects I did was to do a statistical analysis of several bike stations in the city of Chicago. The goal of the project was to provide statistical data on the bike stations such as available bikes, bikes in use, and hotspots through graphical representations like bar charts, pie charts, and heatmaps. One component I did not include in the original project was a visual map to display where these bike stations were and show basic info about the station such as available bikes etc.
The original project used data provided by the City of Chicago which I decided to continue to use for this project. However, there is one slight difference. Sometime in the year 2022, Lyft has implemented their own bike sharing system which has replaced the original bike infrastructure along with the original data set. Instead of just standard bicycles, Lyft's new bike infrastructure also has e-bikes and scooters in addition to standard bicycles. This has also been reflected in their new dataset which I decided to also implement into the visual map.
You can see the finished product below! The map is an interactive map meaning you can click and drag around and zoom in on the map itself. Howver to keep things simple, I only included 19 stations. Sometimes you won't see all 19 stations on the map. This is because I have configured the code to not display the station if there are no vehicles available at that station.
Overview
The goal of this project was to create a map that displays information aout vehicle availability using the Google Maps JavaScript API. Data is provided by the City of Chicago / Divvy Bicycle Stations. The main technologies used in this project were the Google Maps JavaScript API, AWS API Gateway, JavaScript, HTML, and CSS. While I thought this project was going to be more on the simpler side, I still learned quite a bit from doing this project. I learned more about APIs in general, more about JavaScript, and even got my feet wet in a bit of Google Cloud. Below you can see the steps I did to accomplish this project.
Google Cloud
I heard there was once a time where you did not need a google account to use Google's Maps API. However, as of this project you need to create a Google Cloud account with a billing profile. This is to generate your API keys that you will use to make calls to the Maps API. After setting up the Google Cloud account, I created my API key and restricted it to ensure only my website can make calls to my Maps API.
Once the API key was created, I created a custom map, getting rid of all the clutter that would otherwise get in the way of the bike station information. Now that I had my API key and custom map, it was time to start implementing the map into my website.
APIs
To create the map itself, I used the Google Maps API to load in the map. Along with that, I also used AWS API Gateway to direct my calls to get the bike station data I needed. I chose to implement API Gateway to get more experience using the service, and also to get more experience with Terraform.
To set this up, I craeted four new resources: two new routes and two new integrations. The reason why I needed two of each was because the data I needed were in two separate URIs. The two routes will then forward the requiest to the integrations which are the URIs containing the data I needed.
HTML / JavaScript
If you read my other post about this website, you will know that this website is just a template that I liked. This page follows that same template so there was not a whole lot of custom HTML that I needed to create. The majority of the work is done in JavaScript.
While I learned a bit of JavaScript in school, I admit I am not the best at using it. I much more prefer Python. During my initial plan, I was thinking of using AWS Lambda and Python to generate the data I needed, but by the time I started to write my JavaScript, I realized that I could cut out AWS Lambda and just do everything in JavaScript, eliminating excess infrastructure.
There are two main functions that my code does that I most enjoyed learning about: Async/Await, and DOM Manipulation. As I said before, I have learned JavaScript in the past so I knew just enough to start writing a drafft. On my first draft of the code, I was able to get my map up and running but for some reason, my map markers were not populating! I troubleshooted this for what seemed like days, until I started researching and came across Async and Await. These patterns is a syntax used in JavaScript mostly used for things such as API calls, allowing the program to follow a specific pattern and ensure certain parts of the code are done executing before continuing further.
Once I learned about Async and Await, things were starting to look a lot better. My code was generating actual numbers the markers were finally able to get placed in their respective locations.
CSS
Now that all my elements were being created and all the data is accurate, it was time to style the markers. While I thought styling was not going to be a problem, it turns out this was a much more important task than I anticipated. When the markers first loaded onto the map, they were humongous to the point where I could not see the map at all. Luckily I learned and used CSS in the past, well enough to where I could style the markers to just the way I wanted them. I even included some vector images to differentiate the different types of vehicles that are available per station.
Final Thoughts
Overall, I thoroughly enjoyed this project. It taught me a lot about API call requests and responses, securing resources, new prorgamming techniques, and much more! I would definitely recommend this project to you if you would like to learn about APIs, or if you just want to brush up on your HTML and JavaScript skills!