I played a bit with the settlers-like map of that post to give it a more like terrain look. Therefore the triangle faces are colored now depending on their orientation.

Here is what we are going to create:

I only post the functions that are new or altered. The code (again all in timeline for faster editing purpose):

function drawMap ( )
{
	for each ( var nObj in nodeArray )
	{
		map.graphics.lineStyle(1, 0x000000);
		map.graphics.drawCircle(nObj.xPos, nObj.yPos, 3);
	}
}

function getFaceNodes (centerNode)
{
	var u = centerNode.u;
	var v = centerNode.v;

	var nArray:Array = new Array();

	nArray.push( (u  ) +"."+ (v+1) );
	nArray.push( (u+1) +"."+ (v+1) );
	nArray.push( (u+1) +"."+ (v  ) );
	var resultArray:Array = new Array();
	for each ( var member in nArray )
	{
		var checkNum = posArray.indexOf(member);
		if ( checkNum > -1 )
		{
			resultArray.push(nodeArray[checkNum]);
		}
	}
	return resultArray;
}

One of the most important functions this time. I decided to get all nodes and for every node just color two triangles, right and down. This is because of the way the map is created. I addition to the center node I thus need three node: right, down right, down left.

function drawFaces ( node )
{
	var nArray = getFaceNodes ( node );
	for ( var counter = 0; counter < nArray.length -1; counter++ )
	{
		var nextN = counter+1;
		if ( nArray[counter].drawn == false || nArray[nextN].drawn == false )
		{
			var midPoint = new Object();
			midPoint.x = (node.xPos+nArray[counter].xPos+nArray[nextN].xPos)/3;
			midPoint.y = (node.yPos+nArray[counter].yPos+nArray[nextN].yPos)/3;
			midPoint.z = (node.z+nArray[counter].z+nArray[nextN].z)/3;

			var highPoint = new Object();
			highPoint.x = midPoint.x +
							((node.xPos - midPoint.x) * (node.z - midPoint.z) +
							(nArray[counter].xPos - midPoint.x) * (nArray[counter].z - midPoint.z) +
							(nArray[nextN].xPos - midPoint.x) * (nArray[nextN].z - midPoint.z))/20;
			highPoint.y = midPoint.y +
							((node.yPos - midPoint.y) * (node.z - midPoint.z) +
							(nArray[counter].yPos - midPoint.y) * (nArray[counter].z - midPoint.z) +
							(nArray[nextN].yPos - midPoint.y) * (nArray[nextN].z - midPoint.z))/20;

High and mid point are important for the color of choice. depending on the direction of their vector (and thus the orientation of the face) the appropriate color is chosen to display sunlight or shadows.

			map.graphics.beginFill(0xffffff, 0);
			map.graphics.lineStyle(1, 0xff0000, 1);
			map.graphics.drawCircle(midPoint.x, midPoint.y, 2);
			map.graphics.moveTo(midPoint.x, midPoint.y);
			map.graphics.lineTo(highPoint.x, highPoint.y);
			map.graphics.endFill();

			var color;
			var dir = Math.atan2(highPoint.y-midPoint.y, highPoint.x-midPoint.x) * 180 / Math.PI;
			if ( 0 <= dir && dir < 60 ) { color = 0x00ff00; }
			else if ( 60 <= dir && dir < 120 ) { color = 0x00cc33; }
			else if ( 120 <= dir && dir <= 180 ) { color = 0x00cc00; }
			else if ( 0 > dir && dir >= -60 ) { color = 0x009933; }
			else if ( -60 > dir && dir >= -120 ) { color = 0x009900; }
			else if ( -120 > dir && dir >= -180 ) { color = 0x006600; }

I decided to go with just six different colors, the lightest being down right and the darkest being up left. One could calculate a better color via the true angle and steepness.

			map.graphics.beginFill(color, 0.5);
			map.graphics.lineStyle(1,0x00aa00, 0.5);
				map.graphics.moveTo(node.xPos, node.yPos);
				map.graphics.lineTo(nArray[counter].xPos, nArray[counter].yPos);
				map.graphics.lineTo(nArray[nextN].xPos, nArray[nextN].yPos);
				map.graphics.endFill();
				map.graphics.lineStyle(1, 0xff0000, 1);
			}
		}
	}
}
function redrawMap ()
{
	map.graphics.clear();

	drawMap()
	for each ( member in nodeArray )
	{
		drawFaces(member);
	}
}
redrawMap();

So, play with it a bit. Next thing would be interaction. You have got an other idea where to go next? Tell me in the comments. Yoho!