{"id":65543,"date":"2024-11-12T03:01:00","date_gmt":"2024-11-11T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=65543"},"modified":"2024-11-12T06:54:40","modified_gmt":"2024-11-11T20:54:40","slug":"australian-postcode-place-revisit-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-revisit-tutorial\/","title":{"rendered":"Australian Postcode Place Revisit Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Australian Postcode Place Revisit Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_revisit.gif\" title=\"Australian Postcode Place Revisit Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Australian Postcode Place Revisit Tutorial<\/p><\/div>\n<p>You know how you get to a relatively empty carpark and have more trouble deciding than if it had been chock-a-block?  That&#8217;s our excuse for all the ways we found for improvement regarding this &#8220;where of life&#8221; web application, on a revisit to our inhouse Australian Postcode Places web application.  Or maybe it was a <i>bad hair day<\/i>, which is a bit implausible!<\/p>\n<p>The thing is, regarding the recent <a title='Australian Postcode Place Initial Bearings Tutorial' href='#appibt'>Australian Postcode Place Initial Bearings Tutorial<\/a>&#8216;s <i>initial bearing<\/i> work, yes, it was calculating bearings, but not between user designated destinations, where it is of more practical use.  It was calculating bearings to and from that initial place, and except for <i>dreaming of places way away<\/i> purposes, out the window &#8230; like &#8230; why aren&#8217;t you working<sup>!<\/sup><sub>?<\/sub> &#8230; or maybe orienteering &#8230; it is not so useful.  In any case, we hate to lose &#8220;backward compatibility&#8221;, so hived off these previous calculations to the title of some of the middle cells, and added new &#8220;between postcode place&#8221; bearing calculation places where it is more apt, and immediately visible.<\/p>\n<p>And then on the other &#8220;outward facing&#8221; yellow cells we added <i>onclick<\/i> and\/or <i>ondblclick<\/i> event logic to show <a target=\"_blank\" title='Google Maps' href='https:\/\/maps.google.com' rel=\"noopener\">Google Map<\/a> and <a target=\"_blank\" title='Wikipedia' href='https:\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a> webpages, thanks, associated with those postcode places, as additional functionality &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n    function rhclick(dthis) {<br \/>\n       var onebefore=null, lastoned=null;<br \/>\n       if (('' + dthis.title).indexOf(',') == -1 && ('' + dthis.id).indexOf('setofthree_') == 0) {<br \/>\n         var divsare=document.getElementsByTagName('div');<br \/>\n         for (var ikj=0; ikj&lt;divsare.length; ikj++) {<br \/>\n            if (!onebefore) {<br \/>\n               if (('' + divsare[ikj].id).indexOf('setofthree_') == 0) {<br \/>\n                 if (('' + dthis.id) == ('' + divsare[ikj].id)) {<br \/>\n                   if (lastoned) {<br \/>\n                     dthis=lastoned;<br \/>\n                     onebefore=lastoned;<br \/>\n                   }<br \/>\n                 } else {<br \/>\n                   lastoned=divsare[ikj];<br \/>\n                 }<br \/>\n               }<br \/>\n            }<br \/>\n         }<br \/>\n       }<br \/>\n       if (('' + dthis.title).indexOf(',') != -1 && ('' + dthis.innerHTML).trim() != '') {<br \/>\n          \/\/ https:\/\/www.google.com\/maps?z=9&t=m&q=loc:-37.763584+144.942222<br \/>\n          if (lastwois.trim() == '\/\/www.google.com\/maps?z=9&t=m&q=loc:' + ('+' + dthis.title).replace(\/^\\+\\-\/g,'-').replace(',','+').replace('+-','-')) {<br \/>\n          if (lastwois == lastwois.trim()) {<br \/>\n          lastwois+=' ';<br \/>\n          window.open('\/\/\/\/wikipedia.org\/wiki\/' + encodeURIComponent(dthis.innerHTML.replace(\/\\ \/g,'_')), '_blank', 'top=110,left=110,height=600,width=800');<br \/>\n          }<br \/>\n          } else {<br \/>\n          lastwois='\/\/www.google.com\/maps?z=9&t=m&q=loc:' + ('+' + dthis.title).replace(\/^\\+\\-\/g,'-').replace(',','+').replace('+-','-');<br \/>\n          window.open('\/\/www.google.com\/maps?z=9&t=m&q=loc:' + ('+' + dthis.title).replace(\/^\\+\\-\/g,'-').replace(',','+').replace('+-','-'), '_blank', 'top=100,left=100,height=600,width=800');<br \/>\n          }<br \/>\n       }<br \/>\n    }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p>And then there were those &#8220;nearby place calculation&#8221; improvements.  And then there was <i>what to do with a postcode entry that doesn&#8217;t exist<\/i>.  And then, in the great <a target=\"_blank\" title='Australian Postcodes database ... thanks' href='https:\/\/www.matthewproctor.com\/australian_postcodes' rel=\"noopener\">Australian Postcodes database<\/a>, thanks, some postcodes do not have associated latitude and longitude defined, and we decided to use the nearest defined set that appears before any ones that are undefined, here, as our solution to this issue.<\/p>\n<p>All in all, we think, it&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php-----------GETME\" title=\"australia_place_crowfly_distances.php\" rel=\"noopener\">a better<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php-----------GETME\" rel=\"noopener\">australia_place_crowfly_distances.php<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link you should feel free to (re-)try.<\/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\/australian-postcode-place-revisit-tutorial\/' rel=\"noopener\">Australian Postcode Place Revisit Tutorial<\/a>.<\/p-->\n<hr>\n<p id='appibt'>Previous relevant <a target=\"_blank\" title='Australian Postcode Place Initial Bearings Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-initial-bearings-tutorial\/' rel=\"noopener\">Australian Postcode Place Initial Bearings Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Australian Postcode Place Initial Bearings Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances_bearings.jpg\" title=\"Australian Postcode Place Initial Bearings Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Australian Postcode Place Initial Bearings Tutorial<\/p><\/div>\n<p>The recent <a title='Australian Postcode Place Images Tutorial' href='#appit'>Australian Postcode Place Images Tutorial<\/a>, we think, could benefit by not only showing &#8230;<\/p>\n<ul>\n<li>great circle distances (ie. crow fly distances) &#8230; but, as of today&#8217;s work, also &#8230;<\/li>\n<li>initial bearings (ie. crow fly starting out directions)<\/li>\n<\/ul>\n<p> &#8230; which uses new Javascript &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function great_circle_bearing(talis, gnolis, latis, longis) {<br \/>\n  var latdir=' N', longdir=' E';<br \/>\n  var latd=0, longd=0;<br \/>\n  var latm=0, longm=0;<br \/>\n  var lats=0.0, longs=0.0;<br \/>\n  var latrest=0.0, longrest=0.0;<br \/>\n  var insg='';<br \/>\n  var lls=[];<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 \/>\n \/\/ Bearing from point A to B, can be calculated as,<br \/>\n \/\/ \u03b2 = atan2(X,Y),<br \/>\n \/\/ where, X and Y are two quantities and can be calculated as:<br \/>\n \/\/ X = cos \u03b8b * sin \u2206L<br \/>\n \/\/ Y = cos \u03b8a * sin \u03b8b \u2013 sin \u03b8a * cos \u03b8b * cos \u2206L<br \/>\n <br \/>\n       var 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('' + latis))) *<br \/>\n       eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval(eval('' + longis) - eval('' + gnolis))))),<br \/>\n       eval(eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + talis))) *<br \/>\n       eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval('' + latis)))) -<br \/>\n       eval(eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval('' + talis))) *<br \/>\n       eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + latis))) *<br \/>\n       eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval(eval('' + longis) - eval('' + gnolis)))))<br \/>\n       )))) % 360.0);<br \/>\n     <br \/> <br \/>\n    lls=('' + ourbrg).split(' ');<br \/>\n    if (lls[0].indexOf('+') != -1) {<br \/>\n      lls[0]=lls[0].replace('+','');<br \/>\n    } else if (lls[0].indexOf('-') != -1) {<br \/>\n      latdir=' S';<br \/>\n      lls[0]=lls[0].replace('-','');<br \/>\n    }<br \/>\n    latd=lls[0].split('.')[0];<br \/>\n    latrest=eval('0.' + (lls[0] + '.0').split('.')[1]);<br \/>\n    latm=Math.floor(latrest * 60);<br \/>\n    lats=eval((latrest * 3600) - Math.floor(latm * 60)).toPrecision(3);<br \/>\n    if (('' + lats).indexOf('e') != -1) {<br \/>\n      lats=eval(('' + lats).split('.')[0]);<br \/>\n    }<br \/>\n    if (lats &gt;= 60.0) {<br \/>\n      latm++;<br \/>\n      lats-=60.0;<br \/>\n      if (latm &gt;= 60) {<br \/>\n        latd++;<br \/>\n        latm-=60;<br \/>\n      }<br \/>\n    }<br \/>\n<br \/>\n    return '' + latd + '&#176;' + ('0' + latm).slice(-2) + \"`\" + ('0' + lats).split('.')[0].slice(-2) + ((('' + lats).indexOf('.') != -1) ? ('.' + ('' + lats).split('.')[1].split('00000')[0]) : '') + '``' + ' ... ' + ourbrg;<br \/>\n    }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; for onmouseover titles viewable on the top and bottom sets of three Google Maps Directions link sets in the middle of the tabular results, with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php-------GETME\" title=\"australia_place_crowfly_distances.php\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php-------GETME\" rel=\"noopener\">australia_place_crowfly_distances.php<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" 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\/australian-postcode-place-initial-bearings-tutorial\/' rel=\"noopener\">Australian Postcode Place Initial Bearings Tutorial<\/a>.<\/p-->\n<hr>\n<p id='appit'>Previous relevant <a target=\"_blank\" title='Australian Postcode Place Images Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-images-tutorial\/' rel=\"noopener\">Australian Postcode Place Images Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Australian Postcode Place Images Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/austpost_images.gif\" title=\"Australian Postcode Place Images Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Australian Postcode Place Images Tutorial<\/p><\/div>\n<p>We think, on top of the work of yesterday&#8217;s <a title='Australian Postcode Northern Territory Place Tutorial' href='#apntpt'>Australian Postcode Northern Territory Place Tutorial<\/a>, it would be good to enhance the existant &#8230;<\/p>\n<blockquote><p>\nAustralian place linked to Australian postcode linked to Australian <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 Geo Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Chart<\/a> user experience\n<\/p><\/blockquote>\n<p> &#8230; and, today, add some <a target=\"_blank\" title='Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/' rel=\"noopener\">Wikipedia<\/a> image possibilities into the mix.  How best to approach this idea, given it is an enhancement and not part of the primary workflow thinking?   We think, perhaps, turn the webpage&#8217;s <i>body<\/i> element into a &#8220;screenful palette&#8221; <font size=1>(at least initially)<\/font> and fill it with background images via the &#8230;<\/p>\n<ul>\n<li>left top<\/li>\n<li>center top<\/li>\n<li>right top<\/li>\n<li>right center<\/li>\n<li>right bottom<\/li>\n<li>center bottom<\/li>\n<li>left bottom<\/li>\n<li>left center<\/li>\n<\/ul>\n<p> &#8230; CSS <a target=\"_blank\" title='CSS background-position property' href='http:\/\/www.w3schools.com\/cssref\/pr_background-position.asp' rel=\"noopener\"><i>background-position<\/i><\/a> positioning options as an approach to an attempt to represent an unknown number and order and quality of Wikipedia image data, displayable each time a user enters a placename or postcode that has a Wikipedia entry <font size=1>(that we hope is about that place, though no guarantees here)<\/font>.  The new Javascript &#8220;function ulit&#8221; introduced yesterday <font color=blue>is changed<\/font> for today&#8217;s work as per &#8230;<\/p>\n<p><code><br \/>\n    <font color=blue>var goes=0;<\/font><br \/>\n<br \/>\n    function ulit(ino, inpl) {<br \/>\n      <font color=blue>var suff='';<\/font><br \/>\n      if (inpl == inpl.toLowerCase() || inpl == inpl.toUpperCase()) {<br \/>\n        var outpl='', outdl='';<br \/>\n        var wds=inpl.toLowerCase().split(' ');<br \/>\n        for (var inb=0; inb&lt;wds.length; inb++) {<br \/>\n          if (wds[inb].length &gt; 2 || outpl.replace('mt','').replace('st','') == '') {<br \/>\n          outpl+=outdl + wds[inb].substring(0,1).toUpperCase() + (wds[inb] + ' ').substring(1).trim();<br \/>\n          } else if (wds[inb] == 'po') {<br \/>\n          outpl+=outdl + wds[inb].toUpperCase();<br \/>\n          } else {<br \/>\n          outpl+=outdl + wds[inb];<br \/>\n          }<br \/>\n          outdl=' ';<br \/>\n        }<br \/>\n        if (ino) { ino.innerHTML=outpl; }<br \/>\n        <font color=blue>if (document.getElementById('imageson').checked) {<br \/>\n        if (('' + document.getElementById('mytable').outerHTML).split('&gt;')[0].indexOf('15') == -1) {<br \/>\n          document.getElementById('mytable').style.marginTop='149px';<br \/>\n        } else {<br \/>\n          document.getElementById('myh1').style.marginLeft='265px';<br \/>\n          document.getElementById('myh3').style.marginLeft='265px';<br \/>\n          document.getElementById('myh4').style.marginLeft='265px';<br \/>\n        }<br \/>\n        document.getElementById('sdesc').innerHTML=outpl + ' ';<br \/>\n        suff=' ';<br \/>\n        document.getElementById('sdesc').style.backgroundColor='white';<br \/>\n        document.getElementById('tzi').src=document.getElementById('tzi').src.split('?')[0] + '?tzexact=' + encodeURIComponent(outpl) + '&tznickname=' + encodeURIComponent(outpl.replace(\/_\/g,' ')) + '&avaJUNKtar=multiply'; \/\/ + avatar_at;<br \/>\n        } else if (('' + document.getElementById('mytable').outerHTML).indexOf('15') != -1) {<br \/>\n          document.getElementById('mytable').style.marginTop='0px';<br \/>\n          if (1 == 2) { document.getElementById('sdesc').innerHTML=''; }<br \/>\n        } else if (1 == 2) {<br \/>\n          document.getElementById('sdesc').innerHTML='';<br \/>\n        }<br \/>\n        goes++;<br \/>\n        if (goes == 2) {<br \/>\n          document.getElementById('ourcanvas').style.height='100%';<br \/>\n        }<\/font><br \/>\n        return outpl<font color=blue> + suff<\/font>;<br \/>\n      } else {<br \/>\n        <font color=blue>if (document.getElementById('imageson').checked) {<br \/>\n        if (('' + document.getElementById('mytable').outerHTML).split('&gt;')[0].indexOf('15') == -1) {<br \/>\n          document.getElementById('mytable').style.marginTop='149px';<br \/>\n        } else {<br \/>\n          document.getElementById('myh1').style.marginLeft='265px';<br \/>\n          document.getElementById('myh3').style.marginLeft='265px';<br \/>\n          document.getElementById('myh4').style.marginLeft='265px';<br \/>\n        }<br \/>\n        document.getElementById('sdesc').innerHTML=inpl + ' ';<br \/>\n        suff=' ';<br \/>\n        document.getElementById('sdesc').style.backgroundColor='white';<br \/>\n        document.getElementById('tzi').src=document.getElementById('tzi').src.split('?')[0] + '?tzexact=' + encodeURIComponent(inpl) + '&tznickname=' + encodeURIComponent(inpl.replace(\/_\/g,' ')) + '&avaJUNKtar=multiply'; \/\/ + avatar_at;<br \/>\n        } else if (('' + document.getElementById('mytable').outerHTML).indexOf('15') != -1) {<br \/>\n          document.getElementById('mytable').style.marginTop='0px';<br \/>\n          if (1 == 2) { document.getElementById('sdesc').innerHTML=''; }<br \/>\n        } else if (1 == 2) {<br \/>\n          document.getElementById('sdesc').innerHTML='';<br \/>\n        }<br \/>\n        goes++;<br \/>\n        if (goes == 2) {<br \/>\n          document.getElementById('ourcanvas').style.height='100%';<br \/>\n        }<\/font><br \/>\n        return inpl<font color=blue> + suff<\/font>;<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\/PHP\/australia_place_crowfly_distances.php------GETME\" title=\"australia_place_crowfly_distances.php\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php------GETME\" rel=\"noopener\">australia_place_crowfly_distances.php<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" 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\/australian-postcode-place-images-tutorial\/' rel=\"noopener\">Australian Postcode Place Images Tutorial<\/a>.<\/p-->\n<hr>\n<p id='apntpt'>Previous relevant <a target=\"_blank\" title='Australian Postcode Northern Territory Place Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-northern-territory-place-tutorial\/' rel=\"noopener\">Australian Postcode Northern Territory Place Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Australian Postcode Northern Territory Place Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/austpost_bad_to_good.gif\" title=\"Australian Postcode Northern Territory Place Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Australian Postcode Northern Territory Place Tutorial<\/p><\/div>\n<p>We had cause to revisit the PHP web application of <a title='Australian Postcode Place Modal Backdrop Popup Move Tutorial' href='#appmbpmt'>Australian Postcode Place Modal Backdrop Popup Move Tutorial<\/a> recently, and we were lucky <font size=1>(in a masochistic sense)<\/font> to do a test showing an error we hadn&#8217;t detected initially, designing it.<\/p>\n<p>That weakness, we had to learn, revolved around Northern Territory places in Australia.  Clear thinking may have got us there earlier, but the problem &#8220;actually&#8221; was that postcodes in the Northern Territory start with &#8220;0&#8221; (ie. zero) and somewhere down the track in all the code our &#8220;mapping&#8221; of that postcode lost its leading zero, and so &#8220;refeeding&#8221; that &#8220;non-leading-zero&#8221; postcode back into the latitude and longitude lookup, the web application could fail.<\/p>\n<p>But thinking outside the box, if we don&#8217;t want to wade through to the &#8220;string becomes integer&#8221; issue in the code, another fact we can &#8220;hang our hat on&#8221; is that Australian Postcodes are four characters long, and so <font color=blue>the Javascript tweak<\/font> below also fixed our issues, as per &#8230;<\/p>\n<p><code><br \/>\n    document.getElementById(indivo.id.replace('_01','_02')).innerHTML=<font color=blue>('0000' + <\/font>findit[eval(-1 + kk)].split(';')[eval(-1 + findit[eval(-1 + kk)].split(';').length)] + ii<font color=blue>).slice(-4)<\/font>;<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\/PHP\/australia_place_crowfly_distances.php-----GETME\" title=\"australia_place_crowfly_distances.php\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php-----GETME\" rel=\"noopener\">australia_place_crowfly_distances.php<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" 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\/australian-postcode-northern-territory-place-tutorial\/' rel=\"noopener\">Australian Postcode Northern Territory Place Tutorial<\/a>.<\/p-->\n<hr>\n<p id='appmbpmt'>Previous relevant <a target=\"_blank\" title='Australian Postcode Place Modal Backdrop Popup Move Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-modal-backdrop-popup-move-tutorial\/' rel=\"noopener\">Australian Postcode Place Modal Backdrop Popup Move Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Australian Postcode Place Modal Backdrop Popup Move Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/austpost_nearby_moveto.jpg\" title=\"Australian Postcode Place Modal Backdrop Popup Move Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Australian Postcode Place Modal Backdrop Popup Move Tutorial<\/p><\/div>\n<p>Today&#8217;s extension to yesterday&#8217;s <a title='Australian Postcode Place Modal Backdrop Popup Tutorial' href='#appmbpt'>Australian Postcode Place Modal Backdrop Popup Tutorial<\/a> predominantly CSS themes is the &#8220;prove to ourselves&#8221; working of &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools' rel=\"noopener\">window.open<\/a> based Window with that 3rd argument popup positioning used &#8230;<\/li>\n<li>Window object method <a target=\"_blank\" title='Window object method moveTo' href='https:\/\/www.w3schools.com\/jsref\/met_win_moveto.asp' rel=\"noopener\">moveTo<\/a> &#8230; when that Window URL is &#8230;<\/li>\n<li>cross-domain<\/li>\n<\/ul>\n<p> &#8230; and me being the optimist that I am thought though our Google Directions URL involved was cross-domain we would be able to harness the cuteness of <a target=\"_blank\" title='Window object method moveTo' rel=\"noopener\">moveTo<\/a> so that it could ring around the Modal Backdrop Popup over time.<\/p>\n<p>Alas, no such luck, and guess there are good (web browser) security reasons here.<\/p>\n<p>Instead what we did was &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools' rel=\"noopener\">window.open<\/a> based Window with that 3rd argument popup positioning used &#8230;<\/li>\n<li>that [last Window object].close() then another <a target=\"_blank\" href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools' rel=\"noopener\">window.open<\/a> based Window with that 3rd argument popup new positioning &#8230; for that Window URL that is &#8230;<\/li>\n<li>cross-domain<\/li>\n<\/ul>\n<p>Make the scenario not be cross-domain and no worries regarding Window object method <a target=\"_blank\" title='Window object method moveTo' rel=\"noopener\">moveTo<\/a> method.<\/p>\n<p>And so, again, feel free to try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php----GETME\" title=\"australia_place_crowfly_distances.php\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php----GETME\" rel=\"noopener\">australia_place_crowfly_distances.php<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link.<\/p>\n<hr>\n<p id='appmbpt'>Previous relevant <a target=\"_blank\" title='Australian Postcode Place Modal Backdrop Popup Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-modal-backdrop-popup-tutorial\/' rel=\"noopener\">Australian Postcode Place Modal Backdrop Popup Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Australian Postcode Place Modal Backdrop Popup Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/austpost_nearby.jpg\" title=\"Australian Postcode Place Modal Backdrop Popup Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Australian Postcode Place Modal Backdrop Popup Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Australian Postcode Place Nearby Tutorial' href='#appnt'>Australian Postcode Place Nearby Tutorial<\/a> had us attending to an &#8220;Australian Postcode Nearby&#8221; subset of functionality in terms of the event &#8230;<\/p>\n<ul>\n<li>onmouseover &#8230; or &#8220;on hover&#8221; which programmers out there will know, in &#8220;mobile land&#8221; is about as useful as a screen door on a submarine &#8230; so, today, we attend to some event logic everybody relates to, that being &#8230;<\/li>\n<li>onclick<\/li>\n<\/ul>\n<p> &#8230; and today, for an aesthetic change, we&#8217;re going to show our <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> interfacing functionality in a <a target=\"_blank\" title='Modal Backdrop Popup' href='https:\/\/github.com\/twbs\/bootstrap\/issues\/8723' rel=\"noopener\">Modal Backdrop Popup<\/a> &#8220;window&#8221; (ie. not a window as such, but more an HTML nested div that acts like a &#8220;modal&#8221; (has to be attended to) popup).<\/p>\n<p>Consequently, that Javascript <i>nearestto<\/i> function <b>changed as per<\/b> &#8230;<\/p>\n<p><code><br \/>\n    function nearestto(<b>ogset, <\/b>gset) {<br \/>\n       var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;<br \/>\n       var sofar=';', pa='';<br \/>\n       var things=[];<br \/>\n       <b>ourarguments='?title=' + encodeURIComponent('Australian Postcode Places Nearby ' + ogset.innerHTML) + '&onclick=y&label=%5b%27Lat%27,&value=%27Lon%27,%20%27Name%27%5d&data=';<\/b><br \/>\n       if (postcodea.length &gt; 1) {<br \/>\n         this_long=eval(gset.split(' ')[0].split(',')[1]);<br \/>\n         this_lat=eval(gset.split(' ')[0].split(',')[0]);<br \/>\n         for (iou=0; iou&lt;postcodea.length; iou++) {<br \/>\n           this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));<br \/>\n           if (this_diff &lt; 20 && this_diff &gt; 0.00001) {<br \/>\n             sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';<br \/>\n             things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' ~' + lata[iou] + '~' + longa[iou] + '~ near to ' + placea[iou] + ',' + postcodea[iou]);<br \/>\n             if (smallest_diff &lt; 0.0 || eval('' + this_diff) &lt; eval('' + smallest_diff)) {<br \/>\n               smallest_diff=this_diff;<br \/>\n               smallest_num=iou;<br \/>\n             }<br \/>\n             if (largest_diff &lt; 0.0 || eval('' + this_diff) &gt; eval('' + largest_diff)) {<br \/>\n               largest_diff=this_diff;<br \/>\n             }<br \/>\n           <b>} else if (this_diff &lt; 20 && this_diff &lt;= 0.00001) {<br \/>\n             ourarguments+=',%20[' + lata[iou] + ',' + longa[iou] + ',~' + encodeURIComponent(placea[iou] + ',' + postcodea[iou]) + '~]';<\/b><br \/>\n           }<br \/>\n         }<br \/>\n         things.sort();<br \/>\n         outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];<br \/>\n         <b>ourarguments+=',%20[' + lata[smallest_num] + ',' + longa[smallest_num] + ',~' + encodeURIComponent(placea[smallest_num] + ',' + postcodea[smallest_num]) + '~]';<br \/>\n         pa=\"\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" + ourarguments;<\/b><br \/>\n         for (iou=0; iou&lt;=15; iou++) {<br \/>\n           if (things.length &gt; iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {<br \/>\n             outset+=' and near to ' + things[iou].split(' near to ')[1];<br \/>\n             <b>pa+=',%20[' + things[iou].split('~')[1] + ',' + things[iou].split('~')[2] + ',~' + encodeURIComponent(things[iou].split(' near to ')[1]) + '~]';<br \/>\n             if (pa.length &lt; 751) { ourarguments='?' + pa.split('?')[1]; }<\/b><br \/>\n           }<br \/>\n         }<br \/>\n         <b>\/\/ Modal backdrop below ...<br \/>\n         if (ogset.innerHTML != '') {<br \/>\n         ogset.onclick=function() {<br \/>\n           document.getElementById('mypopup').style.display='block';<br \/>\n           document.getElementById('mypopup-inner').style.display='block';<br \/>\n           if (1 == 1) {<br \/>\n           document.getElementById('myiframe').src=\"\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" + ourarguments;<br \/>\n           } else {<br \/>\n           document.getElementById('mypopup-inner').innerHTML='&lt;a title=\"Close\" id=\"alertclose\" class=\"popup-close\" data-popup-close=\"popup-alert\" onclick=\" event.stopPropagation(); document.getElementById(' + \"'\" + 'mypopup' + \"'\" + ').style.display=' + \"'\" + 'none' + \"'\" + ';\" href=\"#\"&gt;&amp;#10060;&lt;\/a&gt;&lt;br&gt;&lt;iframe onclick=\" event.stopPropagation(); \" src=\"\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php' + ourarguments + '\" id=myiframe style=\"width:500px;height:500px;\"&gt;&lt;\/iframe&gt;';<br \/>\n           }<br \/>\n         };<br \/>\n         }<\/b><br \/>\n       }<br \/>\n       return outset;<br \/>\n    }<br \/>\n<\/code> <\/p>\n<p>This type of &#8220;popup&#8221; should not startle the &#8220;popup blocker&#8221; horses on your modern web browsers!<\/p>\n<p>Once again feel free to try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php---GETME\" title=\"australia_place_crowfly_distances.php\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php---GETME\" rel=\"noopener\">australia_place_crowfly_distances.php<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link.<\/p>\n<hr>\n<p id='appnt'>Previous relevant <a target=\"_blank\" title='Australian Postcode Place Nearby Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-nearby-tutorial\/' rel=\"noopener\">Australian Postcode Place Nearby Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Australian Postcode Place Nearby Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/nearto_postcode.jpg\" title=\"Australian Postcode Place Nearby Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Australian Postcode Place Nearby Tutorial<\/p><\/div>\n<p>Back in &#8220;the where of life&#8221; web application wooooooorrrrrllllldd it&#8217;s all fine and good to know &#8220;crowfly distances&#8221; as we did in <a title='Australian Postcode Place Distances Map Chart Tutorial' href='#appdmct'>Australian Postcode Place Distances Map Chart Tutorial<\/a> but that level of mathematics is not everybody&#8217;s cup of tea.  Often we just want to know a &#8230;<\/p>\n<ul>\n<li>nearby<\/li>\n<li>place<\/li>\n<\/ul>\n<p> &#8230; and that is all fine and good using that incredible <a target=\"_blank\" title='https:\/\/www.matthewproctor.com\/australian_postcodes' href='\/\/www.matthewproctor.com\/australian_postcodes' rel=\"noopener\">Australian Postcode resource<\/a> we talked about below.<\/p>\n<p>What broad brush steps were done to arrange this information be displayed hovering over an Australian Postcode Place, in addition to ideas of that previous blog post, and its predecessors?<\/p>\n<ul>\n<li>a top priority in all software integration is to first protect whatever already works, and that involved the establishment of a blank &#8221; &#8221; delimitation rule to the &#8220;hovering over text&#8221; &#8230; it used to be <i>latitude,longitude<\/i> and this is separated by &#8220;nearby&#8221; information by a space &#8221; &#8221; character delimitation &#8230; and in any existing Javascript code it is a simple matter of appending &#8230;<br \/>\n<code><br \/>\n.split(\" \")[0]<br \/>\n<\/code><br \/>\n &#8230; onto any Javascript DOM &#8220;.title&#8221; usages (as the <i>title<\/i> attribute is what is displayed when hovering)<\/li>\n<li>add global arrays &#8230;<br \/>\n <code><br \/>\n    var postcodea=[];<br \/>\n    var placea=[];<br \/>\n    var lata=[];<br \/>\n    var longa=[];<br \/>\n <\/code><\/p>\n<li>at document.body <i>onload event<\/i> arrange to have &#8230;<br \/>\n <code><br \/>\n     function fillcomparray(dataarr) {<br \/>\n      var fldsa, ij, jk, cdelim='', thisplace='', lm=-1, xpc='';<br \/>\n      for (ij=1; ij&lt;dataarr.length; ij++) {<br \/>\n       if ((dataarr[ij] + ' ').substring(0,1) &gt;= '0' && (dataarr[ij] + ' ').substring(0,1) &lt;= '9') {<br \/>\n        fldsa=dataarr[ij].split(',');<br \/>\n        \/\/postcodea.push(fldsa[0]);<br \/>\n        xpc=fldsa[0];<br \/>\n        cdelim='';<br \/>\n        thisplace='';<br \/>\n        lm=-1;<br \/>\n        for (jk=1; jk&lt;fldsa.length; jk++) {<br \/>\n          if ((fldsa[jk] + ' ').substring(0,1) == '-' || ((fldsa[jk] + ' ').substring(0,1) &gt;= '0' && (fldsa[jk] + ' ').substring(0,1) &lt;= '9')) { if (lm &lt; 0) { lm=jk; } }<br \/>\n          if (lm == -1) {<br \/>\n            thisplace+=cdelim + fldsa[jk];<br \/>\n            cdelim=',';<br \/>\n          }<br \/>\n        }<br \/>\n        if (fldsa[lm].match(\/^[0-9-.]*$\/) && fldsa[eval(1 + eval('' + lm))].match(\/^[0-9-.]*$\/)) {<br \/>\n        postcodea.push(xpc);<br \/>\n        placea.push(thisplace);<br \/>\n        longa.push(fldsa[lm]);<br \/>\n        lm++;<br \/>\n        lata.push(fldsa[lm]);<br \/>\n        }<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n<\/code><br \/>\n &#8230; populate those global arrays &#8230; ready for user places of interest to trigger &#8230;\n <\/li>\n<li><i>onblur<\/i> logic that when determining a &#8220;.title&#8221; attribute, <b>now does<\/b> &#8230;<br \/>\n <code><br \/>\n        document.getElementById('setofthree_' + eval(-1 + setofthree) + '_01').title=<b>nearestto(<\/b>findit[jj].split(',')[eval(4 - indivo.innerHTML.split(',').length)] + ',' + findit[jj].split(',')[eval(3 - indivo.innerHTML.split(',').length)]<b>)<\/b>;<br \/>\n <\/code><br \/>\n  &#8230; and within that new Javascript function &#8230;<\/li>\n<li>Javascript array <a target=\"_blank\" title='Javascript sort method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_sort.asp' rel=\"noopener\">sort<\/a>() method becomes a useful intervention <b>as per<\/b> &#8230;<br \/>\n<code><br \/>\n    function nearestto(gset) {<br \/>\n       var iou=0, outset=gset, this_lat=0.0, this_long=0.0, this_diff=-1.0, smallest_diff=-1.0, largest_diff=-1.0, smallest_num=0;<br \/>\n       var sofar=';';<br \/>\n       var things=[];<br \/>\n       if (postcodea.length &gt; 1) {<br \/>\n         this_long=eval(gset.split(' ')[0].split(',')[1]);<br \/>\n         this_lat=eval(gset.split(' ')[0].split(',')[0]);<br \/>\n         for (iou=0; iou&lt;postcodea.length; iou++) {<br \/>\n           this_diff=eval(Math.abs(eval(('' + this_long)) - eval(('' + longa[iou]))) + Math.abs(eval(('' + this_lat)) - eval(('' + lata[iou]))));<br \/>\n           if (this_diff &lt; 20 && this_diff &gt; 0.00001) {<br \/>\n             sofar+='' + iou + '+' + placea[iou] + '+' + longa[iou] + '+' + lata[iou] + '-' + this_diff + ';';<br \/>\n             things.push('' + eval(1000000.0 + eval('' + this_diff)) + ' near to ' + placea[iou] + ',' + postcodea[iou]);<br \/>\n             if (smallest_diff &lt; 0.0 || eval('' + this_diff) &lt; eval('' + smallest_diff)) {<br \/>\n               smallest_diff=this_diff;<br \/>\n               smallest_num=iou;<br \/>\n             }<br \/>\n             if (largest_diff &lt; 0.0 || eval('' + this_diff) &gt; eval('' + largest_diff)) {<br \/>\n               largest_diff=this_diff;<br \/>\n             }<br \/>\n           }<br \/>\n         }<br \/>\n         <b>things.sort();<\/b><br \/>\n         outset+=' near to ' + placea[smallest_num] + ',' + postcodea[smallest_num];<br \/>\n         for (iou=0; iou&lt;=15; iou++) {<br \/>\n           if (things.length &gt; iou && outset.indexOf(things[iou].split(' near to ')[1]) == -1) {<br \/>\n             outset+=' and near to ' + things[iou].split(' near to ')[1];<br \/>\n           }<br \/>\n         }<br \/>\n       }<br \/>\n       return outset;<br \/>\n    }<br \/>\n<\/code><br \/>\n &#8230; which does the job of appending 15 or so nearby Australian Postcode Places to the user entered one and displayed as the user hovers over information\n<\/li>\n<\/ul>\n<p>Feel free to try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php--GETME\" title=\"australia_place_crowfly_distances.php\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php--GETME\" rel=\"noopener\">australia_place_crowfly_distances.php<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link.<\/p>\n<hr>\n<p id='appdmct'>Previous relevant <a target=\"_blank\" title='Australian Postcode Place Distances Map Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-distances-map-chart-tutorial\/' rel=\"noopener\">Australian Postcode Place Distances Map Chart Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Australian Postcode Place Distances Map Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australiaplacecrowflydistances.jpg\" title=\"Australian Postcode Place Distances Map Chart Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Australian Postcode Place Distances Map Chart Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s &#8220;where of life&#8221; themed <a title='Australian Postcode Place Distances Primer Tutorial' href='#appdpt'>Australian Postcode Place Distances Primer Tutorial<\/a> lacked something  &#8230; <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA' rel=\"noopener\">anyone, anyone<\/a>? &#8230; yes, <a target=\"_blank\" title='Anaximander information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Anaximander' rel=\"noopener\">Anaximander<\/a> &#8230; a map <font size=1>&#8230; and you&#8217;d like to swap my horse for one<\/font> <font size=2>&#8230; well okay, there&#8217;s one called Ed out the back<\/font> &#8230; but we digress.<\/p>\n<p>Queue 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 Charts<\/a> <a target=\"_blank\" title='Google Chart Map Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> (which can transition very easily to <a target=\"_blank\" title='Google Chart Map Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Chart<\/a>, where &#8220;from&#8221; to &#8220;to&#8221; lines are drawn) and which can be called in an HTML iframe element to add that visual interest to <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php-GETME\" title=\"australia_place_crowfly_distances.php\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php-GETME\" rel=\"noopener\">australia_place_crowfly_distances.php<\/a>&#8216;s  <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link.<\/p>\n<p>There isn&#8217;t anything much better than a map to trip plan, or study geography, in our books <font size=1>&#8230; but alas we ran out of pamphlettes today &#8230; sorrrrrrryyyyyy<\/font>.<\/p>\n<hr>\n<p id='appdpt'>Previous relevant <a target=\"_blank\" title='Australian Postcode Place Distances Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-distances-primer-tutorial\/' rel=\"noopener\">Australian Postcode Place Distances Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Australian Postcode Place Distances Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.jpg\" title=\"Australian Postcode Place Distances Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Australian Postcode Place Distances Primer Tutorial<\/p><\/div>\n<p>It&#8217;s time to return to a &#8220;where of life&#8221; web application tutorial.  Why?  No, &#8220;where&#8221;.  Who&#8217;s <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=RatKhtboq2E' rel=\"noopener\">on second<\/a>.  But, seriously, the reason is that we found a great <a target=\"_blank\" title='https:\/\/www.matthewproctor.com\/australian_postcodes' href='\/\/www.matthewproctor.com\/australian_postcodes' rel=\"noopener\">Australian Postcode resource<\/a> for geodata lookups of these Australian placenames or postcodes &#8230; thanks.<\/p>\n<p>Combine this &#8230;<\/p>\n<ul>\n<li>Australian postcode (or placename) latitude and longitude &#8230; with &#8230;<\/li>\n<li>another Australian postcode (or placename) latitude and longitude &#8230; and we can &#8230;<\/li>\n<li>show the user a great circle distance between the two places &#8230; as well as a link to &#8230;<\/li>\n<li><a target=\"_blank\" title='Google Maps Directions' href='http:\/\/www.google.com\/maps\/dir\/' rel=\"noopener\">Google Maps Directions<\/a> map between the two places &#8230; and there you can imagine we have a bit of a &#8230;<\/li>\n<li>trip planner<\/li>\n<\/ul>\n<p> &#8230; on our hands.<\/p>\n<p>We can add our own client <b>geographical position<\/b> into the mix via &#8230;<\/p>\n<p><code><br \/>\n    function getLocation() {<br \/>\n      if (navigator.geolocation) {<br \/>\n       try {<br \/>\n        <b><a target=\"_blank\" title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Geolocation\/getCurrentPosition' href='http:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Geolocation\/getCurrentPosition' rel=\"noopener\">navigator.geolocation.getCurrentPosition<\/a>(showPosition);<\/b><br \/>\n        setTimeout(later, 2000);<br \/>\n        } catch(err) {<br \/>\n        setTimeout(later, 2000);<br \/>\n        }<br \/>\n      } else {<br \/>\n        document.getElementById('you').innerHTML='(0,0)';<br \/>\n        if (document.getElementById('inlat') && document.getElementById('inlong')) {<br \/>\n          document.getElementById('inlat').value=userlatitude;<br \/>\n          document.getElementById('inlong').value=userlongitude;<br \/>\n        }<br \/>\n        if (document.getElementById('ipostcode')) {<br \/>\n          document.getElementById('ipostcode').click();<br \/>\n          newthree();<br \/>\n        }<br \/>\n      }<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 (document.getElementById('inlat') && document.getElementById('inlong')) {<br \/>\n          document.getElementById('inlat').value=userlatitude;<br \/>\n          document.getElementById('inlong').value=userlongitude;<br \/>\n        }<br \/>\n        if (document.getElementById('ipostcode')) {<br \/>\n          document.getElementById('ipostcode').click();<br \/>\n          newthree();<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; that you can see involved in the PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php_GETME\" title=\"australia_place_crowfly_distances.php\" rel=\"noopener\">australia_place_crowfly_distances.php<\/a>&#8216;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link, for your perusal.<\/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='#d44578' onclick='var dv=document.getElementById(\"d44578\"); 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='d44578' 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='#d44593' onclick='var dv=document.getElementById(\"d44593\"); 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='d44593' 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='#d45059' onclick='var dv=document.getElementById(\"d45059\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sort\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45059' 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='#d45078' onclick='var dv=document.getElementById(\"d45078\"); 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='d45078' 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='#d45087' onclick='var dv=document.getElementById(\"d45087\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/window\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45087' 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='#d53627' onclick='var dv=document.getElementById(\"d53627\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/zero\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53627' 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='#d53632' onclick='var dv=document.getElementById(\"d53632\"); 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='d53632' 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='#d61459' onclick='var dv=document.getElementById(\"d61459\"); 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='d61459' 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='#d65543' onclick='var dv=document.getElementById(\"d65543\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-maps\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65543' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>You know how you get to a relatively empty carpark and have more trouble deciding than if it had been chock-a-block? That&#8217;s our excuse for all the ways we found for improvement regarding this &#8220;where of life&#8221; web application, on &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-revisit-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,37],"tags":[114,126,127,2471,1970,155,277,4543,3399,1727,400,471,481,518,2969,527,590,2991,652,3824,2126,752,2080,2967,2968,2966,2875,860,870,871,1738,929,967,2919,997,4544,1173,2940,2167,1319,1418,2580,1431,1583,1433,3825],"class_list":["post-65543","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-australia","tag-background","tag-background-image","tag-background-position","tag-bearing","tag-body","tag-cross-domain","tag-crow-fly","tag-degrees","tag-distance","tag-event","tag-function","tag-geographicals","tag-google-chart","tag-google-directions","tag-google-maps","tag-image","tag-integer","tag-javascript","tag-leading-zero","tag-map-chart","tag-mathematics","tag-modal","tag-modal-backdrop","tag-moveto","tag-nearby","tag-northern-territory","tag-onblur","tag-onload","tag-onmouseover","tag-photo","tag-photograph","tag-popup","tag-postcode","tag-programming","tag-setting-out","tag-sort","tag-stoppropagation","tag-title","tag-tutorial","tag-webpage","tag-where","tag-wikipedia","tag-window","tag-window-open","tag-zero"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65543"}],"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=65543"}],"version-history":[{"count":15,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65543\/revisions"}],"predecessor-version":[{"id":65559,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65543\/revisions\/65559"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=65543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=65543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=65543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}