Conversion of lat/lng coordinates to pixels on a given map (with JavaScript)

Question

I have put together a cities database from MaxMind and it includes the lat/lng values for each city in the database. I have also put together a map of North/America and I would like to have a icon appear on the x/y coordinates of the map which are derived from the lat/lng coordinates of the city database record.

From my understanding I need to find the left/top bounds of the map first (lat/lng -> x/y) and then use that as a difference for the linear relationship between any of the north american city x/y coords. Finally, depending on the size of the map, its just a few simple division and subtraction operations to figure out where to place the point.

However I can't seem to figure out how todo the following:

1. I'm not sure what the lat/lng mapping system is. How do I find this out?
2. Using a JavaScript library, how do I convert the lat/lng to pixels for the 0,0 coord and each of the city coords. I've tried Proj4js, but they require that you specify your coordinate map types and so on. Here is another question that asked something similar. Convert long/lat to pixel x/y on a given picture

Any ideas?

-- EDIT --

The output map (of North America) is a continuous cylinder: "Miller cylindrical projection". http://en.wikipedia.org/wiki/Miller_cylindrical_projection

Answer 1

Latitude and Longitude are imaginary lines drawn on earth so that you can accurately pinpoint any location on the world . simply put they are the X and Y coords of a plane. Latitude is a vertical line running from north to south with its 90 deg at the north pole and -90deg at the south pole.

Longitude on the other hand is a horizontal line running east to south with -180deg in the west and 180deg in the east.

you can convert the latLng into pixel coords as by assuming that the width of the html container is the width of the world and the same applies to the the height.

Formula - Longitude - pixel

(givenLng*widthOfContainerElement)/360

where 360 is the total longitude in degrees

Formula -Latitude - pixed

(givenLat*heightOfContainerElement)/180

where 360 is the total longitude in degree

//Height is calculated from the bottom

let me know if you still need any clarifications.

Answer 2

Here is a Javascript implementation of a Mercator projection that returns only positive values (cartesian coordinate system of screens) and accounts for the sphere > flat conversion:

// get x   
var x = (lng + 180) * (mapWidth / 360);
// convert from degrees to radians
var latRad = lat * Math.PI / 180;
// get y value
var mercN = Math.log(Math.tan((Math.PI / 4) + (latRad / 2)));
var y = (mapHeight / 2) - (mapWidth * mercN / (2 * Math.PI));