Converting Longitude & Latitude to X Y on a map with Calibration points

Question

If i have a jpeg map with size sizeX, sizeY

and some calibration points on the map (X, Y, Lon, Lat)

What would be the algorithm for calculating the corresponding XY point in the map with a given Longitude / Latitude pair?

Answer 1

Here's what worked for me, without so much bs.

int x =  (int) ((MAP_WIDTH/360.0) * (180 + lon));
int y =  (int) ((MAP_HEIGHT/180.0) * (90 - lat));

The lat,lon coordinates were given to me by Android devices. So they should be in the same standard used by all Google Earth/Map products.

Answer 2

If using the Equidistant Cylindrical Projection type map, here is what you need to do:

1. Find the Latitude and longitude of your location tutorial here:
   http://lifehacker.com/267361/how-to-find-latitude-and-longitude
2. Input that information into the following formulas:
   x = (total width of image in px) * (180 + latitude) / 360
   y = (total height of image in px) * (90 - longitude) / 180
   
   note: when using negative longitude of latitude make sure to add or subtract the negative number i.e. +(-92) or -(-35) which would actually be -92 and +35
   
   
3. You now have your X and Y to plot on your image
   
   More information can be found about this formula and the map type here:
   http://www.progonos.com/furuti/MapProj/Dither/CartHow/HowER_W12/howER_W12.html#DeductionEquirectangular

Answer 3

This is fairly straight forward and simple.. let me explain how its possible.

Latitude and Longitude are imaginary lines drawn on earth so that you can accurately pinpoint any location on the world . simply put they are the X and Y coords of a plane. Latitude is a vertical line running from north to south with its 90 deg at the north pole and -90deg at the south pole.

Longitude on the other hand is a horizontal line running east to south with -180deg in the west and 180deg in the east.

you can convert the latLng into pixel coords as by assuming that the width of the html container is the width of the world and the same applies to the the height.

Formula - Longitude - pixel

(givenLng*widthOfContainerElement)/360

where 360 is the total longitude in degrees

Formula -Latitude - pixel

(givenLat*heightOfContainerElement)/180

where 180 is the total latitude in degree

//Height is calculated from the bottom

you can find a working implementation of this formula here, on my website (it uses JavaScript only)

http://www.learntby.me/javascript/latLngconversion.php

let me know if you still need any clarifications.

Answer 4

There is plenty of information on the Internet about calculating the distance between two pairings of latitude and longitude. We're using those calculations on our public website and they are not trivial to understand/discuss (so I won't try to cover them here). That said, they are easy to implement.

Once you have a function that returns distance, you should be able to caculate the width and height of the map in terms of distance between the corners.

Then you can calculate the horizontal and vertical distance of your point from the top-left corner.

Now you find out what ratio of the map's width is represented by the distance between the left side and your point, apply that ratio to the pixel width and you have the number of pixels between the left side and your point. Repeat for the y-axis.

(Pixels from left side) = (total width in pixels) * ((geocode distance between left and your point) / (geocode distance between left side and right side))

(Pixels from top) = (total height in pixels) * ((geocode distance between top and your point) / (geocode distance between top and bottom))

EDIT: As you research this further you will note that some solutions will present more accurate results than others due to the fact that you are approximating distance between two points on a spherical surface and mapping that on a flat surface. The accuracy decreases as the distance increases. Best advice to you is to try it out first and see if it meets your needs.

Answer 5

There are many different map projection schemes. You would have to know which one(s) are used by your maps.

For more information about map projection algorithms and forward/reverse mapping check out this link. It provides the formulas for a number of common projections.

Answer 6

Just make this(for Mercator projection map):

extension UIView
{
    func addLocation(coordinate: CLLocationCoordinate2D)
    {
        // max MKMapPoint values
        let maxY = Double(267995781)
        let maxX = Double(268435456)

        let mapPoint = MKMapPointForCoordinate(coordinate)

        let normalizatePointX = CGFloat(mapPoint.x / maxX)
        let normalizatePointY = CGFloat(mapPoint.y / maxY)

        let pointView = UIView(frame: CGRectMake(0, 0, 5, 5))
        pointView.center = CGPointMake(normalizatePointX * frame.width, normalizatePointY * frame.height)

        pointView.backgroundColor = UIColor.blueColor()

        addSubview(pointView)
    }
}

My simple project for adding coordinate on UIView: https://github.com/Glechik/MapCoordinateDrawer

Answer 7

<!DOCTYPE html>
<html>
<head>
<style>
#point{font-face:Arial; font-size:18px; color:#FFFF00; width:12px; height:12px;text-shadow: 2px 2px #000000}
#canvas {position: absolute; top: 0px; left: 0px; z-index: -2}
        html,
        body,
        #canvas {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0
        }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(window).on("load resize",function(e){

var w = $("#canvas").width();
var h = $("#canvas").height();
// New York, NY (https://maps.googleapis.com/maps/api/geocode/json?address=New%20York,%20NY)
               var lat = 40.91525559999999;
               var long = -73.70027209999999;


var x =  ((w/360) * (180 + long)) - 9;
var y =  ((h/180) * (90 - lat)) - 18;

$("#text").text('X:'+x+', Y:'+y);
$("#point").offset({ top: y, left: x });

});
</script>
</head>
<body>
<div id="text"></div>
<div id="point">▼</div>
<img id="canvas" border="0" src="http://friday.westnet.com/~crywalt/dymaxion_2003/earthmap10k.reduced.jpg">

</body>
</html>

Answer 8

I have tried this approach:

int x =  (int) ((MAP_WIDTH/360.0) * (180 + lon));
int y =  (int) ((MAP_HEIGHT/180.0) * (90 - lat));

but this one works better for me : https://medium.com/@suverov.dmitriy/how-to-convert-latitude-and-longitude-coordinates-into-pixel-offsets-8461093cb9f5

here is a shortcut to code part of the article above : https://gist.github.com/blaurt/b0ca054a7384ebfbea2d5fce69ae9bf4#file-latlontooffsets-js