Summer Mapping Project


This post may describe functionality for an old version of CARTO. Find out about the latest and cloud-native version here.
Summer Mapping Project

With summer starting to wrap up in the Northern Hemisphere so are trips to the beach the mountains or anywhere in between. What better time than now to highlight all the memories made with your GPS mobile device?

I recently took the train from Beijing China to St. Petersburg Russia on my honeymoon. Being a map scientist I was obviously thinking about maps the whole way and was able to find some nice ways to track my journey.

Data Collection Toolkit

  • A GeoJSON file of the rail line for most of our journey was helpfully shared as a GitHub Gist.

  • MovesApp gives you back your GPS data in a handy CSV file nice for putting a trip on the map! This mostly worked but there are some times where my location was interpolated between readings.

  • CartoDB for putting #1 and #2 on the map.

Great Wall

Automation and Parsing

What felt left out was how to incorporate the geo-tagged images I took on my phone. To be able to do this I needed:

  • Images hosted online so I can include them in the infowindow template;
  • Latitude and longitude stored in the EXIF data for each image;
  • The information from the last two steps in a dataset that I upload to CartoDB.

Naturally I decided to write a script to automate the whole process. My script is available in my GitHub repo img-mapping.

This Python script extracts the GPS data from each image pushes each image to an Amazon Web Services S3 bucket inserts the latitude longitude and image URL into a CSV table and then uses CartoDB's Import API to get the data in my account.

Olkhon Island and Lake Baikal


Next I logged into my CartoDB account to create the map. I made a multilayer map with the bottom layer from the GeoJSON of the train line mentioned above the second layer the CSV I got from my MovesApp and the third layer markers representing the position where the pictures were taken. I also threw on a Torque layer for good measure to visualize our position in the time dimension.

The last step was configuring the hovers on the image layer so that the images show when their markers are inspected. Using mustache template notation you can grab data associated with the marker and have it rendered in HTML. For instance my templates were styled like this to show images:

{% highlight html %} {% raw %}


{% endraw %} ##_END_REPLACE_ME_PRE_##

What kinds of maps can you make for your summer project? Feel free to fork my script and improve on it!

Want more to do? Check out our tutorial on Fulcrum with CartoDB for mapping mobile data. The fitness app Strava allow you to export your data as GPX which can visualized with CartoDB. If you want some courses to work through check out our Map Academy.

Happy Mapping!