Monthly Archives: December 2014

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?

GEOCode – an (absolute) beginner’s guide

Hacks/HackersMcr – Skill sharing

Hacks/Hackers is about discussions, networking and skill sharing so here’s my fave takeaway from December’s Hacks/HackersMCR meet-up. Thanks to my co-organiser, Rob, for passing on his digital mapping knowledge….

Explaining geocoding at Hacks/HackersMcr

JSON in the basement


So GEOCoding is the process of getting richer data about a location. Typically, you have street addresses or postcodes and you want to convert them into coordinates with longitude and latitude. This helps you to do more fun things with maps (which I’ll get onto in a future blog post).

Latitude and Longitude on Ayr Harbour Wall

Latitude and Longitude on Ayr Harbour Wall
© Copyright Colin Park and licensed for reuse under Creative Commons Licence (CC BY-SA 2.0)

One of my students needed to do this for a project he was working on but, unfortunately, this HHMcr skill share came a bit late for that.

You can do this super quick in a Google spreadsheet!

GitHub? Are you serious?

So if you missed the December HHMcr meet-up, you can find out how to do this in this very useful blog post from Mapbox. Or you can read on and I’ll attempt to explain in a quick and easy way that even non-coding journalists like me can understand. It involves going to GitHub but DON’T PANIC! I went to GitHub and came out again unharmed. If you haven’t heard of it, GitHub is a huge, social platform for collaborating on projects. Yes, it started out as a place for very clever programmers but it’s evolved into so much more and we should all resolve to spend some time there.

Go to GitHub and copy this code. I don’t pretend to understand the code but I do know how to Copy and Paste so I’m good to go.

Next, open your Google spreadsheet and click on the tab Tools>Script Editor. Paste the code you just copied into this space (getting rid of the default wording that’s already there). Call it Geo, save and close and refresh your spreadsheet. As if by magic, you’ll now see a new tab has appeared called Geo.

Now the fun starts. Select the addresses/postcodes you want to geocode – it could be a whole column or just a few cells. Click that Geo tab you just cleverly created. Then click “Geocode addresses.” It’ll ask you to authorise this. If you’re happy using MapQuest to find your data (at this stage, you are), just click Geocode. You might need to be a little patient, but this should create three new columns in your spreadsheet with your longitude and latitude coordinates. The third column (geo_accuracy) helps you check, erm, the accuracy of the coordinates. It’ll usually say something like “residential.” If it says something unexpected, it might be a sign it’s not found the correct coordinates and you may need to put more/slightly different information into the address. So, as always, check and check again.

Allow yourself a well-deserved fist pump.

That’ll do for now. I’ll blog more about some stuff we can do with this (JSON, yeah!)

Hacks/Hackers Manchester – December Meet-Up – Wakelet

Wakelet – collect and organise everything!

One of the things we like to do at Hacks/HackersMcr is showcase local tech companies and, hopefully, learn from their experiences. So we were very pleased to welcome Wakelet (the whole team!) to our December meet-up.

The idea behind Wakelet is that it allows you to bring together all your beautiful/important web content into one place – either for your private use or to share publicly. Each collection is called a Wake and they’re easy to embed on your existing website. Here’s a seasonal one!

I’ve also seen one of my former journalism students at the University of Salford create a Wake of  libel cases in the news to help him with his Law and Ethics Module. He shared it with fellow students on FaceBook as a potential useful learning resource.

So I like Wakelet and I think it’s got potential. It’s FREE and I see it being a really useful learning tool in class to curate and share resources around a subject.

And to show you how easy it is to use, here’s my first Wake….