{"id":62639,"date":"2024-02-17T03:01:31","date_gmt":"2024-02-16T17:01:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=62639"},"modified":"2024-02-17T20:00:57","modified_gmt":"2024-02-17T10:00:57","slug":"earth-scanner-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-primer-tutorial\/","title":{"rendered":"Earth Scanner Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Scanner Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.gif\" title=\"Earth Scanner Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Scanner Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;ve got for you a tutorial that takes bits and pieces from &#8230;<\/p>\n<ul>\n<li>&#8220;Just Javascript&#8221; (ie. no body element to speak of as you begin) &#8230; ref: <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-card-game-iphone-debugging-tutorial\/' title='Just Javascript Card Game iPhone Debugging Tutorial'>Just Javascript Card Game iPhone Debugging Tutorial<\/a><\/li>\n<li>&#8220;CSS Property clip-path&#8221; &#8230; ref: <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-area-of-interest-tutorial\/' title='Region Picker Area of Interest'>Region Picker Area of Interest<\/a><\/li>\n<li>&#8220;GeoJson&#8221; especially regarding reverse engineering on the Mercator projection &#8230; ref: <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-map-chart-geojson-onclick-tutorial\/' title='Google Chart Image Chart Map Chart GeoJson Onclick Tutorial'>Google Chart Image Chart Map Chart GeoJson Onclick Tutorial<\/a><\/li>\n<li>&#8220;One Image Website&#8221; regarding scrolling and images bigger than screen &#8230; ref: <a target=_blank title='One Image Website Scrolling Position Fix Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-scrolling-position-fix-tutorial\/' title='One Image Website Scrolling Position Fix Tutorial '>One Image Website Scrolling Position Fix Tutorial <\/a><\/li>\n<li>&#8220;CSS keyframes Animation&#8221; &#8230; ref: <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css-grid-column-animation-tutorial\/' title='CSS Grid Column Animation Tutorial'>CSS Grid Column Animation Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; so as to create a new &#8220;Earth Scanner&#8221; web application in what we like to think of as &#8220;the <i>where<\/i> of life&#8221; realms.<\/p>\n<p>In essence this Earth Scanner is pretty simple, so below you can see a first draft, &#8220;holus bolus&#8221; &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;Earth Scanner - RJM Programming - February, 2024 ... Thanks to https:\/\/github.com\/nvkelso\/natural-earth-raster\/blob\/master\/50m_rasters\/HYP_50M_SR_W\/HYP_50M_SR_W.README.html&lt;\/title&gt;<br \/>\n&lt;style&gt;<br \/>\n #myimg {<br \/>\n   clip-path: circle(2% at 800px 700px);<br \/>\n   animation:mymove 5s infinite;<br \/>\n   -webkit-animation:mymove 5s infinite; \/* Safari and Chrome *\/<br \/>\n}<br \/>\n<br \/>\n@keyframes mymove<br \/>\n{<br \/>\n  0%   { clip-path: circle(2% at 0px 0px) }<br \/>\n  100% { clip-path: circle(16% at 140px 140px) }<br \/>\n}<br \/>\n<br \/>\n@-webkit-keyframes mymove \/* Safari and Chrome *\/<br \/>\n{<br \/>\n  0%   { clip-path: circle(2% at 0px 0px) }<br \/>\n  100% { clip-path: circle(16% at 140px 140px) }<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n&lt;script type=text\/javascript&gt;<br \/>\n\/\/ Deemed unnecessary is ...<br \/>\n\/\/  7%   { clip-path: circle(3% at 10px 10px) }<br \/>\n\/\/  14%  { clip-path: circle(4% at 20px 20px) }<br \/>\n\/\/  21%  { clip-path: circle(5% at 30px 30px) }<br \/>\n\/\/  28%  { clip-path: circle(6% at 40px 40px) }<br \/>\n\/\/  35%  { clip-path: circle(7% at 50px 50px) }<br \/>\n\/\/  42%  { clip-path: circle(8% at 60px 60px) }<br \/>\n\/\/  50%  { clip-path: circle(9% at 70px 70px) }<br \/>\n\/\/  57%  { clip-path: circle(10% at 80px 80px) }<br \/>\n\/\/  64%  { clip-path: circle(11% at 90px 90px) }<br \/>\n\/\/  71%  { clip-path: circle(12% at 100px 100px) }<br \/>\n\/\/  78%  { clip-path: circle(13% at 110px 110px) }<br \/>\n\/\/  85%  { clip-path: circle(14% at 120px 120px) }<br \/>\n\/\/  93%  { clip-path: circle(15% at 130px 130px) }<br \/>\n<br \/>\n  var xp=0, yp=0, num=0;<br \/>\n  var fixkeys='&lt;style&gt; #myimg {  animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; } @keyframes mymove' + document.head.innerHTML.split('@keyframes mymove')[1].split('&lt;\/style&gt;')[0] + ' &lt;\/style&gt;';<br \/>\n  var screenlong=-9, screenlat=-9, askfor=null, enforcedlong=false, enforcedxp=-999;<br \/>\n  <br \/>\n  function scmove() {<br \/>\n    var longforce='-999', latforce='-999';<br \/>\n    if (screenlong &lt; 0) {<br \/>\n      screenlong=eval(360 * screen.width \/ document.getElementById('myimg').width);<br \/>\n      screenlat=eval(180 * screen.height \/ document.getElementById('myimg').height);<br \/>\n      document.getElementById('myimg').onclick=function() {  askfor=prompt('Earth Scanner - RJM Programming - February, 2024 ... ' + String.fromCharCode(10) + 'Thanks to https:\/\/github.com\/nvkelso\/natural-earth-raster\/blob\/master\/50m_rasters\/HYP_50M_SR_W\/HYP_50M_SR_W.README.html ... ' + String.fromCharCode(10) + 'Currently top left of screen is (Longitude,Latitude) ' + '(' + eval(-180 + xp * 360 \/ 100) + ',' + eval(90 - yp * 180 \/ 100) + ') and bottom right is (' + eval(-180 + screenlong + xp * 360 \/ 100) + ',' + eval(90 - screenlat - yp * 180 \/ 100) + ') and in the middle is (' + eval(-180 + eval(screenlong \/ 2) + xp * 360 \/ 100) + ',' + eval(90 - eval(screenlat \/ 2) - yp * 180 \/ 100) + ').' + String.fromCharCode(10) + 'Where do you want middle of screen to be in terms of Longitude,Latitude?', ''); };<br \/>\n    }<br \/>\n    \/\/document.title=\"window.scrollTo(\" + eval(xp * eval('' + document.getElementById('myimg').width) \/ 100) + \",\" + eval(yp * eval('' + document.getElementById('myimg').height) \/ 100) + \")\";<br \/>\n    if (askfor != null) {<br \/>\n       if (askfor.replace('(','').replace(')','').indexOf(',') != -1) {<br \/>\n         longforce=askfor.replace('(','').replace(')','').split(',')[0];<br \/>\n         latforce=askfor.replace('(','').replace(')','').split(',')[1];<br \/>\n       } else if (askfor.replace('(','').replace(')','').indexOf(' ') != -1) {<br \/>\n         longforce=askfor.replace('(','').replace(')','').split(' ')[0];<br \/>\n         latforce=askfor.replace('(','').replace(')','').split(' ')[1];<br \/>\n       }<br \/>\n       \/\/xp = eval(((eval(eval('' + longforce) + 180) \/ 360) * eval('' + document.getElementById('myimg').width) \/ 100) - 0 * eval(eval(screenlong \/ 720) * eval('' + document.getElementById('myimg').width) \/ 100));<br \/>\n       \/\/yp = eval(((eval(90 - eval('' + latforce)) \/ 180) * eval('' + document.getElementById('myimg').height) \/ 100) + 0 * eval(eval(screenlat \/ 360) * eval('' + document.getElementById('myimg').height) \/ 100));<br \/>\n       xp = eval(eval(eval('' + longforce) - screenlong \/ 2 + 180) \/ 3.60); \/\/ * eval('' + document.getElementById('myimg').width) \/ 100) - 0 * eval(eval(screenlong \/ 720) * eval('' + document.getElementById('myimg').width) \/ 100));<br \/>\n       yp = eval(eval(90 - eval('' + latforce) - screenlat \/ 2) \/ 1.80); \/\/ * eval('' + document.getElementById('myimg').height) \/ 100) + 0 * eval(eval(screenlat \/ 360) * eval('' + document.getElementById('myimg').height) \/ 100));<br \/>\n       \/\/alert('' + xp + ',' + yp + ' ... ' + \"window.scrollTo(\" + eval(xp * eval('' + document.getElementById('myimg').width) \/ 100) + \",\" + eval(yp * eval('' + document.getElementById('myimg').height) \/ 100) + \")\");<br \/>\n       askfor=null;<br \/>\n       if (enforcedlong) {<br \/>\n          enforcedlong=false;<br \/>\n          enforcedxp=xp;<br \/>\n          \/\/alert(xp + ' or ' + enforcedxp);<br \/>\n       }<br \/>\n    }<br \/>\n    eval(\"window.scrollTo(\" + eval((enforcedxp &gt; -990 ? enforcedxp : xp) * eval('' + document.getElementById('myimg').width) \/ 100) + \",\" + eval(yp * eval('' + document.getElementById('myimg').height) \/ 100) + \")\");<br \/>\n    document.getElementById('myimg').title='Earth Scanner - RJM Programming - February, 2024 ... ' + 'Thanks to https:\/\/github.com\/nvkelso\/natural-earth-raster\/blob\/master\/50m_rasters\/HYP_50M_SR_W\/HYP_50M_SR_W.README.html ... ' + String.fromCharCode(10) + String.fromCharCode(10) + 'Top left of screen is (Longitude,Latitude) ' + '(' + eval(-180 + (enforcedxp &gt; -990 ? enforcedxp : xp) * 360 \/ 100) + ',' + eval(90 - yp * 180 \/ 100) + ') and bottom right is (' + eval(-180 + screenlong + (enforcedxp &gt; -990 ? enforcedxp : xp) * 360 \/ 100) + ',' + eval(90 - screenlat - yp * 180 \/ 100) + ') and in the middle is (' + eval(-180 + eval(screenlong \/ 2) + (enforcedxp &gt; -990 ? enforcedxp : xp) * 360 \/ 100) + ',' + eval(90 - eval(screenlat \/ 2) - yp * 180 \/ 100) + ')';<br \/>\n    document.title=document.getElementById('myimg').title; \/\/'Top left of screen is (Longitude,Latitude) ' + '(' + eval(-180 + xp * 360 \/ 100) + ',' + eval(90 - yp * 180 \/ 100) + ') and bottom right is (' + eval(-180 + screenlong + (enforcedxp &gt; -990 ? enforcedxp : xp) * 360 \/ 100) + ',' + eval(90 - screenlat - yp * 180 \/ 100) + ') and in the middle is (' + eval(-180 + eval(screenlong \/ 2) + (enforcedxp &gt; -990 ? enforcedxp : xp) * 360 \/ 100) + ',' + eval(90 - eval(screenlat \/ 2) - yp * 180 \/ 100) + ')';<br \/>\n    if (xp &lt; 95) {<br \/>\n      xp+=5;<br \/>\n    } else if (yp &gt;= 95 && xp &gt;= 95) {<br \/>\n      enforcedxp=-999;<br \/>\n      xp=0;<br \/>\n      yp=0;<br \/>\n    } else {<br \/>\n      yp+=5;<br \/>\n      xp=0;<br \/>\n    }<br \/>\n    var xdiff=eval((enforcedxp &gt; -990 ? enforcedxp : xp) * eval('' + document.getElementById('myimg').width) \/ 100);<br \/>\n    var ydiff=eval(yp * eval('' + document.getElementById('myimg').height) \/ 100);<br \/>\n    var startkeys=fixkeys;<br \/>\n    var coords=fixkeys.split('px');<br \/>\n    for (var ic=0; ic&lt;coords.length; ic+=2) {<br \/>\n      if (coords[ic].split(' ')[eval(-1 + coords[ic].split(' ').length)].indexOf('&lt;') == -1) {<br \/>\n      \/\/alert('' + xdiff + ',' + ydiff+ ',' + coords[ic].split(' ')[eval(-1 + coords[ic].split(' ').length)]);<br \/>\n      startkeys=startkeys.replace(' ' + coords[ic].split(' ')[eval(-1 + coords[ic].split(' ').length)] + 'px', ' ' + eval(xdiff + eval('' + coords[ic].split(' ')[eval(-1 + coords[ic].split(' ').length)])) + 'px');<br \/>\n      startkeys=startkeys.replace(' ' + coords[eval(1 + ic)].split(' ')[eval(-1 + coords[eval(1 + ic)].split(' ').length)] + 'px', ' ' + eval(ydiff + eval('' + coords[eval(1 + ic)].split(' ')[eval(-1 + coords[eval(1 + ic)].split(' ').length)])) + 'px');<br \/>\n      }<br \/>\n    }<br \/>\n    \/\/alert(startkeys);<br \/>\n    document.getElementById('dstyle').innerHTML=startkeys; \/\/.replace(\/mymove\/g, 'mymove' + num);<br \/>\n    num++;<br \/>\n  }<br \/>\n  <br \/>\n  setInterval(scmove, 5000);<br \/>\n  document.write(\"&lt;img src='\/HTMLCSS\/HYP_50M_SR_W.jpg' id=myimg&gt;&lt;\/img&gt;&lt;div id=dstyle&gt;&lt;\/div&gt;\");<br \/>\n  var latis=location.search.split('latitude=')[1] ? decodeURIComponent(location.search.split('latitude=')[1].split('&')[0]) : '';<br \/>\n  var longis=location.search.split('longitude=')[1] ? decodeURIComponent(location.search.split('longitude=')[1].split('&')[0]) : '';<br \/>\n  if (latis != '' && longis != '') {<br \/>\n    askfor='' + longis + ',' + latis;<br \/>\n  } else if (latis != '') {<br \/>\n    askfor='-168,' + latis;<br \/>\n  } else if (longis != '') {<br \/>\n    enforcedlong=true;<br \/>\n    askfor='' + longis + ',70';<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; with great thanks to <a target=_blank title='Great link, thanks' href='https:\/\/github.com\/nvkelso\/natural-earth-raster\/blob\/master\/50m_rasters\/HYP_50M_SR_W\/HYP_50M_SR_W.README.html'>this great resource<\/a> as the crucial image in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html_GETME\">our first draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html\" title='Click picture'>Earth Scanner<\/a> web application.<\/p>\n<p>Please note using it, it does have <i>onclick<\/i> logic to specify &#8230;<\/p>\n<ul>\n<li>your own (longitude, latitude) to send the middle of the screen&#8217;s content to<\/li>\n<li>at the address bar &#8230;<br \/>\n<code><br \/>\n<a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?latitude=-33&#038;longitude=151\">https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?latitude=-33&longitude=151# Can center you around Sydney Australia<\/a><br \/>\n<a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?latitude=0\">https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?latitude=0# Can take you, first up, on a tour around the equator in the middle of the screen<\/a><br \/>\n<a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?longitude=0\">https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?longitude=0# Can take you, first up, on a tour down the zero meridian of longitude past London's Greenwich in the middle of the screen<\/a><br \/>\n<\/code><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d62639' onclick='var dv=document.getElementById(\"d62639\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/where\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62639' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we&#8217;ve got for you a tutorial that takes bits and pieces from &#8230; &#8220;Just Javascript&#8221; (ie. no body element to speak of as you begin) &#8230; ref: Just Javascript Card Game iPhone Debugging Tutorial &#8220;CSS Property clip-path&#8221; &#8230; ref: &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,37],"tags":[84,4658,281,354,2447,481,4198,590,599,652,675,684,719,745,748,772,861,864,997,1917,1107,3043,1319,2580],"class_list":["post-62639","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-tutorials","tag-animation-2","tag-clip-path","tag-css","tag-dom","tag-earth","tag-geographicals","tag-geojson","tag-image","tag-img","tag-javascript","tag-keyframes","tag-latitude","tag-longitude","tag-map","tag-mapping","tag-mercator","tag-onclick","tag-one-image-website","tag-programming","tag-scroll","tag-scrolling","tag-terrestrial","tag-tutorial","tag-where"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62639"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=62639"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62639\/revisions"}],"predecessor-version":[{"id":62652,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62639\/revisions\/62652"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=62639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=62639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=62639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}