yoga1290/jsbin.yipeh.html

## jsbin.yipeh.html
<meta name="description" content="more accurate map" />
<html>
<!--
  Created using jsbin.com
  Source can be edited via http://jsbin.com/qipif/22/edit
-->
<body>
<div id="mydiv"></div>
  <div id="info"></div>
  <canvas id="canvas"></canvas>

<style id="jsbin-css">

</style>
<script>
// ref: http://www.movable-type.co.uk/scripts/latlong.html
  function latlon2dist(lat1,lon1,lat2,lon2)
  {
    var R = 6371; // km
    var dLat = (lat2-lat1)* Math.PI / 180;//.toRad();
    var dLon = (lon2-lon1)* Math.PI / 180;//.toRad();
    lat1 = lat1* Math.PI / 180;//.toRad();
    lat2 = lat2* Math.PI / 180;//.toRad();

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    return R * c;
  }


  function xy2latlon(x,y)
  {
    var lat=0,lon=0,st=0,ed=100,mid=0,omid=-1,cmp;
    while(st<=ed)
      {
        mid=(st+ed)/2;
        cmp=latlon2dist(0,0,mid,0);
        if(cmp<x)
          st=mid;
        else if(cmp>x)
          ed=mid;
        else
          {
            lat=mid;
            break;
          }
        lat=mid;
        if(mid==omid) break;
        omid=mid;
      }
    st=0;
    ed=100;
    mid=0;
    omid=-1;
    while(st<=ed)
      {
        omid=mid;
        mid=(st+ed)/2;
        if(mid==omid) break;

        cmp=latlon2dist(0,0,0,mid);
        if(cmp<y)
          st=mid;
        else if(cmp>y)
          ed=mid;
        else
          {
            lon=mid;
            break;
          }
          lon=mid;
      }
    return [lat,lon];
  }

var txtHTML="<table>",imgURL=[],imgW=400,imgH=400;
function loadImage(i,j)
{
  /*
  console.log(i+","+j);
  if((i+1)>=imgURL.length){i=0;j++;}
  if((i+1)<imgURL.length && j<imgURL[0].length)
      setTimeout('loadImage('+(i+1)+','+(j)+');', 10);
  if(true)
    return;
  // */
  var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
  var img=new Image();
  img.onload=function(){
    //24
    context.drawImage(img,0,0,img.width,img.height-24,imgW*j,imgH*i,400,400);

    /*
    if(i==0) txtHTML+="<tr>";
    txtHTML+="<td><img src='"+canvas.toDataURL()+"' /></td>";
    if(i==imgURL[0].length-1) txtHTML+="</tr>";
    //*/
    if((i+1)>=imgURL.length){i=-1;j++;}
    if(i+1<imgURL.length && j<imgURL[0].length)
      setTimeout('loadImage('+(i+1)+','+(j)+');', 14000);
//    else  document.getElementById("info").innerHTML=txtHTML;
  };
  img.src=imgURL[i][j];
  console.log("loading "+imgURL[i][j]);
}

function xy2map(sx,sy,ex,ey,dx,dy)
{
    var i=sx,j=sy,latlon=[],r=0,c=0;
    for(i=sx;i>=ex;i-=dx)
    {
      imgURL.push([]);//new row=append a new sub-array
      for(j=sy;j<=ey; j+=dy)
       {
          latlon=xy2latlon(i,j);

          imgURL[r].push('http://maps.googleapis.com/maps/api/staticmap?center='+latlon[0]+','+latlon[1]+'&zoom=18&size='+imgW+'x'+imgH+'&sensor=false');
        }
        r++;
    }
    console.log(r+","+c);
    console.log(r*imgH+","+c*imgW);
    document.getElementById('canvas').width=imgW*((ey-sy)/dy);
    document.getElementById('canvas').height=imgH*r;
    loadImage(0,0);
}


xy2map( 3474.2674694311218,3332.407984281013,
              3473.0074694311218,3332.407984281013,
              0.1920996142924337,0.2389990922858013);
      // xy2map( 3474.2674694311218,3332.407984281013,
      //         3473.0074694311218,3333.407984281013,
      //         0.1920996142924337,0.2389990922858013);
      // +=up,
</script>
</body>
</html>
	<meta name="description" content="more accurate map" />
	<html>
	<!--
	Created using jsbin.com
	Source can be edited via http://jsbin.com/qipif/22/edit
	-->
	<body>
	<div id="mydiv"></div>
	<div id="info"></div>
	<canvas id="canvas"></canvas>

	<style id="jsbin-css">

	</style>
	<script>
	// ref: http://www.movable-type.co.uk/scripts/latlong.html
	function latlon2dist(lat1,lon1,lat2,lon2)
	{
	var R = 6371; // km
	var dLat = (lat2-lat1)* Math.PI / 180;//.toRad();
	var dLon = (lon2-lon1)* Math.PI / 180;//.toRad();
	lat1 = lat1* Math.PI / 180;//.toRad();
	lat2 = lat2* Math.PI / 180;//.toRad();

	var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
	Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
	var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
	return R * c;
	}



	function xy2latlon(x,y)
	{
	var lat=0,lon=0,st=0,ed=100,mid=0,omid=-1,cmp;
	while(st<=ed)
	{
	mid=(st+ed)/2;
	cmp=latlon2dist(0,0,mid,0);
	if(cmp<x)
	st=mid;
	else if(cmp>x)
	ed=mid;
	else
	{
	lat=mid;
	break;
	}
	lat=mid;
	if(mid==omid) break;
	omid=mid;
	}
	st=0;
	ed=100;
	mid=0;
	omid=-1;
	while(st<=ed)
	{
	omid=mid;
	mid=(st+ed)/2;
	if(mid==omid) break;

	cmp=latlon2dist(0,0,0,mid);
	if(cmp<y)
	st=mid;
	else if(cmp>y)
	ed=mid;
	else
	{
	lon=mid;
	break;
	}
	lon=mid;
	}
	return [lat,lon];
	}

	var txtHTML="<table>",imgURL=[],imgW=400,imgH=400;
	function loadImage(i,j)
	{
	/*
	console.log(i+","+j);
	if((i+1)>=imgURL.length){i=0;j++;}
	if((i+1)<imgURL.length && j<imgURL[0].length)
	setTimeout('loadImage('+(i+1)+','+(j)+');', 10);
	if(true)
	return;
	// */
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	var img=new Image();
	img.onload=function(){
	//24
	context.drawImage(img,0,0,img.width,img.height-24,imgWj,imgHi,400,400);

	/*
	if(i==0) txtHTML+="<tr>";
	txtHTML+="<td><img src='"+canvas.toDataURL()+"' /></td>";
	if(i==imgURL[0].length-1) txtHTML+="</tr>";
	//*/
	if((i+1)>=imgURL.length){i=-1;j++;}
	if(i+1<imgURL.length && j<imgURL[0].length)
	setTimeout('loadImage('+(i+1)+','+(j)+');', 14000);
	// else document.getElementById("info").innerHTML=txtHTML;
	};
	img.src=imgURL[i][j];
	console.log("loading "+imgURL[i][j]);
	}

	function xy2map(sx,sy,ex,ey,dx,dy)
	{
	var i=sx,j=sy,latlon=[],r=0,c=0;
	for(i=sx;i>=ex;i-=dx)
	{
	imgURL.push([]);//new row=append a new sub-array
	for(j=sy;j<=ey; j+=dy)
	{
	latlon=xy2latlon(i,j);

	imgURL[r].push('http://maps.googleapis.com/maps/api/staticmap?center='+latlon[0]+','+latlon[1]+'&zoom=18&size='+imgW+'x'+imgH+'&sensor=false');
	}
	r++;
	}
	console.log(r+","+c);
	console.log(rimgH+","+cimgW);
	document.getElementById('canvas').width=imgW*((ey-sy)/dy);
	document.getElementById('canvas').height=imgH*r;
	loadImage(0,0);
	}


	xy2map( 3474.2674694311218,3332.407984281013,
	3473.0074694311218,3332.407984281013,
	0.1920996142924337,0.2389990922858013);
	// xy2map( 3474.2674694311218,3332.407984281013,
	// 3473.0074694311218,3333.407984281013,
	// 0.1920996142924337,0.2389990922858013);
	// +=up,
	</script>
	</body>
	</html>