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?


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.

rotate then foreshorten -> isometric

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 };
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.