Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
up vote 3 down vote accepted

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

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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