In this blog post we are going to have a look at how we can digitally depict where we have traveled – basically a digital scratch map, which can be used and modified for different purposes. From using the map as a PNG or PDF file to embedding it as an interactive map on your website. As it’s still hard to give a real insight in where you’ve traveled without being dependent on a certain tool, I’m going to show you how to make a very basic map, marking places you’ve traveled to and visited using Mapbox and their awesome tool TileMill.

mapbox-vertical   &   tilemill-logo-128

I started playing around with Mapbox and TileMill, because I love maps and have been looking for a workaround to the various travel maps, which offer similar services, but always dependent on the network or the tool and are not customizable in a way, that made me really happy. What I came up with was a very basic map, where I colored the countries, which I’ve recently traveled to and/or which are near and dear to me.

Little Example Project: my life as a map

Little Example Project: my life as a map

This is an easy-to-use-guide for everybody with little to no knowledge of coding skills, as TileMill works with CartoCSS (MSS), a kind of CSS (Cascading Style Sheets), but for maps. For everybody who has experience in web design, the styling in TileMill should be really intuitive and fast to adapt to therefore.
But for now, we’ll start from the scratch and make sure everybody can come up with a really cool map, only tapping the very basic resources of the tools.

1. Setup

Install TileMill on your computer. It’s an application which is tightly integrated with Mapbox and will let you upload your ready styled map from the application.

2. New Project

Once we open TileMill we see example projects, which are highlighting all the cool tasks, TileMill can accomplish for you.

exampleprojectstart

Click on one of the example projects and play around with the code to see what TileMill can do

They are also really helpful, if you want to try something new and find a similar feature in the projects as you can access the MSS code from them.
Still, for now – we are opening a “New Project”.
Make sure the “Default Data” box is ticked, because this means TileMill adds a base layer with all countries and borders, which you can then style.

newproject2

Tick “Default Data” for the countries layer

4. Coloring

The first few lines of code you will see, describe the basic formatting of the background (water) and of the #countries, play around with changing the colors of the outlines and the polygon-fills (countries) or line-width for a bit to get a feel which line of code describes which object on the map. You can find a full list of CartoCSS (MSS) properties which can be applied to map elements.

defaultcode

Change it all up and try including some other properties and styling them

If you are going to use the map to show off where you’ve been or want it to fit to your website, I would recommend using colors of a color scheme. Colorlovers is a wonderful resource for that and offers beautiful color schemes and palettes, making the decision easier.

3. Layer and map elements

Now we are having a closer look at the #countries layer. The hashtag tells the map to look at the data stored in this default layer.

layers

Have a closer look at layers and/or add new ones

layertable

The countries layer and all columns included

So let’s now say we want to give Austria a distinct color.
This is how coloring Austria would look like:
#countries

[SOV_A3=”AUT”] {
polygon-fill: #E08E79;
}

#countries calls the base layer table with the country data
SOV_A3 defines to look under the column named “SOV_A3” (you basically can choose whichever column you want)
AUT is the abbreviation of the country in that column
polygon-fill: #E08E79; assigns the color “#E08E79” to the chosen polygon “AUT”

And hello, “strawberry sugar”-colored Austria!

austriacolored

As I did not do this to too many countries, I wrote the code manually country by country. In order to keep track of which countries I wrote about without deciphering the sometimes not too clear abbreviations, I wrote a comment above all codes snippets.
For example:
//Austria (The slash symbols make sure, that this is a line, which is not taken into account for styling the map.)

4. Export or upload

Ready? Have you colored everything you need? Awesome, because now you can decide on what you want to do with it. Integrate the map as a picture into a presentation, or do you want to share the map with friends? Would you like to print it, or use it as an interactive map and zoom in and out?

You can definitely export your map as a PNG, PDF or SVG file, giving you the opportunity to print the map or include the file into a presentation or similar.

The other very neat feature of TileMill is, that you can upload your project to your Mapbox account. Therefore you will need to make an account on Mapbox and connect it to TileMill during the upload process.

exportfunction

Define the zoom level and therefore the size of your map

There are a few settings you can change regarding the zoom level and the exact part of the map you’d like to export. Just make sure the marker for the center is placed inside the bounds and you choose a zoom level which is not going to increase the upload size to +100GB, because for normal use purposes a zoom level of about 6-8 is definitely sufficient.

5. Online: Setting markers and drawing stuff

Uploaded? Great, you will find your uploaded TileMill map under “Data” and can start a project out of it, which gives you the possibility to edit the map with the Mapbox online tools.

onlineupload

Online few in Mapbox

Here you have some basic tools to finish your map style. I decided to mark places I lived in or liked a lot via searching for them and then adding a marker to the point with a little info about it.
With using lines and polygons, and some more general settings, you can further manipulate your map.

onlineeditor

Mapbox Editor

6. Share your digital scratch map or embed it

Done? Cool!
Now you can share your map with the world. The easiest way is just to send out a direct link to the interactive map, but if you have a blog or website, you can also embed the map, which is what I did with this little visualization of my life on a map.

You just take the embed tag and place it in the widget of your blog or integrate it right into your html code.

Resources:

Colorscheme used in the example map: Let them eat cake 

A great Crashcourse for TileMill and Guides for Advanced map design features can be found on Mapbox.

Awesome, this is it! Any more questions? Let me know!