Convert X,Y pixel to Longitude and Latitude

Question

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??

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 = ??

Answer 1

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:

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!