plotting latitude on to a (Mercator projection) SVG map

Question

I want to convert (google sourced) longitude and latitude coordinates to x and y to place points on a SVG map

I can get the longitude converted to X but I can't nail latitude.

http://jsfiddle.net/chrisloughnane/an3BZ/17/

• red dots = place holders
• green dot = calculated position from longitude/latitude

I have read so much about Mercator projections and other projection systems API's I am now completely confused. I also followed Proj4JS library threads but couldn't find an example that was close to my task.

I attempted to emulate this solution, unfortunately I got something wrong.

Could someone please have a look at my jsfiddle and see if it's an obvious mistake.

The second test function secondconvert(latitude, longitude) (bottom of javascript pane) provides me with a reasonably accurate x coordinate i.e. if I manually enter the y coordinate b.ylat change to 265 it covers my left red dot place holder nearly perfectly.

I think I'm close, any help would be really appreciated.

tia.

---

Original SVG from here.

Answer 1

In your calculations of lattest and mapOffsetY inside secondconvert() you're using variable width where Raphael's solution uses worldMapWidth. Fixing that you get closer to the expected result, though still not precise.