Converting cartesian geo-coordinates to isometric (real world map to game map)

Question

I need to create an automated method to convert real cartesian, geo-coordinate data (such as roads and parks), into isometric coordinates as a game map view for use in HTML5 Canvas.

Here is an image of what I mean:

Example Image

Taking into account heavy map distortion in the process to fit they isometric layout. Is this even remotely possible?

Answer 1

1) Convert lat/long to Cartesian coordinates. There a zillion different projections to convert this -- you can see a list here. For starters, you can use the simplest projection. equidistant cylindrical projection, which assumes latitude and longitude map linearly to X and Y. you can fudge with the offsets

function getXY(latitude, longitude) { 
    return { x : 180 - long, y : latitude + 90 };
}

2) Convert from "overhead" to isometric. See this question for how to rotate. isometric means that the y-coordinate is foreshortened so that the diagonal line looks as long as the side of the square, so we have to divide the y-coordinate by the multiplier.

function convertIso(x,y) { 
    // m = 1 / sqrt(2);
    var m = Math.sin(Math.PI/4);
    // rotated would be (x*m - y*m, x*m+y*m),
    // but we divide y by m to get the foreshortening
    return { x : x * m - y * m, y : x + y };
}