Convert lat/long to pixel X&Y co-ordinates

Question

This type of question seems to have been asked numerous times but none of the solutions posted get me anywhere near the answer I need.

I have this map of Northland,

Answer 1

Converting Lat/Long into pixels just by scaling as you suggest only works on the small selected part of the globe, because the scaling constants vary depending on the latitude.

Converting into Universal Transverse Mercator (UTM) co-ordinates may work for small areas. First you compute the UTM zone of the central point of your viewing area, then convert all other points you need to show on that screen using that zone (not the actual zone of the point).

UTM co-ordinates can be converted into pixels by simple scaling because they are linear. Of course, the method is only well usable for rendering areas not much larger than a single UTM zone (few hundreds of kilometers). "Zone lock", however, works well if it is just slightly bigger, or simply the official UTM zone boundary is inside the viewing area.

There are good, easy to use, open source libraries for the co-ordinate conversion. As you platform is JavaScript, may be worth looking at geodesy. It has many good methods for co-ordinate conversion, distance calculation, bearings, midpoints and all the like.