jsanz/gist:5373513

## gistfile1.html
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://coffeescript.org/extras/coffee-script.js"> </script>
  <script src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.js"> </script>

  <script type="text/coffeescript">
    Proj4js.defs["EPSG:4326"] = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
    Proj4js.defs["EPSG:3042"] = "+proj=utm +zone=30 +ellps=WGS84 +units=m +no_defs";
    Proj4js.defs["EPSG:900913"]= "+title=GoogleMercator +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs";

    dist = (p1,p2) ->
      x2 = Math.pow(p2.x-p1.x,2)
      y2 = Math.pow(p2.y-p1.y,2)
      Math.sqrt x2 + y2

    printPoint = (p) ->
      "</br>X: #{p.x.toFixed(3)}</br>Y: #{p.y.toFixed(3)}"

    calculate = (lon,lat) ->
      ###
      Projections to use
      ###
      proj4326 = new Proj4js.Proj 'EPSG:4326'
      proj900913 = new Proj4js.Proj 'EPSG:900913'
      proj3042 = new Proj4js.Proj 'EPSG:3042'

      ###
      Point base to compute
      ###
      p4326 = new Proj4js.Point(lon,lat)

      ###
      Transform it from 4326 to 3042
      ###
      p3042 = p4326.clone()
      Proj4js.transform(proj4326, proj3042, p3042)

      ###
      Create points derived
      ###
      p3042N = p3042.clone()
      p3042N.y += 100

      p3042E = p3042.clone()
      p3042E.x += 100

      ###
      Back to 4326
      ###
      p4326N = p3042N.clone()
      Proj4js.transform(proj3042, proj4326, p4326N)
      p4326E = p3042E.clone()
      Proj4js.transform(proj3042, proj4326, p4326E)

      ###
      Pass to GoogleMercator
      ###
      pGoog = p4326.clone()
      Proj4js.transform(proj4326, proj900913, pGoog)
      pGoogN = p4326N.clone()
      Proj4js.transform(proj4326, proj900913, pGoogN)
      pGoogE = p4326E.clone()
      Proj4js.transform(proj4326, proj900913, pGoogE)

      ###
      Get the ratios
      ###
      resultX = dist(pGoog,pGoogE) / dist(p3042,p3042E)
      resultY = dist(pGoog,pGoogN) / dist(p3042,p3042N)

      result =
        ix : resultX
        iy : resultY

    printResult = (lat,result) ->
      "#{lat} , #{(result.ix * 100).toFixed 1} , #{ (result.iy * 100).toFixed 1}</br>"

    iterate = (iLat) ->
      lats = (x for x in [0..80] by parseInt iLat,10)
      printResult(lat, calculate -3,lat) for lat in lats


    $("#button").click ->
      ilat = $("#ilat").val()
      $("#result").html iterate(ilat)
  </script>
</head>
<body>
  <h1>Web Mercator ratio</h1>
  <p>Calculate the ratio between distances in real world and Web Mercator projection</p>
  Latitude increment: <input type="text" id="ilat" value="5"/><br/>
  <input type="button" value="Calculate " id="button"/> <br/>
  Result:</br> Latitude, iX(%), iY(%)</br> <span id="result"/>
</body>
</html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://coffeescript.org/extras/coffee-script.js"> </script>
	<script src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.js"> </script>

	<script type="text/coffeescript">
	Proj4js.defs["EPSG:4326"] = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
	Proj4js.defs["EPSG:3042"] = "+proj=utm +zone=30 +ellps=WGS84 +units=m +no_defs";
	Proj4js.defs["EPSG:900913"]= "+title=GoogleMercator +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs";

	dist = (p1,p2) ->
	x2 = Math.pow(p2.x-p1.x,2)
	y2 = Math.pow(p2.y-p1.y,2)
	Math.sqrt x2 + y2

	printPoint = (p) ->
	"</br>X: #{p.x.toFixed(3)}</br>Y: #{p.y.toFixed(3)}"

	calculate = (lon,lat) ->
	###
	Projections to use
	###
	proj4326 = new Proj4js.Proj 'EPSG:4326'
	proj900913 = new Proj4js.Proj 'EPSG:900913'
	proj3042 = new Proj4js.Proj 'EPSG:3042'

	###
	Point base to compute
	###
	p4326 = new Proj4js.Point(lon,lat)

	###
	Transform it from 4326 to 3042
	###
	p3042 = p4326.clone()
	Proj4js.transform(proj4326, proj3042, p3042)

	###
	Create points derived
	###
	p3042N = p3042.clone()
	p3042N.y += 100

	p3042E = p3042.clone()
	p3042E.x += 100

	###
	Back to 4326
	###
	p4326N = p3042N.clone()
	Proj4js.transform(proj3042, proj4326, p4326N)
	p4326E = p3042E.clone()
	Proj4js.transform(proj3042, proj4326, p4326E)

	###
	Pass to GoogleMercator
	###
	pGoog = p4326.clone()
	Proj4js.transform(proj4326, proj900913, pGoog)
	pGoogN = p4326N.clone()
	Proj4js.transform(proj4326, proj900913, pGoogN)
	pGoogE = p4326E.clone()
	Proj4js.transform(proj4326, proj900913, pGoogE)

	###
	Get the ratios
	###
	resultX = dist(pGoog,pGoogE) / dist(p3042,p3042E)
	resultY = dist(pGoog,pGoogN) / dist(p3042,p3042N)

	result =
	ix : resultX
	iy : resultY

	printResult = (lat,result) ->
	"#{lat} , #{(result.ix * 100).toFixed 1} , #{ (result.iy * 100).toFixed 1}</br>"

	iterate = (iLat) ->
	lats = (x for x in [0..80] by parseInt iLat,10)
	printResult(lat, calculate -3,lat) for lat in lats


	$("#button").click ->
	ilat = $("#ilat").val()
	$("#result").html iterate(ilat)
	</script>
	</head>
	<body>
	<h1>Web Mercator ratio</h1>
	<p>Calculate the ratio between distances in real world and Web Mercator projection</p>
	Latitude increment: <input type="text" id="ilat" value="5"/><br/>
	<input type="button" value="Calculate " id="button"/> <br/>
	Result:</br> Latitude, iX(%), iY(%)</br> <span id="result"/>
	</body>
	</html>