javascriptmathmapscoordinateswgs84

Convert X,Y pixel to Longitude and Latitude


I have an image 8640x11520 pixels from a part of the map in real scale. I need convert my x, y point to coordinate, anyone has an idea to find out it??

enter image description here

var mapWidth = 8640;
var mapHeight = 11520;

var mapLatitudeStart = 28.349768989955244;
var mapLongitudeStart = -81.55803680419922;

var maxLatitude = 28.349806758250104;
var maxLongitude = -81.541128;

var pointNeedConversion = {'x': 4813.10 'y': 2674.84};
var pointLatitude = ??

Solution

  • As you are mapping to lat/long, beware, you can't do that with a linear proportion, instead you have to check what kind of projection is applied to the map, then convert coordinates accordingly.

    Usually maps are WGS84 Projections so you have to apply the inverse formulas for the Mercator projection.

    The task is not trivial so my advice is to rely on libraries like Proj4js

    The usage of the library is simple, you provide a reference system to work on, then you can trasform coordinates on another projection.

        // include the library
        <script src="lib/proj4js-combined.js"></script>  //adjust the path for your server
                                                         //or else use the compressed version
        // creating source and destination Proj4js objects
        // once initialized, these may be re-used as often as needed
        var source = new Proj4js.Proj('EPSG:4326');    //source coordinates will be in Longitude/Latitude, WGS84
        var dest = new Proj4js.Proj('EPSG:3785');     //destination coordinates in meters, global spherical mercators projection, see http://spatialreference.org/ref/epsg/3785/
    
    
        // transforming point coordinates
        var p = new Proj4js.Point(-76.0,45.0);   //any object will do as long as it has 'x' and 'y' properties
        Proj4js.transform(source, dest, p);      //do the transformation.  x and y are modified in place
    
        //p.x and p.y are now EPSG:3785 in meters
    

    Credit for the snippet: Convert long/lat to pixel x/y on a given picture

    Working example:

    var dest = new proj4.Proj('EPSG:4326'); //destination coordinates coordinates will be in Longitude/Latitude, WGS84 , global spherical mercators projection, see http://spatialreference.org/ref/epsg/3785/     
    var source = new proj4.Proj('EPSG:3785'); //source coordinates in meters
    
    $("#convert").on("click", function(){
        var p = new proj4.Point($("#x").val(), $("#y").val() );
        proj4.transform(source, dest, p);
        alert("lng : " +p.x + " \nlat : " + p.y);
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    x : <input type="number" id="x" />
    y : <input type="number" id="y" />
    <button id="convert">Convert</button>

    Note: it is essential to know what is the lat/lon of the corner of your map if you intend to use it to map a GPS signal.

    Here a graph example that visually explains why a linear proportion is not suitable:

    enter image description here

    Take a close look to (Eg) the size of the Greenland, on mercator projection space coordinates it looks bigger than north America. Of course it is not!