Interactive Map Blog: Study Abroad Project

Introduction

I’m often told that I have “way too much time on my hands” after working on creative projects…which is true. I’m a college student, and like most college students, this is likely the period of my life — until retirement — where I have the most free time. I’m of the opinion that what I do with that free time now will greatly affect my life down the road, but I’ll admit to occasionally “wasting” time Photoshopping my college campus as the cover of a Grand Theft Auto game or with a Star Destroyer crashing into it. However, one of my recent creative projects is one that I’m very proud of.

Here’s a screencap from Lucas’ site

Building The Site

Ok, for those coming from non-technical backgrounds, either zone out now or skip to the end…or if you’re super gritty and like a challenge, keep on readin’!

A portion of the map for the project.

The Map

Like Lucas’ storytelling map, I wanted “interactive lines” to detail where I had travelled in Europe to give some context to my semester. To start out with development, I headed over to CodePen and created a mock-up of the more difficult of my project — the map. I stole the map of Europe from Wikipedia (I believe…?) and later added on the Middle East and parts of North Africa as needed. I tried to limit the size of the SVG file overall because my computer’s processor started going berzerk when I would scroll through the page, but in the end it was still pretty costly in terms of computing power (scroll through the blog at a medium rate and hear your fan start to whir!). For this reason, I had to hide the map on mobile devices because it just lags too much.

The Routes

Drawing the routes…

Scrolling Through Israel

The viewBox

In hindsight, I really wish I would have used canvas for this reason the most. In fact, if I do update this blog I will probably do so first my changing the map to canvas.

Scrollin’ to Cope!

The Use Of Jekyll

Jekyll proved to be invaluable during this project. It automates so many JS function calls and ID placements so that I don’t have to. Thanks Jekyll ❤

The Hero Image

Beautiful Bremen

The Slide Out Navigation Menu

Slide Out Navigation Menu

The Inclusion of Photos

Last, but definitely not least, I realized that it wasn’t as fun reading the posts without a little more visual context. Like my Snapchatting friends, I took many pictures throughout the semester. However, unlike them, I wasn’t carelessly sharing them with anyone who would look (I may be a little salty about SC…maybe…). So, instead, I took the deliberate route and selected just a careful few photos for my posts if I thought they would enhance the story. If there was something that couldn’t quite be appreciated just in words, I added a photo.

Conclusion

Well, there you have it. While most of my friends that were abroad simply Snapchatted their way across Europe (still salty…), I built an intentional, visually-appealing tool while learning a bunch in the process! Sure, I have many regrets about this project — I would still love to add a plane animation for flight…and I’d love to switch to canvas…and I’d love to go back and edit my writing — eh, hindsight is 20/20. But I now have something that I treasure and can look back on my stories from my semester abroad for years to come. Thinking about doing something creative? Please do. What else are you going to do with all of that extra time on your hands…

Engineer at Mailchimp · Lover of aviation, frugality, nature, and architecture · he/him · bobbylcraig.com