NextGenerationCity.com

Bobby Bayer,technology

Update 02/03/2017: NextGenerationCity.com is no longer actively maintained.

I created NextGenerationCity.com as a digital media project for Professor Kirk Glaser's Critical Thinking & Writing 2 class (Writing about Sustainability) during the Winter 2014 quarter at Santa Clara University. I worked with a group of three other people for this project, who aggregated the information displayed, while I led the development of the site.

Screenshot of NextGenerationCity.com

The website is an interactive map built off of Google Maps Javascript API v3 that allows the viewer to learn about the sustainability of Germany on three different levels: regional, city, and neighborhood. Germany has been a pioneer in the field of sustainability, and we wanted to highlight their progress in an interesting way.

Screenshot of NextGenerationCity.com

This project was my first experience with JavaScript, my first time using an API, and my first website. Needless to say, there was quite a learning curve, but I really enjoyed building it!

I used Google Maps markers to give the user different pieces of information about the region when they clicked on the icons.

Screenshot of NextGenerationCity.com

Screenshot of NextGenerationCity.com

I also incorporated FancyBox to display a one-time only "pop-up" (shown in the first picture) using cookies, and a video "pop-up" when the user entered the HafenCity section.

Screenshot of NextGenerationCity.com

I used Google Fonts for the typography, and styled the map using custom colors and data.

Screenshot of NextGenerationCity.com

Screenshot of NextGenerationCity.com

Check out NextGenerationCity.com to see the site live!

© Bobby Bayer.RSS