BikeNav

Google Maps view using BikeNav chrome extension
Google Earth view using BikeNav chrome extension

Inspiration

We chose the navigation track because of our shared hobby—cycling. We had always struggled with using three different websites to check the weather data and conditions, map our location, and get a 3D view of the cycling route. Each time, we had to re-enter data for each website. So, we built an accessible and free-to-use Chrome extension, BikeNav, to solve this problem.

What it does

BikeNav scrapes data from different sources and concisely presents the weather data on a bottom panel on Google Maps itself, reducing the number of websites we have to use to just one. It also contains an Immersive view button, which presents a 3D preview of the cycling routes near a location. It migrates entered data from Google Maps, eliminating the need to enter the same data all over again and enhancing the accessibility of our software.

How we built it

We extensively used JavaScript to scrape data and present it on the active tab. We also used JSON files to manage cross permissions for browser-tab queries to ensure smooth data communication.

Challenges we ran into

We were limited by the restrictions Chrome extensions have in their ability as opposed to proprietary software. We had to overcome such challenges by finding alternate solutions to present data. Using asynchronous functions, which had to be called only at certain times to ensure smooth communication between the client-side browser and the active tab, was another challenge. Making sense of coordinates from the Google Maps URL and estimating the height of the panning camera by using those coordinates to get the altitude was another significant challenge.

Accomplishments that we're proud of

Our software greatly enhances the user experience on Google Maps by providing more accessibility to bicyclists. We have successfully performed a cross-connection between Google Maps and Google Earth. We have successfully displayed the weather data. The software is easy to use and install. It is cross-platform and can be used from anywhere.

What we learned

Using JavaScript to manipulate active tabs, scraping the web using JavaScript, handling HTML and CSS components, and extracting coordinates and other information from cryptic URLs.

What's next for BikeNav

Better graphics on Immersive View: using transparent videos to map weather conditions, highlighting the route in blue. Real-time location sharing and embedding Google Earth on Google Maps for Immersive View.