Dynamically creating hexagons from real-word data (Part 2 - Railroads and Forests)

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

In this post I'm going to add two new concepts to the hexagon representation: railroads and forests. Also, instead of having the data hardcoded, I'm going to load it from GeoJSON files. Eventually I'll change this behavior to have the data being served by a service, but for now static files will do.

Let me use another image of the wargame Memoir'44 as an example of what I'm trying to achieve, which includes railroads and forests.

Obviously I'm not targeting (for now) this degree of presentation. I just want to detect the underlying objects and represent them differently.

First of all, loading from a GeoJSON is pretty straightforward. To load all the railroad segments the code will be something like this (using Underscore)

_.each(geojsonData.features, function(val) {
    var railroad = val.geometry.coordinates;
    for(var i=0; i < railroad.length - 1; i++) {

    //Get points of both vertices of edge
    var p0_x = railroad[i][0];
    var p0_y = railroad[i][1];

    var p1_x = railroad[i+1][0];
    var p1_y = railroad[i+1][1];
}

Now, creating railroads is pretty much similar to the roads from the previous post. The main difference will be cosmetic.

The road hexagons were represented like this:

And the railroad hexagons like this:

Drawing forest hexagons requires a different approach as they're represented by Polygons instead of Polylines. After several iterations and experiments I ended up with a really simple and fast algorithm that provides nice results: to decide if an hexagon is a forest hexagon or not I just pick its center and check if it's inside the forest polygons.

So, instead of calculating if two polygons intersect and then deciding if that hexagon should be included or not, this is a simple "point inside polygon" validation.

For now, I'm just representing these hexagons with a solid green background.

Drawing everything together, this is the result so-far.

As usual, you can take a look at everything "in motion":
Demo Page

Still lots to do, namely:

• Implement boundaries and water
• Add some real units to the map (like tanks and helicopters) and apply terrain restrictions to the movement.
• Instead of loading static GeoJSON files load the info from a service dynamically
• Improve the presentation of the hexagons
• And much more...