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?

Euroclydon

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.

Sorn

now how to display x,y. mean which method should be used for x and y to display it – Doble

@NaeemShah canvas.drawCircle(x, y, r, mPaint); – Impale

I realize this is an old question, but I have found no answers that talk about having a map offset and scale. Also, is this MAP_WIDTH/HEIGHT in degrees (ie delta of longitude and latitude) or the pixel values? Where should scaling take place? – Extremity

No, not width/height in degrees, in pixels – Albumenize

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

Forwardlooking

Can you tell me how to Calculate back from X,Y to Lat lon? – Epexegesis

Answer 3

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.

Tahr

Maps project our 3D on to a 2D surface. Since you can't perfectly wrap a square onto a sphere, there are different projection methods to get an approximately correct result. The distances on a given map are non-linear, so your formula is only an approximation. – Squad

Approximations work for most distances. But I should clarify that in the post. – Tahr

Yep, the more zoomed-in your map, the more accurate the result. You should see almost zero difference for a city-level map, but it will be noticeable for a state-level or larger map. – Squad

I know this is a bit old but this answer is great and works really well. Thank you!! – Midsummer

Answer 4

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.

Bubaline

I've added the required disclosure here – Contort

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.

Squad

I don need much accuracy so maybe the solution below is enough. If it's not, how would the transformation be? Which are those projectino schemes? So far I've seen: UTM Transverse Mercator Mercator Longitude/Latitude – Euroclydon

BTW. I've also coded the formulas for converting among Lat/Lon and UTM. Is converting from Lat/Lon to UTM and applying the solution below the right way (at least for UTM projections)? – Euroclydon

Are your maps using Mercator? You need to know what the maps are coded in before you can pick the right projection. Once you have the geocoded distances right, mmayo's formula gives you the correct pixel on the map. – Squad

I have 2 kinds of maps. Ones with Lat/Long Projection and other ones with UTM projection. If im not mistaken, with the first ones i can use mmayo formula and with the second ones i should convert Lat/Lon values to UTM before applying the formula. Am i right? – Euroclydon

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

Heterodoxy

Thanks, knowing what the maximum values are for longitude and latitude was the key piece of information I was missing. Without that information, you can't make a formula. – Postcard

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>

Buntline

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

Flunk