Interactive Map Blog: Study Abroad Project
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 my friends and Hitler together on a fictional movie poster. However, one of my recent creative projects is one that I’m very proud of.
This past spring I studied abroad in Germany and decided I would start a travel blog to recount my experiences. I’m a pretty terrible story teller, and it doesn’t make things any better that my memory is pretty shoddy, so I thought this would be a great way for me to share my experience with those at home once I returned. With some time, I figured I could formulate interesting stories and pair those with photos of my adventures to really immerse my reader in my abroad semester.
My blog started off pretty typical. Do something notable? Write a post. Even if I didn’t do anything interesting for a period of time, I would write a post about how I didn’t do anything interesting. It got pretty repetitive and formulaic. A few weeks in I wasn’t really compelled to continue writing — I had to do something different.
Then I remembered I’m a computer science student…I could take this blog to a whole new level. Seeing as I was abroad, I was traveling quite a bit. And seeing as I’m American, European geography is not one of my friends’ and family’s strong suits. (It’s true. I remember telling someone about visiting Denmark and they asked if it was beside France.) After mulling over several different concepts for a new blog layout, I remembered this post by Lucas Bebber that I had seen a few months prior. Lucas has his source code available, and he even has a guide on how he built his site, but I’m a poor college student and didn’t want to pay for hosting a Node site. Therefore, I had to go a different route. Still, drawing much inspiration from Lucas’ concept and design, I set out to create my own version with nothing but HTML, CSS, and good ole vanilla JS (okay, I might have used jQuery…sue me). Complemented by GitHub’s delightful free static site hosting and Jekyll, the static site generator of choice, I now had a mission.
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’!
Also, just as a disclosure: I realize that there are lots of poor decisions that were made in the creation of this tool. At the time of creation, well-built code wasn’t exactly the goal…and improving it is a problem that future-Bobby gets to contemplate. I denoted several places where design decisions could be better throughout this post.
Also, it may be helpful to reference the blog…I just realize this after typing the entire post…
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.
Even with the political boundaries denoted on the map, for the common person it was sort of difficult to visualize where exactly cities were in Europe. So, I created a separate group and paired together a bunch of dots marking major cities in Europe, which would later become very important when drawing lines between destinations. I even added a bit of JS in to place a text element beside the dots with the name of the city (depending on the id of the dot in the SVG).
The map was easy enough to get down…adding the lines on top of it was a little bit more difficult.
Drawing the routes…
One of the things I liked most about Lucas’ map was how it traced a path. It didn’t draw a direct path between destinations and it didn’t draw a beautiful parabolic arc either (except when flying, I suppose). When the path loops and winds, I feel as though I’m on the road and experiencing the journey — I definitely wanted that to be part of my blog.
I reopened the SVG file where I created the map of Europe and added a new group in order to avoid mixing up the landmasses and cities with paths. Seeing as a started working on the new version of the blog in mid-March, I had already taken several trips to different cities and had to begin by tracing these routes. However, I noticed that I had trouble making my routes look as enticing as the ones in Lucas’ version. I tried to guess which way my trains or buses had travelled, but it just didn’t look good. My solution? I found a picture of a map of all the major highways and railways in Europe and slapped that overtop of my SVG file. I proceeded to trace along the roads and tracks to achieve organic-looking routes. Woo! Of course, between instances of exporting the SVG I hide the roadmap layer to give the illusion that I track where I was going via GPS or something smart like that. I didn’t.
After drawing all of the paths over the map, I had to figure out how to animate them…back to my working model in CodePen!
Animating the routes…
I messed around with several different methods of animating the SVG paths to appear as though they were moving along. This step actually took me a lot longer than I’d like to admit. Eventually, I decided on an approach that basically creates a dashed line out of my path and gives it an offset to appear as though it’s moving. I realized that if I made the dashes as long as the path, moving it along would just seem like it’s growing from the source. While this was fine and dandy for one of the paths, I didn’t want to have to individually calculate everything for each path to make this work right. Fortunately, I found a JS function called `getTotalLength()` that would calculate the length of the line for me. I used this to get the length of each of the paths I drew quickly and easily. While this was very fortunate, I don’t believe the browser support on that function is great, so I kind of traded accessibility for my ease of development. Sorry to anyone using a browser that doesn’t support it! I swear the animation looks pretty cool in the end!
Now that I knew how to animate the line, I had to actually animate it based on how far down the page I scrolled. I placed ID tags onto the beginnings of blog posts in order to measure how far someone was scrolled through the post and adjusted the percentage of the line base on how far they were scrolled. Jekyll became really handy for this reason later on. It would place all of the IDs for me and create the corresponding JS function that watched the scrolling. All I had to do was give it names and tell certain paths to draw. One of the major downsides to this was that I sort of pigeon holed myself into only being able to do “there-and-back” lines for each trip. This wasn’t very great when I visited Israel and travelled all over or when I visited multiple cities in one trip like with my trip to Poland (Katowice, Oswięcim, and Kraków).
So, great! The lines are working! As you scroll through the blog, lines draw on the map and you can see where I’ve travelled. One problem…after month two of the blog, it becomes difficult to see where lines are being drawn because there were so many lines! Because of this, I made an adjustment to what happens when you scroll past an entry. Once you scroll through the end, the opacity of the line starts to fade until it’s a mere remnant of the line it once was (*whimper whimper*). Because of this, you can still kind of see where I’d travelled through in the past, but it isn’t distracting from the adventure of the current post.
One last problem: when I get to the end of the blog, it’s all seemingly empty! I want to see where I’ve been after the whole semester! No problem… using the same logic as the paragraph above, once I reached the final post, I start to increase the opacity of all the lines so the reader can see the dazzling, criss-crossy mess that is traveling!
Because of the number of lines and the fact that the line calculations are all being done on a scroll, I’m sure there’s some way this could have been done more efficiently. However, it worked fine for me.
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.
I say this because using the viewBox to manipulate what parts of the map are shown is miserable. I wanted the virtual “camera” to follow along a little closer to the map as lines are drawn to make the experience more intimate. In order to do this, I selected two squares on the map that were the right size and position and used math to adjust the viewBox between those two point depending on the percent scrolled through the post similar to how the routes were animated. In the end, the viewBox must go in a straight line because of the way I implemented it. This isn’t ideal in all situations, so I really do regret this decision.
However, it works. I haven’t really had any problems with the implementation yet, and I think it looks just fine considering how upset I am with my decision to do it the way I did.
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 ❤
Even better, everything Jekyll spits out is static, so there’s no need for a database to support my blog. This meant that I could get free hosting from GitHub pages, which I thought was a pretty good deal. Easy deployment, fast speeds, and free SSL? What’s not to love!
The Hero Image
When first visiting the site, it looked sort of barren. It was missing an “oomf” when landing there. Bremen, the city I studied in, had some really beautiful parts of the city. So, I thought I’d spice up my blog by adding a hero image of the Bremen Town Square at the very beginning and by giving it a good ole German-esque name — “Im Ausland”. My four months of practice came in handy, eh?
The Slide Out Navigation Menu
As the end of my semester neared (and the end of my project, thank goodness), I realize that it was ungodly long. In order to have the functionality with the interactive map that I wanted, it all needed to be on one page. This posed a major problem. Scrolling at super-fast speeds, it still took ten seconds minimum to scroll through the whole page. Even now, you can go to my travel blog and see just how long all of it is. I remembered soon enough that I had placed IDs on all of the posts via Jekyll and decided I’d just use those IDs to implement a sidebar with quick scrolling if someone wants to get to a specific post. The purpose wasn’t exactly to be perfect — in the end, it was just for utility.
I contemplated several designs and ended up going with something super simple, and I’m super happy with the result. It slips in from the left side and offers any of my stories to the reader. Click one and be whisked away by the magic of JS scrolling.
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.
In the end, this led to about 30ish photos being added to the blog. Now, if you’ll remember from the past heading everything on this blog is on one page…and 30 photos isn’t just a little. Originally, when I loaded the page I was getting file transfers of 60MB. I quickly remembered that optimization for the web is a thing. Still, even with the photos heavily optimized, they transfer about 6MB of data, which is far more than I would prefer. This is really bad for mobile users, but in general it’s bad for everyone. That’s a lot of data. I removed some, but in the end I decided that it was worth the extra milliseconds of load time to see some pictures.
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…
If you missed it, here’s the link to the blog for reference. Also, feel free to check out the source code (as messy as it may be) on GitHub.