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.


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

I have read so much about Mercator projections and other projection system 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 @Raphael Wichmann and @betamax solution, unfortunately I got something wrong.

Could someone 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.

Note: the longitude/latitude bounds I used for my SVG map are best guesstimates, worked surprisingly well for the longitude calculation.

Original SVG from here.

  • Is your solution generic? Would be great if you provide a bit of a write up on how the formula works. – Learner Apr 10 '19 at 6:07
  • I assume the MAP_WIDTH = 400; MAP_HEIGHT = 500; properties are the SVG dimensions. How did you calculate westLong, eastLong etc? Assuming they are mercator coords of the top left and bottom right of the map? Thanks – Learner Apr 10 '19 at 6:43
  • Hi, I'm sorry I wrote that code nearly 7 years ago and I'm in the middle of a complex project but if I get an hour at the weekend I'll revisit the solution and see what I can do for you. In the mean time try the working version jsfiddle link below and the link to the the other reference. – Chris Apr 10 '19 at 16:36
  • Thanks. I've found a working solution using my own inputs. I don't understand why the math works, but it does. I think that would be the most interested area to comment on. – Learner Apr 11 '19 at 0:37
  • Enjoy :) en.wikipedia.org/wiki/… – Chris Apr 11 '19 at 11:13

This question was answered by @acraig5075 here.

After correcting my mistake and adjusting southern latitude I get: Fixed link: http://jsfiddle.net/an3BZ/145/


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.