Convert lat/lon to pixel coordinate?

by

Where did those variables come from

These variables are chosen to match the computed coordinates to the background image of the map. If the projection parameters of the map were known, they could be computed. But I believe it is far more likely that they were obtained through trial and error.

How to compute a Mercator projection

If you want a more general method to describe the section of the world a given (not transverse) Mercator map shows, you can use this code:

// This map would show Germany:
$south = deg2rad(47.2);
$north = deg2rad(55.2);
$west = deg2rad(5.8);
$east = deg2rad(15.2);

// This also controls the aspect ratio of the projection
$width = 1000;
$height = 1500;

// Formula for mercator projection y coordinate:
function mercY($lat) { return log(tan($lat/2 + M_PI/4)); }

// Some constants to relate chosen area to screen coordinates
$ymin = mercY($south);
$ymax = mercY($north);
$xFactor = $width/($east - $west);
$yFactor = $height/($ymax - $ymin);

function mapProject($lat, $lon) { // both in radians, use deg2rad if neccessary
  global $xFactor, $yFactor, $west, $ymax;
  $x = $lon;
  $y = mercY($lat);
  $x = ($x - $west)*$xFactor;
  $y = ($ymax - $y)*$yFactor; // y points south
  return array($x, $y);
}

A demo run of this code is available at http://ideone.com/05OhG6.

Regarding aspect ratio

A setup with $xFactor != $yFactor produces a kind of stretched Mercator projection. This is not conformal (angle-preserving) any more. If one wants a true Mercator projection, one can omit any of the first six variable assignments, i.e. those defining the bounding box or those describing the size of the resulting map, and then use some computation too choose it satisfying $xFactor == $yFactor. But since the choice which to omit is kind of arbitrary, I feel that the above code is the most symmetric way to describe things.

More Related Contents:

  1. THREE.js generate UV coordinate
  2. How to call fromLatLngToDivPixel in Google Maps API V3?
  3. Mercator longitude and latitude calculations to x and y on a cropped map (of the UK)
  4. Packing different sized circles into rectangle – d3.js
  5. Three.js/WebGL: Large spheres appear broken at intersection
  6. How to calculate rotation in 2D in Javascript
  7. Check if polygon is inside a polygon
  8. How to implement a constraint solver for 2-D geometry?
  9. How to draw a blurry circle on HTML5 canvas?
  10. How can I calculate the area of a bezier curve?
  11. Calculate the bounding box’s X, Y, Height and Width of a rotated element via JavaScript
  12. Draw radius around a point in Google map
  13. How to calculate rotation angle from rectangle points?
  14. Random Point on a given Sphere
  15. A JavaScript function that returns the x,y points of intersection between two circles?
  16. CasperJS/PhantomJS doesn’t load https page
  17. Changing iframe src with Javascript
  18. How to change the Content of a with JavaScript
  19. When does JS interpret {} as an empty block instead of an empty object?
  20. The definitive best way to preload images using JavaScript/jQuery?
  21. How can I implement prepend and append with regular JavaScript?
  22. jquery smooth scroll to an anchor?
  23. Javascript event e.which?
  24. Javascript group objects by property [closed]
  25. Support for ES6 in Internet Explorer 11
  26. JavaScript Objects as Hashes? Is the complexity greater than O(1)?
  27. Google Chrome Extensions: How to include jQuery in programmatically injected content script?
  28. Get the clicked object that triggered jquery blur() event [duplicate]
  29. How do I retrieve if the popstate event comes from back or forward actions with the HTML5 pushstate?
  30. Why write “.call(this)” at the end of an javascript anonymous function? [duplicate]

Leave a Comment