API tools faq
paste
hackerboxes

html cal google statlite map

hackerboxes
Jul 31st, 2012
289
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.00 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <html><head>
  3.  
  4.  
  5.  
  6.  
  7.  
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  9.  
  10. <meta name="GENERATOR" content="Microsoft DHTML Editing Control"><title>Google Maps Image Tiles</title>
  11.  
  12.  
  13.  
  14. <style>
  15.  
  16. button, input { border-width: 1px; font-size:12px;padding: 0 2px;}
  17.  
  18. input { text-align:right; }
  19.  
  20.  
  21.  
  22. </style></head><body style="font-family: Verdana,sans-serif; font-size: 80%; text-align: center; color: rgb(204, 204, 204); background-color: black;" onload="DoRebuild()">
  23.  
  24.  
  25.  
  26. <script language="JavaScript" type="text/javascript"> <!--
  27.  
  28.  
  29.  
  30. function element(id)
  31.  
  32. {
  33.  
  34. return document.getElementById(id);
  35.  
  36. }
  37.  
  38.  
  39.  
  40. function DoRebuild()
  41.  
  42. {
  43.  
  44. var addr = GetQuadtreeAddress(element("input_longitude").value, element("input_latitude").value);
  45.  
  46. var coords = GetCoordinatesFromAddress(addr);
  47.  
  48.  
  49.  
  50. element("calculated_longitude").innerHTML = "" + GetSexagesimalNotation(coords.long);
  51.  
  52. element("calculated_latitude").innerHTML = "" + GetSexagesimalNotation(coords.lat);
  53.  
  54.  
  55.  
  56. // build a 3x3 table
  57.  
  58. var cursor = addr.substr(0, parseInt(element("input_zoom").value));
  59.  
  60. cursor = GetNextTileX(cursor,0); // move to top left
  61.  
  62. cursor = GetNextTileY(cursor,0);
  63.  
  64.  
  65.  
  66. for (var x = 0; x < 3; x++)
  67.  
  68. {
  69.  
  70. var c2 = cursor;
  71.  
  72. cursor = GetNextTileX(cursor,1);
  73.  
  74. for (var y = 0; y < 3; y++)
  75.  
  76. {
  77.  
  78.  
  79.  
  80. element("t" + y + x).style.backgroundImage = "url(" + "http://khm.google.com/kh?v=88&t=" + c2 + ")";
  81.  
  82. c2 = GetNextTileY(c2,1);
  83.  
  84. }
  85.  
  86. }
  87.  
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95.  
  96. // populate the progression of images
  97.  
  98. for (var i = 0; i < 20; i++)
  99.  
  100. {
  101.  
  102.  
  103.  
  104. var el = element("m" + i);
  105.  
  106. if (el)
  107.  
  108. {
  109.  
  110. var src = "http://khm.google.com/kh?v=88&t=" + addr.substr(0, i+1);
  111.  
  112. el.alt = "Google Maps Address " + addr.substr(0, i+1);
  113.  
  114. el.style.backgroundImage = "url(" + src + ")";
  115.  
  116. el.src = "m" + addr.substr(i+1,1) + ".png";
  117.  
  118. }
  119.  
  120. }
  121.  
  122. }
  123.  
  124.  
  125.  
  126. function GetNextTileX(addr, forward)
  127.  
  128. {
  129.  
  130. if (addr == '')
  131.  
  132. return addr;
  133.  
  134.  
  135.  
  136. var parent = addr.substr(0, addr.length-1);
  137.  
  138. var last = addr.substr(addr.length-1);
  139.  
  140.  
  141.  
  142. if (last == 'q')
  143.  
  144. {
  145.  
  146. last = 'r';
  147.  
  148. if (!forward)
  149.  
  150. parent = GetNextTileX(parent, forward);
  151.  
  152. }
  153.  
  154. else if (last == 'r')
  155.  
  156. {
  157.  
  158. last = 'q';
  159.  
  160. if (forward)
  161.  
  162. parent = GetNextTileX(parent, forward);
  163.  
  164. }
  165.  
  166. else if (last == 's')
  167.  
  168. {
  169.  
  170. last = 't';
  171.  
  172. if (forward)
  173.  
  174. parent = GetNextTileX(parent, forward);
  175.  
  176. }
  177.  
  178. else if (last == 't')
  179.  
  180. {
  181.  
  182. last = 's';
  183.  
  184. if (!forward)
  185.  
  186. parent = GetNextTileX(parent, forward);
  187.  
  188. }
  189.  
  190. return parent + last;
  191.  
  192. }
  193.  
  194.  
  195.  
  196. function GetNextTileY(addr, forward)
  197.  
  198. {
  199.  
  200. if (addr == '')
  201.  
  202. return addr;
  203.  
  204.  
  205.  
  206. var parent = addr.substr(0, addr.length-1);
  207.  
  208. var last = addr.substr(addr.length-1);
  209.  
  210.  
  211.  
  212. if (last == 'q')
  213.  
  214. {
  215.  
  216. last = 't';
  217.  
  218. if (!forward)
  219.  
  220. parent = GetNextTileY(parent, forward);
  221.  
  222. }
  223.  
  224. else if (last == 'r')
  225.  
  226. {
  227.  
  228. last = 's';
  229.  
  230. if (!forward)
  231.  
  232. parent = GetNextTileY(parent, forward);
  233.  
  234. }
  235.  
  236. else if (last == 's')
  237.  
  238. {
  239.  
  240. last = 'r';
  241.  
  242. if (forward)
  243.  
  244. parent = GetNextTileY(parent, forward);
  245.  
  246. }
  247.  
  248. else if (last == 't')
  249.  
  250. {
  251.  
  252. last = 'q';
  253.  
  254. if (forward)
  255.  
  256. parent = GetNextTileY(parent, forward);
  257.  
  258. }
  259.  
  260. return parent + last;
  261.  
  262. }
  263.  
  264.  
  265.  
  266. function MercatorToNormal(y)
  267.  
  268. {
  269.  
  270. y = -y * Math.PI / 180; // convert to radians
  271.  
  272. y = Math.sin(y);
  273.  
  274. y = (1+y)/(1-y);
  275.  
  276. y = 0.5 * Math.log(y);
  277.  
  278. y *= 1.0 / (2 * Math.PI); // scale factor from radians to normalized
  279.  
  280. y += 0.5; // and make y range from 0 - 1
  281.  
  282. return y;
  283.  
  284. }
  285.  
  286.  
  287.  
  288. function NormalToMercator(y)
  289.  
  290. {
  291.  
  292. y -= 0.5;
  293.  
  294. y *= 2 * Math.PI;
  295.  
  296. y = Math.exp(y * 2);
  297.  
  298. y = (y-1)/(y+1);
  299.  
  300. y = Math.asin(y);
  301.  
  302. y = y * -180/Math.PI;
  303.  
  304. return y;
  305.  
  306. }
  307.  
  308.  
  309.  
  310. function GetSexagesimalNotation(x)
  311.  
  312. {
  313.  
  314.  
  315.  
  316. // 23° 27′ 30"
  317.  
  318. var ret = "";
  319.  
  320. if (x < 0)
  321.  
  322. {
  323.  
  324. ret += '-';
  325.  
  326. x = -x;
  327.  
  328. }
  329.  
  330. ret += Math.floor(x);
  331.  
  332. ret += '° ';
  333.  
  334.  
  335.  
  336. x = (x - Math.floor(x)) * 60;
  337.  
  338. ret += Math.floor(x);
  339.  
  340. ret += "' ";
  341.  
  342.  
  343.  
  344. x = (x - Math.floor(x)) * 60;
  345.  
  346. ret += Math.floor(x);
  347.  
  348. ret += '" ';
  349.  
  350.  
  351.  
  352. return ret;
  353.  
  354. }
  355.  
  356.  
  357.  
  358. function GetCoordinatesFromAddress(str)
  359.  
  360. {
  361.  
  362.  
  363.  
  364. // get normalized coordinate first
  365.  
  366. var x = 0.0;
  367.  
  368. var y = 0.0;
  369.  
  370. var scale = 1.0;
  371.  
  372. str = str.toLowerCase();
  373.  
  374. str = str.substr(1); // skip the first character
  375.  
  376. while (str.length > 0)
  377.  
  378. {
  379.  
  380. scale *= 0.5;
  381.  
  382. var c = str.charAt(0); // remove first character
  383.  
  384. if (c == 'r' || c == 's')
  385.  
  386. {
  387.  
  388.  
  389.  
  390. x += scale;
  391.  
  392. }
  393.  
  394. if (c == 't' || c == 's')
  395.  
  396. {
  397.  
  398.  
  399.  
  400. y += scale;
  401.  
  402. }
  403.  
  404.  
  405.  
  406. str = str.substr(1);
  407.  
  408. }
  409.  
  410.  
  411.  
  412. var ret = new Object();
  413.  
  414.  
  415.  
  416. ret.longmin = (x - 0.5) * 360;
  417.  
  418. ret.latmin = NormalToMercator(y);
  419.  
  420. ret.longmax = (x + scale - 0.5) * 360;
  421.  
  422. ret.latmax = NormalToMercator(y + scale);
  423.  
  424. ret.long = (x + scale * 0.5 - 0.5) * 360;
  425.  
  426. ret.lat = NormalToMercator(y + scale * 0.5);
  427.  
  428.  
  429.  
  430. return ret;
  431.  
  432. }
  433.  
  434.  
  435.  
  436.  
  437.  
  438.  
  439.  
  440. function GetQuadtreeAddress(long, lat)
  441.  
  442. {
  443.  
  444. // now convert to normalized square coordinates
  445.  
  446. // use standard equations to map into mercator projection
  447.  
  448.  
  449.  
  450. var x = (180.0 + parseFloat(long)) / 360.0;
  451.  
  452. var y = MercatorToNormal(parseFloat(lat));
  453.  
  454.  
  455.  
  456. var quad = "t"; // google addresses start with t
  457.  
  458. var lookup = "qrts"; // tl tr bl br
  459.  
  460.  
  461.  
  462. for (digits = 0; digits < 24; digits++)
  463.  
  464. {
  465.  
  466. // make sure we only look at fractional part
  467.  
  468. x -= Math.floor(x);
  469.  
  470. y -= Math.floor(y);
  471.  
  472.  
  473.  
  474. quad = quad + lookup.substr((x>=0.5?1:0) + (y>=0.5?2:0), 1);
  475.  
  476.  
  477.  
  478. // now descend into that square
  479.  
  480. x *= 2;
  481.  
  482. y *= 2;
  483.  
  484. }
  485.  
  486. return quad;
  487.  
  488. }
  489.  
  490.  
  491.  
  492. //--> </script>
  493.  
  494.  
  495.  
  496.  
  497.  
  498. <h2>Sample: Addressing Google Maps image tiles</h2>
  499.  
  500. <form name="theForm" onsubmit="DoRebuild(); return false;">
  501.  
  502. <em>Fetch Google Maps tiles via longitude/latitude</em>
  503.  
  504. <input style="width: 6em;" id="input_longitude" name="longitude" value="151.211">
  505.  
  506. <input style="width: 6em;" id="input_latitude" name="latitude" value="-33.852">
  507.  
  508. <input style="width: 6em;" id="input_zoom" name="zoom" value="21">
  509.  
  510. <button style="margin: 0pt 8px;" type="submit">Rebuild</button>
  511.  
  512. </form>
  513.  
  514.  
  515.  
  516. <div><em>(Image centered at: <span id="calculated_longitude"></span>, <span id="calculated_latitude"></span>)</em></div>
  517.  
  518.  
  519.  
  520. <table style="border: 2px solid white; margin: 1em auto; background-color: rgb(17, 17, 68);" align="center" cellpadding="0" cellspacing="0">
  521.  
  522. <tbody><tr><td style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttsstrst);" id="t00" height="256" width="256">&nbsp;</td><td style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttsstrss);" id="t01" height="256" width="256">&nbsp;</td><td style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttsssqtt);" id="t02" height="256" width="256">&nbsp;</td></tr>
  523.  
  524. <tr><td style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttsstsrq);" id="t10" height="256" width="256">&nbsp;</td><td style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttsstsrr);" id="t11" height="256" width="256">&nbsp;</td><td style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttssstqq);" id="t12" height="256" width="256">&nbsp;</td></tr>
  525.  
  526. <tr><td style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttsstsrt);" id="t20" height="256" width="256">&nbsp;</td><td style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttsstsrs);" id="t21" height="256" width="256">&nbsp;</td><td style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttssstqt);" id="t22" height="256" width="256">&nbsp;</td></tr>
  527.  
  528. </tbody></table>
  529.  
  530.  
  531.  
  532. <h2>All tiles containing these coordinates</h2>
  533.  
  534.  
  535.  
  536. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=t);" alt="Google Maps Address t" id="m0" src="ms.png" hspace="0">
  537.  
  538. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=ts);" alt="Google Maps Address ts" id="m1" src="mr.png" hspace="0">
  539.  
  540. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsr);" alt="Google Maps Address tsr" id="m2" src="mr.png" hspace="0">
  541.  
  542. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrr);" alt="Google Maps Address tsrr" id="m3" src="mt.png" hspace="0">
  543.  
  544. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrt);" alt="Google Maps Address tsrrt" id="m4" src="ms.png" hspace="0">
  545.  
  546. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrts);" alt="Google Maps Address tsrrts" id="m5" src="mq.png" hspace="0">
  547.  
  548. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsq);" alt="Google Maps Address tsrrtsq" id="m6" src="mr.png" hspace="0">
  549.  
  550. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqr);" alt="Google Maps Address tsrrtsqr" id="m7" src="ms.png" hspace="0">
  551.  
  552. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrs);" alt="Google Maps Address tsrrtsqrs" id="m8" src="ms.png" hspace="0">
  553.  
  554. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrss);" alt="Google Maps Address tsrrtsqrss" id="m9" src="mq.png" hspace="0">
  555.  
  556. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssq);" alt="Google Maps Address tsrrtsqrssq" id="m10" src="mq.png" hspace="0">
  557.  
  558. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqq);" alt="Google Maps Address tsrrtsqrssqq" id="m11" src="mt.png" hspace="0">
  559.  
  560. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqt);" alt="Google Maps Address tsrrtsqrssqqt" id="m12" src="mt.png" hspace="0">
  561.  
  562. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqtt);" alt="Google Maps Address tsrrtsqrssqqtt" id="m13" src="ms.png" hspace="0">
  563.  
  564. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqtts);" alt="Google Maps Address tsrrtsqrssqqtts" id="m14" src="ms.png" hspace="0">
  565.  
  566. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttss);" alt="Google Maps Address tsrrtsqrssqqttss" id="m15" src="mt.png" hspace="0">
  567.  
  568. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttsst);" alt="Google Maps Address tsrrtsqrssqqttsst" id="m16" src="ms.png" hspace="0">
  569.  
  570. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttssts);" alt="Google Maps Address tsrrtsqrssqqttssts" id="m17" src="mr.png" hspace="0">
  571.  
  572. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttsstsr);" alt="Google Maps Address tsrrtsqrssqqttsstsr" id="m18" src="mr.png" hspace="0">
  573.  
  574. <img style="background-image: url(http://khm.google.com/kh?v=88&amp;t=tsrrtsqrssqqttsstsrr);" alt="Google Maps Address tsrrtsqrssqqttsstsrr" id="m19" src="mr.png" hspace="0">
  575.  
  576.  
  577.  
  578. <p></p>
  579.  
  580.  
  581.  
  582. <p><small>
  583.  
  584. Code by <a href="http://intepid.com/">Mark Pursey</a> updated 6:52:37 PM Tuesday 27/05/2008</small>
  585.  
  586. </p> </body></html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!