## Mapping lat/lon values with JavaScript

Googe Maps loads about 400 kByte for each visit to casastristes.org. Sometimes I prefer to implement a static map instead but still using latitude and longitude values for mapping the places. In the following example I show how to convert lat/lon values to x/y coordinates for the use on a static map.

This example shows the use of lat/lon to x/y mapping I’m going to explain step by step. To separate data from interface I use a JSON file where the lat/lon values are saved as following:
``` { "label" : "Barcelona", "type" : "vivienda", "addressLatLng" : "41.409775832009565,2.197265625", "homepage" : "http://bcn.vdevivienda.net" },```

Using plain JavaScript I get lat/lon values out of the file. Reading this article I found the solution for converting this values to x/y coordinates, I adapted the posted ActionScript to the following JavaScript function:

```function getYcoord(myLat) { radBtm = deg2rad(latS); radPixel = deg2rad(myLat); sinRadBtm = Math.sin(radBtm); sinRadPixel = Math.sin(radPixel); convHtBtm = rfactor * Math.log((1 + sinRadPixel)/(1 - sinRadPixel)); convHtPixel = rfactor * Math.log((1 + sinRadBtm)/(1 - sinRadBtm)); myTotHt = Math.abs(convHtPixel - convHtBtm); myYcoord = Math.round(mapHeight - myTotHt, 3); return myYcoord; }```

function getXcoord(myLon){
var longPix = mapWidth / (lonW – lonE);
return Math.round(((lonW – myLon)*longPix), 2);
}

That’s it. In a near future you can see it in action here.