Day thirty: Topography

October 25, 2015

In today’s world there isn’t always access to internet. What if you get stranded? Would you know how to get home? Test your topography knowledge in today’s app!

live demo

I had the idea for this app for a long time. However, I didn’t know how to render a nice world map on the page. I have tried google maps in the past but that was a disaster. Fortunately I came across the awesome Mapael package. This package allows the user to render a vector of the world. It also provides a way to attach event handlers to a country! Awesome, exactly what I need!


Installing the package through bower seemed to break with the error that it’s not a valid git repository. Since the package has not been maintained for a while. I figure the quickest way to get it to work was to download the source file and place them inside the codebase. This felt incredibly dirty to do. The only way I will sleep at night is to remember that at least the app works. This picture captures the sadness that went with this decision. sadness

angular is awesome

The app is build with angular. I have a love and hate relationship with this framework. However, it worked incredibly well with this app. There are two controllers. They can communicate with a single factory. This factory holds the reference to the country the user is asked to click on.

Besides from the initial obstacle with the installation of the map. Building this app was a lot of fun! It reminded me of how awesome angular can be. It motivates me to dive deep into angular 2!

Thank you for reading and don’t forget to leave a star on the repo.