{"id":62645,"date":"2024-02-18T03:01:25","date_gmt":"2024-02-17T17:01:25","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=62645"},"modified":"2024-02-18T13:14:30","modified_gmt":"2024-02-18T03:14:30","slug":"earth-scanner-lines-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-lines-tutorial\/","title":{"rendered":"Earth Scanner Lines 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 Lines Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner_lines.jpg\" title=\"Earth Scanner Lines Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Scanner Lines Tutorial<\/p><\/div>\n<p>Not everybody is a geography buff.  But I&#8217;d say more people attended primary school than are geography buffs.  And those people may have seen World Maps on the wall, and they were often Mercator Projection maps featuring the usual country and sea boundaries, as well as useful reference lines &#8230;<\/p>\n<ul>\n<li>lines of latitude, including, in between top &#8220;North Pole&#8221; 90&deg; N and &#8220;South Pole&#8221; 90&deg; S bottom &#8230;\n<ol>\n<li>Arctic Circle 66&deg; 34&#8242; N<\/li>\n<li>Tropic of Cancer 23&deg; 26&#8242; N<\/li>\n<li>Equator 0&deg;<\/li>\n<li>Tropic of Capricorn 23&deg; 26&#8242; S<\/li>\n<li>Antarctic Circle 66&deg; 34&#8242; S<\/li>\n<\/ol>\n<\/li>\n<li>meridians of longitude (only the Equator above, is as long as <font size=1>&#8230; and in the &#8220;Go Figure, Mercator&#8221; realms, the North Pole and South Pole are each of zero length, in &#8220;non-projection land&#8221;<\/font>), including &#8230;\n<ol>\n<li>Greenwich Meridian 0&deg;<\/li>\n<li>International Date Line 180&deg; (but in practice, broken up so as not to confuse regarding timezones for some Pacific island countries)<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; that become useful as you scan your way around Earth, further to yesterday&#8217;s <a title='Earth Scanner Primer Tutorial' href='#espt'>Earth Scanner Primer Tutorial<\/a>, in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html-GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html-GETME\">second 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><b><i>Stop Press<\/i><\/b><\/p>\n<p>Couple of points to note &#8230;<\/p>\n<ol>\n<li>the linework is just hr (Horizontal rule) elements, which are not the challenge either horizontally or vertically, regarding linework, that any diagon<a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=PjgJZCKaVdI'>ali<\/a>ty brings &#8230;<\/p>\n<li>the matter of screen width and screen height, which we need to know precisely for the work above, can be more involved to calculate on mobile platforms &#8230; we ended up, with great help from <a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/50690191\/window-innerheight-returning-wrong-value-in-ios-11'>this useful link<\/a>, with this Javascript code &#8230;<br \/>\n<code><br \/>\n  var screenwidth=screen.width, screenheight=screen.height;<br \/>\n  <br \/>\n  var wasthisso='';<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  try {<br \/>\n  wasthisso=('' + window.orientation).replace(\/^0$\/g, 'portrait'); \/\/\"portrait\";<br \/>\n  } catch (ehgfg) {<br \/>\n  wasthisso='';<br \/>\n  }<br \/>\n  if (wasthisso == '') {<br \/>\n  try {<br \/>\n  wasthisso='' + screen.orientation.type; \/\/\"portrait\";<br \/>\n  } catch (hgfg) {<br \/>\n  wasthisso=('' + window.orientation).replace(\/^0$\/g, 'portrait'); \/\/\"portrait\";<br \/>\n  }<br \/>\n  }<br \/>\n  \/\/alert(wasthisso);<br \/>\n  var hdone=false;<br \/>\n  if (wasthisso.indexOf('ortrait') != -1) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/50690191\/window-innerheight-returning-wrong-value-in-ios-11<br \/>\n    if (eval('0' + document.documentElement.clientWidth) &gt;= eval('0' + window.innerWidth)) {<br \/>\n    screenwidth=eval('' + document.documentElement.clientWidth);<br \/>\n    screenheight=eval('' + document.documentElement.clientHeight);<br \/>\n    hdone=true;<br \/>\n    } else {<br \/>\n    screenwidth=window.innerWidth;<br \/>\n    }<br \/>\n    if (!hdone) {<br \/>\n    if (eval('0' + document.documentElement.clientHeight) &gt; eval('0' + window.innerHeight)) {<br \/>\n    screenheight=eval('' + document.documentElement.clientHeight);<br \/>\n    } else {<br \/>\n    screenheight=window.innerHeight;<br \/>\n    }<br \/>\n    }<br \/>\n  } else {<br \/>\n    if (eval('0' + document.documentElement.clientWidth) &gt;= eval('0' + window.innerHeight)) {<br \/>\n    screenwidth=eval('' + document.documentElement.clientWidth);<br \/>\n    screenheight=eval('' + document.documentElement.clientHeight);<br \/>\n    hdone=true;<br \/>\n    } else {<br \/>\n    screenwidth=window.innerHeight;<br \/>\n    }<br \/>\n    if (!hdone) {<br \/>\n    if (eval('0' + document.documentElement.clientHeight) &gt; eval('0' + window.innerWidth)) {<br \/>\n    screenheight=eval('' + document.documentElement.clientHeight);<br \/>\n    } else {<br \/>\n    screenheight=window.innerWidth;<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n \/\/ alert(wasthisso + ' ' + screenwidth + 'x' + screenheight);<br \/>\n            if (1 == 6) {<br \/>\n            documentURL=documentURL + '&nolines=y';<br \/>\n            if (documentURL.indexOf('.html') != -1) {<br \/>\n              location.href=document.URL.replace('.html','.htm');<br \/>\n            }<br \/>\n            }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; in <a title='Earth Scanner Primer Tutorial' href='#espt'>Earth Scanner Primer Tutorial<\/a>, in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html--GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html--GETME\">third draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html\" title='Click picture'>Earth Scanner<\/a> web application\n<\/li>\n<\/ol>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-lines-tutorial\/'>Earth Scanner Lines Tutorial<\/a>.<\/p-->\n<hr>\n<p id='espt'>Previous relevant <a target=_blank title='Earth Scanner Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-primer-tutorial\/'>Earth Scanner Primer Tutorial<\/a> is shown below.<\/p>\n<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<hr>\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='#d62645' onclick='var dv=document.getElementById(\"d62645\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/meridian\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62645' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Not everybody is a geography buff. But I&#8217;d say more people attended primary school than are geography buffs. And those people may have seen World Maps on the wall, and they were often Mercator Projection maps featuring the usual country &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-lines-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,14,37],"tags":[84,4667,4666,4658,281,322,354,2447,4665,481,482,4198,4664,2770,590,599,652,675,4672,3116,684,2598,4662,719,745,748,772,4663,795,4282,861,864,889,4656,3409,997,1038,4146,4147,3119,1917,1107,4671,4668,1200,3043,4669,4670,1319,2580],"class_list":["post-62645","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-animation-2","tag-antarctic-circle","tag-arctic-circle","tag-clip-path","tag-css","tag-device","tag-dom","tag-earth","tag-equator","tag-geographicals","tag-geography","tag-geojson","tag-greenwich-meridian","tag-horizontal-rule","tag-image","tag-img","tag-javascript","tag-keyframes","tag-land","tag-landscape","tag-latitude","tag-line","tag-lines","tag-longitude","tag-map","tag-mapping","tag-mercator","tag-meridian","tag-mobile","tag-north-pole","tag-onclick","tag-one-image-website","tag-orientation","tag-pole","tag-portrait","tag-programming","tag-reference","tag-screen-height","tag-screen-width","tag-screen-orientation","tag-scroll","tag-scrolling","tag-sea","tag-south-pole","tag-stop-press","tag-terrestrial","tag-tropic-of-cancer","tag-tropic-of-capricorn","tag-tutorial","tag-where"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62645"}],"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=62645"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62645\/revisions"}],"predecessor-version":[{"id":62658,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62645\/revisions\/62658"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=62645"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=62645"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=62645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}