{"id":53632,"date":"2021-10-16T03:01:11","date_gmt":"2021-10-15T17:01:11","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=53632"},"modified":"2021-10-14T17:51:48","modified_gmt":"2021-10-14T07:51:48","slug":"australian-postcode-place-images-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-images-tutorial\/","title":{"rendered":"Australian Postcode Place Images 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\"><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.'>Google Charts<\/a> <a target=_blank title='Google Chart Geo Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>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\/'>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'><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\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php------GETME\">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\">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\/'>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\/'>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\"><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\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php-----GETME\">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\">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\/'>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\/'>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\"><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'>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'>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' href=-'https:\/\/www.w3schools.com\/jsref\/met_win_moveto.asp'>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'>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'>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' href=-'https:\/\/www.w3schools.com\/jsref\/met_win_moveto.asp'>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\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php----GETME\">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\">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\/'>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\"><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.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map'>Map Chart<\/a> interfacing functionality in a <a target=_blank title='Modal Backdrop Popup' href='https:\/\/github.com\/twbs\/bootstrap\/issues\/8723'>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\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php---GETME\">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\">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\/'>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\"><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'>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'>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\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php--GETME\">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\">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\/'>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\"><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'>anyone, anyone<\/a>? &#8230; yes, <a target=_blank title='Anaximander information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Anaximander'>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.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map'>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'>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\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/australia_place_crowfly_distances.php-GETME\">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\">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\/'>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\"><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'>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'>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\/'>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'>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\">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\">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","protected":false},"excerpt":{"rendered":"<p>We think, on top of the work of yesterday&#8217;s Australian Postcode Northern Territory Place Tutorial, it would be good to enhance the existant &#8230; Australian place linked to Australian postcode linked to Australian Google Charts Geo Chart user experience &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-postcode-place-images-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,30,37],"tags":[114,126,127,2471,155,277,1727,471,481,518,2969,590,2991,652,3824,2126,1553,2080,2967,2968,2966,2875,860,870,1738,929,967,2919,997,1173,1319,1418,2580,1431,1583,1433,3825],"class_list":["post-53632","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-photography","category-tutorials","tag-australia","tag-background","tag-background-image","tag-background-position","tag-body","tag-cross-domain","tag-distance","tag-function","tag-geographicals","tag-google-chart","tag-google-directions","tag-image","tag-integer","tag-javascript","tag-leading-zero","tag-map-chart","tag-mathematice","tag-modal","tag-modal-backdrop","tag-moveto","tag-nearby","tag-northern-territory","tag-onblur","tag-onload","tag-photo","tag-photograph","tag-popup","tag-postcode","tag-programming","tag-sort","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\/53632"}],"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=53632"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53632\/revisions"}],"predecessor-version":[{"id":53638,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53632\/revisions\/53638"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=53632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=53632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=53632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}