Mercator projection image data

Question

I'm trying to create a map which I can place points on within my application I found some mecator jpg images but in order to accurately place points I need to convert the lat/long to pixels so that the data is accurately displayed on screen. I've been following this tutorial

http://jkfill.com/2011/03/18/placing-geo-coordinates-on-an-image/

When trying to calculate the globe width and centre point of the map I simply took the pixel width and the center point of the pixels. i.e if the image is 100 x 100 then the globe width is 100 and the center point (50,50) although I now think this is incorrect?

How can I calculate these points? Alternatively can anyone recommend map images with this data available?

Thanks

Answer 1

Skimming that website -- I would ignore those instructions. You just need a web mapping API -- you don't have to do all the math.

I know the Esri/ArcGIS world best so I would use the arcgis javascript api. (Open layers or Google maps would be other choices.) There are utility functions in these apis that convert from standard web mercator projection to geographic to screen coordinate, and back. But mostly, you can create and place graphics on a basemap of your choosing with just the lat/long. The apis know the conversions.

There's lots of examples, but this is making graphics with popups from flickr photos using their lat/long. Note the key lines here:

var loc = new esri.geometry.Point(item.longitude, item.latitude);
map.graphics.add(new esri.Graphic(loc, symbol, item, template));

The conversion methods are in the esri.geometry "namespace" such as esri.geometry.geographicToWebMercator(geometry), but you rarely even need, as you can see from above. Create a point with lat/long and it converts to correct screen location for you.

FYI, Web Mercator is the standard projection used by Google/Bing/Esri/Open Street Map/etc.. Slightly confusing is the code for it: just use 102100 for esri. See this post for more..

Answer 2

Use node-sphericalmercator (it works in browsers too). Use .px(ll, zoom), set zoom to be 0, and multiply each part of its output by 100/128. That'll be the position in pixels on your image.