Creating the board

by Chris F

In the previous post I discussed the fourth iteration, which had the most changes for a while. It was no longer just a map with a colour overlay, or with some amenities randomly on it. It took most of a day to get it to the final form I presented in the previous post, and here’s each step of the process.

The board that I used before this one had yellow roads and green parks, on top of which I overlayed the 4 coloured regions. This was the board with the nicely and randomly arranged amenities. It looked like this:

Board v3.2 coloured

I then had the talk with Rob after which I decided to keep the amenities in their original geopositions. Here’s what the first mock-up of that looked like, in order to give me a feeling for how the map would look like:

Board v3.3

I made all the amenities black, and noticed that while clusters existed, it did look quite organic. My next move was to identify each amenity as their different type (pub, post_box etc.) by changing the symbol’s colour. I made the necessary changes in the code in order to get a different colour based on the amenity type and this is the result I got for that:

Board v3.4

As you can see, the random colours chosen were slightly similar, as well as discovering a behaviour I did not expect, having the pubs and bicycle_parkings being assigned the same random colour. This was a bug that I encoutered later as well, although I had not realized it at the time. I thought, however, that the amount of map showing in that map was too big, with too many amenities, which led to me zooming one level and re-rendering. I got this:

Board v3.4 zoomed in

As I mentioned, at the time I did not know that the pubs and bicycle_parkings were rendered with the same colour, which got me slightly confused (I also couldn’t get the clickthrough functionality to work well, an issue I’ve since fixed on the ITO Map). In addition to that, I also had to make a way in which people will be able to know which amenity card to use, in order to stick to the “amenities on the map are amenities on the ground” principle. What I decided to do was to add the name of the amenity next to it, or, in the absence of the name, add the amenity type. This is the result:

Board v3.4 with annotation

As you can see, it can get slightly confusing. I did a second version of this, in which I only showed the name for the amenities tagged with name=*.

Board v3.4 with annotation 2

I then realized what the problem with the colours was, and that adding the names really wasn’t helping me, especially in the crowded area in the town centre. I took the names out and focused on giving each amenity a unique hand-picked colour.

Board v3.5

Two things hit me, then: the colours that I had chosen weren’t that awesome since my monitor wasn’t properly calibrated, and the amenity green was FAR too close to the park green for me to like it. Also, since I was going to have a lot of colours on top of the map and the full-colour regions, there wasn’t really any reason for me to keep the roads yellow, since they were easily lost on the orange layer. I turned back to the grey layout, however keeping the water blue and parks/forests green. This is the result with the updated amenity colours and road colour. It’s quite close to the result I’m currently working with.

Board v3.5 new

With the amenities sorted, I needed a version without the amenities on it in order to put the hexes on top of and have it look clean (it looks really messy after creating the coloured hexes due to amenity nodes on the edges sometimes). This is the version of the map without the amenities on it:

Board v3.5 clean

I thought it might be a good idea to include the key functionality of ITO Map in the map render because it’s so much prettier than what I could come up with as a key. This is the map after I added the key:

Board v3.5 with key

I liked the key, but it was hiding some amenities under it. I decided to move it to a place without any amenities showing and hex the map. Almost done đŸ˜€

Board v3.5 almost final

I was really happy with the result, and I started writing down the total number of amenities for the report I gave you earlier, but then I realized something: there were only five colours on the map. The burgundy wasn’t there. Where were all the churches? I went back through all the iterations and it took me about 5 minutes to realize: churches. No. Amenity=church nope. It’s amenity = place_of_worship, because while a church is a place of worship, a place of worship isn’t necessarily a church. I went back through my code and replaced church with place_of_worship. Suddenly, the churches popped up:

Board v3.5 with places of worship

At this point, I had managed to fix the clickthrough problem and was able to click on each amenity in order to get all its tags and see more information about it generally. I realized that since the symbols were set at the same depth, sometimes the less important ones would hide the more important ones (a bicycle parking hiding a bank underneath). I changed the depth in order to reflect the order of importance that I gave them and this was the new result, with fixed depth and places of worship in order:

Board v3.5 with places of worship fixed depth fixed key

At the end, as I was hexing the map, I realized that having the regions be full-colour was a big over-doing it and taking away from the context of the map, so I just used the outlines of the regions in order to separate them. The final map for iteration four, as I posted above as well, is this one:

Now with key :)

That’s the process the map went through in order to become a board.

Chris F.

Advertisements