253. Mapping with Codea

I recently built a little app to show the movement of families across an English county over a period of 80 years. Codea is good at this kind of animation, and you could do all sorts of mapping with it.

A video of what I did is below, but in this post I’ll talk more generally about how you might build an app like this.

(The red icons are births, the pairs of figures are marriages, and crosses are deaths).

Mapping applications

You can use mapping for all sorts of things, but I suggest that Codea is best for showing animations, such as changes over time, because you are redrawing the screen all the time.

The map

This part is easy. I just took a screen cap of a Google maps page, and used a picture editor to cut out the part I wanted.

Coordinates

Now suppose I have a lot of data I want to show on my map. In my example at the top, it would be a list of dates and places, like this

Births
1710 Sheepdip (yes, this is a place!)
1711 Plymouth
..

Marriages
1719 Black Torrington
..

So my first problem (after collecting all my data) is to figure out the pixel positions of all these places, on my map image.

The first time I did it exactly the wrong way. I opened my map image in a picture editor, made a list of all the places I needed, and then looked for each one in the map image, and made a note of the x,y pixel position.

This is not only slow, but what happens if I decide later that I want to use a different map image? I have to start all over again.

A better approach is to use the longitude and latitude of each place, and find a database with all of these listed. So I looked online and found a big file with all the English towns listed. I checked it against my list of places, and there were a couple that weren’t there (in real life, there are always some that aren’t there, no matter what you’re trying to do), so I either changed my place name to one that was in the file, or else added my place name to the file after looking up its latitude and longitude on Google.

Just one more problem. I need to know the latitude and longitude of each corner of my map image as well – actually, just two opposite corners will do – so I carefully measured the bottom left and top right corner, on the original Google map page (if you click on a Google map, it will show the latitude and longitude at the bottom of the page). Now it’s a math calculation to figure out where each place is, on my image map.

The advantage of this method is that it’s not only quicker, but if I want to change my map image, all I have to do is measure the longitude and latitude of the corners of the new map.

Now I can program my Codea app to draw the map image. I probably have to size it to fit the screen, and it won’t be the exact shape of the iPad screen, so I need to do something like this. It will fill the screen as much as possible, keeping the map in proportion to its original size.

local w,h --the actual size we will draw the map
if map.width/WIDTH > map.height/HEIGHT then --map is flatter than our screen
    w=WIDTH --use the full width
    h=map.height*WIDTH/map.width --restrict height
else  --map is taller than our screen
    h=HEIGHT --use the full height
    w=map.width*HEIGHT/map.height  --restrict width
end

Then I loop through my data – in my case, I am showing a set of years, one by one, using a simple timer to tell Codea when to go to the next year, every few seconds.

My code decides which items to show – in my example, I show births in the year they happened, and they stay on the map for the next 5 years, so the viewer gets a chance to see them properly, and the icons I show on the map shrink in size during that 5 year period.

The math to calculate where to draw each icon is a little tricky, because we know the longitude and latitude of the place where we want it drawn, and we know the longitude and latitude of the corners of our map, and we can calculate the pixel corners of our map image (they won’t all be at the corners of the Codea screen, because our map isn’t the same shape as the Codea screen – see the video at top, where the map is taller, so we have to resize it, leaving a black border at the left and right) – and then we have to put all this together to calculate the screen position. It’s not difficult math, though.

Clustering the icons

There is one problem with drawing icons on a map, which is that if you have 5 of them in one place, you will only see one, because they are drawn on top of each other. This is especially important for my deaths, because I leave the little crosses on the screen forever. I got around this by adding a small random amount to the x,y position, so the icons were drawn slightly separately.

And that’s all there is to it. You can do some great animations with Codea, pretty simply like this.