Skip to content

Instantly share code, notes, and snippets.

@yoga1290
Created April 2, 2014 12:17
Show Gist options
  • Save yoga1290/9932970 to your computer and use it in GitHub Desktop.
Save yoga1290/9932970 to your computer and use it in GitHub Desktop.
<meta name="description" content="working accurate map" />
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/yipeh/2/edit
-->
<!--
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-1){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>=imgURL.length-1){i=-1;j++;}
if(i+1<imgURL.length && j<imgURL[0].length)
setTimeout('loadImage('+(i+1)+','+(j)+');', 2000);
console.log("loading ("+i+","+j+")");
// 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,3333.407984281013,
0.1920996142924337,0.2389990922858013);
// xy2map( 3474.2674694311218,3332.407984281013,
// 3473.0074694311218,3333.407984281013,
// 0.1920996142924337,0.2389990922858013);
// +=up,
</script>
<style id="jsbin-css">
</style>
<script>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment