Dynamically creating hexagons from real-word data (Part 1 - Roads)

Part 1 - Roads
Part 2 - Railroads and Forests
Part 3 - Data-Services

As I mentioned in one of my previous posts I have some cool ideas that I would really like to try out. One of them involves creating hex-based battlegrounds dynamically around the world.

So, one would pick a region and that particular area would be overlaid with hexagons that represent real world-data like rivers, roads, forests, mountains, etc. All of this on top of Bing Maps.

It's not very easy to explain my goal so let me use the boardgame Memoir'44 as an example. Here's an actual map from that game.

Now suppose all of this was generated dynamically based on a real map, which would contain a road and some forests.

This is not an easy task and I'll break this into pieces (pun intended). On this first post I'll just address road creation.



To begin with I'm going to simplify the problem. I'll just pick two highways near my home-town: A5 and A16.

Step 1: Display hexagons on top of the map.

Using my own Canvas Tile Layer module, I've generated a layer of hexagons on top of the target map.

I just had to adapt some of my "old" hexagon drawing code.

Step 2: Get the data that represent the highways

Although I'll eventually read this information from some data-services or DB with OpenStreetMaps information for now I've just manually imputed both polylines. This is the end-result.

Step 3: Calculate intersection with the hexagons.

Now, for each hexagon, calculate the edges that intersect with the roads.

 
Step 4: Draw first version of road hexagons

The road hexagons must follow a couple of rules, otherwise they won't be able to fit together, namely:

• The roads must enter the hexagons in the center of the edge

• The road must start/end perpendicular to the edge

Thus, taking into account those rules, here's the first version of the road (hiding the base road lines):

Step 5: Improve the road representation

Adding a border and some stripes greatly improves the road representation:

This isn't as simple as it probably seems from this post. There were a couple of really interesting challenges that I had to address. Anyway, you can view the source-code yourself in the end result.

On my next post I'll try to represent additional concepts like rivers and forests.