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 - longitude, 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 };
}