Beginner’s easy guide to digital mapping with TileMill

After the euphoria of learning how to GEOCode my spreadsheet data, I then had to learn what to do with it. Even the so-called beginner tutorials I came across weren’t quite beginner enough for me and so I’ve had to do a lot of rooting around for answers. I’m sure one of the generous members of Hacks/HackersMcr would have shown me all this, but I couldn’t wait for the next meet-up….

Why GEOCode in the first place?

It’s true, if you’re happy plonking a few markers on a google map, then you don’t need to GEOCode. Google Maps has an in-built GEOcoder which automatically converts your postcodes and addresses into longitude/latitude without you even realising it’s doing it. But sometimes we get a little bored of seeing yet another Google map, don’t we?? So if we want to create something a bit more styling’, we need to find a mapping tool which will allow us to do some cool customisation. There are many around but in this blog post, I’m going to be using TileMill by Mapbox.

So with TileMill you can really go to town and customise your maps, add layers of data etc. BUT, it won’t automatically GEOCode your data. So you need to go through the steps on the previous blog post to get your data ready for everything that follows from here.


Download TileMill. Just follow the instructions! It should work very easily. Now I’m going to talk you through how to create a map with two types of data (two layers of data). One is a spreadsheet of GEOcoded data to create markers. The other will show the boundaries of English Government regions (GOR) in the form of boundary lines superimposed on the map.

Click on New Project and give it a catchy name. Don’t leave any spaces between words; TileMill won’t like that. TileMill automatically has a layer (of data) pre-installed which shows the boundary lines of countries. It will look like this.

Screen Shot TileMill project

Import GEOCoded spreadsheet into TileMill

You can use this spreadsheet which is a list of universities and HE institutions that are members of Universities UK. (I scraped the data using Outwit but you can use any data for this exercise). It’s not perfect data but it gives us something to play with. I’ve already GEOCoded it. I then need to download it as a .csv file (comma separated file i.e. excel spreadsheet)

To get this data into your TileMill project, click on the Layer icon on the bottom left hand corner and then click Add Layer. Again, give it an ID without any spaces. Let’s call it Universities. Then go down to Data Source and click Browse. Go and find that GEOCoded spreadsheet you downloaded and click Done.

Screen Shot Add Layer

Now click Save and Style and you should find red dots appearing all over your map. Voila!

Screen Shot Red Dots


Adding a Shape File

This bit’s a little trickier and took me some time and searching to get it to work. A shape file is a file that ends .shp. It contains data that will show up as boundary lines on your map e.g. countries, counties, regions. I’m going to use a shape file that will show the boundaries of English Government Regions (GOR) which you can find online here. Click to download. This will give you a zipped folder containing a number of files only one of which is a .shp file. BUT, TileMill will need the full contents of this folder in order to make sense of the .shp file. You can’t simply copy the .shp file and put it in some random folder on your computer and hope to put that into your Datasource in TileMill. You’ll get a nasty error message like this.

Screen Shot Error

Unable to determine SRS for layer “GOR” at /Users/lizabethhannaford/Documents/MapBox/project/UniversitiesDemo/layers/GOR/Regions.shp

Not nice! That’s because the .shp file has become separated from all the other files it depends on in that zipped folder and so it no longer makes sense. So save the entire zipped folder somewhere sensible that you’ll be able to browse to once you’ve downloaded it. There’s no need to try opening any of the files inside it. Now browse to that zipped folder in the Datasource window.

Screen Shot Folder
Look how cleverly the Regions.shp file now stands alone! Click on it to add it to the end of the Datasource. That file path should now end in .shp so click Done. Then click Save and Style. NO error message this time. Yay!

Screen Shot Boundaries
So we can see the boundary lines but the green fill colour has obscured our dots, annoyingly. But don’t worry! We can fix that by tweaking the CODE in the right hand column. This code is called CartoCSS and, as the name implies, it’s a particular form of CSS that works for styling maps.

Look for #GOR and you’ll find the styling instructions for the shape file layer we just added. We need to reduce the opacity so our dots show through. Let’s change it to 0. Whilst we’re at it, let’s make the boundary line a little thicker by changing it from 0.5 to 1.

Screen Shot tweaked CartoCSS
OK, so it’s no work of art, but it does get us started and opens up some fun possibilities.

Next Steps….

  • Find different shape files to display different boundaries and other features
  • Learn more about CartoCSS and experiment
  • Are there stylesheet libraries that are available to copy and paste?

Leave a Reply