Convert lat/long to pixel X&Y co-ordinates

Question

This type of question seems to have been asked numerous times but none of the solutions posted get me anywhere near the answer I need.

I have this map of Northland, New Zealand and I'd like to map Lat/Long values to x/y (pixel) values on this image (https://i.stack.imgur.com/3ok4O.gif - which is 400px square)

Right now I do not know the precise lat/long boundaries of this image, but I do have some example data which should be useful to someone who knows what they are doing.

  LAT              LONG            X                Y
  -35.3989854471   173.504676819   192.92777494     196.760481649
  -35.2647882735   174.121499062   271.426291418    176.82865668
  -35.3131641432   173.89125824    242.099305271    183.945780963

The data I'm receiving now is only Lat/long, so I need to be able to produce x and y values within the application.

Can anybody help me write the required method/logic for creating these x/y values.

Thank you!

I think to solve this, take the height and width in pixels of the window or image and then take the maximum of lat & long distance for each then divide the latter by the former, then multiply the result for width or height by the desired point of lat or long . I'm not very good in math though. but it is something like that. — Dreaded semicolon, Aug 11 '11 at 04:22
@Dreaded smicolon right on dot he needs to normalize his window positions according to the range of lat/long values he needs to accomodate, rest is just simple translation of coordinates. — TheVillageIdiot, Aug 11 '11 at 04:24
If the physical distances are small enough (looks like just one degree) you can use the approximation and relate x/y directly to lat/long. Otherwise you need a bit more exactness and have to transform the polar coordinates into cartesian points. — mario, Aug 11 '11 at 04:27
@Dreaded semicolon can you give an example in javascript or php please, not sure I follow, thanks! — Iain, Aug 11 '11 at 04:54
To create a map from lat/lon space to x,y, see the this answer: http://stackoverflow.com/questions/6852195/help-calculating-x-and-y-from-latitude-and-longitude-in-iphone/6863433#6863433 — TreyA, Aug 11 '11 at 16:30

score 4 · Accepted Answer · edited May 14 '13 at 21:50

4

in Javascript....

var lat=-35.3989854471;
var long=173.504676819;

var imageNorthLat=???;
var imageSouthLat=???;

var imageWestLong=???;
var imageEastLong=???;

var imageLongPixels=400;
var imageLatPixels=400;

var pixelsPerLat=imageLatPixels/(imageNorthLat-imageSouthLat);
var pixelsPerLong=imageLongPixels/(imageEastLong-imageWestLong);

var xPixelPosition=(long-imageWestLong)*pixelsPerLong;
var yPixelPosition=Math.abs(lat-imageNorthLat)*pixelsPerLat;

I didn't try to run this, so there's probably a bit of debugging necessary, and the x and y pixel positions would have to have added to them the x and y positions of the top left or your map. But you can see the idea. And, of course, I may not have understood what you're really asking.

edited May 14 '13 at 21:50

Kristian J.

10,273
2
21
21

answered Aug 11 '11 at 06:34

Terry

1,437
2
12
26

Welcome to Stack Overflow. You can format source code with the `{}` toolbar button. I've done it for you this time. – Álvaro González Aug 11 '11 at 06:36
Hiya, yep the xPixelPosition is returning a very similar result just from eyballing the imageSouthLat, imageSouthLat etc variables. but the yPixelPosition is way off... – Iain Aug 11 '11 at 06:59
Oops, I didn't account for being in the southern hemisphere. Only needed change (that I noticed) is to make the last statement yPixelPosition=Math.abs(lat-imageNorthLat)*pixelsPerLat. Also didn't get it to format statements correctly. – Terry Aug 11 '11 at 14:54
I believe this solution only works if both lat/lon grid and x,y grid are oriented in the same direction which is usually not the case. – TreyA Aug 11 '11 at 16:43
I think you're right in that it would require the same orientation, and would work only if the area covered were not so large that a 2D representation became too inaccurate. However, aren't maps usually north-oriented? – Terry Aug 11 '11 at 19:27
Terry, Thank you so much! Took a little time to get the n/e/s/w for the map image but your solution seems to work great for my needs! – Iain Aug 11 '11 at 20:52
Should also mention that the calculation in Terry's example for pixelsPerLong references east-south instead of east-west – Iain Aug 11 '11 at 20:55

Audrius Meškauskas · Answer 2 · 2017-09-11T07:15:22.477

Converting Lat/Long into pixels just by scaling as you suggest only works on the small selected part of the globe, because the scaling constants vary depending on the latitude.

Converting into Universal Transverse Mercator (UTM) co-ordinates may work for small areas. First you compute the UTM zone of the central point of your viewing area, then convert all other points you need to show on that screen using that zone (not the actual zone of the point).

UTM co-ordinates can be converted into pixels by simple scaling because they are linear. Of course, the method is only well usable for rendering areas not much larger than a single UTM zone (few hundreds of kilometers). "Zone lock", however, works well if it is just slightly bigger, or simply the official UTM zone boundary is inside the viewing area.

There are good, easy to use, open source libraries for the co-ordinate conversion. As you platform is JavaScript, may be worth looking at geodesy. It has many good methods for co-ordinate conversion, distance calculation, bearings, midpoints and all the like.

score 0 · Answer 3 · answered Aug 11 '11 at 04:40

create map.html file locally, call in browser:

    <!DOCTYPE html>
<html>
  <head>
    <title>MY MAP</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
        rel="stylesheet" type="text/css">
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map;
         var myLatlng1 = new google.maps.LatLng(-35.3989854471, 173.504676819);
var myLatlng2 = new google.maps.LatLng(-35.2647882735, 174.121499062);
var myLatlng3 = new google.maps.LatLng(-35.3131641432, 173.89125824);
      function initialize() {
        var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-35.3989854471, 173.504676819),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);

                  var marker2 = new google.maps.Marker({
      position: myLatlng2, 
      map: map, 
      title:"POSITION 2"
  });   

                  var marker1 = new google.maps.Marker({
      position: myLatlng1, 
      map: map, 
      title:"POSITION 3"
  });   

                  var marker3 = new google.maps.Marker({
      position: myLatlng3, 
      map: map, 
      title:"POSITION 3"
  });   
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

This is not helpful at all. It's just the 3 lat/long coordinates I gave in the sample? — Iain, Aug 11 '11 at 04:53
I need to translate the lat/long to x/y in pixels on the map image above. Please read the *this image* part of the question. — Iain, Aug 11 '11 at 04:58

Convert lat/long to pixel X&Y co-ordinates

3 Answers3

Linked