Search code examples
phpjavascriptmapscoordinatesproj4js

Convert Lat/Longs to X/Y Co-ordinates


I have the Lat/Long value of New York City, NY; 40.7560540,-73.9869510 and a flat image of the earth, 1000px × 446px.

I would like to be able to convert, using Javascript, the Lat/Long to an X,Y coordinate where the point would reflect the location.

So the X,Y coordinate form the Top-Left corner of the image would be; 289, 111

Things to note:

  1. don't worry about issues of what projection to use, make your own assumption or go with what you know might work
  2. X,Y can be form any corner of the image
  3. Bonus points for the same solution in PHP (but I really need the JS)

Solution

  • A basic conversion function in js would be:

    MAP_WIDTH = 1000;
    MAP_HEIGHT = 446;
    
    function convert(lat, lon){
        var y = ((-1 * lat) + 90) * (MAP_HEIGHT / 180);
        var x = (lon + 180) * (MAP_WIDTH / 360);
        return {x:x,y:y};
    }
    

    This will return the number of pixels from upper left. This function assumes the following:

    1. That your image is properly aligned with the upper left corner (0,0) aligning with 90* North by 180* West.
    2. That your coords are signed with N being -, S being +, W being - and E being +