Making maps with TableTop and Google Spreadsheets

I’m teaching @jackoosh99 how to build web apps using HTML5 and Orion. Today’s lesson was his first in Google Maps.

I was curious to understand where the cardinals in the conclave came from, but couldn’t find a map that plotted them all. I wanted to see how spread out they were, and what kind of background they might have. There were some maps that showed one relatively sized pin in each continent. I was interested in the cities that they come from.

cardinals

I found a wikipedia entry that listed the voting cardinals, and had an idea to use it to make a map. I’ve been teaching Jake how to make HTML software. He’s very interested in maps, so we took the list from wikipedia and copied it to a google spreadsheet. I showed him how to reverse geocode the cities. He’s really into geography, if not the cardinals, so he liked working through the list. We added columns for lat and long.

We’ve used the brilliant Tabletop JS with Google Spreadsheets before – I’ll write a post soon about how I’m using it to help build an online store. It’s a wonderfully handy library. It will allow you to reference data from a published Google Spreadsheet, easily in JSON objects in your JavaScript code. So, where once you needed a database and some mediation software to present that data in JSON, now all you need is TableTop and a spreadsheet. It’s really easy to work with.

So we had our coordinates. It took about 30 minutes to gather that data. We opened up Orion, created a new project, made a css file, html file and JS file and started reading the data. We followed the API for Google maps, and plotted our points. Jake wanted to style the map, so we played around with some color combinations.

We connected an info window to each pin, and realized that each cardinal has a wikipedia entry, so we built a dynamic link for each from their names, and out of curiosity built a link to a search for their name on Twitter. Some fascinating results from that – the cardinal in my home city of Armagh does not come across favourably.

Finally, it gave me a chance to explore some more behaviour around responsive design. I programmed the finished map with a media query that reduced the web page version, to nothing but the map when it runs on a mobile device with a smaller screen size.

Here’s the source code – it would be really easy to take it, make your own spreadsheet with your own list of coordinates and make an all new map.

The upshot is a neat little map that shows who they are, and where they come from. I don’t think it’ll help to understand who the next Pope will be, but is a useful place to find out more, and tells a bit of the story about their journeys to Rome.

Software engineering, Thoughts, UX 1 Comment