map geo coordinates (lat, lng) to map (x, y)

Question

I have the geo-coordinates (latidute & longitude) of some cities and would like to get the x,y coordinates so can plot them into a map.

The map is a standart one, just like http://www.wordtravels.com/images/map/Spain/Fuerteventura_map.jpg for example.

I tried several formular I found, but none seems to really work :(. Simple javascript code or ruby would be best :)

Answer 1

in addition to the above answers, there is the open source proj4js library which performs transforms between various map projections. it is used internally by OpenLayers for this kind of thing, and supports a number of popular projections and coordinate systems.

Answer 2

There are many ways to approach this problem with varying degrees of precision. However, they all boil down to performing a projection that corresponds with that of your map.

If you know that your map is of the Mercator projection variety, then the lat/long coordinates can simply be treated as X/Y, scaled and translated appropriately. That is, you would find a simple ax+b and cy+d that do the job.

If your map is not Mercator-projection (as it probably isn't if it tries to get the scale consistent, as this one appears to do) then your best bet is to assume it's an "earth-tangent" projection. (This works out OK for small landmasses.) In that case, you need to first project the Lat/Long into a three-dimensional coordinate system.

z=sin(lat)
x=cos(lat)*sin(long)
y=cos(lat)*cos(long)

Positive z points to the north pole. Positive y points to 0, 0, and positive x points to lat 0 long 90 (east) and positive lat/long are north and east. Of course you must convert to radians first.

All of this assumes a spherical Earth, which isn't exactly true but it's close enough unless you're firing long-range mortar rounds.

Anyway, once you have your XYZ, then you'll need to rotate and scale for the map. To rotate around the Z axis, just subtract the base longitude before you project into three dimensions. Do this to center your map on zero-longitude for easiest math.

Once you've done this, you'll only need to rotate the globe forward until your original map is face-front. Do this with a 2-d rotation in the y-z axis. Use http://en.wikipedia.org/wiki/Coordinate_rotations_and_reflections to figure that part out.

Finally, your x,z coordinates are going to line up pretty well with your map's x,y coordinates, for an appropriate scale/translate as described earlier.

Answer 3

perhaps this will help, i've done a implementation for the US using just javascript.

demo/code: http://the55.net/_11/sketch/us_map

Answer 4

Use the Google Maps API, you can overlay your jpg on the map and position it correctly.

Here is an example http://code.google.com/apis/maps/documentation/javascript/examples/overlay-hideshow.html

and here is the api page about overlays http://code.google.com/apis/maps/documentation/javascript/overlays.html

Answer 5

You won't find it easy unless you're working on a very small scale (and close to the Equator). Wikipedia's Geographic coordinate system is a good start...

The easier path could be to make use of something like web mapping and stick with your latitudes and longitudes.