{"id":64219,"date":"2024-07-18T03:01:00","date_gmt":"2024-07-17T17:01:00","guid":{"rendered":"https:\/\/65.254.95.247\/ITblog\/?p=64219"},"modified":"2025-02-24T11:34:29","modified_gmt":"2025-02-24T01:34:29","slug":"earth-scanner-initial-placename-popup-window-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-initial-placename-popup-window-tutorial\/","title":{"rendered":"Earth Scanner Initial Placename Popup Window Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Scanner Initial Placename Popup Window Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner_lh.jpg\" title=\"Earth Scanner Initial Placename Popup Window Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Scanner Initial Placename Popup Window Tutorial<\/p><\/div>\n<p>With the <a title='Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial' href='#ebdmthmst'>Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial<\/a> it was the same Earth Scanner web application involved as talked about in <a target=\"_blank\" title='Earth Scanner Placements Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-placements-tutorial\/' rel=\"noopener\">Earth Scanner Placements Tutorial<\/a> where it talked about the URL &#8230;<\/p>\n<blockquote cite=\"\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-placements-tutorial\/\">\n<table>\n<tr>\n<td><code><br \/>\n<a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?nontz=Alice_Springs%7C133.8807%7C_23.6980%7CAU#Alice_Springs' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?nontz=Alice_Springs%7C133.8807%7C_23.6980%7CAU#Alice_Springs' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?nontz=Alice_Springs%7C133.8807%7C_23.6980%7CAU#Alice_Springs<\/a><br \/>\n<\/code><\/td>\n<\/tr>\n<tr>\n<td> &#8230; or equivalent in this case regarding real mantissa &#8230; <a href='#ulrules'>remember rules<\/a>?<\/td>\n<\/tr>\n<tr>\n<td><code><br \/>\n<a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?nontz=Alice_Springs%7C133.8807%7C_23.6980%7CAU#Alice_Springs' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?nontz=Alice_Springs%7C133.8807%7C_23.6980%7CAU#Alice_Springs' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?nontz=Alice_Springs%7C133.8807%7C_23.6980%7CAU#Alice_Springs<\/a><\/code><\/td>\n<\/tr>\n<\/table>\n<\/blockquote>\n<p>On revisiting this posting it occurred to us, that an improvement for our <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html\" rel=\"noopener\">Earth Scanner<\/a> web application would be to acknowledge this &#8230;<\/p>\n<ul>\n<li>initial place &#8230; especially given it might disappear from the maps presented too soon &#8230;<\/li>\n<li>if possible, and Wikipedia can help, present a popup window featuring background images regarding that place<\/li>\n<\/ul>\n<p> &#8230; to supplement map information with real life photography, thanks <a target=\"_blank\" title='Wikipedia ... thanks' href='http:\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a>.  A new Javascript function &#8230;<\/p>\n<p><code><br \/>\n  var startwoo=null;<br \/>\n  <br \/>\n  function placetopretz(iois) {<br \/>\n    if (iois.src.indexOf('nickname=') != -1) {<br \/>\n       var twaconto = (iois.contentWindow || iois.contentDocument);<br \/>\n       if (twaconto != null) {<br \/>\n       if (twaconto.document) { twaconto = twaconto.document; }<br \/>\n         \/\/var xzs=prompt(twaconto.body.outerHTML,twaconto.body.outerHTML);<br \/>\n         \/\/alert(89);<br \/>\n         if (twaconto.body.outerHTML.indexOf('.style.background') != -1) {<br \/>\n          if (!startwoo) {<br \/>\n            startwoo=window.open('','_blank','top=50,left=50,width=800,height=800');<br \/>\n            \/\/document.getElementById('botif').style.display='block';<br \/>\n<br \/> <br \/>\n            \/\/document.getElementById('botif').style.position='absolute';<br \/>\n            \/\/document.getElementById('botif').style.top='0px';<br \/>\n            \/\/document.getElementById('botif').style.left='0px';<br \/>\n            \/\/document.getElementById('botif').style.opacity='0.5';<br \/>\n            \/\/document.getElementById('botif').style.zIndex='2222';<br \/>\n            console.log(twaconto.body.outerHTML.split('}   }')[0].split('&gt;')[0].trim().replace(\/parent\\.\/g,'').replace(\/\\&quot\\;\/g,\"'\").replace(\/\\&amp\\;\/g,\"&\").slice(-40));<br \/>\n            var conlog=('&lt;html&gt;' + (twaconto.body.outerHTML.split('}   }')[0].split('&gt;')[0].trim().replace(\/parent\\.\/g,'').replace(\/\\&quot\\;\/g,\"'\").replace(\/\\&amp\\;\/g,\"&\").replace(\/\\\"\/g,\"'\").replace(\" onload='\", ' onload=\"') + '  }  }\"&gt;&lt;div id=ourcanvas style=display:block;width:800px;height:800px;&gt;&lt;\/div&gt;&lt;br&gt;&lt;div id=stz&gt;&lt;\/div&gt;&lt;\/body&gt;&lt;\/html&gt;').replace(\/\\'\\&gt;\/g,'\"&gt;').replace(\/\\&lt\\;\/g,'&lt;').replace(\/\\&gt\\;\/g,'&gt;').replace(\/yourcanvas\/g,'ourcanvas').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' '));<br \/>\n            var inonl=conlog.split(' onload=\"')[1].split('\"')[0];<br \/>\n            if (1 == 1) {<br \/>\n            console.log('&lt;html&gt;&lt;head&gt;&lt;sc' + 'ript type=text\/javascr' + 'ipt&gt; function xyz() { ' + inonl.replace(\/\\ document.getE\/g, ' ' + String.fromCharCode(10) + ' document.getE') + ' } &lt;\/scr' + 'ipt&gt;&lt;\/head&gt;' + conlog.replace(inonl, ' xyz(); '));<br \/>\n            startwoo.document.write('&lt;html&gt;&lt;head&gt;&lt;scri' + 'pt type=text\/javascr' + 'ipt&gt; function xyz() { ' + inonl.replace(\/\\ document.getE\/g, ' ' + String.fromCharCode(10) + ' document.getE').replace(\/\\,URL\\(\/g, \",' + 'URL(\") + ' } setTimeout(xyz,5000); &lt;\/scr' + 'ipt&gt;&lt;\/head&gt;' + conlog.replace(inonl, ' xyz(); '));<br \/>\n            startwoo.document.title=decodeURIComponent(iois.src.split('nickname=')[1].split('&')[0].split('#')[0]).replace(\/\\_\/g,' ');<br \/>\n            \/\/document.getElementById('botif').srcdoc=('&lt;html&gt;&lt;head&gt;&lt;scri' + 'pt type=text\/javascr' + 'ipt&gt; function xyz() { ' + inonl.replace(\/\\ document.getE\/g, ' ' + String.fromCharCode(10) + ' document.getE').replace(\/\\,URL\\(\/g, \",' + 'URL(\") + ' } &lt;\/scr' + 'ipt&gt;&lt;\/head&gt;' + conlog.replace(inonl, ' xyz(); '));<br \/>\n            } else {<br \/>\n            console.log('&lt;html&gt;' + (twaconto.body.outerHTML.split('}   }')[0].split('&gt;')[0].trim().replace(\/parent\\.\/g,'').replace(\/\\&quot\\;\/g,\"'\").replace(\/\\&amp\\;\/g,\"&\").replace(\/\\\"\/g,\"'\").replace(\" onload='\", ' onload=\"') + '  }  }\"&gt;&lt;div id=ourcanvas style=display:block;width:800px;height:800px;&gt;&lt;\/div&gt;&lt;br&gt;&lt;div id=stz&gt;&lt;\/div&gt;&lt;\/body&gt;&lt;\/html&gt;').replace(\/\\'\\&gt;\/g,'\"&gt;').replace(\/\\&lt\\;\/g,'&lt;').replace(\/\\&gt\\;\/g,'&gt;').replace(\/yourcanvas\/g,'ourcanvas').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' '));<br \/>\n            startwoo.document.write('&lt;html&gt;' + (twaconto.body.outerHTML.split('}   }')[0].split('&gt;')[0].trim().replace(\/parent\\.\/g,'').replace(\/\\&quot\\;\/g,\"'\").replace(\/\\&amp\\;\/g,\"&\").replace(\/\\\"\/g,\"'\").replace(\" onload='\", ' onload=\"') + '  }  }\"&gt;&lt;div id=ourcanvas style=display:block;width:800px;height:800px;&gt;&lt;\/div&gt;&lt;br&gt;&lt;div id=stz&gt;&lt;\/div&gt;&lt;\/body&gt;&lt;\/html&gt;').replace(\/\\'\\&gt;\/g,'\"&gt;').replace(\/\\&lt\\;\/g,'&lt;').replace(\/\\&gt\\;\/g,'&gt;').replace(\/yourcanvas\/g,'ourcanvas').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' '));<br \/>\n            startwoo.document.title=decodeURIComponent(iois.src.split('nickname=')[1].split('&')[0].split('#')[0]).replace(\/\\_\/g,' ');<br \/>\n            \/\/document.getElementById('botif').srcdoc=('&lt;html&gt;' + (twaconto.body.outerHTML.split('}   }')[0].split('&gt;')[0].trim().replace(\/parent\\.\/g,'').replace(\/\\&quot\\;\/g,\"'\").replace(\/\\&amp\\;\/g,\"&\").replace(\/\\\"\/g,\"'\").replace(\" onload='\", ' onload=\"') + '  }  }\"&gt;&lt;div id=ourcanvas style=display:block;width:800px;height:800px;&gt;&lt;\/div&gt;&lt;br&gt;&lt;div id=stz&gt;&lt;\/div&gt;&lt;\/body&gt;&lt;\/html&gt;').replace(\/\\'\\&gt;\/g,'\"&gt;').replace(\/\\&lt\\;\/g,'&lt;').replace(\/\\&gt\\;\/g,'&gt;').replace(\/yourcanvas\/g,'ourcanvas').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' '));<br \/>\n            }<br \/>\n          }<br \/>\n         }<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; helped us with this tweaking of <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html-------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html------------------------GETME\" rel=\"noopener\">earth_scanner.html<\/a> code for the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?css=nocssplease\" title='Click picture' rel=\"noopener\">Earth Scanner<\/a> web application.<\/p>\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-initial-placename-popup-window-tutorial\/' rel=\"noopener\">Earth Scanner Initial Placename Popup Window Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmthmst'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-hashtagged-mailto-sharing-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_mailto.jpg\" title=\"Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial<\/p><\/div>\n<p>We&#8217;re returning to our Missing Two web application, after &#8230;<\/p>\n<ul>\n<li>the recent <a title='Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial' href='#ebdmtesit'>Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial<\/a> Earth Scanner integration &#8230; because, today &#8230;<\/li>\n<li>it becomes our &#8220;guinea pig&#8221; web application helping out the &#8230;\n<ol>\n<li>Ajax &#8230; and &#8230;<\/li>\n<li>FormData &#8230; methodologies we use a lot around here in the past &#8230;<\/li>\n<li>calling PHP emailhtml.php &#8230; to send &#8230;<\/li>\n<li>emails containing (HTML perhaps) inline content or attachments &#8230; that being the &#8220;old way&#8221; being helped out by &#8230;<\/li>\n<li>intervention in the code<sub>s<\/sub> so that an &#8220;a&#8221; link &#8220;mailto:&#8221; with hashtagging scenario can augment this (ie. back it up)<\/li>\n<\/ol>\n<p> &#8230; approaches we use with lots of our web application sharing functionalities<\/li>\n<\/ul>\n<p>We found, in a &#8220;first draft&#8221; look at this there were three parts to the solution.<\/p>\n<table>\n<tr>\n<th>At the PHP code of emailhtml.php PHP mail based email creator code <font color=blue>add this near the end<\/font> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n&lt;?php<br \/>\n<code style=font-size:9px;><br \/>\n                <font color=blue>if ($mailto != '') {<br \/>\n                  echo \"&lt;ht\" . \"ml&gt;<br \/>\n                  &lt;he\" . \"ad&gt;<br \/>\n                  &lt;scr\" . \"ipt type='text\/javascript'&gt;<br \/>\n                    function mto() {<br \/>\n                      document.getElementById('amto').click();<br \/>\n                    }<br \/>\n                  &lt;\/scr\" . \"ipt&gt;<br \/>\n                  &lt;\/he\" . \"ad&gt;<br \/>\n                  &lt;bo\" . \"dy onload=mto();&gt;<br \/>\n                  &lt;a target=_top style=display:none; href='\" . $mailto . \"' id=amto&gt;Email&lt;\/a&gt;<br \/>\n                  &lt;\/bo\" . \"dy&gt;&lt;\/ht\" . \"ml&gt;\";<br \/>\n                }<\/font><br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; helped out by, <font color=purple>at the correct place<\/font> &#8230;<br \/>\n&lt;?php<br \/>\n<code style=font-size:9px;><br \/>\n   <font color=purple>$mailto='mailto:' . $to . '?subject=' . str_replace('+','%20',urlencode($subject));<br \/>\n   $mailto.='&body=https:\/\/www.rjmprogramming.com.au\/htmlemail.html?rand=' . ('' . time());<br \/>\n   $mailto.='#' . base64_encode(urlencode($hcont)); \/\/ base64_encode($hcont); <\/font><br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php---------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php---------------------------GETME\" rel=\"noopener\">emailhtml.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php\" rel=\"noopener\">PHP mail email inhouse interfacer<\/a>\n<\/td>\n<\/tr>\n<tr>\n<th>A totally new HTML\/Javascript inhouse simple reader of hashtag data to display webpage data &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:9px;><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;Display Hashtagged HTML Data - RJM Programming - March, 2024&lt;\/title&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n var lh=(('' + location.hash).replace(\/^null\/g,'').replace(\/^undefined\/g,'')).replace(\/^\\#\/g,'');<br \/>\n if (lh != '') {<br \/>\n    if (lh.indexOf('JTNDY') == 0) {<br \/>\n       lh=decodeURIComponent(window.atob(decodeURIComponent(lh))).replace(\/\\+\/g,' ');<br \/>\n    } else if (lh.indexOf(window.btoa('&lt;')) == 0 || lh.indexOf('PGJ') == 0) {<br \/>\n       lh=window.atob(lh).replace(\/\\+\/g,' ');<br \/>\n    } else {<br \/>\n       lh=decodeURIComponent(lh).replace(\/\\+\/g,' ');<br \/>\n    }<br \/>\n }<br \/>\n var lhdatas=lh.split('data:');<br \/>\n var prefixer='\"';<br \/>\n var bodyis='&lt;body&gt;&lt;\/body&gt;', headis='';<br \/>\n <br \/>\n for (var ilh=1; ilh&lt;lhdatas.length; ilh++) {<br \/>\n    prefixer=lhdatas[eval(-1 + ilh)].slice(-1).replace('(',')').replace('[',']').replace('{','}');<br \/>\n    if (lhdatas[ilh].split(prefixer)[0].indexOf(' ') != -1) {<br \/>\n       lh=lh.replace(lhdatas[ilh].split(prefixer)[0], lhdatas[ilh].split(prefixer)[0].replace(\/\\ \/g,'+'));<br \/>\n    }<br \/>\n }<br \/>\n<br \/>\n if (lh.indexOf('&lt;\/body&gt;') != -1 && lh.indexOf('&lt;body') != -1) {<br \/>\n    bodyis='&lt;body' + lh.split('&lt;body')[1].split('&lt;\/html&gt;')[0];<br \/>\n } else if (lh.trim() != '' && lh.indexOf('&lt;head') == -1) {<br \/>\n    bodyis=lh;<br \/>\n }<br \/>\n <br \/>\n if (lh.indexOf('&lt;\/head&gt;') != -1 && lh.indexOf('&lt;head') != -1) {<br \/>\n    headis='&lt;head' + lh.split('&lt;head')[1].split('&lt;\/head&gt;')[0] + '&lt;\/head&gt;';<br \/>\n    document.write(headis.replace(\/https\\:\\\/\\\/\/g,'\/\/').replace(\/http\\:\\\/\\\/\/g,'\/\/') + bodyis.replace(\/https\\:\\\/\\\/\/g,'\/\/').replace(\/http\\:\\\/\\\/\/g,'\/\/'));<br \/>\n } else if (bodyis != '&lt;body&gt;&lt;\/body&gt;') {<br \/>\n    document.write(bodyis.replace(\/https\\:\\\/\\\/\/g,'\/\/').replace(\/http\\:\\\/\\\/\/g,'\/\/'));<br \/>\n }<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><br \/>\n &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/htmlemail.html_GETME\" rel=\"noopener\">htmlemail.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/htmlemail.html\" rel=\"noopener\">Hashtag Email Data Reader and Display<\/a> &#8220;first draft&#8221;\n<\/td>\n<\/tr>\n<tr>\n<th>Missing Two web application (as an example of what others will try to achieve, as time goes on) <font color=blue>this way<\/font> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:9px;><br \/>\n   var xzhr=null;<br \/>\n   <br \/>\n   xzhr = new XMLHttpRequest();<br \/>\n   var xform=new FormData();<br \/>\n   xform.append('inline','');<br \/>\n   xform.append('to',em.trim());<br \/>\n   if (em.trim() != em) {<br \/>\n   xform.append('subj','Missing Two');<br \/>\n   \/\/var cbgtd=document.getElementById('tdlook').getBoundingClientRect();<br \/>\n   xform.append('body','&lt;body&gt;' + document.body.innerHTML.replace(\/\\ id\\=\\\"mysel\\\"\/g, ' name=\"mysel\" id=\"mysel\"').replace(\/\\ size\\=\\\"3\\\"\/g, ' size=\"4\"').replace(\/\\ data\\-href\\=\/g, ' target=_blank href=').replace('&lt;\/form&gt;', '&lt;br&gt;&lt;br&gt;&lt;input style=background-color:lightgreen; type=submit value=Solve&gt;&lt;\/input&gt;&lt;\/form&gt;').replace('DISPLAY:table-row','DISPLAY:none').replace(lastfis,lasttis).replace(lasteis,lastenow).replace(lasteis2,lastenow2).replace(lastsis,lastsnow).replace(lastsis2,lastsnow2).replace('absolute;','absolute;display:none;').replace(flatf,tlatf).replace(flongf,tlongf).replace(flatt,tlatt).replace(flongt,tlongt).replace(fbrg,tbrg).replace(fdist,tdist) + '&lt;\/body&gt;');<br \/>\n   } else {<br \/>\n   xform.append('subj','Missing Two');<br \/>\n   xform.append('body','&lt;body&gt;' + document.body.innerHTML.replace(\/\\ id\\=\\\"mysel\\\"\/g, ' name=\"mysel\" id=\"mysel\"').replace(\/\\ size\\=\\\"3\\\"\/g, ' size=\"4\"').replace(\/\\ data\\-href\\=\/g, ' target=_blank href=').replace('&lt;\/form&gt;', '&lt;br&gt;&lt;br&gt;&lt;input style=background-color:lightgreen; type=submit value=Solve&gt;&lt;\/input&gt;&lt;\/form&gt;').replace('DISPLAY:table-row','DISPLAY:none').replace(lastfis,lasttis).replace(lasteis,lastenow).replace(lasteis2,lastenow2).replace(lastsis,lastsnow).replace(lastsis2,lastsnow2).replace('absolute;','absolute;display:none;').replace(flatf,tlatf).replace(flongf,tlongf).replace(flatt,tlatt).replace(flongt,tlongt).replace(fbrg,tbrg).replace(fdist,tdist) + '&lt;\/body&gt;');<br \/>\n   }<br \/>\n   <font color=blue>xzhr.onreadystatechange=stateChanged;<\/font><br \/>\n   xzhr.open('post','\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php',true);<br \/>\n   xzhr.send(xform);<br \/>\n<\/code><br \/>\n &#8230; Ajax calling of &#8230;<br \/>\n<code style=font-size:9px;><br \/>\n<font color=blue>function stateChanged() {<br \/>\n if (xzhr.readyState == 4) {<br \/>\n  if (xzhr.status == 200) {<br \/>\n   \/\/alert(xzhr.response);<br \/>\n   if (xzhr.response.indexOf('&lt;\/a&gt;') != -1) {<br \/>\n     document.getElementById('mtodiv').innerHTML='&lt;a' + xzhr.response.split('&lt;a')[eval(-1 + xzhr.response.split('&lt;a').length)].split('&lt;\/a&gt;')[0] + '&lt;\/a&gt;';<br \/>\n     var alista=document.getElementsByTagName('a');<br \/>\n     alista[eval(-1 + alista.length)].click();<br \/>\n   }<br \/>\n  }<br \/>\n }<br \/>\n}<\/font><br \/>\n<\/code><br \/>\n &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html------------------GETME\" title=\"missing_two.html\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html------------------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">&#8220;Missing Two&#8221; web application<\/a>\n<\/td>\n<\/tr>\n<\/table>\n<p>The hashtagging email story continues!<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html-------------------GETME\" title=\"missing_two.html\" rel=\"noopener\">A tweaked<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html-------------------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">&#8220;Missing Two&#8221; web application<\/a> prioritizes timezone place name geolocations over other placename ideas.<\/p>\n<p><b><i>Stop Press &#8230; 24\/2\/2025 &#8230; <\/i><\/b><\/p>\n<p><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html--------------------GETME\" title=\"missing_two.html\" rel=\"noopener\">A tweaked<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html--------------------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">&#8220;Missing Two&#8221; web application<\/a> fixes up some gyroscope miscalculations, and sorry for the delay!<\/p>\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-bearing-distance-missing-two-hashtagged-mailto-sharing-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmtesit'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-earth-scanner-integration-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_earth_scanner.gif\" title=\"Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial<\/p><\/div>\n<p>Today we&#8217;re combining precedents from &#8230;<\/p>\n<ul>\n<li>yesterday&#8217;s <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-google-chrome-speech-to-text-tutorial\/' title='Earth Scanner Google Chrome Speech to Text Tutorial' rel=\"noopener\">Earth Scanner Google Chrome Speech to Text Tutorial<\/a>&#8216;s work on our recent Earth Scanner web application &#8230; and &#8230;.<\/li>\n<li>the latest <a title='Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial' href='#ebdmttget'>Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial<\/a> about the Missing Two web application<\/li>\n<\/ul>\n<p> &#8230; where we integrate the first into the second.  Yes, you can code for a web application, to start with, normally, as a &#8220;topmost&#8221; one, but when it is asked to be &#8220;called upon&#8221; as a tool for another web application, lots of surprises can happen.  Our surprise in this integration above, a bit different to a lot we do, was &#8230;<\/p>\n<ul>\n<li>the Earth Scanner performs well in a popup window &#8230; but &#8230;<\/li>\n<li>the Earth Scanner does not perform well in an iframe<\/li>\n<\/ul>\n<p> &#8230; we guess, because of those calculations for the var<font size=1>iables<\/font> <i>screenwidth<\/i> and <i>screenheight<\/i> which are so crucial to the scrolling required for that Earth Scanner.<\/p>\n<p>At first we thought we&#8217;d just whack into a popup window from the Missing Two host, a URL to the Earth Scanner relevant to the two places in the Missing Two web application.  But then we had some time to think about it, and remembered how the work of <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-map-image-margin-tutorial\/' title='Earth Scanner Map Image Margin Tutorial' rel=\"noopener\">Earth Scanner Map Image Margin Tutorial<\/a> introduced &#8230;<\/p>\n<ul>\n<li>a sliver of margin applied to the map image (big img element) &#8230; and we wondered &#8220;who owns that sliver?&#8221; &#8230; so, in case it was the document.body element, as we hoped, we&#8217;d try &#8230;<\/li>\n<li>img element <font color=blue>onclick event arrangement amendment<\/font> &#8230;<br \/>\n<code><br \/>\n      document.getElementById('myimg').onclick=function(event) { <font color=blue>event.stopPropagation();<\/font> movesallowed=false; gmovesallowed=false; if (gdefv != '') { askfor=ourprompt(event,'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 around 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?  Suffix with space to show meridians and\/or prefix with space to not show meridians.', gdefv); gdefv='';  } else { askfor=ourprompt(event,'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 around 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?  Suffix with space to show meridians and\/or prefix with space to not show meridians.', '');  }      if (('' + askfor).replace('(','').replace(')','').replace('[','').replace(']','').indexOf(',') != -1) {<br \/>\n         ameridian='';<br \/>\n         acircleoflatitude='';<br \/>\n         enforcedlong=false;<br \/>\n         enforcedxp=-999; } movesallowed=true; gmovesallowed=true; };<br \/>\n<\/code><br \/>\n &#8230; augmented by &#8230;\n<\/li>\n<li><font color=purple>positive action<\/font> around the &#8220;equivalent of document.body onload event&#8221; for the Earth Scanner &#8230;<br \/>\n<code><br \/>\n  var thecss='';<br \/>\n  var earth_scanner_css=location.search.split('css=')[1] ? (decodeURIComponent(location.search.split('css=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : '';<br \/>\n  thecss=earth_scanner_css;<br \/>\n  var atendest='&lt;input type=hidden id=posturl style=display:none; value=\"\"&gt;&lt;\/input&gt;&lt;input type=button id=dbutton onclick=checkforstt(); style=display:none;&gt;&lt;\/input&gt;';<br \/>\n  var atend='&lt;br&gt;&lt;br&gt;&lt;div id=dc&gt;&lt;canvas title=\"\" id=ourcanvas width=' + ('' + eval(-15 + (window.orientation == 0 ? window.screen.height: window.screen.width)) + 'px').replace('pxpx','').replace('px','') + ' height=660 style=\"width:' + ('' + eval(-15 + (window.orientation == 0 ? window.screen.height: window.screen.width)) + 'px').replace('pxpx','px') + ';height:660px;border:1px solid red;background-color:' + bcol + ';' + extrastyle + '\"&gt;&lt;\/canvas&gt;&lt;\/div&gt;&lt;div id=xdscriptstuff&gt;&lt;\/div&gt;&lt;div id=xdstylestuff&gt;&lt;\/div&gt;&lt;textarea id=myta style=display:none; value=\"\"&gt;&lt;\/textarea&gt;&lt;iframe onload=scranal(this); id=scrmytaif style=display:none; src=&gt;&lt;\/iframe&gt;&lt;iframe onload=styanal(this); id=stymytaif style=display:none; src=&gt;&lt;\/iframe&gt;&lt;iframe class=\"spag\" scrolling=\"no\" data-onload=\"iifopen(this);\" id=\"cbi\" frameborder=\"0\" style=\"position:fixed;top:0px;left:150px;width:173px;height:218px;margin-top:-204px;display:none;\" src=\"\/HTMLCSS\/client_browsing.htm?straighttext=312160562686\"&gt;&lt;\/iframe&gt;&lt;textarea id=result1 style=display:none;&gt;&lt;\/textarea&gt;&lt;textarea id=result2 style=display:none;&gt;&lt;\/textarea&gt;' + exdstylestuff + exdscriptstuff + atendest;<br \/>\n  <font color=purple>var parentiframe='';<br \/>\n  var iol='';<br \/>\n  if (window.opener) {<br \/>\n     var pu=window.opener.document.URL;<br \/>\n     if (pu.indexOf('#') == -1 && ('' + window.opener.location.hash).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n       pu+=('#' + ('' + window.opener.location.hash)).replace(\/^\\#\\#\/g, '#');<br \/>\n     }<br \/>\n     thecss+='display:block;';<br \/>\n     parentiframe='&lt;br&gt;&lt;iframe id=mtif style=\"width:100%;height:800px;z-index:987;margin:0 0 0 0;margin-left:10px;margin-top:10px;background-color:rgba(0,0,255,0.5);\" src=\"' + pu + '\"&gt;&lt;\/iframe&gt;&lt;div id=dhiddens style=display:none;&gt;&lt;div id=goagain&gt;&lt;\/div&gt;&lt;input type=hidden id=ltf value=&gt;&lt;\/input&gt;&lt;input type=hidden id=lgf value=&gt;&lt;\/input&gt;&lt;input type=hidden id=ltt value=&gt;&lt;\/input&gt;&lt;input type=hidden id=lgt value=&gt;&lt;\/input&gt;&lt;div id=slong&gt;&lt;\/div&gt;&lt;iframe id=niframe src=&gt;&lt;\/iframe&gt;&lt;\/div&gt;';<br \/>\n<br \/>\n     iol=' onload=\"document.body.onclick=function(){  document.getElementById(' + \"'myimg'\" + ').style.display=document.getElementById(' + \"'myimg'\" + ').style.display.replace(' + \"'block','NONE'\" + ').replace(' + \"'none','block'\" + ').replace(' + \"'NONE','none'\" + ');  if (1 == 2) { document.getElementById(' + \"'dstyle'\" + ').style.display=document.getElementById(' + \"'dstyle'\" + ').style.display.replace(' + \"'visible','HIDDEN'\" + ').replace(' + \"'hidden','visible'\" + ').replace(' + \"'HIDDEN','hidden'\" + '); } if (document.getElementById(' + \"'myimg'\" + ').style.display == ' + \"'none'\" + ') { window.scrollTo(0,0);  document.body.style.backgroundColor=' + \"'rgba(255,0,0,0.5)'\" + ';  } else { window.scrollTo(cspx, cspy);  document.body.style.backgroundColor=' + \"'rgba(0,0,255,0.5)'\" + ';  }  } \" ';<br \/>\n     setInterval(getcsp, 5000);<br \/>\n  }<\/font><br \/>\n  document.write(\"&lt;img<font color=purple>\" + iol + \"<\/font> src='\/HTMLCSS\/HYP_50M_SR_W.jpg' id=myimg width=\" + eval(zoomf * 10800) + \" height=\" + eval(zoomf * 5400) + \" style='margin:0 0 0 0;margin-left:10px;margin-top:10px;\" + thecss + \"'&gt;&lt;\/img&gt;&lt;div id=dstyle style=visibility:visible;&gt;&lt;\/div&gt;&lt;input id=sdtitle type=hidden value='Earth Scanner'&gt;&lt;\/input&gt;&lt;input id=sdtext type=hidden value='Earth Scanner - RJM Programming'&gt;&lt;\/input&gt;&lt;input id=sdurl type=hidden value='\" + document.URL.split('#')[0] + ('' + location.hash).replace(\/^null\/g,'').replace(\/^undefined\/g,'') + \"'&gt;&lt;\/input&gt;&lt;iframe scrolling=no farmeborder=0 style='z-index:3456;position:fixed;top:55px;left:15px;width:30px;height:24px;' onload='storeshare(this);' src='\/HTMLCSS\/web_share_api_test.html?emojize=128231'&gt;&lt;\/iframe&gt;&lt;input type=hidden id=itworked value=''&gt;&lt;\/input&gt;&lt;iframe onload=coordit(this); id=wif style=display:none;margin-left:50px; src='\/\/wikipedia.org\/wiki\/Saint_George,_Antigua_and_Barbuda'&gt;&lt;\/iframe&gt;&lt;iframe onload=coordittwo(this); id=wiftwo style=display:none; src=&gt;&lt;\/iframe&gt;&lt;input type=hidden id=placegeo title='' value=''&gt;&lt;\/input&gt;\" + atend<font color=purple> + parentiframe<\/font>);<br \/>\n<\/code><br \/>\n &#8230; calling &#8230;<br \/>\n<code><br \/>\n  var cspx=0, cspy=0;<br \/>\n <br \/>\n  function getcsp() {<br \/>\n    \/\/ Thanks to https:\/\/stackoverflow.com\/questions\/31712287\/get-scroll-position-in-javascript<br \/>\n    var ourcspx = eval('' + (document.body.scrollX || document.body.scrollLeft || document.getElementsByTagName(\"html\")[0].scrollLeft));<br \/>\n    var ourcspy = eval('' + (document.body.scrollY || document.body.scrollTop || document.getElementsByTagName(\"html\")[0].scrollTop));<br \/>\n    if (ourcspx &gt; 100) {<br \/>\n      cspx=ourcspx;<br \/>\n      cspy=ourcspy;<br \/>\n    }<br \/>\n    \/\/document.title='cspx=' + cspx + ' and cspy=' + cspy + ' ourcspx=' + ourcspx + ' and ourcspy=' + ourcspy;<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; surprising us regarding how much could be done at the &#8220;child&#8221; to make this popup window arrangement be <font color=magenta>fitting into the integration<\/font> so that &#8230;<\/p>\n<ul>\n<li>user calls the &#8220;parent&#8221; Missing Two web application &#8230;<\/li>\n<li>user fills in the two places &#8230; <font color=magenta>now a clickable details\/summary &#8220;reveal&#8221; &#8220;Earth Scanner &#8230;&#8221; arrangement, if clicked &#8230;<\/font><\/li>\n<li><font color=magenta>opens new Earth Scanner popup window with the calling URL hosted in a popup window iframe element below it &#8230; so that &#8230;<\/font><\/li>\n<li><font color=magenta>clicking in the left hand &#8220;document.body&#8221; element&#8217;s &#8220;sliver&#8221; <font size=1>which might involve &#8220;user scrolling to&#8221;, to find (and yes, that is where the ownership lies, luckily)<\/font> toggles the Earth Scanner topmost with Missing Two &#8220;clone&#8221; topmost &#8230;<\/font><\/li>\n<li><font color=magenta>with the scrolling remembered <font size=1>(our testing shows &#8230; &#8220;for the main part&#8221;)<\/font> &#8230; or the user can choose to &#8230;<\/font><\/li>\n<li><font color=magenta>close the popup window in order to fall back to<\/font> calling &#8220;parent&#8221; Missing Two web application window, only <font size=1>(still with the &#8220;Earth Scanner &#8230;&#8221; details\/summary &#8220;reveal&#8221; arrangement showing)<\/font><\/li>\n<\/ul>\n<p>Codewise &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html-----------------GETME\" title=\"missing_two.html\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html-----------------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">&#8220;Missing Two&#8221; web application<\/a> can now call the integrated &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html------------------------GETME\" rel=\"noopener\">and changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html-----------------------GETME\" rel=\"noopener\">twenty fourth draft<\/a> of the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?css=nocssplease\" title='Click picture' rel=\"noopener\">Earth Scanner<\/a> web application<\/li>\n<\/ul>\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-bearing-distance-missing-two-earth-scanner-integration-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmttget'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-trip-geolocation-elevation-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_geolocation_elevation.gif\" title=\"Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Earth Bearing Distance Missing Two Trip Geolocation Tutorial' href='#ebdmttgt'>Earth Bearing Distance Missing Two Trip Geolocation Tutorial<\/a> and its Geolocation progress we started the day with a different course of action to how we ended it.  The day&#8217;s motivation was to automate a Place Name elevation knowledge in order to help with that &#8230;<\/p>\n<blockquote><p>\nWhat&#8217;s out there <font size=1>in the distance<\/font>?\n<\/p><\/blockquote>\n<p> &#8230; thinking we talked about, first, at <a title='Earth Bearing Distance Missing Two Place Name and Horizon Tutorial' href='#ebdmtpnht'>Earth Bearing Distance Missing Two Place Name and Horizon Tutorial<\/a>.<\/p>\n<p>We suspected that we were naive in our thinking because Google searches lead to nothing with our theory, that theory being that we could combine &#8230;<\/p>\n<ul>\n<li>event event.DeviceMotionEvent&#8217;s event.<a target=\"_blank\" title='accelerationIncludingGravity' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DeviceMotionEvent\/accelerationIncludingGravity' rel=\"noopener\">accelerationIncludingGravity<\/a>.z &#8230; perhaps the minimum such value detected &#8230; along with &#8230;<\/li>\n<li><a target=\"_blank\" title='Circular Motion and Satellite Motion - Lesson 3 - Universal Gravitation ... The Value of g' href='https:\/\/www.physicsclassroom.com\/class\/circles\/Lesson-3\/The-Value-of-g' rel=\"noopener\">Circular Motion and Satellite Motion &#8211; Lesson 3 &#8211; Universal Gravitation &#8230; The Value of g<\/a> &#8230; idea, thanks, that (where &#8220;d&#8221; is distance from centre of Earth, &#8220;G&#8221; and &#8220;M<sub>earth<\/sub>&#8221; are constants, &#8220;g&#8221; is gravitational acceleration (typically, about 9.8 m\/s<sup>2<\/sup> at sea level)) &#8230;<br \/>\n<code><br \/>\n<img loading=\"lazy\" decoding=\"async\" align=\"bottom\" height=\"49\" src=\"http:\/\/www.physicsclassroom.com\/Class\/circles\/u6l3e3.gif\" width=\"125\"><br \/>\n<br \/>\n&#8756; d = Math.pow((G * M<sub>earth<\/sub>) \/ g, 0.5)<br \/>\n&#8756; elevation = (Math.pow((G * M<sub>earth<\/sub>) \/ g, 0.5) - EarthRadius<sub>latitude<\/sub>)<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; could derive for us a semi reliable elevation value.  There&#8217;s <i>theory<\/i>, though, and then there&#8217;s <i>empirical application<\/i>, and we could not get the application of the former match the aims with the latter, but will leave you with our Javascript attempt via &#8230;<\/p>\n<p><code><br \/>\n    function elevviaz(inlat) { \/\/ thanks to https:\/\/www.physicsclassroom.com\/class\/circles\/Lesson-3\/The-Value-of-g<br \/>\n      var dsq=0.0, ddsql=0.0;<br \/>\n      if (eval('' + zalpha) != 0) {<br \/>\n      var cone=0.0000000000667430;<br \/>\n      var mone=5980000000000000000000000.0;<br \/>\n      var rone=get_radius_at_lat(inlat); \/\/6380000.0000;<br \/>\n      \/\/for (var ii=1; ii&lt;=24; ii++) {<br \/>\n      \/\/  mone*=10.0;<br \/>\n      \/\/}<br \/>\n      dsq=eval('' + mone);<br \/>\n      alert('dsq(1 is big const)=' + dsq);<br \/>\n      dsq*=eval('' + cone);<br \/>\n      alert('dsq(2 times small const vs 398600441800000.0)=' + dsq);<br \/>\n      dsq=398600441800000.0;<br \/>\n      dsq\/=9.8; \/\/eval('' + zalpha);<br \/>\n      alert('dsq(3 divide by iphone ' + zalpha + ')=' + dsq);<br \/>\n      dsq=Math.pow(dsq, 0.5);<br \/>\n      alert('dsq(4 square root)=' + dsq);<br \/>\n      rone=dsq; \/\/dsq-=rone;<br \/>\n      alert('dsq(5 minus sea level earth radius ' + rone + ')=' + dsq);<br \/>\n<br \/>\n      dsq=eval('' + mone);<br \/>\n      alert('dsq(1 is big const)=' + dsq);<br \/>\n      dsq*=eval('' + cone);<br \/>\n      alert('dsq(2 times small const vs 398600441800000.0)=' + dsq);<br \/>\n      dsq=398600441800000.0;<br \/>\n      dsq\/=eval('' + zalpha);<br \/>\n      alert('dsq(3 divide by iphone ' + zalpha + ')=' + dsq);<br \/>\n      dsq=Math.pow(dsq, 0.5);<br \/>\n      alert('dsq(4 square root)=' + dsq);<br \/>\n      dsq-=rone;<br \/>\n      alert('dsq(5 minus sea level earth radius ' + rone + ')=' + dsq);<br \/>\n<br \/>\n      }<br \/>\n      return dsq;<br \/>\n    }<br \/>\n<\/code><\/p>\n<p>After abandoning this approach, sadly, later in the day some sporadically happier news was that we discovered that the <a target=\"_blank\" title='Geolocation information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Geolocation' rel=\"noopener\">Geolocation<\/a> <a target=\"_blank\" title='Geolocation API information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Geolocation_API' rel=\"noopener\">API<\/a> can sometimes pass across a decent elevation value, which we <font color=blue>applied as below<\/font> into our code&#8217;s thinking in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html----------------GETME\" title=\"missing_two.html\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html----------------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">&#8220;Missing Two&#8221; web application<\/a>.<\/p>\n<p><code><br \/>\n      <font color=blue>var appendz=\"\";<br \/>\n      var iinb=0;<\/font><br \/>\n  <br \/>\n    function showPosition(position) {<br \/>\n      if (userlatitude == 0.0 && userlongitude == 0.0) {<br \/>\n        userlatitude=eval('' + position.coords.latitude);<br \/>\n        userlongitude=eval('' + position.coords.longitude);<br \/>\n        \/\/alert('' + position.coords.heading);<br \/>\n        <font color=blue>if (('' + position.coords.altitude).replace('null','') != '' && iinb == -1) {<br \/>\n          appendz=\";\" + ('' + position.coords.altitude).replace('null','');<br \/>\n        }<\/font><br \/>\n      if (userlatitude != 0.0 || userlongitude != 0.0) {<br \/>\n        \/\/document.getElementById('you').innerHTML='(0,0)';<br \/>\n        if (document.getElementById('spfr').innerHTML.indexOf('rom') != -1) {<br \/>\n        if (document.getElementById('latf') && document.getElementById('longf')) {<br \/>\n          document.getElementById('latf').focus();<br \/>\n          document.getElementById('latf').value=userlatitude;<br \/>\n          document.getElementById('longf').focus();<br \/>\n          document.getElementById('longf').value=userlongitude;<br \/>\n          document.getElementById('latf').focus();<br \/>\n          userlatitude=0.0;<br \/>\n          userlongitude=0.0;<br \/>\n          document.getElementById('ssf').innerHTML='Here';<br \/>\n          <font color=blue>if (appendz != '') {<br \/>\n          fplacen='Here (elevation ' + appendz.substring(1) + ' m)';<br \/>\n          document.getElementById('ssf').innerHTML=fplacen;<br \/>\n          } else {<\/font><br \/>\n          fplacen='Here';<br \/>\n          <font color=blue>}<\/font><br \/>\n          gllentry='' + document.getElementById('latf').value + ',' + document.getElementById('longf').value + ',' + fplacen;<br \/>\n          askit();<br \/>\n          \/\/document.getElementById('spfr').innerHTML='to';<br \/>\n        }<br \/>\n        } else {<br \/>\n        if (document.getElementById('latt') && document.getElementById('longt')) {<br \/>\n          document.getElementById('latt').focus();<br \/>\n          document.getElementById('latt').value=userlatitude;<br \/>\n          document.getElementById('longt').focus();<br \/>\n          document.getElementById('longt').value=userlongitude;<br \/>\n          document.getElementById('latt').focus();<br \/>\n          userlatitude=0.0;<br \/>\n          userlongitude=0.0;<br \/>\n          document.getElementById('sst').innerHTML='Here';<br \/>\n           <font color=blue>if (appendz != '') {<br \/>\n          tplacen='Here (elevation ' + appendz.substring(1) + ' m)';<br \/>\n          document.getElementById('sst').innerHTML=tplacen;<br \/>\n          } else {<\/font><br \/>\n          tplacen='Here';<br \/>\n           <font color=blue>}<\/font><br \/>\n          gllentry='' + document.getElementById('latt').value + ',' + document.getElementById('longt').value + ',' + tplacen;<br \/>\n          askit();<br \/>\n        }<br \/>\n        }<br \/>\n      }<br \/>\n      }<br \/>\n    }<br \/>\n<br \/>\n    function getLocation(<font color=blue>inb<\/font>) {<br \/>\n      <font color=blue>iinb=inb.indexOf(';');<\/font><br \/>\n      if (navigator.geolocation) {<br \/>\n       try {<br \/>\n        navigator.geolocation.getCurrentPosition(showPosition);<br \/>\n        \/\/setTimeout(later, 1000);<br \/>\n         <font color=blue>if (appendz != \"\" && iinb != -1) { appendz=\"\"; }<\/font><br \/>\n        if (inb != inb.trim() && document.getElementById('spfr').innerHTML.indexOf('rom') != -1) { fplacen+=' '; }<br \/>\n        if (inb != inb.trim() && document.getElementById('spfr').innerHTML.indexOf('rom') == -1) { tplacen+=' '; }<br \/>\n        if (document.getElementById('spfr').innerHTML.indexOf('rom') != -1) {<br \/>\n          document.getElementById('ipn').value=fplacen;<br \/>\n        } else {<br \/>\n          document.getElementById('ipn').value=tplacen;<br \/>\n        }<br \/>\n        gid = navigator.geolocation.watchPosition(gsuccess, gerror, goptions);<br \/>\n        return false;<br \/>\n        } catch(err) {<br \/>\n        \/\/setTimeout(later, 1000);<br \/>\n        }<br \/>\n      } else if (userlatitude != 0.0 || userlongitude != 0.0) {<br \/>\n        \/\/document.getElementById('you').innerHTML='(0,0)';<br \/>\n        if (document.getElementById('spfr').innerHTML.indexOf('rom') != -1) {<br \/>\n        if (document.getElementById('latf') && document.getElementById('longf')) {<br \/>\n          document.getElementById('latf').focus();<br \/>\n          document.getElementById('latf').value=userlatitude;<br \/>\n          document.getElementById('longf').focus();<br \/>\n          document.getElementById('longf').value=userlongitude;<br \/>\n          document.getElementById('latf').focus();<br \/>\n          userlatitude=0.0;<br \/>\n          userlongitude=0.0;<br \/>\n          document.getElementById('ssf').innerHTML='Here';<br \/>\n          <font color=blue>if (appendz != '') {<br \/>\n          fplacen='Here (elevation ' + appendz.substring(1) + ' m)';<br \/>\n          document.getElementById('ssf').innerHTML=fplacen;<br \/>\n          } else {<\/font><br \/>\n          fplacen='Here';<br \/>\n          <font color=blue>}<\/font><br \/>\n          gllentry='' + document.getElementById('latf').value + ',' + document.getElementById('longf').value + ',' + fplacen;<br \/>\n          askit();<br \/>\n          \/\/document.getElementById('spfr').innerHTML='to';<br \/>\n          return false;<br \/>\n        }<br \/>\n        } else {<br \/>\n        if (document.getElementById('latt') && document.getElementById('longt')) {<br \/>\n          document.getElementById('latt').focus();<br \/>\n          document.getElementById('latt').value=userlatitude;<br \/>\n          document.getElementById('longt').focus();<br \/>\n          document.getElementById('longt').value=userlongitude;<br \/>\n          document.getElementById('latt').focus();<br \/>\n          userlatitude=0.0;<br \/>\n          userlongitude=0.0;<br \/>\n          document.getElementById('sst').innerHTML='Here';<br \/>\n          <font color=blue>if (appendz != '') {<br \/>\n          tplacen='Here (elevation ' + appendz.substring(1) + ' m)';<br \/>\n          document.getElementById('sst').innerHTML=tplacen;<br \/>\n          } else {<\/font><br \/>\n          tplacen='Here';<br \/>\n          <font color=blue>}<\/font><br \/>\n          gllentry='' + document.getElementById('latt').value + ',' + document.getElementById('longt').value + ',' + tplacen;<br \/>\n          askit();<br \/>\n          return false;<br \/>\n        }<br \/>\n        }<br \/>\n      }<br \/>\n      return true;<br \/>\n    }<br \/>\n<\/code> <\/p>\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-bearing-distance-missing-two-trip-geolocation-elevation-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Geolocation Elevation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmttgt'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Trip Geolocation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-trip-geolocation-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Geolocation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Trip Geolocation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_geolocation.gif\" title=\"Earth Bearing Distance Missing Two Trip Geolocation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Trip Geolocation Tutorial<\/p><\/div>\n<p>Okay, it&#8217;s the day where gobsmacked readers of <a title='Earth Bearing Distance Missing Two Trip Compass Tutorial' href='#ebdmttct'>Earth Bearing Distance Missing Two Trip Compass Tutorial<\/a> and (all) users of its <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">&#8220;Missing Two&#8221; web application<\/a> can be relieved of their &#8220;gobsmacked<font size=1>erhood<\/font>&#8220;?!  Yes &#8230;<\/p>\n<ul>\n<li>on top of our <a target=\"_blank\" title='Wikipedia ... thanks' href='http:\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a> way to glean Latitude and Longitude for a Place Name &#8230; today <font size=1>(oh, but the shame of it all, the shame, leaving it for so long &#8230; <strike>oh, the shame of<\/strike>&#8220;okay, that&#8217;s it &#8230; pull yourself together&#8221;)<\/font> we finally get around to &#8230;<\/li>\n<li>&#8220;Here&#8221; Place Name based HTML5 <a target=\"_blank\" title='Geolocation information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Geolocation' rel=\"noopener\">Geolocation<\/a> <a target=\"_blank\" title='Geolocation API information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Geolocation_API' rel=\"noopener\">API<\/a> <font size=2>(should the user be allowing Location Services <\/font><font size=1>(into their frightfully busy lives)<\/font><font size=2> for their web browser of use)<\/font> &#8230; yayyyyyyyy!<\/li>\n<\/ul>\n<p> &#8230; is flagged to the user via that top textbox&#8217;s &#8220;placeholder&#8221; blurb being adjusted (for 7 seconds) as a user focuses there via <font color=blue>changed HTML<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;h1 id=myh1 style='display:block;'&gt;Missing Two (&lt;font size=1&gt;optional&lt;\/font&gt; &lt;span onclick=\"this.innerHTML=this.innerHTML.replace('to','From').replace('from','to').replace('From','from'); document.getElementById('ipn').focus(); \" id=spfr title='Click me to toggle between from and to' style='cursor:pointer;'&gt;from&lt;\/span&gt; &lt;input <font color=blue>onfocus='hereit(this,\"\");'<\/font> title='Optionally semicolon separate an elevation affecting horizon distance used for Place Name\/Bearing (where Compass app might show you this elevation value) input scenarios.  Note that a Place Name\/Distance scenario shows a Locality Distance Ring map.  Append space for gyroscope bearing.'  onblur='lkwk(this,\"\");' style='display:inline-block;width:280px;' placeholder='Place Name' id=ipn value='' type=text&gt;&lt;\/input&gt;) in Table Column &lt;span data-onfocus=\"document.getElementById('semail').innerHTML='';\" data-title='Email to (append a space to just show the table cell with the gradient)?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=emailit(''); id=semail title=Email&gt;&amp;#128231;&lt;\/span&gt;&nbsp;&lt;span data-onfocus=\"document.getElementById('semail').innerHTML='';\" data-title='SMS to?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=toize(''); id=ssms title=SMS&gt;&amp;#128223;&lt;\/span&gt;&lt;div id=dntable style=display:none;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;table border=1 id=ntable style=\"background-color:pink;display:inline-block;font-size:10px;\"&gt;&lt;tr&gt;&lt;td&gt;N&lt;\/td&gt;&lt;\/tr&gt;&lt;tr&gt;&lt;td&gt;&amp;#11014;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style='display:inline-block;cursor:pointer;' id=arrowup title='To Portrait Up ... line up, parallel, with compass N to face North the ideal way' onclick='alert(this.title);'&gt;&amp;#11014;&lt;\/div&gt;&lt;\/div&gt;&lt;\/h1&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; calling on new Javascript &#8230;<\/p>\n<p><code><br \/>\n  var oiqplaceholder='';<br \/>\n<br \/>\nfunction oiqit() {<br \/>\n  if (oiqplaceholder != '') {<br \/>\n    hereit(document.getElementById('ipn'), oiqplaceholder);<br \/>\n    oiqplaceholder='';<br \/>\n  } else if (document.getElementById('ipn')) {<br \/>\n    if (('' + document.getElementById('ipn').placeholder).indexOf('\"Here\" ') == 0 && ('' + document.getElementById('ipn').placeholder).indexOf(' Longitude. ') != -1) {<br \/>\n      document.getElementById('ipn').placeholder=document.getElementById('ipn').placeholder.split(' Longitude. ')[1];<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction hereit(oiq, twopis) {<br \/>\n  var wasp='';<br \/>\n  if (twopis != '') {<br \/>\n    if (('' + oiq.placeholder).indexOf('\"Here\"') == -1) {<br \/>\n      wasp=('' + oiq.placeholder);<br \/>\n      oiq.placeholder='\"Here\" uses Geolocation derived Latitude, Longitude. ' + wasp;<br \/>\n      setTimeout(oiqit, 7000);<br \/>\n    }<br \/>\n    document.getElementById('myh1').style.cursor='pointer';<br \/>\n  } else if (oiq.value == '' && document.URL.toLowerCase().indexOf('https') == 0) {<br \/>\n    if (('' + oiq.placeholder).indexOf('\"Here\"') == -1) {<br \/>\n      wasp=('' + oiq.placeholder);<br \/>\n      oiqplaceholder='\"Here\" uses Geolocation derived Latitude, Longitude. ' + wasp;<br \/>\n      document.getElementById('myh1').style.cursor='progess';<br \/>\n      setTimeout(oiqit, 500);<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and if the user types in the <font color=blue><b>Here&nbsp;<\/b> we are looking for<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction lkwk(oiis, twop) {<br \/>\n  <font color=blue>var doi=true;<\/font><br \/>\n  if (oiis.value.trim() != '') {<br \/>\n    <font color=blue>if ((('' + oiis.value).replace(\/\\\"\/g,'').replace(\/\\'\/g,'').replace(';',' ') + ' ').toLowerCase().indexOf('here ') == 0) { doi=false; if (1 == 2) { oiis.value=''; }  doi=getLocation();  if (1 == 2) { return ''; } }<\/font><br \/>\n    if (document.getElementById('tdmid')) {<br \/>\n      if (document.getElementById('tdmid').innerHTML.toLowerCase().indexOf('&lt;iframe') != -1) {<br \/>\n         if (document.getElementById('spfr')) {<br \/>\n           if (document.getElementById('spfr').innerHTML.toLowerCase().indexOf('rom') != -1) {<br \/>\n             location.href=document.URL.split('#')[0].split('?')[0] + '?ipn=' + encodeURIComponent(oiis.value);<br \/>\n           }<br \/>\n         }<br \/>\n      }<br \/>\n    }<br \/>\n    if (oiis.value.trim() != oiis.value) { tplacen=tplacen.trim(); } else { tplacen+=String.fromCharCode(32);  }<br \/>\n    var ois=oiis.value.trim().split(';');<br \/>\n    <font color=blue>if (doi) { <\/font>document.getElementById('ifplacegeo').src=document.getElementById('ifplacegeo').src.split('?')[0].split('#')[0] + '?placegeo=' + encodeURIComponent(ois[0]); <font color=blue>}<\/font><br \/>\n    if (eval('' + ois.length) &gt; 1) { elev=eval('' + ois[1]);  evel=Math.max(elev, 2.0); }<br \/>\n    if (twop == '') { oiis.value=''; }<br \/>\n    <font color=blue>if (doi) { <\/font>document.body.style.cursor='progress'; <font color=blue>}<\/font><br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; new Geolocation API Javascript code swings into action &#8230;<\/p>\n<p><code><br \/>\n  var userlatitude=0.0, userlongitude=0.0;<br \/>\n<br \/>\n    function getLocation() {<br \/>\n      if (navigator.geolocation) {<br \/>\n       try {<br \/>\n        navigator.geolocation.getCurrentPosition(showPosition);<br \/>\n        \/\/setTimeout(later, 1000);<br \/>\n        return false;<br \/>\n        } catch(err) {<br \/>\n        \/\/setTimeout(later, 1000);<br \/>\n        }<br \/>\n      } else if (userlatitude != 0.0 || userlongitude != 0.0) {<br \/>\n        \/\/document.getElementById('you').innerHTML='(0,0)';<br \/>\n        if (document.getElementById('spfr').innerHTML.indexOf('rom') != -1) {<br \/>\n        if (document.getElementById('latf') && document.getElementById('longf')) {<br \/>\n          document.getElementById('latf').focus();<br \/>\n          document.getElementById('latf').value=userlatitude;<br \/>\n          document.getElementById('longf').focus();<br \/>\n          document.getElementById('longf').value=userlongitude;<br \/>\n          document.getElementById('latf').focus();<br \/>\n          userlatitude=0.0;<br \/>\n          userlongitude=0.0;<br \/>\n          document.getElementById('ssf').innerHTML='Here';<br \/>\n          gllentry='' + document.getElementById('latf').value + ',' + document.getElementById('longf').value + ',Here';<br \/>\n          askit();<br \/>\n          \/\/document.getElementById('spfr').innerHTML='to';<br \/>\n          fplacen='Here';<br \/>\n          return false;<br \/>\n        }<br \/>\n        } else {<br \/>\n        if (document.getElementById('latt') && document.getElementById('longt')) {<br \/>\n          document.getElementById('latt').focus();<br \/>\n          document.getElementById('latt').value=userlatitude;<br \/>\n          document.getElementById('longt').focus();<br \/>\n          document.getElementById('longt').value=userlongitude;<br \/>\n          document.getElementById('latt').focus();<br \/>\n          userlatitude=0.0;<br \/>\n          userlongitude=0.0;<br \/>\n          document.getElementById('sst').innerHTML='Here';<br \/>\n          gllentry='' + document.getElementById('latt').value + ',' + document.getElementById('longt').value + ',Here';<br \/>\n          askit();<br \/>\n          tplacen='Here';<br \/>\n          return false;<br \/>\n        }<br \/>\n        }<br \/>\n      }<br \/>\n      return true;<br \/>\n    }<br \/>\n<br \/> <br \/>\n    function showPosition(position) {<br \/>\n      if (userlatitude == 0.0 && userlongitude == 0.0) {<br \/>\n        userlatitude=eval('' + position.coords.latitude);<br \/>\n        userlongitude=eval('' + position.coords.longitude);<br \/>\n      if (userlatitude != 0.0 || userlongitude != 0.0) {<br \/>\n        \/\/document.getElementById('you').innerHTML='(0,0)';<br \/>\n        if (document.getElementById('spfr').innerHTML.indexOf('rom') != -1) {<br \/>\n        if (document.getElementById('latf') && document.getElementById('longf')) {<br \/>\n          document.getElementById('latf').focus();<br \/>\n          document.getElementById('latf').value=userlatitude;<br \/>\n          document.getElementById('longf').focus();<br \/>\n          document.getElementById('longf').value=userlongitude;<br \/>\n          document.getElementById('latf').focus();<br \/>\n          userlatitude=0.0;<br \/>\n          userlongitude=0.0;<br \/>\n          document.getElementById('ssf').innerHTML='Here';<br \/>\n          gllentry='' + document.getElementById('latf').value + ',' + document.getElementById('longf').value + ',Here';<br \/>\n          askit();<br \/>\n          \/\/document.getElementById('spfr').innerHTML='to';<br \/>\n          fplacen='Here';<br \/>\n        }<br \/>\n        } else {<br \/>\n        if (document.getElementById('latt') && document.getElementById('longt')) {<br \/>\n          document.getElementById('latt').focus();<br \/>\n          document.getElementById('latt').value=userlatitude;<br \/>\n          document.getElementById('longt').focus();<br \/>\n          document.getElementById('longt').value=userlongitude;<br \/>\n          document.getElementById('latt').focus();<br \/>\n          userlatitude=0.0;<br \/>\n          userlongitude=0.0;<br \/>\n          document.getElementById('sst').innerHTML='Here';<br \/>\n          gllentry='' + document.getElementById('latt').value + ',' + document.getElementById('longt').value + ',Here';<br \/>\n          askit();<br \/>\n          tplacen='Here';<br \/>\n        }<br \/>\n        }<br \/>\n      }<br \/>\n      }<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; into <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html---------------GETME\" title=\"missing_two.html\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html---------------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">&#8220;Missing Two&#8221; web application<\/a>.<\/p>\n<p>What a programmer&#8217;s relief!<\/p>\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-bearing-distance-missing-two-trip-geolocation-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Geolocation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmttct'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Trip Compass Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-trip-compass-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Compass 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Trip Compass Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_context.jpg\" title=\"Earth Bearing Distance Missing Two Trip Compass Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Trip Compass Tutorial<\/p><\/div>\n<p>The recent <a title='Earth Bearing Distance Missing Two Trip North Point Tutorial' href='#ebdmttnpt'>Earth Bearing Distance Missing Two Trip North Point Tutorial<\/a> set up a &#8230;<\/p>\n<ul>\n<li>mobile device &#8220;North point&#8221; additional functionality &#8230; and today &#8230;<\/li>\n<li>more compass use helpers to guide user towards facing North &#8230; as well as &#8230;<\/li>\n<li>allow for <i>Degrees Minutes Seconds<\/i> as alternative angular method of entry harnessing <font color=blue>changed HTML<\/font> &#8230; exemplified by &#8230;<br \/>\n<code><br \/>\nLatitude (decimal degrees):&nbsp;&lt;input title='' style='width:90px;display:inline-block;' onchange='this.style.backgroundColor=\"pink\";cwhat[0]=false; cwhat[1]=false;  if (!decided) {    if (!cwhat[5]) { cwhat[5]=true; }  if (!cwhat[4]) { cwhat[4]=true; } decided=true; } top.document.getElementById(\"ltf\").value=this.value; ' onblur='this.style.backgroundColor=\"pink\"; cwhat[0]=false; cwhat[1]=false;  if (!decided) {  if (!cwhat[5]) { cwhat[5]=true; }  if (!cwhat[4]) { cwhat[4]=true; } decided=true; } top.document.getElementById(\"ltf\").value=<font color=blue>mdms(<\/font>this.value<font color=blue>,this)<\/font>; ' id=latf name=latf type=number <font color=blue>onfocus='ati=0; atic=[]; atis=[];' onkeydown='couldbedms(event);'<\/font> min=-90.0000000 max=90.0000000 step=0.0000010 value='0.0000000'&gt;&lt;\/input&gt;&lt;br&gt;<br \/>\n<\/code><br \/>\n &#8230; helped out by new Javascript &#8230;<br \/>\n<code><br \/>\n  var ati=0, atis=[], atic=[];<br \/>\n<br \/>\nfunction mdms(tvis, otvis) {<br \/>\n  var altvl=0.0, dvr=1.0, isv=0;<br \/>\n  if (eval('' + atic.length) &gt;= 1) {<br \/>\n    \/\/alert('ov=' + otvis.value + ' and atic[0]=' + atic[0]);<br \/>\n    if (atic[0].indexOf('-') != -1 && otvis.value.indexOf('-') == -1) {<br \/>\n      isv++;<br \/>\n    } else if (atic[0].indexOf('+') != -1 && otvis.value.indexOf('+') == -1) {<br \/>\n      isv++;<br \/>\n    } else if (eval('' + atis.length) &gt;= 2) {<br \/>\n      if (eval('' + atis[1]) &gt; 60) { isv++; }<br \/>\n    }<br \/>\n  }<br \/>\n  if (eval('' + atic.length) &gt; 1) {<br \/>\n  \/\/alert('Here ' + atic.length + ' last is=' + atic[eval(-1 + atic.length)]);<br \/>\n    for (var ijh=0; ijh&lt;atic.length; ijh++) {<br \/>\n      if (atic[ijh].trim() != '') {<br \/>\n      isv++;<br \/>\n      if (atic[0].indexOf('-') != -1) {<br \/>\n        altvl-=eval(eval('' + dvr) * eval(atic[ijh].replace('-','')));<br \/>\n      } else {<br \/>\n        altvl+=eval(eval('' + dvr) * eval(atic[ijh].replace('-','')));<br \/>\n      }<br \/>\n  \/\/alert('Here ' + altvl);<br \/>\n      dvr\/=60.0;<br \/>\n      }<br \/>\n    }<br \/>\n    if (isv &gt; 1) {<br \/>\n    tvis='' + altvl;<br \/>\n    otvis.value='' + altvl;<br \/>\n    }<br \/>\n  }<br \/>\n  ati=0;<br \/>\n  atic=[];<br \/>\n  atis=[];<br \/>\n  return tvis;<br \/>\n}<br \/>\n<br \/>\nfunction idms(otvis) {<br \/>\n  var altvl=0.0, dvr=1.0, isv=0;<br \/>\n  if (eval('' + atic.length) &gt;= 1) {<br \/>\n    \/\/alert('Ov=' + otvis.value + ' and Atic[0]=' + atic[0]);<br \/>\n    if (atic[0].indexOf('-') != -1 && otvis.value.indexOf('-') == -1) {<br \/>\n      isv++;<br \/>\n    } else if (atic[0].indexOf('+') != -1 && otvis.value.indexOf('+') == -1) {<br \/>\n      isv++;<br \/>\n    } else if (eval('' + atis.length) &gt;= 2) {<br \/>\n      if (eval('' + atis[1]) &gt; 60) { isv++; }<br \/>\n    }<br \/>\n  }<br \/>\n  if (eval('' + atic.length) &gt; 1) {<br \/>\n  \/\/alert('here ' + atic.length + ' last is=' + atic[eval(-1 + atic.length)]);<br \/>\n    for (var ijh=0; ijh&lt;atic.length; ijh++) {<br \/>\n      if (atic[ijh].trim() != '') {<br \/>\n      isv++;<br \/>\n      if (atic[0].indexOf('-') != -1) {<br \/>\n        altvl-=eval(eval('' + dvr) * eval(atic[ijh].replace('-','').replace('+','')));<br \/>\n      } else {<br \/>\n        altvl+=eval(eval('' + dvr) * eval(atic[ijh].replace('-','').replace('+','')));<br \/>\n      }<br \/>\n  \/\/alert('here ' + altvl);<br \/>\n      dvr\/=60.0;<br \/>\n      }<br \/>\n    }<br \/>\n    if (isv &gt; 1) {<br \/>\n    otvis.value='' + altvl;<br \/>\n    }<br \/>\n  }<br \/>\n  ati=0;<br \/>\n  atic=[];<br \/>\n  atis=[];<br \/>\n  return otvis;<br \/>\n}<br \/>\n<br \/>\nfunction couldbedms(event) {<br \/>\n  var wasc='';<br \/>\n  if (eval('' + event.keyCode) == 69 || eval('' + event.keyCode) == 78 || eval('' + event.keyCode) == 87 || eval('' + event.keyCode) == 83 || eval('' + event.keyCode) == 187 || eval('' + event.keyCode) == 189 || eval('' + event.keyCode) == 190 || (eval('' + event.keyCode) &gt;= 48 && eval('' + event.keyCode) &lt;= 57)) {<br \/>\n    if (ati == 0) { atis=[]; atis.push(0); atic.push(''); } else if (ati &lt; 0) { ati=0; }<br \/>\n    ati++;<br \/>\n    atis[eval(-1 + atis.length)]=ati;<br \/>\n    if (eval('' + event.keyCode) == 87 || eval('' + event.keyCode) == 83) {<br \/>\n    if (atic[0].indexOf('-') == -1) { wasc=atic[0]; atic[0]='-' + wasc;  }<br \/>\n    } else if (eval('' + event.keyCode) == 69 || eval('' + event.keyCode) == 78) {<br \/>\n    if (atic[0].indexOf('+') == -1) { wasc=atic[0]; atic[0]='+' + wasc;  }<br \/>\n    } else if (eval('' + event.keyCode) != 187) {<br \/>\n    atic[eval(-1 + atic.length)]+=String.fromCharCode(eval(eval('' + event.keyCode) % 144));<br \/>\n    }<br \/>\n  } else {<br \/>\n    ati=-1;<br \/>\n    if (eval('' + event.keyCode) &gt;= 65 && eval('' + event.keyCode) &lt;= 90) {<br \/>\n    atis.push(eval('' + event.keyCode));<br \/>\n    } else {<br \/>\n    atis.push(0);<br \/>\n    }<br \/>\n    atic.push('');<br \/>\n  }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; improving the functionality and ease of use of <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html--------------GETME\" title=\"missing_two.html\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html--------------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">&#8220;Missing Two&#8221; web application<\/a> when using a mobile platform.<\/p>\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-bearing-distance-missing-two-trip-compass-tutorial\/' rel=\"noopener\">New Earth Bearing Distance Missing Two Trip Compass Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmttnpt'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Trip North Point Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-trip-north-point-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip North Point 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Trip North Point Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_trip_north_point.jpg\" title=\"Earth Bearing Distance Missing Two Trip North Point Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Trip North Point Tutorial<\/p><\/div>\n<p>We build on the recent <a title='Earth Bearing Distance Missing Two Trip Tap Orientation Tutorial' href='#ebdmtttot'>Earth Bearing Distance Missing Two Trip Tap Orientation Tutorial<\/a> and help out those &#8220;what&#8217;s out there in the distance&#8221; dreamers of <a title='Earth Bearing Distance Missing Two Trip Details Orientation Tutorial' href='#ebdmttdot'>Earth Bearing Distance Missing Two Trip Details Orientation Tutorial<\/a> by, today adding a &#8220;North point&#8221; (HTML table element) to &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html------------GETME\" title=\"missing_two.html\" rel=\"noopener\">today&#8217;s changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html------------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">Missing Two live run<\/a> that is affected, but two other web applications as per &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yaw_etc.html----GETME\" title=\"yaw_etc.html\" rel=\"noopener\">today&#8217;s changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yaw_etc.html----GETME\" title=\"yaw_etc.html\" rel=\"noopener\">yaw_etc.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yaw_etc.html\" title=\"Click picture\" rel=\"noopener\">Device Orientation live run<\/a> &#8230; and &#8230;<\/li>\n<\/ul>\n<p> &#8230; on some mobile platforms, such as the iOS iPad we tested, adding compass like new functionality, as per <font color=blue>the new<\/font> HTML &#8230;<\/p>\n<p><code><br \/>\n&lt;h1 id=myh1 style='display:block;'&gt;Missing Two (&lt;font size=1&gt;optional&lt;\/font&gt; &lt;span onclick=\"this.innerHTML=this.innerHTML.replace('to','From').replace('from','to').replace('From','from'); document.getElementById('ipn').focus(); \" id=spfr title='Click me to toggle between from and to' style='cursor:pointer;'&gt;from&lt;\/span&gt; &lt;input title='Optionally semicolon separate an elevation affecting horizon distance used for Place Name\/Bearing (where Compass app might show you this elevation value) input scenarios.  Note that a Place Name\/Distance scenario shows a Locality Distance Ring map.  Append space for gyroscope bearing.'  onblur='lkwk(this);' style='display:inline-block;width:280px;' placeholder='Place Name' id=ipn value='' type=text&gt;&lt;\/input&gt;) in Table Column &lt;span data-onfocus=\"document.getElementById('semail').innerHTML='';\" data-title='Email to (append a space to just show the table cell with the gradient)?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=emailit(''); id=semail title=Email&gt;&amp;#128231;&lt;\/span&gt;&nbsp;&lt;span data-onfocus=\"document.getElementById('semail').innerHTML='';\" data-title='SMS to?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=toize(''); id=ssms title=SMS&gt;&amp;#128223;&lt;\/span&gt;<font color=blue>&lt;div id=dntable style=display:none;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;table border=1 id=ntable style=\"background-color:pink;display:inline-block;font-size:10px;\"&gt;&lt;tr&gt;&lt;td&gt;N&lt;\/td&gt;&lt;\/tr&gt;&lt;tr&gt;&lt;td&gt;&amp;#11014;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;&nbsp;&nbsp;&nbsp;&nbsp;&amp;#11014;&lt;\/div&gt;<\/font>&lt;\/h1&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and Javascript &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>var wasthisso=''  + (screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type); \/\/\"portrait\";<br \/>\n  var wasangle=eval(180 - eval('' + window.orientation));<\/font><br \/>\n<br \/>\n  if (1 == <font color=blue>1<\/font>) {<br \/>\nwindow.addEventListener(\"orientationchange\", function() {<br \/>\n  \/\/ Announce the new orientation number<br \/>\n  <font color=blue>wasangle=eval(180 - eval('' + window.orientation));<\/font><br \/>\n  var thisso=''  + screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type;<br \/>\n  if (('' + thisso) == 'undefined') {<br \/>\n   var mql=window.matchMedia(\"(orientation: portrait)\");<br \/>\n\/\/ If there are matches, we're in portrait<br \/>\nif (mql.matches) {<br \/>\n    thisso=\"Portrait\"; \/\/ Portrait orientation<br \/>\n} else {<br \/>\n    thisso=\"Landscape\"; \/\/ Landscape orientation<br \/>\n}<br \/>\n  }<br \/>\n<br \/> <br \/>\n  if (thisso != wasthisso) {<br \/>\n    wasthisso=thisso;<br \/>\n    \/\/alert('ori');<br \/>\n  }<br \/>\n}, false);<br \/>\n  }<br \/>\n<br \/>\nif (window.DeviceOrientationEvent) {<br \/>\nif (1 == 2) { alert(1); }<br \/>\n\/\/ Listen for orientation changes ... thanks to https:\/\/davidwalsh.name\/orientation-change<br \/>\n  \/\/ Listen for the deviceorientation event and handle the raw data<br \/>\n  window.addEventListener('deviceorientation', function(eventData) {<br \/>\n    \/\/ gamma is the left-to-right tilt in degrees, where right is positive<br \/>\n    if (1 == 2) { alert(11); }<br \/>\n    if (document.getElementById('ipn')) {<br \/>\n        \/\/if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and face north for gyroscope bearing.') == -1) {<br \/>\n        if (('' + document.getElementById('ipn').placeholder).indexOf(' and ') == -1) {<br \/>\n         document.getElementById('ipn').className='ph';<br \/>\n         document.getElementById('ipn').placeholder+='. Append space and portrait face north for gyroscope bearing.';<br \/>\n         document.getElementById(\"myviewport\").setAttribute(\"content\", \"width=device-width, initial-scale=1.5, minimum-scale=0.1, maximum-scale=8, user-scalable=yes\");<br \/>\n         setTimeout(asafn, 5000);<br \/>\n        }<br \/>\n    }<br \/>\n    \/\/eventData.absolute=true;<br \/>\n<br \/> <br \/>\n    var eventDataalpha = eval(360.0 - eval('' + eventData.alpha)); \/\/ lalpha)); \/\/<br \/>\n    <font color=blue>if (eventData.absolute !== true && +eventData.webkitCompassAccuracy &gt; 0 && +eventData.webkitCompassAccuracy &lt; 50) {<br \/>\n    eventDataalpha = eval('' + eventData.<a target=\"_blank\" title='webkitCompassHeading' href='https:\/\/developer.apple.com\/documentation\/webkitjs\/deviceorientationevent\/1804777-webkitcompassheading' rel=\"noopener\">webkitCompassHeading<\/a> || 0);<br \/>\n    if (document.getElementById('dntable')) {  document.getElementById('dntable').style.display='inline-block';  }<br \/>\n    }<\/font><br \/>\n    if (!datstart) { eventDataalpha-=initial_yaw; }<br \/>\n<br \/> <br \/>\n    tiltLeftToRight = eval('' + eventData.gamma);<br \/>\n<br \/>\n    \/\/ beta is the front-to-back tilt in degrees, where front is positive<br \/>\n    tiltFrontToBack = eval('' + eventData.beta);<br \/>\n<br \/>\n    \/\/ alpha is the compass direction the device is facing in degrees<br \/>\n    lastalpha='' + eventData.alpha; \/\/ lalpha; \/\/<br \/>\n    dorbrg = eval('' + eventDataalpha); \/\/compassHeading(eval('' + eventDataalpha), tiltFrontToBack, tiltLeftToRight);<br \/>\nif (1 == 2) { alert(dorbrg); }<br \/>\n    if (document.URL.indexOf('aleJUNKrt=') != -1) {<br \/>\n      alert(dorbrg);<br \/>\n    }<br \/>\n    if (document.URL.indexOf('upJUNKdate=') != -1 || (fplacen != '' && tplacen == '')) {<br \/>\n      if (eventData.absolute || 1 == 1) {<br \/>\n      \/\/document.getElementById('brg').value='' + eval(eval(540.0 - eval('' + dorbrg)) % 360.0);<br \/>\n      \/\/document.getElementById('brg').value='' + eval(eval(720.0 - eval('' + dorbrg)) % 360.0);<br \/>\n      \/\/document.getElementById('brg').value='' + dorbrg;<br \/>\n      if (eval(dcnt % 10) == 0) {<br \/>\n      document.getElementById('brg').value='' + eval(eval(720.0 + eval('' + dorbrg)) % 360.0);<br \/>\n      document.getElementById('brg').style.backgroundColor='yellow';<br \/>\n      }<br \/>\n      dcnt++;<br \/>\n      }<br \/>\n    }<br \/>\n<br \/> <br \/>\n    if (datstart && (fplacen != '' && tplacen == '')) {<br \/>\n      datstart=false;<br \/>\n      \/\/initial_yaw=eval(360.0 - eval('' + lalpha)); \/\/eventData.alpha));<br \/>\n      \/\/alert('0:' + initial_yaw);<br \/>\n      if (!eventData.absolute) {<br \/>\n      initial_yaw=eval(360.0 - eval('' + eventData.alpha)); \/\/ lalpha)); \/\/<br \/>\n      }<br \/>\n      \/\/alert('' + initial_yaw);<br \/>\n      initial_pitch=Math.round(tiltFrontToBack);<br \/>\n      initial_roll=Math.round(tiltLeftToRight);<br \/>\n      \/\/alert(initial_yaw + ',' + initial_pitch + ',' + initial_roll);<br \/>\n    }<br \/>\n<br \/> <br \/>\n    <font color=blue>if (document.getElementById('ntable')) {<br \/>\n    var ts=450;<br \/>\n    if (wasangle != 0) {<br \/>\n    ts+=wasangle;<br \/>\n    }<br \/>\n    try { document.getElementById('ntable').style.webkitTransform = (\"rotate(\" + eval(ts - Math.round(dorbrg)) + \"deg)\"); } catch(e10) { }<br \/>\n    try { document.getElementById('ntable').style.MozTransform = (\"rotate(\" + eval(ts - Math.round(dorbrg)) + \"deg)\"); } catch(e1000) { }<br \/>\n    try { document.getElementById('ntable').style.msTransform = (\"rotate(\" + eval(ts - Math.round(dorbrg)) + \"deg)\"); } catch(e100) { }<br \/>\n    try { document.getElementById('ntable').style.OTransform = (\"rotate(\" + eval(ts - Math.round(dorbrg)) + \"deg)\"); } catch(e10000) { }<br \/>\n    try { document.getElementById('ntable').style.transform = (\"rotate(\" + eval(ts - Math.round(dorbrg)) + \"deg)\"); } catch(e1) { }<br \/>\n    }<\/font><br \/>\n<br \/> <br \/>\n    handleOrientationEvent(tiltFrontToBack, tiltLeftToRight, dorbrg, eventData.absolute);<br \/>\n<br \/>\n    if ((fplacen != '' && tplacen == '') && document.getElementById('ipn')) {<br \/>\n        \/\/if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and face north for gyroscope bearing.') != -1) {<br \/>\n        if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and ') != -1) {<br \/>\n         document.getElementById('ipn').style.backgroundColor='#f0f0f0';<br \/>\n         \/\/document.getElementById('ipn').placeholder=document.getElementById('ipn').placeholder.split('Append space and face north for gyroscope bearing.')[0] + ' Now swivel to direction of interest then tap yellow textbox.';<br \/>\n         document.getElementById('ipn').placeholder=document.getElementById('ipn').placeholder.split('Append space and ')[0] + ' Now swivel to direction of interest then tap yellow textbox.';<br \/>\n         document.getElementById(\"myviewport\").setAttribute(\"content\", \"width=device-width, initial-scale=1.2, minimum-scale=0.1, maximum-scale=8, user-scalable=yes\");<br \/>\n         \/\/window.scrollBy(0,50); \/\/location.href='#brg';<br \/>\n        }<br \/>\n    }<br \/>\n<br \/> <br \/>\n    }, false);<br \/>\n}<br \/>\n<\/code><\/p>\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\/new-earth-bearing-distance-missing-two-trip-north-point-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip North Point Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmtttot'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Trip Tap Orientation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-trip-tap-orientation-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Tap Orientation 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Trip Details Tap Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_trip_tap_orientation.gif\" title=\"Earth Bearing Distance Missing Two Trip Tap Orientation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Trip Tap Orientation Tutorial<\/p><\/div>\n<p>That window.<a target=\"_blank\" title='DeviceOrientationEvent' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DeviceOrientationEvent' rel=\"noopener\">DeviceOrientationEvent<\/a> event work of the recent <a title='Earth Bearing Distance Missing Two Trip Details Orientation Tutorial' href='#ebdmttdot'>Earth Bearing Distance Missing Two Trip Details Orientation Tutorial<\/a> was missing an important point.  We learnt about this point by debugging on an iOS (iPhone 7) Google Chrome web browser, as we showed with yesterday&#8217;s <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chrome-on-ios-web-browser-debug-tutorial\/' title='Google Chrome on iOS Web Browser Debug Tutorial' rel=\"noopener\">Google Chrome on iOS Web Browser Debug Tutorial<\/a>.  That tutorial&#8217;s finding lead us to the Google search for &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" href='https:\/\/www.google.com\/search?q=ERROR+NotAllowedError+Requesting+device&#038;rlz=1C5CHFA_enAU832AU832&#038;sxsrf=AOaemvJK0jTv73PDSC8nMqPurh9Q3tu-dQ%3A1632119102680&#038;ei=PilIYdP9KJOortoPl6GQUA&#038;oq=ERROR+NotAllowedError+Requesting+device&#038;gs_lcp=Cgdnd3Mtd2l6EAMyBwghEAoQoAEyBwghEAoQoAE6BwgAEEcQsAM6BQgAEIAEOgYIABAWEB46CAghEBYQHRAeOgQIIRAKOgQIIRAVSgQIQRgAUMujAVi78AFgtPYBaAFwAngAgAGHAogBsx2SAQYwLjQuMTSYAQCgAQHIAQjAAQE&#038;sclient=gws-wiz&#038;ved=0ahUKEwjTlOK69YzzAhUTlEsFHZcQBAoQ4dUDCA4&#038;uact=5' title='ERROR NotAllowedError Requesting device' rel=\"noopener\">ERROR NotAllowedError Requesting device<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; and onto the excellent <a target=\"_blank\" href='https:\/\/dev.to\/li\/how-to-requestpermission-for-devicemotion-and-deviceorientation-events-in-ios-13-46g2' title='How to requestPermission for devicemotion and deviceorientation events in iOS 13+' rel=\"noopener\">How to requestPermission for devicemotion and deviceorientation events in iOS 13+<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/dev.to\/li\/how-to-requestpermission-for-devicemotion-and-deviceorientation-events-in-ios-13-46g2'><p>\nOne more thing<br \/>\n<br \/>\nOne more thing to keep in mind is that requestPermission could only be called on a user gesture (e.g. click). This is reasonable UX too as we would want to tell users why we are asking for such permissions and let them confirm before prompting them so that they see it coming.<br \/>\n<br \/>\nOtherwise you would get this error:<br \/>\n<br \/>\nConsole error: NotAllowedError: Requesting device orientation or motion access requires a user gesture to prompt\n<\/p><\/blockquote>\n<p> &#8230; where we needed to shift our oft-used <i>document.body onload event<\/i> code placement thinking to allow for this thinking, plus the provision of a button for the user to tap, as required, should the &#8220;permission&#8221; popup window be required to seek permission to, effectively, access that device&#8217;s gyroscope measurements via that window.DeviceOrientationEvent and\/or window.DeviceMotionEvent event(s).<\/p>\n<p>This is a similar Apple requirement, as it applies to iOS playing audio files, which we have mentioned quite a bit at this blog.  One could say &#8230;<\/p>\n<blockquote><p>\nWe should have known.\n<\/p><\/blockquote>\n<p> &#8230; and luckily two is too polite to say &#8230;<\/p>\n<blockquote><p>\nYou blockhead!\n<\/p><\/blockquote>\n<p> &#8230; to which we are infinitely grateful, and will install for the rest of the day, that &#8230;<\/p>\n<blockquote><p>\nTwo is our favourite number <font size=1>(for the rest of today, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a>)<\/font>.\n<\/p><\/blockquote>\n<p>But it&#8217;s not only &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html-----------GETME\" title=\"missing_two.html\" rel=\"noopener\">today&#8217;s changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html-----------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">Missing Two live run<\/a> that is affected, but two other web applications as per &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yaw_etc.html---GETME\" title=\"yaw_etc.html\" rel=\"noopener\">today&#8217;s changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yaw_etc.html---GETME\" title=\"yaw_etc.html\" rel=\"noopener\">yaw_etc.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yaw_etc.html\" title=\"Click picture\" rel=\"noopener\">Device Orientation live run<\/a> &#8230; and &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simon_says.html--GETME\" title=\"simon_says.html\" rel=\"noopener\">today&#8217;s changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simon_says.html--GETME\" title=\"simon_says.html\" rel=\"noopener\">simon_says.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simon_says.html\" title=\"Click picture\" rel=\"noopener\">Simon Says live run<\/a><\/li>\n<\/ul>\n<p> &#8230; for you to try for yourself, perhaps there on your mobile device with an accessible gyroscope on a compatible web browser such as Google Chrome (or others, now) on iOS.<\/p>\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-bearing-distance-missing-two-trip-tap-orientation-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Tap Orientation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmttdot'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Trip Details Orientation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-trip-details-orientation-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Details Orientation 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Trip Details Orientation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_trip_orientation.gif\" title=\"Earth Bearing Distance Missing Two Trip Details Orientation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Trip Details Orientation Tutorial<\/p><\/div>\n<p>Humans, particularly before the advent of the mobile devices, were probably <font size=1>(as a whole)<\/font> more skilled regarding navigation via &#8220;landmarks&#8221; or &#8220;sun<font size=1>marks<\/font>&#8221; or &#8220;moon<font size=1>marks<\/font>&#8221; working out &#8230;<\/p>\n<blockquote><p>\nIn which direction is North?\n<\/p><\/blockquote>\n<p>Well, the irony here, today, is that the better you have been hanging onto these skills you are, the better you can use our new &#8230;<\/p>\n<ul>\n<li>mobile phone &#8230;<\/li>\n<li>containing a gyroscope &#8230; but &#8230;<\/li>\n<li>not an accessible compass <font size=1>(or if so, the knowledge of where North is becomes superfluous below)<\/font> &#8230;<\/li>\n<li>using a compatible web browser such as Google Chrome &#8230;<\/li>\n<li>a good indication your scenario is compatible being that at some stage you answer &#8220;Allow&#8221; to a prompt as below &#8230;<br \/>\n<img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/IMG_1467.PNG'><\/img><br \/>\n &#8230; at some point &#8230; using &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html----------GETME\" title=\"missing_two.html\" rel=\"noopener\">today&#8217;s changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html----------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link modifications &#8230; using &#8230;\n<ol>\n<li>window.<a target=\"_blank\" title='DeviceOrientationEvent' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DeviceOrientationEvent' rel=\"noopener\">DeviceOrientationEvent<\/a> event &#8230; and perhaps you could use &#8230;<\/li>\n<li>window.<a target=\"_blank\" title='DeviceMotionEvent' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DeviceMotionEvent' rel=\"noopener\">DeviceMotionEvent<\/a> event<\/li>\n<\/ol>\n<p> &#8230;\n<\/li>\n<li>software detection to offer that user &#8230;\n<\/li>\n<\/ul>\n<p> &#8230; the chance to mix technology with human navigational instincts to answer that perennial question similarly asked in <a target=\"_blank\" title='Earth Bearing Distance Missing Two Place Name and Horizon Tutorial' href='#ebdmtpnht' rel=\"noopener\">Earth Bearing Distance Missing Two Place Name and Horizon Tutorial<\/a> &#8230;<\/p>\n<blockquote><p>\nWhat&#8217;s out there <font size=1>in the distance<\/font>?\n<\/p><\/blockquote>\n<p> &#8230; via &#8230;<\/p>\n<ol>\n<li>using a compatible web browser such as Google Chrome &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> &#8230;<\/li>\n<li>point your mobile phone in portrait to North <font size=1>(or at least arrange to do this just before tapping the Done link in step below)<\/font> &#8230;<\/li>\n<li>enter in a Place Name into that top textbox (to which, it&#8217;s good, as known, to append semicolon elevation) and add a space, and because you are on a mobile device, tap the Done link<\/li>\n<li>bearing text will start being updated with bearing of your mobile device portrait mode top pointing direction &#8230; so &#8230;<\/li>\n<li>when you&#8217;ve swivelled the mobile device to be pointing (in portrait) to the <b>(What&#8217;s out there <font size=1>in the distance<\/font>?)<\/b> direction of interest, tap that yellow bearing textbox, then tap the Done link &#8230; resulting in &#8230;<\/li>\n<li><a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> showing your Place Name and (the calculated) Horizon Position in that direction of your choosing<\/li>\n<\/ol>\n<p> &#8230; meaning the combination of &#8230;<\/p>\n<ul>\n<li>your mobile device&#8217;s gyroscope&#8217;s angle measuring talent <font size=1>(akin to those theodolite talents Land Surveyors are using)<\/font> &#8230; and &#8230;<\/li>\n<li>your navigational talents knowing where North is<\/li>\n<\/ul>\n<p> &#8230; save you having to know that awkward &#8220;bearing&#8221; (in degrees) textbox answer to What&#8217;s out there <font size=1>in the distance<\/font>?   Perhaps see what we mean viewing today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_trip_orientation.gif\" title=\"Tutorial picture\" rel=\"noopener\">animated GIF<\/a> presentation.<\/p>\n<p>Onto yesterday&#8217;s <a title='Earth Bearing Distance Missing Two Trip Details Styling Tutorial' href='#ebdmttdst'>Earth Bearing Distance Missing Two Trip Details Styling Tutorial<\/a> and since the last time we ventured into the wooooorrrrrlllldddd of &#8220;window.DeviceOrientationEvent&#8221; logic we&#8217;ve gotten great help Javascript coding for the permissions side to the handling of this event, as per &#8230;<\/p>\n<p><code><br \/>\n    if ((navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) || document.URL.indexOf('alert=') != -1) && document.URL.toLowerCase().indexOf('https:') != 0) {<br \/>\n      location.href=document.URL.replace('http:','https:') + '&random=' + Math.floor(Math.random() * 174765654);<br \/>\n    }<br \/>\n    if ((navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) || document.URL.indexOf('update=') != -1) && document.URL.toLowerCase().indexOf('https:') != 0) {<br \/>\n      location.href=document.URL.replace('http:','https:') + '&random=' + Math.floor(Math.random() * 174765654);<br \/>\n    }<br \/>\n<br \/>\n\/\/ Thanks to <a target=\"_blank\" title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/await' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/await' rel=\"noopener\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/await<\/a> and<br \/>\n\/\/ <a target=\"_blank\" title='https:\/\/gist.github.com\/Ajasra\/ddd616505013a4309c0dda8a8ba626cb' href='https:\/\/gist.github.com\/Ajasra\/ddd616505013a4309c0dda8a8ba626cb' rel=\"noopener\">https:\/\/gist.github.com\/Ajasra\/ddd616505013a4309c0dda8a8ba626cb<\/a><br \/>\n<br \/>\nasync function myfunction() {<br \/>\n  console.log('Inside of myfunction');<br \/>\n\/\/alert(0);<br \/>\nif (window.DeviceOrientationEvent && typeof(DeviceOrientationEvent.requestPermission) === \"function\") {<br \/>\n\/\/alert(4);<br \/>\n    const permissionState = await DeviceOrientationEvent.requestPermission().then(response =&gt; {<br \/>\n                        if (response === 'granted') {<br \/>\n         if (1 == 2) { alert('GrAnted'); }<br \/>\n                           \/\/window.addEventListener('deviceorientation', OrientationHandler, true);<br \/>\n                           dorh();<br \/>\n                        } else if (result.state === 'prompt') {<br \/>\n                            if (1 == 2) { alert(\"Need prompt!\"); }<br \/>\n                        } else {<br \/>\n                            if (1 == 2) { alert(\"Not Supported!\"); }<br \/>\n                        }<br \/>\n                    }).catch(console.error);<br \/>\n<br \/>\n    \/\/if (permissionState === \"granted\") {<br \/>\n    \/\/    alert('granted');<br \/>\n    \/\/} else {<br \/>\n    \/\/    alert('denied');<br \/>\n    \/\/}<br \/>\n} else if (window.DeviceOrientationEvent) {<br \/>\n\/\/alert(44);<br \/>\n                           dorh();<br \/>\n}<br \/>\n<br \/>\nif (window.DeviceMotionEvent && typeof(DeviceMotionEvent.requestPermission) === \"function\") {<br \/>\n\/\/alert(24);<br \/>\n    const permissionStateM = await DeviceMotionEvent.requestPermission().then(response =&gt; {<br \/>\n                        if (response === 'granted') {<br \/>\n         if (1 == 2) { alert('GranTed');  }<br \/>\n window.addEventListener('devicemotion', function(event) {<br \/>\n    lalpha='' + event.rotationRate.alpha;<br \/>\n});<br \/>\n                           \/\/window.addEventListener('deviceorientation', OrientationHandler, true);<br \/>\n                        } else if (result.state === 'prompt') {<br \/>\n                            if (1 == 2) { alert(\"NeeD prompt!\"); }<br \/>\n                        } else {<br \/>\n                            if (1 == 2) { alert(\"NoT Supported!\"); }<br \/>\n                        }<br \/>\n                    }).catch(console.error);<br \/>\n<br \/>\n    \/\/if (permissionStateM === \"granted\") {<br \/>\n    \/\/    alert('Granted');<br \/>\n    \/\/} else {<br \/>\n    \/\/    alert('Denied');<br \/>\n    \/\/}<br \/>\n} else if (window.DeviceMotionEvent) {<br \/>\n\/\/alert(244);<br \/>\n window.addEventListener('devicemotion', function(event) {<br \/>\n    lalpha='' + event.rotationRate.alpha;<br \/>\n});<br \/>\n}<br \/>\n<br \/>\n}<br \/>\n<br \/>\n\/\/ Here we wait for the myfunction to finish<br \/>\n\/\/ and then returns a promise that'll be waited for aswell<br \/>\n\/\/ It's useless to wait the myfunction to finish before to return<br \/>\n\/\/ we can simply returns a promise that will be resolved later<br \/>\n<br \/>\n\/\/ Also point that we don't use async keyword on the function because<br \/>\n\/\/ we can simply returns the promise returned by myfunction<br \/>\nfunction start() {<br \/>\n  return myfunction();<br \/>\n}<br \/>\n<br \/>\n\/\/ Call start<br \/>\n(async() =&gt; {<br \/>\n  console.log('before start');<br \/>\n<br \/>\n  await start();<br \/>\n<br \/> <br \/>\n  console.log('after start');<br \/>\n})();<br \/>\n<br \/>\n  var degtorad = Math.PI \/ 180; \/\/ Degree-to-Radian conversion ... thanks to https:\/\/www.w3.org\/TR\/orientation-event\/#worked-example<br \/>\n<br \/>\n  function dorh() {<br \/>\n\/\/let laSensor = new LinearAccelerationSensor({frequency: 60});<br \/>\n<br \/>\n\/\/laSensor.addEventListener('reading', e =&gt; {<br \/>\n\/\/  console.log(\"Linear acceleration along the X-axis \" + laSensor.x);<br \/>\n\/\/  console.log(\"Linear acceleration along the Y-axis \" + laSensor.y);<br \/>\n\/\/  console.log(\"Linear acceleration along the Z-axis \" + laSensor.z);<br \/>\n\/\/});<br \/>\n\/\/laSensor.start();<br \/>\n<br \/> <br \/>\n\/\/window.addEventListener('devicemotion', function(event) {<br \/>\n\/\/  alert(event.rotationRate.alpha + ' m\/s2');<br \/>\n\/\/});<br \/>\n<br \/> <br \/>\n  if (1 == 3) {<br \/>\nwindow.addEventListener(\"orientationchange\", function() {<br \/>\n  \/\/ Announce the new orientation number<br \/>\n  var thisso=''  + screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type;<br \/>\n  if (('' + thisso) == 'undefined') {<br \/>\n   var mql=window.matchMedia(\"(orientation: portrait)\");<br \/>\n\/\/ If there are matches, we're in portrait<br \/>\nif (mql.matches) {<br \/>\n    thisso=\"Portrait\"; \/\/ Portrait orientation<br \/>\n} else {<br \/>\n    thisso=\"Landscape\"; \/\/ Landscape orientation<br \/>\n}<br \/>\n  }<br \/>\n<br \/> <br \/>\n  if (thisso != wasthisso) {<br \/>\n    wasthisso=thisso;<br \/>\n    alert('ori');<br \/>\n  }<br \/>\n}, false);<br \/>\n  }<br \/>\n<br \/>\nif (window.DeviceOrientationEvent) {<br \/>\nif (1 == 2) { alert(1); }<br \/>\n\/\/ Listen for orientation changes ... thanks to https:\/\/davidwalsh.name\/orientation-change<br \/>\n  \/\/ Listen for the deviceorientation event and handle the raw data<br \/>\n  window.addEventListener('deviceorientation', function(eventData) {<br \/>\n    \/\/ gamma is the left-to-right tilt in degrees, where right is positive<br \/>\n    if (1 == 2) { alert(11); }<br \/>\n    if (document.getElementById('ipn')) {<br \/>\n        \/\/if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and face north for gyroscope bearing.') == -1) {<br \/>\n        if (('' + document.getElementById('ipn').placeholder).indexOf(' and ') == -1) {<br \/>\n         document.getElementById('ipn').className='ph';<br \/>\n         document.getElementById('ipn').placeholder+='. Append space and portrait face north for gyroscope bearing.';<br \/>\n         document.getElementById(\"myviewport\").setAttribute(\"content\", \"width=device-width, initial-scale=1.5, minimum-scale=0.1, maximum-scale=8, user-scalable=yes\");<br \/>\n         setTimeout(asafn, 5000);<br \/>\n        }<br \/>\n    }<br \/>\n    \/\/eventData.absolute=true;<br \/>\n<br \/> <br \/>\n    var eventDataalpha = eval(360.0 - eval('' + eventData.alpha)); \/\/ lalpha)); \/\/<br \/>\n    if (!datstart) { eventDataalpha-=initial_yaw; }<br \/>\n<br \/> <br \/>\n    tiltLeftToRight = eval('' + eventData.gamma);<br \/>\n<br \/>\n    \/\/ beta is the front-to-back tilt in degrees, where front is positive<br \/>\n    tiltFrontToBack = eval('' + eventData.beta);<br \/>\n<br \/>\n    \/\/ alpha is the compass direction the device is facing in degrees<br \/>\n    lastalpha='' + eventData.alpha; \/\/ lalpha; \/\/<br \/>\n    dorbrg = eval('' + eventDataalpha); \/\/compassHeading(eval('' + eventDataalpha), tiltFrontToBack, tiltLeftToRight);<br \/>\nif (1 == 2) { alert(dorbrg); }<br \/>\n    if (document.URL.indexOf('aleJUNKrt=') != -1) {<br \/>\n      alert(dorbrg);<br \/>\n    }<br \/>\n    if (document.URL.indexOf('upJUNKdate=') != -1 || (fplacen != '' && tplacen == '')) {<br \/>\n      if (eventData.absolute || 1 == 1) {<br \/>\n      \/\/document.getElementById('brg').value='' + eval(eval(540.0 - eval('' + dorbrg)) % 360.0);<br \/>\n      \/\/document.getElementById('brg').value='' + eval(eval(720.0 - eval('' + dorbrg)) % 360.0);<br \/>\n      \/\/document.getElementById('brg').value='' + dorbrg;<br \/>\n      if (eval(dcnt % 10) == 0) {<br \/>\n      document.getElementById('brg').value='' + eval(eval(720.0 + eval('' + dorbrg)) % 360.0);<br \/>\n      document.getElementById('brg').style.backgroundColor='yellow';<br \/>\n      }<br \/>\n      dcnt++;<br \/>\n      }<br \/>\n    }<br \/>\n<br \/> <br \/>\n    if (datstart && (fplacen != '' && tplacen == '')) {<br \/>\n      datstart=false;<br \/>\n      \/\/initial_yaw=eval(360.0 - eval('' + lalpha)); \/\/eventData.alpha));<br \/>\n      \/\/alert('0:' + initial_yaw);<br \/>\n      if (!eventData.absolute) {<br \/>\n      initial_yaw=eval(360.0 - eval('' + eventData.alpha)); \/\/ lalpha)); \/\/<br \/>\n      }<br \/>\n      \/\/alert('' + initial_yaw);<br \/>\n      initial_pitch=Math.round(tiltFrontToBack);<br \/>\n      initial_roll=Math.round(tiltLeftToRight);<br \/>\n      \/\/alert(initial_yaw + ',' + initial_pitch + ',' + initial_roll);<br \/>\n    }<br \/>\n<br \/> <br \/>\n    handleOrientationEvent(tiltFrontToBack, tiltLeftToRight, dorbrg, eventData.absolute);<br \/>\n<br \/>\n    if ((fplacen != '' && tplacen == '') && document.getElementById('ipn')) {<br \/>\n        \/\/if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and face north for gyroscope bearing.') != -1) {<br \/>\n        if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and ') != -1) {<br \/>\n         document.getElementById('ipn').style.backgroundColor='#f0f0f0';<br \/>\n         \/\/document.getElementById('ipn').placeholder=document.getElementById('ipn').placeholder.split('Append space and face north for gyroscope bearing.')[0] + ' Now swivel to direction of interest then tap yellow textbox.';<br \/>\n         document.getElementById('ipn').placeholder=document.getElementById('ipn').placeholder.split('Append space and ')[0] + ' Now swivel to direction of interest then tap yellow textbox.';<br \/>\n         document.getElementById(\"myviewport\").setAttribute(\"content\", \"width=device-width, initial-scale=1.2, minimum-scale=0.1, maximum-scale=8, user-scalable=yes\");<br \/>\n         \/\/window.scrollBy(0,50); \/\/location.href='#brg';<br \/>\n        }<br \/>\n    }<br \/>\n<br \/> <br \/>\n    }, false);<br \/>\n}<br \/>\n}<br \/>\n<br \/>\nvar handleOrientationEvent = function(tiltFrontToBack, tiltLeftToRight, dorbrg, absis) {<br \/>\n    \/\/ do something amazing<br \/>\n    if (1 == 2) { alert(dorbrg); }<br \/>\n    if (document.URL.indexOf('alJUNKert=') != -1) {<br \/>\n      alert(dorbrg);<br \/>\n    }<br \/>\n    if (document.URL.indexOf('upJUNKdate=') != -1 || (fplacen != '' && tplacen == '')) {<br \/>\n      if (absis || 1 == 1) {<br \/>\n      \/\/document.getElementById('brg').value='' +  eval(eval(540.0 - eval('' + dorbrg)) % 360.0);<br \/>\n      \/\/document.getElementById('brg').value='' +  eval(eval(720.0 - eval('' + dorbrg)) % 360.0);<br \/>\n      \/\/document.getElementById('brg').value='' + dorbrg;<br \/>\n      if (eval(dcnt % 10) == 0) {<br \/>\n      document.getElementById('brg').value='' + eval(eval(720.0 + eval('' + dorbrg)) % 360.0);<br \/>\n      document.getElementById('brg').style.backgroundColor='yellow';<br \/>\n      }<br \/>\n      dcnt++;<br \/>\n      }<br \/>\n    }<br \/>\n};<br \/>\n<br \/> <br \/>\n  function asafn() {<br \/>\n      if (document.getElementById('ipn')) {<br \/>\n        \/\/if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and face north for gyroscope bearing.') == -1) {<br \/>\n        if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and portrait face north for ') != -1) {<br \/>\n         document.getElementById('ipn').placeholder=document.getElementById('ipn').placeholder.split('Append space and ')[0] + 'Append space and portrait face north onto ;elevation(m)?';<br \/>\n         setTimeout(asafn, 5000);<br \/>\n        } else if (('' + document.getElementById('ipn').placeholder).indexOf('Append space and ') != -1) {<br \/>\n         document.getElementById('ipn').placeholder=document.getElementById('ipn').placeholder.split('Append space and ')[0] + 'Append space and portrait face north for horizon bearing.';<br \/>\n         setTimeout(asafn, 5000);<br \/>\n        }<br \/>\n      }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p>Today we added a <font color=purple>meta viewport<\/font>, and for the first time that we can recall, we started styling the &#8220;placeholder&#8221; of that top textbox <font color=blue>as per<\/font> (thanks to <a target=\"_blank\" title='Great advice regarding styling placeholder' href='https:\/\/stackoverflow.com\/questions\/44679144\/how-to-make-input-placeholder-font-size-different-from-input-value-font-size' rel=\"noopener\">https:\/\/stackoverflow.com\/questions\/44679144\/how-to-make-input-placeholder-font-size-different-from-input-value-font-size<\/a>) &#8230;<\/p>\n<p><code><br \/>\n<font color=purple>&lt;meta id=\"myviewport\" name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes\" &gt;<\/font><br \/>\n&lt;style&gt;<br \/>\n  summary { background-color: #f0f0f0; }<br \/>\n<font color=blue><br \/>\n.ph::placeholder { \/* Chrome, Firefox, Opera, Safari 10.1+ *\/<br \/>\n  color: red;<br \/>\n  opacity: 1; \/* Firefox *\/<br \/>\n  font-size: 8px;<br \/>\n}<br \/>\n<br \/>\n.ph:-ms-input-placeholder { \/* Internet Explorer 10-11 *\/<br \/>\n  color: red;<br \/>\n  font-size: 8px;<br \/>\n}<br \/>\n<br \/>\n.ph::-ms-input-placeholder { \/* Microsoft Edge *\/<br \/>\n  color: red;<br \/>\n  font-size: 8px;<br \/>\n}<br \/>\n<\/font><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\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-bearing-distance-missing-two-trip-details-orientation-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Details Orientation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmttdst'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Trip Details Styling Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-trip-details-styling-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Details Styling 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Trip Details Styling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_trip_css.jpg\" title=\"Earth Bearing Distance Missing Two Trip Details Styling Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Trip Details Styling Tutorial<\/p><\/div>\n<p>On top of the recent <a title='Earth Bearing Distance Missing Two Trip Details Reveal Tutorial' href='#ebdmttdrt'>Earth Bearing Distance Missing Two Trip Details Reveal Tutorial<\/a>, today we discuss styling strategies a little.  When and where do you style your webpage?  We think you do it all along, but for us, we like &#8220;little spurts&#8221; at it too, so we might let a web application project progress in a practical approach not worrying about aesthetics too much until we do a &#8220;little spurt&#8221; bubble of activity regarding styling.  Often times ideas for that can be developed away from the laptop you might write the code on.  For example, <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html---------GETME\" title=\"missing_two.html\" rel=\"noopener\">today&#8217;s changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html---------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link modifications were directed by an email we sent to ourselves &#8230;<\/p>\n<blockquote><p>\nJobs<br \/>\n<br \/>\nRobert Metcalfe <rmetcalfe15@gmail.com><br \/>\nSun, Sep 12, 8:16 PM (5 days ago)<br \/>\nto me<br \/>\n<br \/>\nVertical-align: top<br \/>\nI frame too high<br \/>\nTo after horizon leaves horizon I frame title<br \/>\nLat long display online-block<br \/>\nColoured summary background colour<br \/>\nTh header cells text-align center<br \/>\n<br \/>\nSent from my iPhone\n<\/p><\/blockquote>\n<p> &#8230; &#8220;mind map&#8221; type ideas that may or may not be followed through to fruition, depending on &#8230;<\/p>\n<ul>\n<li>where possible<\/li>\n<li>where feasible<\/li>\n<li>where wise<\/li>\n<\/ul>\n<p>This strategy above is for your small projects, else if much bigger, or involving multiple people to produce, or being written to a specification, or being written for a third party, you&#8217;d be much better placed to think about styling issues from the start, in a plan.  You might want to use <a target=\"_blank\" title='wireframes Google search' href='https:\/\/www.google.com\/search?q=wireframes&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=wireframes&#038;aqs=chrome..69i57j0i512l7j0i10i512l2.2764j0j4&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">wireframes<\/a>?<\/p>\n<p>On these small projects we also don&#8217;t mind just involving the one HTML (or PHP writing HTML) source file and use a combination of &#8230;<\/p>\n<ul>\n<li>inline &lt;style&gt; CSS styling goes here &lt;\/style&gt; within the webpage &lt;head&gt;&lt;\/head&gt; header section &#8230; or &#8230;<\/li>\n<li>in amongst the HTML via &#8220;style&#8221; attribute &#8230; eg. &lt;p id=&#8221;myp&#8221; style=&#8221; CSS styling for p element goes here &#8220;&gt; Content for p element goes here &lt;\/p&gt;<\/li>\n<\/ul>\n<p> &#8230; or Javascript DOM code such as &#8230;<\/p>\n<p><code><br \/>\n  document.getElementById('myp').style.fontSize='18px';<br \/>\n<\/code><\/p>\n<p> &#8230; and it is very rare, with these small projects, though very good in organizational terms, to write all your CSS styling in an external CSS (styling file) arrangement such as &#8230;<\/p>\n<p><code><br \/>\n&lt;head&gt;<br \/>\n&lt;link href='.\/my_styling.css' rel='stylesheet' type='text\/css'&gt;<br \/>\n&lt;\/head&gt;<br \/>\n<\/code> <\/p>\n<p>There are many ways to <font size=1>&#8230; well, you know what I mean &#8230;<\/font> a cat!  <font size=1>Not only were &#8220;no cats harmed in the making of this tutorial&#8221; but no cats were even roughed up?!<\/font><\/p>\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\/new-earth-bearing-distance-missing-two-trip-details-reveal-tutorial\/' rel=\"noopener\">New Earth Bearing Distance Missing Two Trip Details Reveal Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmttdrt'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Trip Details Reveal Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-trip-details-reveal-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Details Reveal 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Trip Details Reveal Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_trip_legs.jpg\" title=\"Earth Bearing Distance Missing Two Trip Details Reveal Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Trip Details Reveal Tutorial<\/p><\/div>\n<p>Yes, there&#8217;s only so long you can use the wonderful <a target=\"_blank\" title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">details<\/a>\/<a target=\"_blank\" title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">summary<\/a> HTML element combination as with the recent <a title='Earth Bearing Distance Missing Two Trip Details Summary Tutorial' href='#ebdmttdst'>Earth Bearing Distance Missing Two Trip Details Summary Tutorial<\/a>&#8216;s &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-trip-details-summary-tutorial\/'><p>\nwe often use to &#8220;reveal&#8221;, or not, webpage &#8220;real estate&#8221;, but today we default to the &#8220;open&#8221; look <\/p><\/blockquote>\n<p> &#8230; just using that &#8220;open&#8221; element mode of use, and not want to make use of its &#8220;reveal&#8221; talents.  How so?  Well, a bit like the dropdown element, we find that the details\/summary combination allows for the containment of lots of data for a controlled amount of &#8220;reveal&#8221;.  In this day and age of responsiveness to limited screen sizes, that is a big advantage.<\/p>\n<p>Today, then, with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html--------GETME\" title=\"missing_two.html\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html--------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link, we have &#8230;<\/p>\n<ol>\n<li>that first <font size=1>(at first)<\/font> &#8220;open&#8221; details\/summary nesting a <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> iframe summarizing the entirety of your Trip &#8230; today &#8230;<\/li>\n<li>festooned with up arrow emoji (&#11014;) &#8220;button&#8221; links which, when clicked, zero in (into a new topmost &#8220;only open&#8221; details\/summary nesting Google Chart Map Chart iframe set of data) on any one &#8220;leg&#8221; of your trip, displaying its own crow fly distance and <a target=\"_blank\" title='Google Maps Directions' href='http:\/\/www.google.com\/maps\/dir\/' rel=\"noopener\">Google Maps Directions<\/a> information link, as well as new &#8230;<\/li>\n<li>accommodation (&#128716;) links ala <a target=\"_blank\" title='accommodation in Springwood, New South Wales' href='1631413859134&#038;source=lnms&#038;tbm=isch&#038;sa=X&#038;ved=2ahUKEwiHjbicsvjyAhWIyzgGHb-bDkcQ_AUoA3oECAEQBQ&#038;biw=1439&#038;bih=729' rel=\"noopener\">accommodation in Springwood, New South Wales<\/a> <a target=\"_blank\" title='Google' href='\/\/google.com' rel=\"noopener\">Google<\/a> image search style links<\/li>\n<\/ol>\n<p> &#8230; to enhance a Trip Planner&#8217;s user experience.  Perhaps best to explain a bit codewise is to say &#8220;follow the Javascript var<font size=1>iable<\/font> <font color=blue><b>interesting<\/b><\/font> in code below&#8221; &#8230;<\/p>\n<p><code><br \/>\nfunction askit() {<br \/>\n  var ourdist=0.0, ourbrg=0.0;<br \/>\n  \/\/alert(gllentry);<br \/>\n  if (gllentry.indexOf(',') != -1) {<br \/>\n  if ((1 == 2 && gllonesuffix == 'f') || document.getElementById('spfr').innerHTML == 'from') {<br \/>\n    tpurl=origtpurl;<br \/>\n    document.getElementById('latf').focus();<br \/>\n    document.getElementById('latf').value=gllentry.split(',')[0];<br \/>\n    \/\/var mu=\"\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php?title=London&label=['Lat',&value='Lon','Name']&data=,[51.5072,-0.1275,~London~]\";<br \/>\n    mu=mu.replace('[51.5072,','[' + gllentry.split(',')[0] + ',');<br \/>\n    document.getElementById('longf').focus();<br \/>\n    document.getElementById('longf').value=gllentry.split(',')[1];<br \/>\n    mu=mu.replace(',-0.1275,',',' + gllentry.split(',')[1] + ',');<br \/>\n    document.getElementById('latf').focus();<br \/>\n    gllonesuffix = 't';<br \/>\n    document.getElementById('spfr').innerHTML=document.getElementById('spfr').innerHTML.replace('from','to&lt;input type=hidden name=fplacen value=\"' + gllentry.split(',')[2].replace(\/\\;\/g,',') + '\"&gt;&lt;\/input&gt;');<br \/>\n    fplacen=gllentry.split(',')[2].replace(\/\\;\/g,',');<br \/>\n    document.getElementById('ssf').innerHTML=' ' + gllentry.split(',')[2].replace(\/\\;\/g,',');<br \/>\n    mu=mu.replace('=LonJunkdon','=' + encodeURIComponent(gllentry.split(',')[2].replace(\/\\;\/g,','))).replace(',~London~]',',~' + encodeURIComponent(gllentry.split(',')[2].replace(\/\\;\/g,',')) + '~],[051.5072,-00.1275,~LonDon~]');<br \/>\n    tpurl=tpurl.replace(\"Sydney+NSW,+Australia\",encodeURIComponent(gllentry.split(',')[2].replace(\/\\;\/g,',')));<br \/>\n    if (document.getElementById('sftif') && document.getElementById('iftif')) {<br \/>\n      document.getElementById('iftif').src=document.getElementById('iftif').src.replace('&',encodeURIComponent(' from ' + gllentry.split(',')[2].replace(\/\\;\/g,',')) + '&') + ',[' + gllentry.replace(',' + gllentry.split(',')[1] + ',', ',' + gllentry.split(',')[1] + ',~').replace(\/\\ \/g,'%20') + '~]';<br \/>\n      document.getElementById('sftif').innerHTML+=' &lt;a target=_blank title=Accomodation onclick=woit(this); data-href=\"' + accomurl.replace(\/Springwood\\,\\+New\\+South\\+Wales\/g, encodeURIComponent(gllentry.split(',')[2].replace(\/\\;\/g,',')).replace(\/\\%20\/g,'+')) + '\"&gt;from &amp;#128716;&lt;\/a&gt; &lt;a target=_blank title=\"' + gllentry.split(',')[2].replace(\/\\;\/g,',') + '\" href=\"\/\/en.wikipedia.org\/wiki\/' + encodeURIComponent(gllentry.split(',')[2].replace(\/\\;\/g,',')) + '\"&gt;' + gllentry.split(',')[2].replace(\/\\;\/g,',') + '&lt;\/a&gt;';<br \/>\n      document.getElementById('brg').value='0.0000000';<br \/>\n      document.getElementById('dist').value='0.000';<br \/>\n      document.getElementById('brg').style.backgroundColor='white';<br \/>\n      document.getElementById('dist').style.backgroundColor='white';<br \/>\n      cwhat=[false,false,true,true,false,false];<br \/>\n       ourdist=great_circle_distance(document.getElementById(eles[0]).value,document.getElementById(eles[1]).value,document.getElementById(eles[4]).value,document.getElementById(eles[5]).value);<br \/>\n       document.getElementById(eles[3]).value='' + ourdist;<br \/>\n<br \/>\n    \/\/Let \u2018R\u2019 be the radius of Earth,<br \/>\n    \/\/\u2018L\u2019 be the longitude,<br \/>\n    \/\/\u2018\u03b8\u2019 be latitude,<br \/>\n    \/\/\u2018\u03b2\u2018 be Bearing.<br \/>\n<br \/> <br \/>\n \/\/Bearing from point A to B, can be calculated as,<br \/>\n<br \/>\n \/\/\u03b2 = atan2(X,Y),<br \/>\n<br \/>\n \/\/where, X and Y are two quantities and can be calculated as:<br \/>\n<br \/>\n \/\/X = cos \u03b8b * sin \u2206L<br \/>\n<br \/>\n \/\/Y = cos \u03b8a * sin \u03b8b \u2013 sin \u03b8a * cos \u03b8b * cos \u2206L<br \/>\n<br \/> <br \/>\n       ourbrg=eval(eval(360.0 + eval(eval(eval(180.0 \/ Math.PI) * Math.atan2(<br \/>\n       eval(eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[4]).value))) *<br \/>\n       eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval(eval('' + document.getElementById(eles[5]).value) - eval('' + document.getElementById(eles[1]).value))))),<br \/>\n       eval(eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[0]).value))) *<br \/>\n       eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[4]).value)))) -<br \/>\n       eval(eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[0]).value))) *<br \/>\n       eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[4]).value))) *<br \/>\n       eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval(eval('' + document.getElementById(eles[5]).value) - eval('' + document.getElementById(eles[1]).value)))))<br \/>\n       )))) % 360.0);<br \/>\n<br \/> <br \/>\n       document.getElementById('mysel').value='2';<br \/>\n       document.getElementById(eles[2]).value='' + ourbrg;<br \/>\n       document.getElementById(eles[2]).style.backgroundColor='lightgreen';<br \/>\n       document.getElementById(eles[3]).style.backgroundColor='lightgreen';<br \/>\n    }<br \/>\n  } else {<br \/>\n    <font color=blue>var interesting=false, waslatt='', waslongt='', wasfplacen='';<br \/>\n    if (gllonesuffix == 'f') {<br \/>\n      interesting=true;<br \/>\n      waslatt=document.getElementById('latt').value;<br \/>\n      waslongt=document.getElementById('longt').value;<br \/>\n      if (documentURL == document.URL) {<br \/>\n      wasfplacen=location.search.split('tplacen=')[1] ? (' ' + decodeURIComponent(location.search.split('tplacen=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : ''; \/\/document.getElementById('tplacen').value;<br \/>\n      } else {<br \/>\n      wasfplacen=decodeURIComponent(documentURL.split('tplacen=')[eval(-1 + documentURL.split('tplacen=').length)].split('&')[0]);<br \/>\n      }<br \/>\n      \/\/alert('interesting');<br \/>\n    }<\/font><br \/>\n    mu=mu.replace('=London','=' + encodeURIComponent(fplacen));<br \/>\n    document.getElementById('brg').focus();<br \/>\n    document.getElementById('dist').focus();<br \/>\n    document.getElementById('latt').focus();<br \/>\n    document.getElementById('latt').value=gllentry.split(',')[0];<br \/>\n    mu=mu.replace('[051.5072,','[' + gllentry.split(',')[0] + ',');<br \/>\n    document.getElementById('longt').focus();<br \/>\n    document.getElementById('longt').value=gllentry.split(',')[1];<br \/>\n    mu=mu.replace(',-00.1275,',',' + gllentry.split(',')[1] + ',');<br \/>\n    document.getElementById('latt').focus();<br \/>\n    gllonesuffix = 'f';<br \/>\n    if (interesting) {<br \/>\n    document.getElementById('spfr').innerHTML=document.getElementById('spfr').innerHTML.replace('to','from&lt;input type=hidden id=tplacen name=tplacen value=\"' + gllentry.split(',')[2].replace(\/\\;\/g,',') + '\"&gt;&lt;\/input&gt;');<br \/>\n    } else {<br \/>\n    document.getElementById('spfr').innerHTML=document.getElementById('spfr').innerHTML.replace('to','from&lt;input type=hidden id=tplacen name=tplacen value=\"' + gllentry.split(',')[2].replace(\/\\;\/g,',') + '\"&gt;&lt;\/input&gt;');<br \/>\n    }<br \/>\n    document.getElementById('ifill').value='Map Trip';<br \/>\n    document.getElementById('sst').innerHTML=' ' + gllentry.split(',')[2].replace(\/\\;\/g,',');<br \/>\n    mu=mu.replace(',~LonDon~]',',~' + encodeURIComponent(gllentry.split(',')[2].replace(\/\\;\/g,',')) + '~]');<br \/>\n    tpurl=tpurl.replace(\"Brisbane+QLD,+Australia\",encodeURIComponent(gllentry.split(',')[2].replace(\/\\;\/g,',')));<br \/>\n    if (document.getElementById('sftif') && document.getElementById('iftif')) {<br \/>\n      if (document.getElementById('addafirst')) {  document.getElementById('addafirst').style.display='inline-block';  }<br \/>\n      if (document.getElementById('addacc')) {  document.getElementById('addacc').style.display='inline-block';  }<br \/>\n      document.getElementById('iftif').src=document.getElementById('iftif').src.replace('&',encodeURIComponent(' to ' + gllentry.split(',')[2].replace(\/\\;\/g,',')) + '&') + ',[' + gllentry.replace(',' + gllentry.split(',')[1] + ',', ',' + gllentry.split(',')[1] + ',~').replace(\/\\ \/g,'%20') + '~]';<br \/>\n    \/\/if (interesting) {<br \/>\n    \/\/  alert('interesting ... fplacen=' + fplacen);<br \/>\n    \/\/}<br \/>\n      <font color=blue>if (interesting) {<br \/>\n        document.getElementById('sftif').innerHTML+=(' from &lt;a target=_blank title=\"' + wasfplacen + '\" href=\"\/\/en.wikipedia.org\/wiki\/' + encodeURIComponent(wasfplacen) + '\"&gt;' + wasfplacen + '&lt;\/a&gt; ').substring(0,1) + '&lt;a target=_blank title=Accomodation onclick=woit(this); data-href=\"' + accomurl.replace(\/Springwood\\,\\+New\\+South\\+Wales\/g, encodeURIComponent(wasfplacen).replace(\/\\%20\/g,'+')) + '\"&gt;&amp;#128716;&lt;\/a&gt;' + '&lt;a target=_blank title=\"Google Maps Directions\" href=\"' + tpurl.replace('https:','') + '\"&gt;to&lt;\/a&gt;&lt;a title=\"Map of this trip leg\" class=\"adda\" onclick=\"addto(this);\" data-from=\"' + (wasfplacen ? wasfplacen : fplacen) + '\" data-to=\"' + gllentry.split(',')[2].replace(\/\\;\/g,',') + '\" style=\"display:inline-block;cursor:pointer;\"  data-latf=' + (waslatt ? waslatt : document.getElementById('latf').value) + ' data-longf=' + (waslongt ? waslongt : document.getElementById('longf').value) + ' data-latt=' + document.getElementById('latt').value + ' data-longt=' + document.getElementById('longt').value + ' data-gcd=' + eval(eval('' + great_circle_distance((waslatt ? waslatt : document.getElementById(eles[0]).value),(waslongt ? waslongt : document.getElementById(eles[1]).value),document.getElementById(eles[4]).value,document.getElementById(eles[5]).value)) \/ 1000.000) + '&gt;&amp;#11014;&lt;a&gt; &lt;a target=_blank title=\"' + gllentry.split(',')[2].replace(\/\\;\/g,',') + '\" href=\"\/\/en.wikipedia.org\/wiki\/' + encodeURIComponent(gllentry.split(',')[2].replace(\/\\;\/g,',')) + '\"&gt;' + gllentry.split(',')[2].replace(\/\\;\/g,',') + '&lt;\/a&gt; (' + '&lt;a target=_blank title=Accomodation onclick=woit(this); data-href=\"' + accomurl.replace(\/Springwood\\,\\+New\\+South\\+Wales\/g, encodeURIComponent(gllentry.split(',')[2].replace(\/\\;\/g,',')).replace(\/\\%20\/g,'+')) + '\"&gt;&amp;#128716;&lt;\/a&gt; ' + eval(eval('' + great_circle_distance(document.getElementById(eles[0]).value,document.getElementById(eles[1]).value,document.getElementById(eles[4]).value,document.getElementById(eles[5]).value)) \/ 1000.000) + ' kilometres)';<br \/>\n        \/\/alert('interesting ... fplacen=' + wasfplacen);<br \/>\n      } else {<\/font><br \/>\n        document.getElementById('sftif').innerHTML+=' &lt;a target=_blank title=\"Google Maps Directions\" href=\"' + tpurl.replace('https:','') + '\"&gt;to&lt;\/a&gt;&lt;a title=\"Map of this trip leg\" class=\"adda\" onclick=\"addto(this);\" data-from=\"' + (wasfplacen ? wasfplacen : fplacen) + '\" data-to=\"' + gllentry.split(',')[2].replace(\/\\;\/g,',') + '\" style=\"display:inline-block;cursor:pointer;\"  data-latf=' + (waslatf ? waslatf : document.getElementById('latf').value) + ' data-longf=' + (waslongf ? waslongf : document.getElementById('longf').value) + ' data-latt=' + document.getElementById('latt').value + ' data-longt=' + document.getElementById('longt').value + ' data-gcd=' + eval(eval('' + great_circle_distance((waslatf ? waslatf : document.getElementById(eles[0]).value),(waslongf ? waslongf : document.getElementById(eles[1]).value),document.getElementById(eles[4]).value,document.getElementById(eles[5]).value)) \/ 1000.000) + '&gt;&amp;#11014;&lt;a&gt; &lt;a target=_blank title=\"' + gllentry.split(',')[2].replace(\/\\;\/g,',') + '\" href=\"\/\/en.wikipedia.org\/wiki\/' + encodeURIComponent(gllentry.split(',')[2].replace(\/\\;\/g,',')) + '\"&gt;' + gllentry.split(',')[2].replace(\/\\;\/g,',') + '&lt;\/a&gt; (' + '&lt;a target=_blank title=Accomodation onclick=woit(this); data-href=\"' + accomurl.replace(\/Springwood\\,\\+New\\+South\\+Wales\/g, encodeURIComponent(gllentry.split(',')[2].replace(\/\\;\/g,',')).replace(\/\\%20\/g,'+')) + '\"&gt;&amp;#128716;&lt;\/a&gt; ' + eval(eval('' + great_circle_distance(document.getElementById(eles[0]).value,document.getElementById(eles[1]).value,document.getElementById(eles[4]).value,document.getElementById(eles[5]).value)) \/ 1000.000) + ' kilometres)';<br \/>\n      <font color=blue>}<\/font><br \/>\n      document.getElementById('brg').style.backgroundColor='white';<br \/>\n      document.getElementById('dist').style.backgroundColor='white';<br \/>\n      documentURL+='&tplacen=' + encodeURIComponent(gllentry.split(',')[2].replace(\/\\;\/g,','));<br \/>\n      cwhat=[false,false,true,true,false,false];<br \/>\n       ourdist=great_circle_distance(document.getElementById(eles[0]).value,document.getElementById(eles[1]).value,document.getElementById(eles[4]).value,document.getElementById(eles[5]).value);<br \/>\n       document.getElementById(eles[3]).value='' + ourdist;<br \/>\n<br \/>\n    \/\/Let \u2018R\u2019 be the radius of Earth,<br \/>\n    \/\/\u2018L\u2019 be the longitude,<br \/>\n    \/\/\u2018\u03b8\u2019 be latitude,<br \/>\n    \/\/\u2018\u03b2\u2018 be Bearing.<br \/>\n<br \/> <br \/>\n \/\/Bearing from point A to B, can be calculated as,<br \/>\n<br \/>\n \/\/\u03b2 = atan2(X,Y),<br \/>\n<br \/>\n \/\/where, X and Y are two quantities and can be calculated as:<br \/>\n<br \/>\n \/\/X = cos \u03b8b * sin \u2206L<br \/>\n<br \/>\n \/\/Y = cos \u03b8a * sin \u03b8b \u2013 sin \u03b8a * cos \u03b8b * cos \u2206L<br \/>\n<br \/> <br \/>\n       ourbrg=eval(eval(360.0 + eval(eval(eval(180.0 \/ Math.PI) * Math.atan2(<br \/>\n       eval(eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[4]).value))) *<br \/>\n       eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval(eval('' + document.getElementById(eles[5]).value) - eval('' + document.getElementById(eles[1]).value))))),<br \/>\n       eval(eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[0]).value))) *<br \/>\n       eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[4]).value)))) -<br \/>\n       eval(eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[0]).value))) *<br \/>\n       eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[4]).value))) *<br \/>\n       eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval(eval('' + document.getElementById(eles[5]).value) - eval('' + document.getElementById(eles[1]).value)))))<br \/>\n       )))) % 360.0);<br \/>\n<br \/> <br \/>\n       document.getElementById('mysel').value='2';<br \/>\n       document.getElementById(eles[2]).value='' + ourbrg;<br \/>\n       document.getElementById(eles[2]).style.backgroundColor='lightgreen';<br \/>\n       document.getElementById(eles[3]).style.backgroundColor='lightgreen';<br \/>\n<br \/> <br \/>\n       <font color=blue>if (interesting) {<br \/>\n    document.getElementById('spfr').innerHTML='to';<br \/>\n    document.getElementById('ipn').focus();<br \/>\n       }<\/font><br \/>\n    }<br \/>\n  }<br \/>\n  document.getElementById('ipn').placeholder=gllentry.split(',')[2].replace(\/\\;\/g,',');<br \/>\n  }<br \/>\n  gllentry='';<br \/>\n  document.getElementById('placegeo').value='';<br \/>\n}<br \/>\n<\/code><\/p>\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\/new-earth-bearing-distance-missing-two-trip-details-reveal-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Details Reveal Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmttdst'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Trip Details Summary Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-trip-details-summary-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Details Summary 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Trip Details Summary Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_tripbits.jpg\" title=\"Earth Bearing Distance Missing Two Trip Details Summary Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Trip Details Summary Tutorial<\/p><\/div>\n<p>The recent <a title='Earth Bearing Distance Missing Two Locality Distance Ring Tutorial' href='#ebdmtldrt'>Earth Bearing Distance Missing Two Locality Distance Ring Tutorial<\/a> coalesced &#8220;From&#8221; Place name functionality for &#8230;<\/p>\n<ul>\n<li>defined bearing &#8230; deriving horizon place<\/li>\n<li>defined distance &#8230; deriving ring of positions &#8230; and today we consider &#8230;<\/li>\n<li>Trip functionality thoughts via &#8220;To&#8221; Place name definitions supplementing the already entered &#8220;From&#8221; Place name<\/li>\n<\/ul>\n<p>We say &#8220;Trip Details Summary&#8221; in our blog posting title today as a hint about how we present a nester of <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> display data.<\/p>\n<p>The <a target=\"_blank\" title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">details<\/a>\/<a target=\"_blank\" title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">summary<\/a> HTML element combination we often use to &#8220;reveal&#8221;, or not, webpage &#8220;real estate&#8221;, but today we default to the &#8220;open&#8221; look and add <a target=\"_blank\" title='Lawson, New South Wales information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/' rel=\"noopener\">Wikipedia<\/a> links and crowfly distance and <a target=\"_blank\" title='Google Maps Directions' href='http:\/\/www.google.com\/maps\/dir\/' rel=\"noopener\">Google Maps Directions<\/a> information into the summary tag, for extra interest with your Trip planning.<\/p>\n<p>The user can access this functionality with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html-------GETME\" title=\"missing_two.html\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html-------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link &#8230;<\/p>\n<ol>\n<li>user enters &#8220;From&#8221; Place Name via new textbox &#8230; eg. &#8220;Lawson, New South Wales&#8221;<\/li>\n<li>user enters &#8220;To&#8221; Place Name via new textbox &#8230; eg. &#8220;Katoomba&#8221;<\/li>\n<li>user clicks\/taps the &#8220;Fill&#8221; button<\/li>\n<li>optionally the user can add more places to the Map Chart by adding more &#8220;From&#8221; and\/or &#8220;To&#8221; Place Name definitions<\/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-bearing-distance-missing-two-trip-details-summary-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Details Summary Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmtldrt'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Locality Distance Ring Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-locality-distance-ring-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Locality Distance Ring 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Locality Distance Ring Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_distance_ring.jpg\" title=\"Earth Bearing Distance Missing Two Locality Distance Ring Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Locality Distance Ring Tutorial<\/p><\/div>\n<p>The corollary to yesterday&#8217;s <a title='Earth Bearing Distance Missing Two Place Name and Horizon Tutorial' href='#ebdmtpnht'>Earth Bearing Distance Missing Two Place Name and Horizon Tutorial<\/a>&#8216;s &#8230;<\/p>\n<ul>\n<li>locality and bearing derivation of a &#8220;place on horizon&#8221; position &#8230; is, today &#8230;<\/li>\n<li>locality and distance derivation of a &#8220;locality distance ring&#8221; set of positions<\/li>\n<\/ul>\n<p> &#8230; again, combining the geodata talents of <a target=\"_blank\" title='Lawson, New South Wales information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Lawson,_New_South_Wales' rel=\"noopener\">Wikipedia<\/a> and a <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a>, we figure.<\/p>\n<p>And so a user accessing this functionality with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html------GETME\" title=\"missing_two.html\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html------GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link &#8230;<\/p>\n<ol>\n<li>user enters &#8220;From&#8221; Place Name via new textbox &#8230; eg. &#8220;Lawson, New South Wales&#8221;<\/li>\n<li>user enters &#8220;Distance&#8221; (eg. &#8220;5000.000&#8221; metres) and tabs out &#8230; we use the &#8220;onblur&#8221; event &#8230;<br \/>\n<code><br \/>\n<font color=green>var dok=true;<\/font><br \/>\n<br \/>\nfunction dfillablemaybe(brgo) {<br \/>\n     <font color=green>if (!dok) { return ''; }<\/font><br \/>\n     var i, ourbrg=0.0, ourdist=0.0, j, dvlat='', dvlong='';<br \/>\n  if (('' + brgo.value).replace(\/0\/g,'').replace('.','') != '') {<br \/>\n    \/\/alert('356:' + document.getElementById('dist').value);<br \/>\n    if (('' + document.getElementById('dist').value).replace(\/0\/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) {<br \/>\n    \/\/alert(456);<br \/>\n    if (('' + document.getElementById('latt').value).replace(\/0\/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) {<br \/>\n    \/\/alert(556);<br \/>\n    if (('' + document.getElementById('longt').value).replace(\/0\/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) {<br \/>\n    \/\/alert(656);<br \/>\n      if (('' + document.getElementById('ssf').innerHTML) != '') {<br \/>\n    \/\/alert(756);<br \/>\n        if (!viastart) {<br \/>\n        \/\/document.getElementById('brg').focus();<br \/>\n        document.getElementById('brg').value='0.0000001';<br \/>\n        \/\/brgo.focus();<br \/>\n        }<br \/>\n    if (mu.indexOf('[051.5072,') != -1) {<br \/>\n    \/\/alert(856);<br \/>\n        if (!viastart) {<br \/>\n        \/\/alert(1);<br \/>\n    document.getElementById('ifill').click();<br \/>\n        \/\/alert(11);<br \/>\n        }<br \/>\n    mu=mu.replace('[051.5072,','[' + eval('' + document.getElementById('latt').value).toFixed(3) + ',');<br \/>\n    mu=mu.replace(',-00.1275,',',' + eval('' + document.getElementById('longt').value).toFixed(3) + ',');<br \/>\n    if (('' + brgo.value).indexOf('000.000') != -1) {<br \/>\n    \/\/mu=mu.replace(encodeURIComponent('looking out North'), encodeURIComponent(('' + brgo.value).split('000.000')[0] + 'km Ring'));<br \/>\n    mu=mu.replace(',~LonDon~]',',~' + encodeURIComponent(fplacen + ' looking North') + '~]');<br \/>\n    mu=mu.replace('=London','=' + encodeURIComponent(fplacen + (' ' + brgo.value).split('000.000')[0] + 'km Ring'));<br \/>\n    } else {<br \/>\n    mu=mu.replace(',~LonDon~]',',~' + encodeURIComponent(fplacen + ' looking North') + '~]');<br \/>\n    mu=mu.replace('=London','=' + encodeURIComponent(fplacen + ' looking out North'));<br \/>\n    }<br \/>\n    \/\/mu=mu.replace(',~LonDon~]',',~' + encodeURIComponent(fplacen + ' looking North') + '~]');<br \/>\n    \/\/mu=mu.replace('=London','=' + encodeURIComponent(fplacen + ' looking out North'));<br \/>\n    \/\/alert('956:' + mu);<br \/>\n    \/\/document.getElementById('hplacen').innerHTML='&lt;input type=hidden name=fplacen value=\"' + mu + '\"&gt;&lt;\/input&gt;';<br \/>\n        \/\/document.getElementById('tdmid').innerHTML='&lt;iframe src=\"' + mu + '\" style=\"width:100%;height:700px;\"&gt;&lt;\/iframe&gt;';<br \/>\n        if (viastart) {<br \/>\n        for (var dbrg=30; dbrg&lt;=330; dbrg+=30) {<br \/>\n          \/\/document.getElementById('brg').value='' + dbrg + '.0000000';<br \/>\n<br \/>\n       if (('' + document.getElementById('mysel').value) == '2') {<br \/>\n       ourbrg=eval(eval(540.0 + 180.0 + eval('' + document.getElementById(eles[2]).value)) % 360.0);<br \/>\n       } else {<br \/>\n       ourbrg=eval('' + document.getElementById(eles[2]).value);<br \/>\n       }<br \/>\n       ourbrg=eval('' + dbrg);<br \/>\n       for (j=eval(3 - eval(('' + document.getElementById('mysel').value))); j&gt;=1; j--) {<br \/>\n       ourdist=eval('' + document.getElementById(eles[3]).value);<br \/>\n<br \/>\n    \/\/Let first point latitude be la1,<br \/>\n    \/\/\/longitude as lo1,<br \/>\n    \/\/d be distance,<br \/>\n    \/\/R as radius of Earth,<br \/>\n    \/\/Ad be the angular distance i.e d\/R and.<br \/>\n    \/\/\u03b8 be the bearing,<br \/>\n<br \/>\n    \/\/Here is the formula to find the second point, when first point, bearing and distance is known:<br \/>\n<br \/>\n    \/\/latitude of second point = la2 =  asin(sin la1 * cos Ad  + cos la1 * sin Ad * cos \u03b8), and<br \/>\n    \/\/longitude  of second point = lo2 = lo1 + atan2(sin \u03b8 * sin Ad * cos la1 , cos Ad \u2013 sin la1 * sin la2)<br \/>\n<br \/> <br \/>\n       dvlat='' +<br \/>\n       eval(eval(eval(180.0 \/ Math.PI) * Math.asin(<br \/>\n       Math.sin(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[0]).value)) *<br \/>\n       Math.cos(eval(eval('' + ourdist) \/ 6371000.0)) +<br \/>\n       Math.cos(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[0]).value)) *<br \/>\n       Math.sin(eval(eval('' + ourdist) \/ 6371000.0)) *<br \/>\n       Math.cos(eval(Math.PI \/ 180.0) * eval('' + ourbrg)))));<br \/>\n<br \/>\n\/\/Let first point latitude be la1,<br \/>\n\/\/longitude as lo1,<br \/>\n\/\/d be distance,<br \/>\n\/\/R as radius of Earth,<br \/>\n\/\/Ad be the angular distance i.e d\/R and<br \/>\n\/\/\u03b8 be the bearing,<br \/>\n\/\/ longitude  of second point = lo2 = lo1 + atan2(sin \u03b8 * sin Ad * cos la1 , cos Ad \u2013 sin la1 * sin la2)<br \/>\n<br \/>\n       dvlong='' + eval(eval(180.0 \/ Math.PI) * eval(eval(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[1]).value)) +<br \/>\n       Math.atan2(<br \/>\n       eval(eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval('' + ourbrg)) *<br \/>\n       eval('' + Math.sin(eval(eval('' + ourdist) \/ 6371000.0)))) *<br \/>\n       eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[0]).value)))),<br \/>\n       eval(eval('' + Math.cos(eval(eval('' + ourdist) \/ 6371000.0))) -<br \/>\n       eval(eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[0]).value)))) *<br \/>\n       eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval('' + document.getElementById(eles[4]).value)))))));<br \/>\n         mu+=',[' + eval('' + dvlat).toFixed(3) + ',' + eval('' + dvlong).toFixed(3) + ',~' + dbrg + '~]';<br \/>\n<br \/> <br \/>\n       }<br \/>\n<br \/>\n        }<br \/>\n        document.getElementById('tdmid').innerHTML='&lt;iframe src=\"' + mu + '\" style=\"width:100%;height:700px;\"&gt;&lt;\/iframe&gt;';<br \/>\n        fplacen='';<br \/>\n        }<br \/>\n    }<br \/>\n<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; logic of that occurrence to say it is this scenario and above &#8230; so &#8230;<\/li>\n<li>set bearing to value &#8220;0.0000001&#8221; (ie. start the locality distance ring looking North)<\/li>\n<li>we programmatically click the yellow &#8220;Fill&#8221; button<\/li>\n<li>a  <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> is displayed with both &#8230;\n<ul>\n<li>observer position &#8230; and this approximate calculated &#8230;<\/li>\n<li>locality distance ring set of positions at 30 degree intervals around the ring whose radius is the Distance value (in metres) entered by the user<\/li>\n<\/ul>\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-bearing-distance-missing-two-locality-distance-ring-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Locality Distance Ring Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmtpnht'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Place Name and Horizon Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-place-name-and-horizon-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Place Name and Horizon 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Place Name and Horizon Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_place_name_and_horizon.gif\" title=\"Earth Bearing Distance Missing Two Place Name and Horizon Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Place Name and Horizon Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Earth Bearing Distance Missing Two Place Name Tutorial' href='#ebdmtpnt'>Earth Bearing Distance Missing Two Place Name Tutorial<\/a> left off with &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-place-name-tutorial\/'><p>\nWe hope so, and there is another reason for this preparatory work that will be explained tomorrow.  Stay tuned!\n<\/p><\/blockquote>\n<p>Well, today&#8217;s &#8220;tomorrow&#8221;.  Let me ask first, did you read our <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/compass-ios-app-primer-tutorial\/' title='Compass iOS App Primer Tutorial' rel=\"noopener\">Compass iOS App Primer Tutorial<\/a>?  Well, the use of the Compass iOS (and am sure Android would have their own version of) mobile app fits into our scenario whereby &#8230;<\/p>\n<ul>\n<li>we had occasion to be looking at a long distance view into the distance down a road both &#8230;\n<ol>\n<li>during the day &#8230; and also seeing &#8230;<\/li>\n<li>lights at night<\/li>\n<\/ol>\n<p> &#8230; which set us <font size=2>(being of the &#8220;where are we&#8221; <\/font><font size=1>looking<\/font><font size=2> curious set)<\/font> wondering &#8230;\n<\/li>\n<li><b>where are we looking?<\/b><\/li>\n<li>whipping out the iPhone&#8217;s Compass app gave us all of &#8230;\n<ol>\n<li>bearing to distant view &#8230;<\/li>\n<li>elevation in metres &#8230; interesting &#8230;<\/li>\n<li>latitude, longitude of where we were (though we think we&#8217;ll get help from <a target=\"_blank\" title='Lawson, New South Wales information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Lawson,_New_South_Wales' rel=\"noopener\">Wikipedia<\/a> here, thanks)<\/li>\n<\/ol>\n<p> &#8230; meaning &#8230;\n<\/li>\n<li>we could offer the user of <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html-----GETME\" title=\"missing_two.html\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html-----GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link the chance to involve data items 1 and 2 above directly and 3 (via Wikipedia) &#8230; to have it that &#8230;\n<ol>\n<li>user enters &#8220;From&#8221; Place Name via new textbox (and add the Compass app elevation (in metres) as a semicolon separated data item) &#8230; eg. &#8220;Lawson, New South Wales;740&#8221;<\/li>\n<li>user enters &#8220;Bearing&#8221; (eg. &#8220;185&#8221; <font size=1>(off the Compass app)<\/font>) and tabs out &#8230; we use the &#8220;onblur&#8221; event &#8230;<br \/>\n<code><br \/>\n<font color=green>var dok=true;<\/font><br \/>\n<br \/>\nfunction fillablemaybe(brgo) {<br \/>\n  if (('' + brgo.value).replace(\/0\/g,'').replace('.','') != '') {<br \/>\n    \/\/alert('356:' + document.getElementById('dist').value);<br \/>\n    if (('' + document.getElementById('dist').value).replace(\/0\/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) {<br \/>\n    \/\/alert(456);<br \/>\n    if (('' + document.getElementById('latt').value).replace(\/0\/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) {<br \/>\n    \/\/alert(556);<br \/>\n    if (('' + document.getElementById('longt').value).replace(\/0\/g,'').replace('.','') == '' || (fplacen != '' && tplacen == '')) {<br \/>\n    \/\/alert(656);<br \/>\n      if (('' + document.getElementById('ssf').innerHTML) != '') {<br \/>\n    \/\/alert(756);<br \/>\n        if (!viastart) {<br \/>\n        <font color=green>dok=false;<\/font><br \/>\n        document.getElementById('dist').focus();<br \/>\n        if (1 == 1) { \/\/ assume 2m elevation ... thanks to https:\/\/en.wikipedia.org\/wiki\/Horizon<br \/>\n        document.getElementById('dist').value='' + Math.floor(Math.pow(eval(eval(2.0 * eval('' + elev)) * 6371000.0), 0.5)) + '.000';<br \/>\n        } else {<br \/>\n        document.getElementById('dist').value='5000.000';<br \/>\n        }<br \/>\n        elev=2.0;<br \/>\n        brgo.focus();<br \/>\n        }<br \/>\n    if (mu.indexOf('[051.5072,') != -1) {<br \/>\n    \/\/alert(856);<br \/>\n        if (!viastart) {<br \/>\n    document.getElementById('ifill').click();<br \/>\n        }<br \/>\n    mu=mu.replace('[051.5072,','[' + document.getElementById('latt').value + ',');<br \/>\n    mu=mu.replace(',-00.1275,',',' + document.getElementById('longt').value + ',');<br \/>\n    mu=mu.replace(',~LonDon~]',',~' + encodeURIComponent(fplacen + ' looking out at bearing ' + brgo.value + ' degrees towards horizon') + '~]');<br \/>\n    mu=mu.replace('=London','=' + encodeURIComponent(fplacen + ' looking out at bearing ' + brgo.value + ' degrees towards horizon'));<br \/>\n    \/\/alert('956:' + mu);<br \/>\n    \/\/document.getElementById('hplacen').innerHTML='&lt;input type=hidden name=fplacen value=\"' + mu + '\"&gt;&lt;\/input&gt;';<br \/>\n        document.getElementById('tdmid').innerHTML='&lt;iframe src=\"' + mu + '\" style=\"width:100%;height:700px;\"&gt;&lt;\/iframe&gt;';<br \/>\n        if (viastart) {<br \/>\n        fplacen='';<br \/>\n        }<br \/>\n    }<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; logic of that occurrence to say it is this scenario and above &#8230; so compute &#8230;<\/li>\n<li>the distance to horizon is computed via <a target=\"_blank\" title='Distance to horizon' href='https:\/\/en.wikipedia.org\/wiki\/Horizon' rel=\"noopener\"><b>square root of <\/b><i>two times elevation (in meters) times radius of earth (in meters)<\/i><\/a> &#8230; then &#8230;<\/li>\n<li>we programmatically click the yellow &#8220;Fill&#8221; button<\/li>\n<li>a  <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> is displayed with both &#8230;\n<ol>\n<li>observer position &#8230; and this approximate calculated &#8230;<\/li>\n<li>horizon position<\/li>\n<\/ol>\n<p> &#8230; to help you un-nut &#8220;<b>where are we looking?<\/b>&#8221; <font size=1>&#8230; we hope<\/font>\n<\/li>\n<\/ul>\n<p> &#8230; which you can see the gist of with today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_place_name_and_horizon.gif\" title=\"Tutorial picture\" rel=\"noopener\">animated GIF<\/a> presentation.<\/p>\n<p><p>Bit like <font size=1>relaxed<\/font> orienteering, would you say?!<\/p>\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-bearing-distance-missing-two-place-name-and-horizon-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Place Name and Horizon Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmtpnt'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Place Name Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-place-name-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Place Name 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Place Name Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_place_name.gif\" title=\"Earth Bearing Distance Missing Two Place Name Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Place Name Tutorial<\/p><\/div>\n<p>It&#8217;s often a good news story in I.T. when you can replace or supplement numbers with names <font size=1>(without being too nosy about it, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is!<\/a>)<\/font>   And so, extending the functionality of our &#8220;Missing Two&#8221; web application talked about, last, with <a title='Earth Bearing Distance Missing Two Trip Share Tutorial' href='#ebdmttst'>Earth Bearing Distance Missing Two Trip Share Tutorial<\/a> we allow the user to enter in Place Names as an alternative to entering in the Latitude and Longitude co-ordinates of that place&#8217;s position on the earth, especially apt for any web application purporting to be helpful regarding &#8220;trip&#8221; functionality.<\/p>\n<p>Being suckers for &#8220;the where of life&#8221; web applications out there, we&#8217;re tickled pink to be offering this <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=AZ2EPeq1TK0' rel=\"noopener\">&#8220;red zone&#8221; special<\/a> extension to functionality, and <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=SF3K-TIKSgM\" rel=\"noopener\">all because you asked for it<\/a> <font size=1>(well, that&#8217;s my story, and am sticking with it)<\/font>.<\/p>\n<p>As we went along coding for this change, and implications of this into the future, we realized we needed to allow for two more (GET argument) data items to be catered for, the codelines below responsible for &#8220;reading them in&#8221; &#8230;<\/p>\n<p><code><br \/>\n  var fplacen=location.search.split('fplacen=')[1] ? (' ' + decodeURIComponent(location.search.split('fplacen=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : '';<br \/>\n  var tplacen=location.search.split('tplacen=')[1] ? (' ' + decodeURIComponent(location.search.split('tplacen=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : '';<br \/>\n<\/code><\/p>\n<p> &#8230; and <font color=blue>allowed for within the (static) HTML&#8217;s form element<\/font>&#8216;s HTML as per &#8230;<\/p>\n<p><code><br \/>\n&lt;h1 id=myh1 style='display:block;'&gt;Missing Two <font color=blue>(&lt;font size=1&gt;optional&lt;\/font&gt; &lt;span id=spfr&gt;from&lt;\/span&gt; &lt;input onblur='<\/font><font color=purple>lkwk(this);<\/font><\/font color=blue>' style='display:inline-block;' placeholder='Place Name' id=ipn value='' type=text&gt;&lt;\/input&gt;) <\/font>in a Table Column &lt;span data-onfocus=\"document.getElementById('semail').innerHTML='';\" data-title='Email to (append a space to just show the table cell with the gradient)?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=emailit(''); id=semail title=Email&gt;&amp;#128231;&lt;\/span&gt;&nbsp;&lt;span data-onfocus=\"document.getElementById('semail').innerHTML='';\" data-title='SMS to?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=toize(''); id=ssms title=SMS&gt;&amp;#128223;&lt;\/span&gt;&lt;\/h1&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and &#8230;<\/p>\n<p><code><br \/>\n&lt;tr id=trhead style='display:table-row;'&gt;&lt;th style='width:30%;text-align:left;background-color:#f0e0d0;'&gt;&lt;a title='Show nearest TimeZone places' id=afrom onclick=mapit(this); style='cursor:pointer;text-decoration:underline;'&gt;From&lt;\/a&gt;<font color=blue>&lt;span id=ssf&gt;&lt;\/span&gt;><\/font>&nbsp;&lt;div id=dfrom style='display:none;'&gt;&lt;\/div&gt;&lt;\/th&gt;&lt;th style='width:30%;text-align:left;background-color:#e0d0f0;'&gt; ... On The Way ...&lt;\/th&gt;&lt;th style='text-align:left;background-color:#d0f0e0;'&gt;&lt;a title='Show nearest TimeZone places' id=ato onclick=mapit(this); style='cursor:pointer;text-decoration:underline;'&gt;To&lt;\/a&gt;<font color=blue>&lt;span id=sst&gt;&lt;\/span&gt;<\/font>&nbsp;&lt;div id=dto style='display:none;'&gt;&lt;\/div&gt;&lt;\/th&gt;&lt;\/tr&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and populated via supportive &#8220;onload&#8221; event based <font color=blue>Javascript DOM<\/font> &#8220;<a target=\"_blank\" title='Wikipedia, thanks' href='https:\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a> <font size=1>(thanks)<\/font> based&#8221; logic as per &#8230;<\/p>\n<p><code><br \/>\n   if (fplacen != '') {<br \/>\n   document.getElementById('ssf').innerHTML=fplacen;<br \/>\n   fplacen='';<br \/>\n   }<br \/>\n   if (tplacen != '') {<br \/>\n   document.getElementById('sst').innerHTML=tplacen;<br \/>\n   tplacen='';<br \/>\n   }<br \/>\n<\/code><\/p>\n<p> &#8230; as the incoming code paradigm, living with the outgoing paradigm&#8217;s work based on that &#8220;<font color=purple>lkwk(this);<\/font>&#8221; Javascript function &#8230;<\/p>\n<p><code><br \/>\nvar gllentry='';<br \/>\n<br \/>\nfunction askit() {<br \/>\n  \/\/alert(gllentry);<br \/>\n  if (gllentry.indexOf(',') != -1) {<br \/>\n  if (gllonesuffix == 'f') {<br \/>\n    <font color=brown>document.getElementById('latf').focus();<\/font><br \/>\n    document.getElementById('latf').value=gllentry.split(',')[0];<br \/>\n    <font color=brown>document.getElementById('longf').focus();<\/font><br \/>\n    document.getElementById('longf').value=gllentry.split(',')[1];<br \/>\n    <font color=brown>document.getElementById('latf').focus();<\/font><br \/>\n    gllonesuffix = 't';<br \/>\n    document.getElementById('spfr').innerHTML=document.getElementById('spfr').innerHTML.replace('from','to&lt;input type=hidden name=fplacen value=\"' + gllentry.split(',')[2].replace(\/\\;\/g,',') + '\"&gt;&lt;\/input&gt;');<br \/>\n    document.getElementById('ssf').innerHTML=' ' + gllentry.split(',')[2].replace(\/\\;\/g,',');<br \/>\n  } else {<br \/>\n    <font color=brown>document.getElementById('brg').focus();<br \/>\n    document.getElementById('dist').focus();<br \/>\n    document.getElementById('latt').focus();<\/font><br \/>\n    document.getElementById('latt').value=gllentry.split(',')[0];<br \/>\n    <font color=brown>document.getElementById('longt').focus();<\/font><br \/>\n    document.getElementById('longt').value=gllentry.split(',')[1];<br \/>\n    <font color=brown>document.getElementById('latt').focus();<\/font><br \/>\n    gllonesuffix = 'f';<br \/>\n    document.getElementById('spfr').innerHTML=document.getElementById('spfr').innerHTML.replace('to','from&lt;input type=hidden name=tplacen value=\"' + gllentry.split(',')[2].replace(\/\\;\/g,',') + '\"&gt;&lt;\/input&gt;');<br \/>\n    document.getElementById('sst').innerHTML=' ' + gllentry.split(',')[2].replace(\/\\;\/g,',');<br \/>\n  }<br \/>\n  document.getElementById('ipn').placeholder=gllentry.split(',')[2].replace(\/\\;\/g,',');<br \/>\n  }<br \/>\n  gllentry='';<br \/>\n  document.getElementById('placegeo').value='';<br \/>\n}<br \/>\n<br \/>\nfunction lookforg() {<br \/>\n       if (document.getElementById('placegeo').value != '') {<br \/>\n         gllentry=document.getElementById('placegeo').value + ',' + decodeURIComponent(document.getElementById('ifplacegeo').src.split('?placegeo=')[1]).replace(\/\\,\/g,';');<br \/>\n         askit();<br \/>\n       } else {<br \/>\n         setTimeout(lookforg,1000);<br \/>\n       }<br \/>\n}<br \/>\n<br \/>\n<font color=olive>function checkit(iois) {<br \/>\n  if (iois != null) {<br \/>\n    if (iois.src.indexOf('?placegeo=') != -1) {<br \/>\n    \/\/alert(1);<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    \/\/alert(11);<br \/>\n    if (aconto != null) {<br \/>\n    \/\/alert(111);<br \/>\n     if (aconto.document) { aconto = aconto.document; }<br \/>\n    \/\/alert(1111);<br \/>\n     if (aconto.body != null) {<br \/>\n    \/\/alert(2);<br \/>\n       document.body.style.cursor='pointer';<br \/>\n       if (document.getElementById('placegeo').value != '') {<br \/>\n    \/\/alert(3);<br \/>\n         gllentry=document.getElementById('placegeo').value + ',' + decodeURIComponent(iois.src.split('?placegeo=')[1]).replace(\/\\,\/g,';');<br \/>\n         askit();<br \/>\n       } else {<br \/>\n    \/\/alert(8);<br \/>\n         setTimeout(lookforg,1000);<br \/>\n       }<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n}<\/font><br \/>\n<br \/>\n<font color=purple>function lkwk(oiis) {<br \/>\n  if (oiis.value.trim() != '') {<br \/>\n    document.getElementById('ifplacegeo').src=document.getElementById('ifplacegeo').src.split('?')[0].split('#')[0] + '?placegeo=' + encodeURIComponent(oiis.value);<br \/>\n    oiis.value='';<br \/>\n    document.body.style.cursor='progress';<br \/>\n  }<\/font><br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; supporting the relevant (new static) HTML &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe onload='<font color=olive>checkit(this);<\/font>' style='display:none;' id=ifplacegeo src='..\/PHP\/fgc\/index.php'&gt;&lt;\/iframe&gt;<br \/>\n&lt;input type=hidden id=placegeo value=''&gt;&lt;\/input&gt;<br \/>\n<\/code><\/p>\n<p>Believe it or not, with this web application, it is important what input type=text textboxes are &#8220;visited&#8221;, and up until today, we had no concerns with that &#8220;ordering&#8221; issue <font size=1>very much<\/font>, because we only coded for &#8220;real user&#8221; interactive input, but today&#8217;s place name functionality modifications mean that we feel we need to programmatically force the order somewhat <font size=1>in these place name entry scenarios<\/font>, but we were not sure whether our non-mobile only (and slightly kludgy feeling) <font color=brown>[input type=text element].focus();<\/font> interventions would\/could work.  But they did, happily<font size=1>, at least for non-mobile platforms<\/font>!  This means input type=text element &#8220;onblur&#8221; events <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_place_name.gif\" title=\"Tutorial picture\" rel=\"noopener\">must have been triggered<\/a>, we figure, which is an interesting finding <font size=2>(well, you had to be there<\/font><font size=1>, didn&#8217;t you?!<\/font><font size=2>)<\/font><\/p>\n<p>Perhaps, then, <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html----GETME\" title=\"missing_two.html\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html----GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link will spark your interest?  We hope so, and there is another reason for this preparatory work that will be explained tomorrow.  Stay tuned!<\/p>\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-bearing-distance-missing-two-place-name-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Place Name Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmttst'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Trip Share Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-trip-share-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Share 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Trip Share Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_email_sms.jpg\" title=\"Earth Bearing Distance Missing Two Trip Share Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Trip Share Tutorial<\/p><\/div>\n<p>When <a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29' rel=\"noopener\">Ajax<\/a> came on the scene, HTML form navigation got that bit daggier.  But as time has gone on, we&#8217;ve started appreciating those more traditional HTML form navigation methodologies more for a few major reasons &#8230;<\/p>\n<ol>\n<li>the FormData in the <a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29' rel=\"noopener\">Ajax<\/a>\/<a target=\"_blank\" title='FormData object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData' rel=\"noopener\">FormData<\/a> combination of navigational methodologies simulates static HTML form element functionality<\/li>\n<li>we&#8217;ve grown to really admire &#8220;Inline HTML Email&#8221; sharing via PHP mail to the email and back again out to the &#8220;www&#8221; wooooorrrrrlllllddd via an &#8220;Inline HTML Email Form&#8221; (as widens the scope of use for today&#8217;s web application)<\/li>\n<li>we&#8217;ve grown to really admire a static HTML form element&#8217;s &#8220;onsubmit&#8221; event to massage an HTML form element&#8217;s content on the way through to accepting the &#8220;action&#8221; form navigational destination, or reject that<\/li>\n<li>we&#8217;ve grown to really admire the concept of multiple submit button elements without or with an associated name attribute to be able to detect which submit button was clicked\/touched<\/li>\n<\/ol>\n<p> &#8230; and it seems to me there are now in the web application wooooorrrrrllllddd a plethora of navigational functionality choices for programmers out there.   Yayyyyy!<\/p>\n<p>And so, onto <a title='Earth Bearing Distance Missing Two Trip Tutorial' href='#ebdmttt'>Earth Bearing Distance Missing Two Trip Tutorial<\/a> today we add two sharing conduit &#8230;<\/p>\n<ul>\n<li>email<\/li>\n<li>SMS<\/li>\n<\/ul>\n<p> &#8230; means of functionality which call on &#8230;<\/p>\n<p><code><br \/>\nfunction preemailit(ine) {<br \/>\n  if (ine.indexOf('@') != -1) {<br \/>\n    emailit(ine);<br \/>\n  } else if (ine != '') {<br \/>\n    toize(ine);<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction dummyencodeURIComponent(invl) {<br \/>\n  return invl;<br \/>\n}<br \/>\n<br \/>\nfunction emailit(defe) {<br \/>\n  \/\/document.getElementById('ih').value=document.getElementById('tdlook').innerHTML.replace(\/\\&lt;br\\&gt;\/g,String.fromCharCode(10));<br \/>\n  var lastfis='youllneverfindthis';<br \/>\n  var lasttis='';<br \/>\n  var lasteis='youllneverfindthis';<br \/>\n  var lastenow='';<br \/>\n  var lastsis='youllneverfindthis';<br \/>\n  var lastsnow='';<br \/>\n  var lasteis2='youllneverfindthis';<br \/>\n  var lastenow2='';<br \/>\n  var lastsis2='youllneverfindthis';<br \/>\n  var lastsnow2='';<br \/>\n  var em='';<br \/>\n  var suffbits='?latf=' + encodeURIComponent(document.getElementById('latf').value) + '&longf=' + encodeURIComponent(document.getElementById('longf').value) + '&latt=' + encodeURIComponent(document.getElementById('latt').value) + '&longt=' + encodeURIComponent(document.getElementById('longt').value) + '&brg=' + encodeURIComponent(document.getElementById('brg').value) + '&dist=' + encodeURIComponent(document.getElementById('dist').value);<br \/>\n  if (defe.indexOf('@') != -1) {<br \/>\n  em=defe<br \/>\n  } else {<br \/>\n  em=prompt('Email to? (all uppercase uses client email else sends an Inline HTML Email Form)', '');<br \/>\n  }<br \/>\n  if (em == null) { em=''; }<br \/>\n  if (em.indexOf('@') != -1) {<br \/>\n   \/\/document.getElementById('from').value=em;<br \/>\n   if (document.URL.toLowerCase().indexOf('rjmprogramming.com.au') != -1 && em != em.toUpperCase()) {<br \/>\n   var xzhr = new XMLHttpRequest();<br \/>\n   var xform=new FormData();<br \/>\n   xform.append('inline','');<br \/>\n   xform.append('to',em.trim());<br \/>\n   var flatf=document.getElementById('latf').outerHTML;<br \/>\n   var flongf=document.getElementById('longf').outerHTML;<br \/>\n   var flatt=document.getElementById('latt').outerHTML;<br \/>\n   var flongt=document.getElementById('longt').outerHTML;<br \/>\n   var fbrg=document.getElementById('brg').outerHTML;<br \/>\n   var fdist=document.getElementById('dist').outerHTML;<br \/>\n   var tlatf='&lt;input type=text name=latf id=latf value=\"' + document.getElementById('latf').value + '\"&gt;&lt;\/input&gt;';<br \/>\n   var tlongf='&lt;input type=text name=longf id=longf value=\"' + document.getElementById('longf').value + '\"&gt;&lt;\/input&gt;';<br \/>\n   var tlatt='&lt;input type=text name=latt id=latt value=\"' + document.getElementById('latt').value + '\"&gt;&lt;\/input&gt;';<br \/>\n   var tlongt='&lt;input type=text name=longt id=longt value=\"' + document.getElementById('longt').value + '\"&gt;&lt;\/input&gt;';<br \/>\n   var tbrg='&lt;input type=text name=brg id=brg value=\"' + document.getElementById('brg').value + '\"&gt;&lt;\/input&gt;';<br \/>\n   var tdist='&lt;input type=text name=dist id=dist value=\"' + document.getElementById('dist').value + '\"&gt;&lt;\/input&gt;';<br \/>\n   \/\/if (from.indexOf('@') != -1) {  xform.append('cc',from.trim());  }<br \/>\n   console.log('tdfrom');<br \/>\n   faux=true;<br \/>\n   mapit(document.getElementById('tdfrom'));<br \/>\n   console.log(document.getElementById('afrom').href);<br \/>\n   console.log('tdto');<br \/>\n   faux=true;<br \/>\n   mapit(document.getElementById('tdto'));<br \/>\n   console.log(document.getElementById('ato').href);<br \/>\n   if (document.body.innerHTML.indexOf('&lt;tr id=\"trfoot\"') != -1) {<br \/>\n     lastfis='&lt;tr id=\"trfoot\"' + document.body.innerHTML.split('&lt;tr id=\"trfoot\"')[1].split('&lt;\/tr&gt;')[0] + '&lt;\/tr&gt;';<br \/>\n     if (document.getElementById('asms').href.indexOf('sms:') != -1) {<br \/>\n       lasteis='&lt;span ';<br \/>\n       lastenow='&lt;a target=_blank href=\"mailto:?subject=' + dummyencodeURIComponent(encodeURIComponent('Missing%20Two')) + '&body=' + dummyencodeURIComponent(encodeURIComponent(document.getElementById('asms').href.split('&body=')[1])) + '\" ';<br \/>\n       lasteis2='&lt;\/span&gt;';<br \/>\n       lastenow2='&lt;\/a&gt;';<br \/>\n       lastsis='&lt;span ';<br \/>\n       lastsnow='&lt;a target=_blank href=\"' + document.getElementById('asms').href.split('&')[0] + '&body=' + dummyencodeURIComponent(encodeURIComponent(document.getElementById('asms').href.split('&body=')[1])) + '\" ';<br \/>\n       lastsis2='&lt;\/span&gt;';<br \/>\n       lastsnow2='&lt;\/a&gt;';<br \/>\n     } else if (document.getElementById('asms').href.indexOf('mailto:') != -1) {<br \/>\n       lastsis='&lt;span ';<br \/>\n       lastsis=document.getElementById('ssms').outerHTML.split('&gt;')[0] + '&gt;';<br \/>\n       lastsnow='&lt;a target=_blank href=\"sms:&body=' + dummyencodeURIComponent(encodeURIComponent(document.getElementById('asms').href.split('&body=')[1])) + '\" ';<br \/>\n       lastsnow='&lt;input type=submit title=SMS name=sms id=ssms value=\"';<br \/>\n       lastsis2='&lt;\/span&gt;';<br \/>\n       lastsnow2='&lt;\/a&gt;';<br \/>\n       lastsnow2='\"&gt;&lt;\/input&gt;';<br \/>\n       lasteis='&lt;span ';<br \/>\n       lastenow='&lt;a target=_blank href=\"mailto:' + em.trim() + '?subject=' + dummyencodeURIComponent(encodeURIComponent('Missing%20Two')) + '&body=' + dummyencodeURIComponent(encodeURIComponent(document.getElementById('asms').href.split('&body=')[1])) + '\" ';<br \/>\n       lasteis2='&lt;\/span&gt;';<br \/>\n       lastenow2='&lt;\/a&gt;';<br \/>\n     }<br \/>\n   }<br \/>\n   if (em.trim() != em) {<br \/>\n   xform.append('subj','Missing Two');<br \/>\n   \/\/var cbgtd=document.getElementById('tdlook').getBoundingClientRect();<br \/>\n   xform.append('body','&lt;body&gt;' + document.body.innerHTML.replace(\/\\ id\\=\\\"mysel\\\"\/g, ' name=\"mysel\" id=\"mysel\"').replace(\/\\ size\\=\\\"3\\\"\/g, ' size=\"4\"').replace(\/\\ data\\-href\\=\/g, ' target=_blank href=').replace('&lt;\/form&gt;', '&lt;br&gt;&lt;br&gt;&lt;input style=background-color:lightgreen; type=submit value=Solve&gt;&lt;\/input&gt;&lt;\/form&gt;').replace('DISPLAY:table-row','DISPLAY:none').replace(lastfis,lasttis).replace(lasteis,lastenow).replace(lasteis2,lastenow2).replace(lastsis,lastsnow).replace(lastsis2,lastsnow2).replace('absolute;','absolute;display:none;').replace(flatf,tlatf).replace(flongf,tlongf).replace(flatt,tlatt).replace(flongt,tlongt).replace(fbrg,tbrg).replace(fdist,tdist) + '&lt;\/body&gt;');<br \/>\n   } else {<br \/>\n   xform.append('subj','Missing Two');<br \/>\n   xform.append('body','&lt;body&gt;' + document.body.innerHTML.replace(\/\\ id\\=\\\"mysel\\\"\/g, ' name=\"mysel\" id=\"mysel\"').replace(\/\\ size\\=\\\"3\\\"\/g, ' size=\"4\"').replace(\/\\ data\\-href\\=\/g, ' target=_blank href=').replace('&lt;\/form&gt;', '&lt;br&gt;&lt;br&gt;&lt;input style=background-color:lightgreen; type=submit value=Solve&gt;&lt;\/input&gt;&lt;\/form&gt;').replace('DISPLAY:table-row','DISPLAY:none').replace(lastfis,lasttis).replace(lasteis,lastenow).replace(lasteis2,lastenow2).replace(lastsis,lastsnow).replace(lastsis2,lastsnow2).replace('absolute;','absolute;display:none;').replace(flatf,tlatf).replace(flongf,tlongf).replace(flatt,tlatt).replace(flongt,tlongt).replace(fbrg,tbrg).replace(fdist,tdist) + '&lt;\/body&gt;');<br \/>\n   }<br \/>\n   xzhr.open('post','\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php',true);<br \/>\n   xzhr.send(xform);<br \/>\n   } else {<br \/>\n    document.getElementById('asms').href='mailto:' + em.trim() + '?subject=' + encodeURIComponent('Missing Two') + '&body=' + encodeURIComponent(document.URL.split('#')[0].split('?')[0] + suffbits); \/\/ + '?missingtwo=' + encodeURIComponent(encodeURIComponent(document.getElementById('dfix').innerHTML.replace('background: ','').replace('background:','').replace(');',')').replace(';',''))));<br \/>\n    document.getElementById('asms').click();<br \/>\n   }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html---GETME\" title=\"missing_two.html\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html---GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link.<\/p>\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-bearing-distance-missing-two-trip-share-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip Share Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ebdmttt'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Trip Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-trip-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Trip 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Trip Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_more.jpg\" title=\"Earth Bearing Distance Missing Two Trip Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Trip Tutorial<\/p><\/div>\n<p>If we were to nominate an &#8220;onions of the 4th dimension&#8221; improvement on top of the work of <a title='Earth Bearing Distance Missing Two Context Tutorial' href='#ebdmtct'>Earth Bearing Distance Missing Two Context Tutorial<\/a> we&#8217;d nominate &#8230; <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA' rel=\"noopener\">anyone, anyone<\/a> &#8230; yes, <a target=\"_blank\" title='?' href='https:\/\/www.google.com\/search?client=firefox-b-ab&#038;q=The+Kraken' rel=\"noopener\">tenticle 5 of<\/a> The <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/playlist?list=PLYvHvDRWKWYwBQ01DRmedhUaddg2EmGFh' rel=\"noopener\">Kraken<\/a> &#8230; we&#8217;d want to allow our &#8220;Missing Two Geographical places via Bearing and Distance&#8221; web application be turned into a trip planner by allowing for multiple legs, perhaps of a trip, to be &#8220;represented&#8221; by our new incarnation of the web application.  As per usual, with extensions of functionality, here, it is optional, and manifested by &#8230; <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA' rel=\"noopener\">anyone, anyone<\/a> &#8230; yes, <a target=\"_blank\" title='?' href='https:\/\/www.google.com\/search?client=firefox-b-ab&#038;q=The+Kraken' rel=\"noopener\">tenticle 9 3\/4 of<\/a> The <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/playlist?list=PLYvHvDRWKWYwBQ01DRmedhUaddg2EmGFh' rel=\"noopener\">Kraken<\/a> &#8230; turning a hardcoded piece of (webpage) text into an HTML element with action logic behind it &#8230; our TAHPOWTIAHEWALBI moment, you could say?!<\/p>\n<p>Seriously though, it is rare that a sizeable trip happens as a one leg with the one bearing and distance component, so we turn our old web application into a &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='Recursion information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Recursion_(computer_science)' rel=\"noopener\">recursive<\/a> &#8230;<\/li>\n<li>parent\/child (webpage\/<a target=\"_blank\" title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp' rel=\"noopener\">iframe<\/a>) relationship &#8230;<\/li>\n<li><a target=\"_blank\" title='Linked list information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Linked_list' rel=\"noopener\">linked list<\/a> (trip) legs<\/li>\n<\/ul>\n<p> &#8230; type of web application, in order to do that other thing we like to do, and that is to have the one (in this case just HTML\/Javascript\/CSS) codeset handle both simple and (optional) complex usage functionalities.<\/p>\n<p>How do we differentiate a &#8220;top.document&#8221; parent from an (HTML) iframe (element) child?  We use &#8230;<\/p>\n<ul>\n<li>address bar URL ? and &amp; argument (?latf=[previousToLatitude]&#038;longf=[previousToLongitude]) usage (and analysis) via &#8230; <b>checked for via<\/b> &#8230; <\/li>\n<li>&lt;body <b>onload=&#8217;moremaybe();&#8217;<\/b>&gt;<\/li>\n<li>\n<code><br \/>\n  function moremaybe() {<br \/>\n   var latto=location.search.split('latf=')[1] ? decodeURIComponent(location.search.split('latf=')[1].split('&')[0]) : '';<br \/>\n   var longto=location.search.split('longf=')[1] ? decodeURIComponent(location.search.split('longf=')[1].split('&')[0]) : '';<br \/>\n   if (latto != '' && longto != '') {<br \/>\n    nextplease();<br \/>\n    top.document.getElementById('goagain').style.display='block';<br \/>\n    document.getElementById('latf').value=latto;<br \/>\n    document.getElementById('latf').style.backgroundColor=\"pink\";<br \/>\n    cwhat[0]=false;<br \/>\n    cwhat[1]=false;<br \/>\n    if (!decided) {<br \/>\n     if (!cwhat[5]) {<br \/>\n      cwhat[5]=true;<br \/>\n     }<br \/>\n     if (!cwhat[4]) {<br \/>\n      cwhat[4]=true;<br \/>\n     }<br \/>\n     decided=true;<br \/>\n    }<br \/>\n    top.document.getElementById(\"ltf\").value=latto;<br \/>\n    document.getElementById('longf').value=longto;<br \/>\n    document.getElementById('longf').style.backgroundColor=\"pink\";<br \/>\n    cwhat[0]=false;<br \/>\n    cwhat[1]=false;<br \/>\n    if (!decided) {<br \/>\n     if (!cwhat[5]) {<br \/>\n      cwhat[5]=true;<br \/>\n     }<br \/>\n     if (!cwhat[4]) {<br \/>\n      cwhat[4]=true;<br \/>\n     }<br \/>\n     decided=true;<br \/>\n    }<br \/>\n    top.document.getElementById(\"lgf\").value=longto;<br \/>\n    document.getElementById('dtop').style.display='none';<br \/>\n    document.getElementById('trhead').style.display='none';<br \/>\n    document.getElementById('trfoot').style.display='none';<br \/>\n    document.getElementById('myt').border=0;<br \/>\n    var recti=parent.document.getElementById('niframe').getBoundingClientRect();<br \/>\n    parent.document.getElementById('niframe').height=eval(200 + eval(('' + recti.height).replace('px',''))) + 'px';<br \/>\n    if (parent.document.getElementById('niframe') != top.document.getElementById('niframe')) {<br \/>\n     var trecti=top.document.getElementById('niframe').getBoundingClientRect();<br \/>\n     top.document.getElementById('niframe').height=eval(200 + eval(('' + trecti.height).replace('px',''))) + 'px';<br \/>\n    }<br \/>\n    setTimeout(checkfill, 500);<br \/>\n    parent.document.getElementById(\"slong\").innerHTML=\":\";<br \/>\n    parent.document.getElementById(\"slong\").title=\"\";<br \/>\n    parent.document.getElementById(\"slong\").style.textDecoration=\"none\";<br \/>\n    \/\/top.document.title+=' started ';<br \/>\n   }<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; where you can see that &#8220;top.document&#8221; (top) parent is just that &#8230; top.document &#8230; and that a parent of an (HTML) iframe (element) trip leg is referred to via &#8230; parent.document &#8230; and what is being done in the here and now of a simple scenario (just in the (top) parent) or a complex (non (top) parent leg) &#8230; document &#8230; references come into play.  That <i>parent.document.getElementById(&#8220;slong&#8221;)<\/i> refers to the dynamically changed method of adding legs, by turning the &#8230;<\/p>\n<ul>\n<li>hardcoded &#8220;:&#8221; (text) of the To longitude textbox labelling &#8230; into a clickable and onclick event working &#8230;<\/li>\n<li>\n<code><br \/>\n       document.getElementById('slong').style.cursor='pointer';<br \/>\n       document.getElementById('slong').style.textDecoration='underline';<br \/>\n       document.getElementById('slong').title='Click for another leg of a trip, perhaps?';<br \/>\n       document.getElementById('slong').innerHTML='+';<br \/>\n<\/code><br \/>\n &#8230; optionally used, and dynamic extension to functionality &#8230; our &#8220;onions of the 4th dimension&#8221; moment &#8230; <a target=\"_blank\" title='?' href='https:\/\/www.google.com\/search?client=firefox-b-ab&#038;ei=dbwxXKG2Ic3chwPR8qOABA&#038;q=onion+colon+cleanse&#038;oq=%22onion%22+%22colon&#038;gs_l=psy-ab.1.1.0j0i30l2j0i10i30j0i5i30j0i7i5i30l2j0i7i5i10i30j0i8i30l2.38982.43813..51405...0.0..0.360.912.2-2j1......0....1..gws-wiz.......0i71.W6G77Ge43nA' rel=\"noopener\">who said we don&#8217;t care about your health here<\/a>?!\n<\/li>\n<\/ul>\n<p> &#8230; so that <i>top.document.getElementById(&#8216;niframe&#8217;)<\/i> is the representation of that &#8220;top.document&#8221; parent&#8217;s first (HTML) iframe (element) child.<\/p>\n<p>Why ask that previous question?  To have the one codebase service all the scenarios, we need (the code) to know &#8220;where it is at&#8221;, so to speak.<\/p>\n<p><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html--GETME\" title=\"missing_two.html\" rel=\"noopener\">The changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html--GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link can have you planning your own &#8220;where of life&#8221; trip itinerary of interest yourself.<\/p>\n<hr>\n<p id='ebdmtct'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Context Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-context-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two Context 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Context Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two_context.jpg\" title=\"Earth Bearing Distance Missing Two Context Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Context Tutorial<\/p><\/div>\n<p>Mapping and navigational apps wouldn&#8217;t be as popular as they are without &#8230;<\/p>\n<ul>\n<li>satellite based geodata available to our mobile and laptop (and cars etcetera) devices and their software &#8230; and &#8230;<\/li>\n<li>the human urge to want to know where they are<\/li>\n<\/ul>\n<p> &#8230; and so to leave yesterday&#8217;s <a title='Earth Bearing Distance Missing Two Primer Tutorial' href='#ebdmtpt'>Earth Bearing Distance Missing Two Primer Tutorial<\/a> &#8220;proof of concept&#8221; web application the way it was, not showing much context to the latitude and longitude form &#8220;asks&#8221; would be a missed opportunity.<\/p>\n<p>In this sense, we&#8217;ve decided to interface this web application to &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php------------GETME\" title=\"tz_places.php\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php------------GETME\" title=\"tz_places.php\" rel=\"noopener\">tz_places.php<\/a>&#8216;s talents (last talked about with <a target=\"_blank\" title='Other Side of the World Google Chart Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-google-chart-tutorial\/' rel=\"noopener\">Other Side of the World Google Chart Tutorial<\/a>) with PHP <a target=\"_blank\" title='DateTimeZone class' href='http:\/\/php.net\/manual\/en\/class.datetimezone.php' rel=\"noopener\">TimeZone<\/a> places and deriving the nearest ones given a latitude and longitude geographical input<\/li>\n<li>and to our interface to the <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts' rel=\"noopener\">Geo Chart<\/a> showing places on the Earth relative to a world map<\/li>\n<\/ul>\n<p> &#8230; to give <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html-GETME\" title=\"missing_two.html\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html-GETME\" title=\"missing_two.html\" rel=\"noopener\">missing_two.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link that optional map (or visual) extra context.  This is accessible off links applied to the previously hardcoded &#8220;From&#8221; and &#8220;To&#8221; table headers.  Please feel free to give it a go to see what we mean.<\/p>\n<hr>\n<p id='ebdmtpt'>Previous relevant <a target=\"_blank\" title='Earth Bearing Distance Missing Two Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-primer-tutorial\/' rel=\"noopener\">Earth Bearing Distance Missing Two 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\/missing_two.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Earth Bearing Distance Missing Two Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.jpg\" title=\"Earth Bearing Distance Missing Two Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Earth Bearing Distance Missing Two Primer Tutorial<\/p><\/div>\n<p>Get in a conversation with a Land Surveyor, and drop in your sentence, close to each other, the words &#8220;bearing&#8221; and &#8220;distance&#8221; and in all likelihood you&#8217;ll get a smile.  Is it a curved smile?  Maybe, they are interested in the geodesic aspects to these two terms.  You see, the rules of Euclidean geometry are all fine and good and used by Land Surveyors for small distances involving local mapping or small area mapping, where the curvature of the Earth is not really a factor.  In fact, in the early days of Land Surveying, the plotting of an area might have been done using a table resting on a tripod, which hopefully made that table level (all good terrestrial surveying wants you to be perpendicular to the imaginary plumb bob hanging from your instrument, and hanging down in accordance with gravity&#8217;s laws).  Geodesic interest for Land Surveyors tries to take into account the curvature of the Earth, which we&#8217;ll assume for today, is a sphere, though in reality it takes on a spheroidal shape that is not quite a sphere.<\/p>\n<p>Polar co-ordinate designations are an alternative &#8220;view&#8221; to placing yourself, as distinct from grid co-ordinates, or geographical latitude and longitude.<\/p>\n<p>We talked about some of what we have written a proof of concept web application for today with the <a title='PHP Google Map Chart Bearing Distance Tutorial' href='#phpgmcbdt'>PHP Google Map Chart Bearing Distance Tutorial<\/a> some time back, and revisited its excellent &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/php-google-map-chart-bearing-distance-tutorial\/'><p>\n<a target=\"_blank\" title='Very useful lnk' href='http:\/\/www.igismap.com\/formula-to-find-bearing-or-heading-angle-between-two-points-latitude-longitude\/' rel=\"noopener\">very useful link that talks about the Haversine distance formula, as well<\/a>\n<\/p><\/blockquote>\n<p> &#8230; and rereading this excellent webpage, realized that two sets of formulae there (plus the great circle distance calculations before) could help us piece together a useful navigational web application that, out of &#8230;<\/p>\n<table border=20>\n<tr>\n<th>From Latitude, Longitude<\/th>\n<th>Bearing, Distance<\/th>\n<th>To Latitude, Longitude<\/th>\n<\/tr>\n<\/table>\n<p> &#8230; we could get the user to fill out 2 of 3 columns of information above, and calculate the missing one for them.<\/p>\n<p>How is this useful?  Well, sometimes you want to know &#8230;<\/p>\n<ul>\n<li>We are at X.  We are crow flying to Y.  In which direction do we set out?  How far is it?<\/li>\n<li>We are at X.  That looks like a nice direction to head, so what compass reading is that?  If I go however far, where do I end up?<\/li>\n<\/ul>\n<p>Second one for those dreamers and adventurers (or perhaps, orienteerers) methinks.  Anyway, feel free to try the HTML and Javascript <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" rel=\"noopener\"><\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.html\" rel=\"noopener\">live run<\/a> link, or down below &#8230;<\/p>\n<p><iframe style='width:100%;height:800px;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/missing_two.htm'><\/iframe><\/p>\n<hr>\n<p id='phpgmcbdt'>Previous relevant <a target=\"_blank\" title='PHP Google Map Chart Bearing Distance Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-google-map-chart-bearing-distance-tutorial\/' rel=\"noopener\">PHP Google Map Chart Bearing Distance Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Google Map Chart Bearing Distance Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map_bearing.jpg\" title=\"PHP Google Map Chart Bearing Distance Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Google Map Chart Bearing Distance Tutorial<\/p><\/div>\n<p>There have been three recent things going on, for us, involving software integration of our interface to the great <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> &#8230;<\/p>\n<ul>\n<li>the work of <a title='PHP Wikipedia Australian List Integration Tutorial' href='#phpwalit'>PHP Wikipedia Australian List Integration Tutorial<\/a> adding <i>select<\/i> (ie. Google Charts &#8220;onclick&#8221;) event <i>Nearest TimeZone=Z<\/i> and <i>YouTube=Y<\/i> functionalities &#8230; and also &#8230;<\/li>\n<li>ongoing changes readying web applications that can work in an iOS <a target=\"_blank\" href='https:\/\/developer.apple.com\/documentation\/webkit\/wkwebview' title='WKWebView information from Apple' rel=\"noopener\">WKWebView<\/a> we started talking about at <a target=\"_blank\" title='Conditional Alternative to Javascript Popup Windows in iOS Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/conditional-alternative-to-javascript-popup-windows-in-ios-tutorial\/' rel=\"noopener\">Conditional Alternative to Javascript Popup Windows in iOS Tutorial<\/a> and which we shall return to &#8230; and then today&#8217;s new functionality to &#8230;<\/li>\n<li>add new <i>select<\/i> (ie. Google Charts &#8220;onclick&#8221;) event functionality to show a <i>Bearing (degrees) and Distance (kilometres) and To<\/i> table of information relative to a clicked <i>From<\/i> place<\/li>\n<\/ul>\n<p>As a worker with a background in Land Surveying, of course, the words &#8220;bearing&#8221; and &#8220;distance&#8221; were part of the &#8220;bread and butter&#8221; of this job.  The modern day equipment can, at the observer&#8217;s tripod, and given the chainperson&#8217;s placement of equipment, deal with both of these &#8220;measures&#8221; at once, but you can still use the old theodolites and distance measuring chains if you like.  You take your measurements and use calculations like those underlying the workings of the web application of <a target=\"_blank\" title='HTML and Javascript and CSS Survey Traverse Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-tutorial\/' rel=\"noopener\">HTML and Javascript and CSS Survey Traverse Tutorial<\/a> which are all fine and dandy if the distances are relatively small, because we can think &#8220;planar geometry&#8221; as we mostly learn at school.  But if the measurements involve long enough distances, you need to take into account that Earth is, basically, round <font size=1>&#8230; meanwhile, on the phone &#8230;. <\/p>\n<blockquote><p>You don&#8217;t say.  You don&#8217;t say.  You don&#8217;t say.<\/p><\/blockquote>\n<p><\/font> &#8230; <\/p>\n<details>\n<summary>&#8220;What&#8217;d they say?&#8221; &#8230; <\/summary>\n<blockquote><p>They didn&#8217;t say.<\/p><\/blockquote>\n<\/details>\n<p>When distances are this large we need to turn towards &#8220;geodesic calculations&#8221; and today &#8230;<\/p>\n<ul>\n<li>with our calculation of &#8220;bearings&#8221; between two sets of latitude and longitude we turned to this <a target=\"_blank\" title='Very useful lnk' href='http:\/\/www.igismap.com\/formula-to-find-bearing-or-heading-angle-between-two-points-latitude-longitude\/' rel=\"noopener\">very useful link that talks about the Haversine distance formula, as well<\/a>, thanks &#8230; and to help make the table of information more approachable we called on &#8230;<\/li>\n<li>half hour time of day clock emojis we used for <a target=\"_blank\" title='TimeZone Country Places Emoji Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/timezone-country-places-emoji-tutorial\/' rel=\"noopener\">TimeZone Country Places Emoji Tutorial<\/a> &#8230; and &#8230;<\/li>\n<li>used the cursor techniques we talked about at <a target=\"_blank\" title='HTML\/Javascript Guided Snake Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-guided-snake-game-primer-tutorial\/' rel=\"noopener\">HTML\/Javascript Guided Snake Game Primer Tutorial<\/a><\/li>\n<\/ul>\n<p>Here are some &#8220;live runs&#8221; &#8230;<\/p>\n<ul>\n<li>make your own Google Chart <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" title=\"Make your own\" rel=\"noopener\">Map Chart<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php?title=Places&#038;onclick=y&#038;brgplace=2&#038;label=['Lat',&#038;value='Lon',%20'Name']&#038;data=,%20[39.099912,-94.581213,~Kansas%20City~]%20,%20[38.627089,-90.200203,~St%20Louis~]\" rel=\"noopener\">left hand side<\/a> of tutorial picture here<\/li>\n<li>\n<details>\n<summary><a target=\"_blank\" title='By The Time I Get To ...' href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php?title=By%20The%20Time%20I%20Get%20To%20...&#038;onclick=y&#038;brgplace=1&#038;brgmode=trip&#038;label=['Lat',&#038;value='Lon',%20'Name']&#038;lines=y&#038;data=,%20[34.0522,-118.2437,~Los%20Angeles~]%20,%20[33.44833,-112.07334,~Phoenix|America\/Phoenix|-7|2017\/10\/14\/01:40~]%20,%20[35.0853,-106.6056,~Albuquerque~]%20,%20[35.0078,-97.0929,~Oklahoma~]\" rel=\"noopener\">By The Time I Get To &#8230;<\/a> can be seen below &#8230;<br \/>\n<\/summary>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/vflqJOp_0Wk\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\n<iframe style='width:100%;height:800px;' src=\"\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php?title=By%20The%20Time%20I%20Get%20To%20...&#038;onclick=y&#038;brgplace=1&#038;brgmode=trip&#038;label=['Lat',&#038;value='Lon',%20'Name']&#038;lines=y&#038;data=,%20[34.0522,-118.2437,~Los%20Angeles~]%20,%20[33.44833,-112.07334,~Phoenix|America\/Phoenix|-7|2017\/10\/14\/01:40~]%20,%20[35.0853,-106.6056,~Albuquerque~]%20,%20[35.0078,-97.0929,~Oklahoma~]\" title='By The Time I Get To ...'><\/iframe><br \/>\n<\/details>\n<\/li>\n<\/ul>\n<p> &#8230; and here&#8217;s the changed PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php-------------------GETME\" title=\"map.php\" rel=\"noopener\">map.php<\/a> changed in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php-------------------GETME\" rel=\"noopener\">this way<\/a>.<\/p>\n<hr>\n<p id='phpwalit'>Previous relevant <a target=\"_blank\" title='PHP Wikipedia Australian List Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-wikipedia-australian-list-integration-tutorial\/' rel=\"noopener\">PHP Wikipedia Australian List Integration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Wikipedia Australian List Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_things_more.jpg\" title=\"PHP Wikipedia Australian List Integration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Wikipedia Australian List Integration Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='PHP Wikipedia Australian List Makeover Tutorial' href='#phpwalmt'>PHP Wikipedia Australian List Makeover Tutorial<\/a> got us thinking more about &#8220;where <font size=1>of life<\/font>&#8221; functionality integration possibilities.<\/p>\n<p>For us, with many &#8220;where <font size=1>of life<\/font>&#8221; web applications, the <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> is a core part of the functionality, as the receptacle, and more and more often as time goes on, also a launching pad out to other concepts, such as &#8230;<\/p>\n<ul>\n<li>TimeZone &#8230; and &#8230;<\/li>\n<li>Weather<\/li>\n<\/ul>\n<p> &#8230; two of the concepts hovering about our &#8220;Other Side of the World&#8221; web application we last talked about with <a target=\"_blank\" title='Other Side of the World Google Chart Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-google-chart-tutorial\/' rel=\"noopener\">Other Side of the World Google Chart Tutorial<\/a>, whose supervisory HTML <a target=\"_blank\" title='other_side_of_the_world.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html---------GETME' rel=\"noopener\">other_side_of_the_world.htm<\/a>&#8216;s <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm' title='Click picture' rel=\"noopener\">live run<\/a>, changed in <a target=\"_blank\" title='other_side_of_the_world.htm' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html---------GETME' rel=\"noopener\">this way<\/a> to tweak the the linking of &#8230;<\/p>\n<ul>\n<li>latitude and longitude and (anywhere) <i>placename<\/i> &#8230; to &#8230;<\/li>\n<li>TimeZone place(s) &#8230; and then (with great help from <a target=\"_blank\" title='Weather Underground' href='http:\/\/www.wunderground.com' rel=\"noopener\">Weather Underground<\/a> (thanks)) onto &#8230;<\/li>\n<li>direct or nearby weather predictions<\/li>\n<\/ul>\n<p> &#8230; coming off a new <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Chart<\/a> and its <a target=\"_blank\" title='Google Charts select event help ... from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/events?hl=en' rel=\"noopener\"><i>select<\/i> event<\/a> <b>menu option<\/b> &#8230;<\/p>\n<ul>\n<li><b>Nearest TimeZone=Z (and onto Other Side of the World and Weather)<\/b><\/li>\n<li>YouTube=Y (looking for <i>placename<\/i>)<\/li>\n<\/ul>\n<p> &#8230; the latter integrating us with <a target=\"_blank\" title='YouTube' href='http:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">API for Iframe embedded videos<\/a> interface HTML\/Javascript &#8220;parent&#8221; web application called <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title='karaoke_youtube_api.htm' rel=\"noopener\">karaoke_youtube_api.htm<\/a> HTML iframe elements in another direction additional to yesterday&#8217;s usage.  Along the way, we tweak the <i>Google Map=G<\/i> menu option, adding more map type options and zooming in a little less by default, and with the <i>Nearby Airports=A<\/i> option making the default be a search for 3 (rather than 4) nearby airports.  A lot of this all happens because of the <b>changes to<\/b> &#8230;<\/p>\n<ul>\n<li><b><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php------------------GETME\" title=\"map.php\" rel=\"noopener\">map.php<\/a>&#8216;s <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> interface&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" title=\"map.php\" rel=\"noopener\">live run<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php------------------GETME\" title=\"map.php\" rel=\"noopener\">this way<\/a>)<\/b><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" title=\"Click picture\" rel=\"noopener\">Australian Lighthouses<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php-----GETME\" title=\"Click picture\" rel=\"noopener\">australian_lighthouses.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php-----GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php\" title=\"Click picture\" rel=\"noopener\">Australian Waterfalls<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php-----GETME\" title=\"Click picture\" rel=\"noopener\">australian_waterfalls.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php-----GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php\" title=\"Click picture\" rel=\"noopener\">Australian Dams<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php-----GETME\" title=\"Click picture\" rel=\"noopener\">australian_dams.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php-----GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_ports.php\" title=\"Click picture\" rel=\"noopener\">Australian Ports<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_ports.php-----GETME\" title=\"Click picture\" rel=\"noopener\">australian_ports.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_ports.php-----GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_parks.php\" title=\"Click picture\" rel=\"noopener\">Australian National Parks<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_parks.php-----GETME\" title=\"Click picture\" rel=\"noopener\">australian_parks.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_parks.php-----GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<\/ul>\n<p> &#8230; which all got changed to allow for an &#8220;Animate&#8221; feature, allowing for an automated right to left &#8220;animation&#8221; (via hashtagging) of the <a target=\"_blank\" title='Wikipedia' href='http:\/\/www.wikipedia.com' rel=\"noopener\">Wikipedia<\/a> based slides near the top of this suite of web application&#8217;s webpages.  We hope you get to try all this out for yourself.<\/p>\n<hr>\n<p id='phpwalmt'>Previous relevant <a target=\"_blank\" title='PHP Wikipedia Australian List Makeover Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-wikipedia-australian-list-makeover-tutorial\/' rel=\"noopener\">PHP Wikipedia Australian List Makeover Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Wikipedia Australian List Makeover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_things.jpg\" title=\"PHP Wikipedia Australian List Makeover Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Wikipedia Australian List Makeover Tutorial<\/p><\/div>\n<p>Some time back we linked a <a target=\"_blank\" title='Wikipedia' href='http:\/\/www.wikipedia.com' rel=\"noopener\">Wikipedia<\/a> &#8220;list&#8221; webpage to the <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> functionality with <a title='PHP Modularization for Lighthouses in Australia Tutorial' href='#phpmlat'>PHP Modularization for Lighthouses in Australia Tutorial<\/a>.<\/p>\n<p>We&#8217;re revisiting, and finding some &#8220;peer&#8221; web applications, linked by a dropdown, that all &#8230;<\/p>\n<ul>\n<li>access a relevant Wikipedia &#8220;list&#8221; webpage for Australian &#8220;things&#8221; and mentioning latitude and longitude &#8230; which link to &#8230;<\/li>\n<li>Google Charts Map Chart<\/li>\n<\/ul>\n<p> &#8230; for all of &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" title=\"Click picture\" rel=\"noopener\">Australian Lighthouses<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php\" title=\"Click picture\" rel=\"noopener\">Australian Waterfalls<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php\" title=\"Click picture\" rel=\"noopener\">Australian Dams<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_ports.php\" title=\"Click picture\" rel=\"noopener\">Australian Ports<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_parks.php\" title=\"Click picture\" rel=\"noopener\">Australian National Parks<\/a><\/li>\n<\/ul>\n<p>We were inspired to take on this &#8220;makeover&#8221; of &#8220;where <font size=1>of life<\/font>&#8221; functionalities because earlier on today we discovered a stupendous online resource for Australian geography enthusiasts, the <a target=\"_blank\" title='Bonzle Digital Atlas of Australia' href='http:\/\/www.bonzle.com' rel=\"noopener\">Bonzle Digital Atlas of Australia<\/a>, with incredibly detailed and flexible search mechanisms, thanks heaps!<\/p>\n<p>We&#8217;ve decided to include extra buttons (to those already linking to <a target=\"_blank\" title='Google Maps' href='http:\/\/maps.google.com' rel=\"noopener\">Google Maps<\/a> links and to the relevant <a target=\"_blank\" title='Wikipedia' href='http:\/\/www.wikipedia.com' rel=\"noopener\">Wikipedia<\/a> webpage) for that suite of web applications above for &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='Bonzle Digital Atlas of Australia' href='http:\/\/www.bonzle.com' rel=\"noopener\">Bonzle Digital Atlas of Australia<\/a><\/li>\n<li><a target=\"_blank\" title='Australian government website' href='http:\/\/www.australia.gov.au\/' rel=\"noopener\">Australian government website<\/a> (sometimes)<\/li>\n<li><a target=\"_blank\" title='YouTube' href='http:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">API for Iframe embedded videos<\/a> interface HTML\/Javascript &#8220;parent&#8221; web application called <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title='karaoke_youtube_api.htm' rel=\"noopener\">karaoke_youtube_api.htm<\/a> HTML iframe elements<\/li>\n<\/ul>\n<p>Great for research and &#8220;surfing the Australian world&#8221;!  Lose yourself!<\/p>\n<p>What happened Javascript (<a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.js-GETME\" title=\"australian_lighthouses.js\" rel=\"noopener\">australian_lighthouses.js<\/a> changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.js-GETME\" title=\"australian_lighthouses.js\" rel=\"noopener\">this way<\/a>) and PHP wise?<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php----GETME\" title=\"Click picture\" rel=\"noopener\">australian_lighthouses.php<\/a> (changed <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php----GETME\" title=\"Click picture\" rel=\"noopener\">this way<\/a>)<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_waterfalls.php----GETME\" title=\"Click picture\" rel=\"noopener\">australian-waterfalls.php<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_dams.php----GETME\" title=\"Click picture\" rel=\"noopener\">australian_dams.php<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_ports.php----GETME\" title=\"Click picture\" rel=\"noopener\">australian_ports.php<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_parks.php----GETME\" title=\"Click picture\" rel=\"noopener\">australian_parks.php<\/a><\/li>\n<\/ul>\n<hr>\n<p id='phpmlat'>Previous relevant <a target=\"_blank\" title='PHP Modularization for Lighthouses in Australia Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-modularization-for-lighthouses-in-australia-tutorial\/' rel=\"noopener\">PHP Modularization for Lighthouses in Australia Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP Modularization for Lighthouses in Australia Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.gif\" title=\"PHP Modularization for Lighthouses in Australia Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP Modularization for Lighthouses in Australia Tutorial<\/p><\/div>\n<p>Today we want to try two more things &#8230;<\/p>\n<ol>\n<li>continuing on with our PHP code (you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php--GETME\" title='australian_lighthouses.php' rel=\"noopener\">australian_lighthouses.php<\/a>) for our Australian Lighthouses project<\/li>\n<li>talk about PHP glob and its modularization sensibilities<\/li>\n<\/ol>\n<p> &#8230; so let&#8217;s talk about the second one first &#8230; it&#8217;s south of north &#8230; <font size=0>chortle, chortle.<\/font><\/p>\n<p>What does PHP&#8217;s <a target=\"_blank\" title='PHP glob method information' href='http:\/\/php.net\/manual\/en\/function.glob.php' rel=\"noopener\">glob<\/a> do?  It is doing functionality like the &#8220;underworkings&#8221; of any browse button you would see would do when you have a hard disk (in your life) &#8230; unfortunately, this is no longer a given (with mobile technology and the &#8220;cloud&#8221; challenging this thinking, sometimes).  Give glob a file specification and a directory to start with, and it will happily (if you were both &#8220;globular&#8221; <i>and<\/i> &#8220;modular&#8221; you would be, too) provide you with a list of filenames, so that we use it to construct this PHP function for use with our lighthouses web application &#8230;<\/p>\n<p><code><br \/>\n function selcreate($def) {<br \/>\n   $ret=$def;<br \/>\n   $selstr='&lt;select onchange=\" window.location=this.value; \"&gt;&lt;option value=\"' . str_replace(\" \", \"_\", strtolower($def)) . '_lighthouses.php\"&gt;' . $def . '&lt;\/option&gt;';<br \/>\n   $cnt=0;<br \/>\n   foreach (glob(\"*_lighthouses.php\") as $filename) {<br \/>\n    if (strpos(($filename . \"*\"), (str_replace(\" \", \"_\", strtolower($def)) . '_lighthouses.php*')) === false) {<br \/>\n     $cnt++;<br \/>\n     $newidea=str_replace(\"_\", \" \", str_replace(\"_lighthouses.php\", \"\", strtolower($filename)));<br \/>\n     $newideas=explode(\" \", $newidea);<br \/>\n     $ideas=strtoupper(substr($newideas[0],0,1)) . strtolower(substr($newideas[0],1));<br \/>\n     for ($ii=1; $ii&lt;sizeof($newideas); $ii++) {<br \/>\n       $ideas.=(\" \" . strtoupper(substr($newideas[$ii],0,1)) . strtolower(substr($newideas[$ii],1)));<br \/>\n     }<br \/>\n     $selstr.='&lt;option value=\"' . $filename . '\"&gt;' . $ideas . '&lt;\/option&gt;';<br \/>\n    }<br \/>\n   }<br \/>\n   if ($cnt &gt; 0) return $selstr . \"&lt;\/select&gt;\";<br \/>\n   return $ret;<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; and hope you can see that glob could be used for PHP code to self-detect sibling variation programs, so that, for instance, if we &#8220;plonked&#8221; (ie. eg. (s)ftp it) an egypt_lighthouses.php (probably with an egypt_lighthouses.js accompanying Javascript file) into the same directory as our &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php--GETME\" title='australian_lighthouses.php' rel=\"noopener\">australian_lighthouses.php<\/a> (changed from yesterday as per <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php--GETME\" title='australian_lighthouses.php' rel=\"noopener\">this link<\/a>) (uses <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.js_GETME\" title='australian_lighthouses.js_GETME' rel=\"noopener\">australian_lighthouses.js<\/a>) to arrive at a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" title=\"Live Run\" rel=\"noopener\">live run<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/new_zealand_lighthouses.php_GETME\" title='new_zealand_lighthouses.php' rel=\"noopener\">new_zealand_lighthouses.php<\/a> (uses <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/new_zealand_lighthouses.js_GETME\" title='new_zealand_lighthouses.js_GETME' rel=\"noopener\">new_zealand_lighthouses.js<\/a>) to arrive at a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/new_zealand_lighthouses.php\" title=\"Live Run\" rel=\"noopener\">live run<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ireland_lighthouses.php_GETME\" title='ireland_lighthouses.php' rel=\"noopener\">ireland_lighthouses.php<\/a> (uses <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ireland_lighthouses.js_GETME\" title='ireland_lighthouses.js_GETME' rel=\"noopener\">ireland_lighthouses.js<\/a>) to arrive at a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ireland_lighthouses.php\" title=\"Live Run\" rel=\"noopener\">live run<\/a><\/li>\n<\/ul>\n<p> &#8230; it would automatically be added into the functionality of its siblings without you having to change any code of those siblings &#8230; and that egypt_lighthouses.php is free to be a web application with a totally different method of functionality &#8230; cute, huh?!<\/p>\n<p>As a matter of fact ireland_lighthouses.php is quite different, and if you examine the code, you will see that the <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-putelement(s)by-via-php-relative-urls-tutorial\/' title='Javascript putElement(s)By via PHP Relative URLs Tutorial' rel=\"noopener\">Javascript putElement(s)By via PHP Relative URLs Tutorial<\/a> is more apt to a discussion of its workings.<\/p>\n<p>You see, there are so many many different ways to &#8220;skin a cat&#8221; in Information Technology, quite often &#8230; not always &#8230; but &#8220;quite often&#8221; &#8230; and why be cornered into thinking there is only one way to do things?<\/p>\n<p>The other thing you&#8217;ll find is that even though ireland_lighthouses.php differs a lot to its nearest matching sibling (in terms of methodology), new_zealand_lighthouses.php the Javascript corresponding codesets called ireland_lighthouses.js and new_zealand_lighthouses.js are only superficially different &#8230; in other words our PHP coalesces concepts into a similar &#8220;client&#8221; look &#8230; a &#8220;modularization&#8221; of sorts &#8230; not everybody&#8217;s sort, but a sort none the less &#8230; and this begs a question?<\/p>\n<p>Why is &#8220;modularization&#8221; a good thing?  Well, to me, you don&#8217;t have to have any &#8220;modularization&#8221; going on at all, and this is fine by me, but you must deal with issues that allow you to modify many many codesets efficiently and accurately in vastly different ways to be efficient, or be &#8220;modular&#8221; and be able to, perhaps, even, automate your changes, because of these &#8220;modular&#8221; patterns you&#8217;ve created &#8230; many people find &#8220;modularization&#8221; blissful &#8230; and often it suits the work patterns for teams of programmers.  Perhaps you want to read about <a target-_blank title='MVC inforamtion from Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/Model\u2013view\u2013controller'>MVC<\/a> (and its like) as a coding modularization idea for PHP (or many other programming languages, for that matter).<\/p>\n<hr>\n<p id='pjaliat'>Previous releveant <a target=\"_blank\" title='PHP\/Javascript Asynchronous Lighthouses in Australia Tutorial' rel=\"noopener\">PHP\/Javascript Asynchronous Lighthouses in Australia Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP\/Javascript Asynchronous Lighthouses in Australia Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.jpg\" title=\"PHP\/Javascript Asynchronous Lighthouses in Australia Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript Asynchronous Lighthouses in Australia Tutorial<\/p><\/div>\n<p>Today we want to try two things &#8230;<\/p>\n<ol>\n<li>continuing on with our PHP code (you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php-GETME\" title='australian_lighthouses.php' rel=\"noopener\">australian_lighthouses.php<\/a>) for our Australian Lighthouses project<\/li>\n<li>talk about Javascript asynchronous script tag option<\/li>\n<\/ol>\n<p> &#8230; so let&#8217;s talk about the second one first &#8230; it&#8217;s south &#8230; chortle, chortle.<\/p>\n<p>Why should you be interested in the HTML&#8217;s <a target=\"_blank\" title='HTML script tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_script.asp' rel=\"noopener\">script<\/a> tag attributes &#8230;<\/p>\n<ul>\n<li>asynch=&#8221;asynch&#8221;<\/li>\n<li>defer=&#8221;defer&#8221;<\/li>\n<\/ul>\n<p>?  Well, we want our web pages to load as fast as possible.  Yaaaaaa?!  So if there was the mechanism to do more than one bit of ((client) Javascript) thinking at a time would you avail yourself of the opportunity &#8230; or would you pick what&#8217;s behind door 3?<\/p>\n<p>Do you want to hear more on this theory wise?  It seems to me, there are web application mission critical parts, and there are embellishments, quite often &#8230; &#8220;nice to haves&#8221; but not &#8220;mission critical&#8221; &#8230; well, if those &#8220;nice to haves&#8221; could be arranged not to hog all the web application designated CPU that would be good, wouldn&#8217;t it?!   Yaaaaaaaaaaa?!<\/p>\n<p>So, that, in theory, is <strike>y<\/strike> why.<\/p>\n<p>Now back to the project at hand &#8230; Australian Lighthouses &#8230; don&#8217;t you think some geographical sorting options and place name sorting options might be useful?   Yaaaaaaaaaaaaaaaaa?!  But for us it doesn&#8217;t feel mission critical &#8230; so we &#8230;<\/p>\n<ul>\n<li>place the logic in some external Javascript called <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.js_GETME\" title='australian_lighthouses.js' rel=\"noopener\">australian_lighthouses.js<\/a><\/li>\n<li>we load it from the PHP via<br \/>\n&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;australian_lighthouses.js&#8221; async=&#8221;async&#8221;&gt;&lt;\/script&gt;<br \/>\n<\/code><br \/>\n &#8230; and this amounts to the only change to today&#8217;s PHP code from yesterday as per <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php-GETME\" title='australian_lighthouses.php' rel=\"noopener\">this link<\/a><\/li>\n<\/ul>\n<p>&#8230; and this becomes a way to modularize your thinking regarding a project &#8230; please don&#8217;t think there are not a myriad of other ways &#8230; this is just one idea here.<\/p>\n<p>With regard to how we approached our external Javascript we did not demand anything (much) of our parent PHP and this may not be the fastest way to approach this.  What we mean by that is that, perhaps, as a general rule, external Javascript can perform faster with the parent PHP or HTML leaving it with a lot more HTML element id=&#8221;[elementId]&#8221; to hang its hats on, so to speak &#8230; instead, here, we acted innocently with our Javascript and used lots of calls to the Javascript DOM method <a target=\"_blank\" title='Javascript DOM getElementsByTagName() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_getelementsbytagname.asp' rel=\"noopener\">getElementsByTagName()<\/a> (which results in an array return value).  Perhaps calls to <a target=\"_blank\" title='Javascript DOM getElementsByTagName() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_getelementbytagid.asp' rel=\"noopener\">getElementById()<\/a> via (parent) arranged id=&#8221;[elementId]&#8221; would be faster?!  Today, as with the previous <a target=\"_blank\" title='Static HTML Javascript Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/static-html-javascript-primer-tutorial\/' rel=\"noopener\">Static HTML Javascript Primer Tutorial<\/a> we concentrated on the &#8220;modular&#8221; feel to additional external Javascript code ideas.<\/p>\n<p>So try a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" title='Click picture' rel=\"noopener\">live run<\/a> to see what we mean.<\/p>\n<hr>\n<p id='pliapt'>Previous relevant <a target=\"_blank\" title='PHP Lighthouses in Australia Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-lighthouses-in-australia-primer-tutorial\/' rel=\"noopener\">PHP Lighthouses in Australia 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\/PHP\/australian_lighthouses.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP Lighthouses in Australia Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_loghthouses-64of.jpg\" title=\"PHP Lighthouses in Australia Primer Tutorial\" id='alhi' onmouseover=\" this.src=this.src.replace('-62of.j','-63of.xj').replace('-63of.j','-64of.xj').replace('-64of.j','-65of.xj').replace('-65of.j','-62of.xj').replace('.xj','.j');    \" \/><\/a><p class=\"wp-caption-text\">PHP Lighthouses in Australia Primer Tutorial<\/p><\/div>\n<p>Today we examine some of the methodology behind a project idea.<\/p>\n<p>Projects need &#8230;<\/p>\n<ul>\n<li>an idea &#8230; ours came from listening to the radio and hearing about Lighthouses, and how the technologies had changed what they look like and how they function these days &#8230; to quote <a target=\"_blank\" title='list of lighthouse positions' href='https:\/\/en.wikipedia.org\/wiki\/List_of_lighthouses_and_lightvessels_in_Australia' rel=\"noopener\">Wikipedia<\/a> with respect to Australian Lighthouses (thanks) &#8230;<br \/>\n<blockquote><p>\nThe first lighthouse was Macquarie Lighthouse, which was lit in 1793 as a tripod mounted wood and coal fired beacon. The last manned lighthouse was Maatsuyker Island Lighthouse, off the south coast of Tasmania, which was automated in 1996.\n<\/p><\/blockquote>\n<\/li>\n<li>a means to access information &#8230; much easier these days with the search engines &#8230; we went with a Google Search as per <a target=\"_blank\" title='list of lighthouse positions' href='https:\/\/www.google.com.au\/search?q=list+of+lighthouse+positions&#038;ie=utf-8&#038;oe=utf-8&#038;gws_rd=cr&#038;ei=e7OXVf2zHNH88QWBnaeACg' rel=\"noopener\">list of lighthouse positions<\/a> &#8230; which led to &#8230;<\/li>\n<li>the information source(s) &#8230; we settled, and were not surprised about the source, for Wikipedia&#8217;s <a target=\"_blank\" title='List of lighthouses and lightvessels in Australia - Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/List_of_lighthouses_and_lightvessels_in_Australia' rel=\"noopener\">List of lighthouses and lightvessels in Australia &#8211; Wikipedia<\/a> &#8230; then, once happy about the quality of the source information, analyzed &#8230;<\/li>\n<li>the source data format &#8230; initially, at least, via View-&gt;Page Source, relative to the webpage &#8230; to get ideas for how to parse the data &#8230; so that we can determine a &#8230;<\/li>\n<li>programming language of choice &#8230; which is PHP &#8230; no surprise here &#8230; will need a server-side language &#8230; and a method like PHP&#8217;s <a target=\"_blank\" title='PHP file_get_contents() method' href='http:\/\/php.net\/manual\/en\/function.file-get-contents.php' rel=\"noopener\">file_get_contents()<\/a> &#8230; from there &#8230;<\/li>\n<li>PHP coding to parse the data and put it into another format that value adds &#8230; otherwise why do it, as the Wikipedia information is fine as is &#8230; that is where we determine that we should &#8230;<\/li>\n<li>include an iframe that uses the Google Chart Map Chart to add that extra overall positional view of Lighthouses &#8230; a definite asset to the reader&#8217;s understanding of the subject &#8230; definitely a &#8220;where&#8221; web application &#8230; and in doing this we notice that &#8230;<\/li>\n<li>Google Chart Map Chart <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php---GETME' title='Download me' rel=\"noopener\">map.php<\/a> web application needed to be able to handle much larger input data streams than it could in its previous incarnation of only allowing PHP $_GET[] parameters &#8230; so we change it to allow $_POST[] parameters &#8230; maybe you noticed this with yesterday&#8217;s <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial' href='#pjhgcmot' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial<\/a> as shown below &#8230; as this meant that &#8230;<\/li>\n<li>we need an HTML form that POSTs to the iframe with the Google Chart Map Chart map.php web application allowable because we are on the same domain with this thinking &#8230; and using an HTML textarea element to store the huge string of Lighthouse data that will be passed across via urldecode($_POST[&#8216;data&#8217;]) at map.php &#8230; using PHP&#8217;s <a target=\"_blank\" title='PHP urldecode() method information' href='http:\/\/php.net\/manual\/en\/function.urldecode.php' rel=\"noopener\">urldecode()<\/a> and <a target=\"_blank\" title='PHP urlencode() method information' href='http:\/\/php.net\/manual\/en\/function.urlencode.php' rel=\"noopener\">urlencode()<\/a> methods and Javascript&#8217;s <a target=\"_blank\" title='Javascript decodeURIComponent() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_decodeuricomponent.asp' rel=\"noopener\">decodeURIComponent()<\/a> method &#8230; as well as utilizing &#8230;<\/li>\n<li>Google Chart Map Chart map.php web application <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial' href='#pjhgcmot' rel=\"noopener\">onclick<\/a> and <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Tooltip Tutorial' href='#pjhgcmtt' rel=\"noopener\">tooltip<\/a> functionality we&#8217;ve been working on lately &#8230; hence the talk about this below &#8230; working out what (component) tools could do with a &#8220;makeover&#8221; is an extremely important part of any project and can be a useful compartmentalizing of the project<\/li>\n<\/ul>\n<p> &#8230; and so we end up with our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php\" title='click picture' rel=\"noopener\">live run<\/a> behind which is the PHP programming source code you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australian_lighthouses.php_GETME\" title='australian_lighthouses.php' rel=\"noopener\">australian_lighthouses.php<\/a> for your perusal.<\/p>\n<hr>\n<p id='pjhgcmot'>Previous relevant <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-google-chart-map-onclick-tutorial\/' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map_onclick.jpg\" title=\"PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript\/HTML Google Chart Map Onclick Tutorial<\/p><\/div>\n<p>They say &#8220;the knee bone&#8217;s connected to the thigh bone&#8221; then they say &#8220;the thigh bone&#8217;s connected to the &#8230; hip bone&#8221; then they say &#8220;let&#8217;s call the whole thing off&#8221; &#8230; sometimes.<\/p>\n<p>Today we say &#8220;the onmouseover event is connected to the onclick event&#8221; then we say &#8220;the onclick event is connected to the online woooooorld&#8221; &#8230; &#8220;do &#8230; the hokey pokey&#8221; x3 &#8230; &#8220;that&#8217;s what the onclick event preceeded by the onmouseover event within the environs you are encountering &#8230; is all about&#8221;.<\/p>\n<p>That news is pretty good actually, because it means mobile users are not missing out on much not having easy access to any onmouseover (ie. hover) functionality &#8230; they&#8217;ll still reach any onclick logic you present them, in the default case of events where onclick is a valid &#8220;touch&#8221; event as well.<\/p>\n<p>So the data structure of arrangements to allow for this onclick functionality is intrinsically the same as allowed for yesterday with the <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial' href='#pjhgcmtt' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial<\/a> as shown below, but we just check for some more delimitation issue matters, and our updated prompting window logic gets quite &#8220;blurby&#8221; as per the Javascript (via PHP)  &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\n echo \" datalinesuffix = prompt('Enter decimal Latitude,Longitude ' + thisline + extra +  ' (for no more hit Cancel button and append with ' + '\\\\n\\\\n' + ',\\\"A tooltip and clicking link for Google Map of &lt;a target=_blank href=https:\/\/www.google.com.au\/maps\/place\/' + encodeURIComponent(dlp2) + '&gt;' + dlp2 + '&lt;\/a&gt;\\\" ' + '\\\\n\\\\n' + ' or maybe perhaps ' + '\\\\n\\\\n' + ',\\\"A tooltip and clicking link for Google Map based on latitude and longitude of &lt;a target=_blank href=https:\/\/maps.google.com.au\/maps?' + encodeURIComponent('z=15&t=m&q=loc:') + '{latitude}{longitude}&gt;' + dlp2 + '&lt;\/a&gt;\\\"' + '\\\\n\\\\n' + ' optionally (as (just) two examples of what is possible with HTML included (activates with onclick bit not onmouseover))', thisdef); \" . \"\\n\";<br \/>\n echo ' if (datalinesuffix != null) { if (datalinesuffix.indexOf(\"{latitude}\") != -1) { dlsa=datalinesuffix.split(\",\"); if (dlsa[0].indexOf(\"-\") == -1) { datalinesuffix=datalinesuffix.replace(\"{latitude}\",encodeURIComponent(\"+\" + dlsa[0]));  } else { datalinesuffix=datalinesuffix.replace(\"{latitude}\",encodeURIComponent(dlsa[0]));  }  } if (datalinesuffix.indexOf(\"{longitude}\") != -1) { dlsa=datalinesuffix.split(\",\"); if (dlsa.length &gt; 1) { if (dlsa[1].indexOf(\"-\") == -1) { datalinesuffix=datalinesuffix.replace(\"{longitude}\",encodeURIComponent(\"+\" + dlsa[1]));  } else { datalinesuffix=datalinesuffix.replace(\"{longitude}\",encodeURIComponent(dlsa[1])); }  }  }    } ' . \"\\n\";<br \/>\n<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; as again we are making use of $_GET[] parameters coming into the PHP at the server side.<\/p>\n<p>The bigger picture plan for how this helps something else we are trying will become apparent over time &#8230; in the fullness of time &#8230; at the appropriate juncture of juxtapositions.<\/p>\n<p>Let&#8217;s see some PHP code in <a target=\"_blank\" title='click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php' rel=\"noopener\">live action<\/a> for this tutorial where you define your map characteristics and data.<\/p>\n<p>Link to Google Chart Tools &#8220;spiritual home&#8221; &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\n' rel=\"noopener\">via Google<\/a>.<br \/>\nLink to Google Chart Tools Map information &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' title='Google Map (chart)' rel=\"noopener\">via Google<\/a>.<br \/>\nLink to Google Chart tooltips information &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/customizing_tooltip_content' title='Google Map (chart) tooltips information' rel=\"noopener\">via Google<\/a>.<\/p>\n<p>Link to some downloadable PHP programming code &#8230; rename to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php---GETME' title='Download me' rel=\"noopener\">map.php<\/a> which changed from yesterday as per <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php---GETME' title='map.php' rel=\"noopener\">this link<\/a>.<\/p>\n<hr>\n<p id='pjhgcmtt'>Previous relevant <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-google-chart-map-tooltips-tutorial\/' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map_tooltips.jpg\" title=\"PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial<\/p><\/div>\n<p>Here is a tutorial that is revisiting Google Graphs API, or Google Chart Tools, and its Map functionality, which we first talked about with <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Tutorial' href='#pjhgmt' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Tutorial<\/a> as shown below.  Please <a target=\"_blank\" title='Google Charts mission statement' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/' rel=\"noopener\">read<\/a> &#8230;<\/p>\n<blockquote><p>Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.<\/p><\/blockquote>\n<p>Why are we revisiting?  Well, we are interested in the interactive side to this wonderful product.  We are going to start with a look into <a target=\"_blank\" title='Tooltips information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Tooltip' rel=\"noopener\">&#8220;tooltips&#8221;<\/a>.  Tooltips are those optional informational features of some webpages that happen when hovering over an HTML element, principally through the filling out of an HTML element&#8217;s <a target=\"_blank\" title='HTML global attribute of title information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_global_title.asp' rel=\"noopener\">title<\/a> global attribute..  Google Charts functionality amounts to the use of Javascript, and, these days, <a target=\"_blank\" title='SVG information from w3schools' href='http:\/\/www.w3schools.com\/svg\/' rel=\"noopener\">SVG<\/a> HTML elements, so &#8220;tooltips&#8221; are very relevant to the &#8220;user experience&#8221; when using Google Charts.  With the Map Chart, the latitude, laongitude set is combined with a title, which can be the default &#8220;tooltip&#8221; shown, as this is all fine for many usages, but we want to extend it so that that title doesn&#8217;t have to be the tooltip.<\/p>\n<p>The integration of this added functionality into the Google Chart Map Chart involves adding an extra &#8220;string&#8221; column to the data table as per the <b>bold<\/b> bits of the new Javascript (via PHP) snippet &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\n if (isset($_GET['value']) && (isset($_GET['tooltip']) || strpos($GETdata, \"'\") !== false)) {<br \/>\n  echo \"   var data = new google.visualization.DataTable(); \/\" . \"\/\" . $GETlabel . $GETvalue . \" \\n\";<br \/>\n  echo \"   data.addColumn('number', '\" . str_replace(\"'\",\"\",str_replace(\",\",\"\",str_replace(\"['\",\"\",$GETlabel))) . \"');  \\n\";<br \/>\n  echo \"   data.addColumn('number', \" . str_replace(\",\", \"); data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); data.addColumn('string', \", str_replace(\"]\",\"\",$GETvalue)) . \");  \\n\";<br \/>\n  echo \"   data.addRows([ \\n\";<br \/>\n  echo str_replace(\"''\" . \"''\", \"''\", str_replace(\"~\", \"'\", substr($GETdata,1)));<br \/>\n  echo \"   ]); \\n\";<br \/>\n } else {<br \/>\n <\/b><br \/>\n      echo ' var data = google.visualization.arrayToDataTable([ ' . \"\\n\";<br \/>\n      echo \" \" . $GETlabel . $GETvalue . \" \\n\";<br \/>\n      echo str_replace(\"''\" . \"''\", \"''\", str_replace(\"~\", \"'\", $GETdata));<br \/>\n      echo \"        ]);\\n\";<br \/>\n<b> }<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; making use of $_GET[] parameters coming into the PHP at the server side &#8230; you&#8217;ll find that Javascript loves to work with PHP as one of those <a target=\"_blank\" title='Fred and Ginger' href='http:\/\/www.youtube.com\/watch?v=MsS7B8nyw5Y' rel=\"noopener\">Fred and Ginger<\/a> relationships of the programming world &#8230; you&#8217;ll be happier writing Javascript from your PHP too &#8230; try it and you&#8217;ll see the advantages time and again and again and again &#8230; did we leave out one? &#8230; <font size=0>and again<\/font>.<\/p>\n<p>The bigger picture plan for how this helps something else we are trying will hopefully become apparent over time.<\/p>\n<p>Let&#8217;s see some PHP code in <a target=\"_blank\" title='click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php' rel=\"noopener\">live action<\/a> for this tutorial where you define your map characteristics and data.<\/p>\n<p>Link to Google Chart Tools &#8220;spiritual home&#8221; &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\n' rel=\"noopener\">via Google<\/a>.<br \/>\nLink to Google Chart Tools Map information &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' title='Google Map (chart)' rel=\"noopener\">via Google<\/a>.<br \/>\nLink to Google Chart tooltips information &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/customizing_tooltip_content' title='Google Map (chart) tooltips information' rel=\"noopener\">via Google<\/a>.<\/p>\n<p>Link to some downloadable PHP programming code &#8230; rename to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php--GETME' title='Download me' rel=\"noopener\">map.php<\/a> which changed from the days of <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-charts-emailing-primer-tutorial\/' title='Google Charts Emailing Primer Tutorial' rel=\"noopener\">Google Charts Emailing Primer Tutorial<\/a> as per <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php--GETME' title='map.php' rel=\"noopener\">this link<\/a>.<\/p>\n<hr>\n<p id='pjhgmt'>Previous relevant <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-google-chart-map-tutorial' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP\/Javascript\/HTML Google Chart Map Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/GoogleChart_Map.jpg\" title=\"PHP\/Javascript\/HTML Google Chart Map Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript\/HTML Google Chart Map Tutorial<\/p><\/div>\n<p>Here is a tutorial that introduces you to Google Graphs API, or Google Chart Tools, and its Map functionality.<\/p>\n<blockquote><p>Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.<\/p><\/blockquote>\n<p>Let&#8217;s see some  <a target=\"_blank\" title='click picture' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php' rel=\"noopener\">PHP<\/a> code in live action for this tutorial where you define your map characteristics and data.<\/p>\n<p>Link to Google Chart Tools &#8220;spiritual home&#8221; &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\n' rel=\"noopener\">via Google<\/a>.<br \/>\nLink to Google Chart Tools Map information &#8230; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' title='Google Map (chart)' rel=\"noopener\">via Google<\/a>.<\/p>\n<p>Link to some downloadable PHP programming code &#8230; rename to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php_GETME' title='Download me' rel=\"noopener\">map.php<\/a>.\n<\/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='#d4832' onclick='var dv=document.getElementById(\"d4832\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=Google+Chart#content\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d4832' 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='#d15782' onclick='var dv=document.getElementById(\"d15782\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15782' 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='#d15807' onclick='var dv=document.getElementById(\"d15807\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15807' 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='#d15807' onclick='var dv=document.getElementById(\"d15807\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=geographicals\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15807' 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='#d15867' onclick='var dv=document.getElementById(\"d15867\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15867' 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='#d15884' onclick='var dv=document.getElementById(\"d15884\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15884' 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='#d32868' onclick='var dv=document.getElementById(\"d32868\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wikipedia\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32868' 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='#d32895' onclick='var dv=document.getElementById(\"d32895\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/timezone\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32895' 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='#d33721' onclick='var dv=document.getElementById(\"d33721\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33721' 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='#d42690' onclick='var dv=document.getElementById(\"d42690\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/bearing\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42690' 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='#d42702' onclick='var dv=document.getElementById(\"d42702\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/timezone\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42702' 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='#d42816' onclick='var dv=document.getElementById(\"d42816\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/trip\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42816' 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='#d52777' onclick='var dv=document.getElementById(\"d52777\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/navigate\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52777' 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='#d53199' onclick='var dv=document.getElementById(\"d53199\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wikipedia\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53199' 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='#d53210' onclick='var dv=document.getElementById(\"d53210\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/bearing\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53210' 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='#d53217' onclick='var dv=document.getElementById(\"d53217\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/distance\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53217' 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='#d53242' onclick='var dv=document.getElementById(\"d53242\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/trip\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53242' 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='#d53256' onclick='var dv=document.getElementById(\"d53256\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53256' 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='#d53298' onclick='var dv=document.getElementById(\"d53298\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/styling\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53298' 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='#d53304' onclick='var dv=document.getElementById(\"d53304\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gyroscope\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53304' 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='#d53330' onclick='var dv=document.getElementById(\"d53330\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gesture\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53330' 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='#d53360' onclick='var dv=document.getElementById(\"d53360\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/compass\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53360' 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='#d53509' onclick='var dv=document.getElementById(\"d53509\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onkeyd\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53509' 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='#d53519' onclick='var dv=document.getElementById(\"d53519\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geolocation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53519' 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='#d53528' onclick='var dv=document.getElementById(\"d53528\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/elevation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53528' 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='#d62951' onclick='var dv=document.getElementById(\"d62951\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/window.opener\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62951' 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='#d63067' onclick='var dv=document.getElementById(\"d63067\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63067' 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='#d64253' onclick='var dv=document.getElementById(\"d64253\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/popup\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64253' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>With the Earth Bearing Distance Missing Two Hashtagged Mailto Sharing Tutorial it was the same Earth Scanner web application involved as talked about in Earth Scanner Placements Tutorial where it talked about the URL &#8230; https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?nontz=Alice_Springs%7C133.8807%7C_23.6980%7CAU#Alice_Springs &#8230; or equivalent in &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-initial-placename-popup-window-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":[12,14,1,37],"tags":[52,1669,69,84,3456,3898,1832,4667,88,4666,103,113,1989,127,2471,1653,3520,1993,3531,4658,218,1604,4690,3533,4367,281,284,1607,2276,2147,4684,4681,322,327,1816,354,2447,380,385,3192,4665,408,409,418,1840,4691,448,480,481,482,4198,513,520,2969,4664,2229,557,3961,2770,3847,576,587,590,599,4685,624,2072,652,2016,675,4689,4688,4672,3116,684,2795,4675,4682,2598,2020,4662,1807,714,2415,719,3337,744,3326,745,748,2673,1943,2371,760,772,4663,781,3226,795,4686,4282,861,864,885,2076,889,894,4044,4677,2134,4440,2918,2362,954,4656,967,3409,997,1029,1038,1083,4146,4147,3119,1105,1917,1107,4671,1133,1137,1159,4668,1179,2553,1200,1209,1212,2386,2001,3043,1262,2834,1693,1283,1311,4676,4683,1312,4669,4670,1319,1345,1369,1404,4679,4031,4693,4694,2579,2580,1431,1583,4692,1433,3098,1493],"class_list":["post-64219","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-uncategorised","category-tutorials","tag-absolute-url","tag-address-bar","tag-ajax","tag-animation-2","tag-annotate","tag-annotating","tag-annotation","tag-antarctic-circle","tag-api","tag-arctic-circle","tag-array","tag-audio","tag-autoplay","tag-background-image","tag-background-position","tag-base64","tag-blog-post","tag-browse","tag-browsing","tag-clip-path","tag-code","tag-collaboration","tag-collage","tag-comma","tag-comma-separated-list","tag-css","tag-curl","tag-decode","tag-delimitation","tag-delimiter","tag-delimiters","tag-detail","tag-device","tag-did-you-know","tag-document-title","tag-dom","tag-earth","tag-email","tag-emoji","tag-emoji-flag","tag-equator","tag-external-css","tag-external-javascript","tag-file","tag-filereader","tag-filereader-api","tag-focus","tag-geodata","tag-geographicals","tag-geography","tag-geojson","tag-google","tag-google-chrome","tag-google-directions","tag-greenwich-meridian","tag-hash","tag-hashtag","tag-hashtagging","tag-horizontal-rule","tag-hotlink","tag-html","tag-iframe","tag-image","tag-img","tag-interactive-map","tag-intranet","tag-itinerary","tag-javascript","tag-karaoke","tag-keyframes","tag-kinear-gradient","tag-kludge","tag-land","tag-landscape","tag-latitude","tag-leg","tag-legs","tag-lengthy","tag-line","tag-linear-gradient","tag-lines","tag-link","tag-local-web-server","tag-localstorage","tag-longitude","tag-making-of","tag-mamp","tag-mantissa","tag-map","tag-mapping","tag-margin","tag-margin-left","tag-margin-top","tag-media","tag-mercator","tag-meridian","tag-microphone","tag-mixed-content","tag-mobile","tag-navigator-canshare","tag-north-pole","tag-onclick","tag-one-image-website","tag-operating-system-2","tag-order","tag-orientation","tag-overlay","tag-page-visibility-api","tag-patsy-gallant","tag-place","tag-placement","tag-placename","tag-play","tag-plot","tag-pole","tag-popup","tag-portrait","tag-programming","tag-realtime","tag-reference","tag-safari","tag-screen-height","tag-screen-width","tag-screen-orientation","tag-script","tag-scroll","tag-scrolling","tag-sea","tag-share","tag-sharing","tag-sms","tag-south-pole","tag-speech","tag-speech-to-text","tag-stop-press","tag-style","tag-styling","tag-syntax","tag-tab","tag-terrestrial","tag-textarea","tag-timestamp","tag-timezone","tag-timing","tag-trip","tag-trip-leg","tag-trip-planning","tag-trips-2","tag-tropic-of-cancer","tag-tropic-of-capricorn","tag-tutorial","tag-url","tag-video","tag-web-browser","tag-web-browser-tab-title","tag-web-share-api","tag-web-speech","tag-web-speech-api","tag-when","tag-where","tag-wikipedia","tag-window","tag-window-atob","tag-window-open","tag-wrapper","tag-youtube"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64219"}],"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=64219"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64219\/revisions"}],"predecessor-version":[{"id":67151,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64219\/revisions\/67151"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=64219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=64219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=64219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}