{"id":64113,"date":"2024-07-05T03:01:51","date_gmt":"2024-07-04T17:01:51","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=64113"},"modified":"2024-07-05T15:21:03","modified_gmt":"2024-07-05T05:21:03","slug":"google-charts-geo-chart-region-picker-conditional-positioning-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-charts-geo-chart-region-picker-conditional-positioning-tutorial\/","title":{"rendered":"Google Charts Geo Chart Region Picker Conditional Positioning Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Charts Geo Chart Region Picker Conditional Positioning Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries_presv.jpg\" title=\"Google Charts Geo Chart Region Picker Conditional Positioning Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Charts Geo Chart Region Picker Conditional Positioning Tutorial<\/p><\/div>\n<p>Because of the work at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/curl-http-request-methods-tool-tutorial\/' title='Curl HTTP Request Methods Tool Tutorial'>Curl HTTP Request Methods Tool Tutorial<\/a> we can now &#8230;<\/p>\n<ul>\n<li>conditionally (depending on the existence of the Google Charts Image Charts API) &#8230;<\/li>\n<li>determine the positioning of Region Picker functionality elements<\/li>\n<\/ul>\n<p> &#8230; further to yesterday&#8217;s <a title='Google Charts Geo Chart Region Picker Alignment Tutorial' href='#gcgcrpat'>Google Charts Geo Chart Region Picker Alignment Tutorial<\/a>.<\/p>\n<p>We start with non-mobile improving the positioning for the &#8220;letter breadcrumbs&#8221; and &#8220;middle dropdown&#8221; elements &#8230;<\/p>\n<p><code><br \/>\n  var imagechartthere=true;<br \/>\n<br \/>\n  function checkimagechart(iois) {<br \/>\n       var eaconto = (iois.contentWindow || iois.contentDocument);<br \/>\n       if (eaconto != null) {<br \/>\n       if (eaconto.document) { eaconto = eaconto.document; }<br \/>\n       <br \/>\n       if (eaconto.body.innerHTML.replace('Not Found','Error 404').replace(\/^\\&lt;br\\&gt;\\&lt;\\\/p\\&gt;\/g, 'Error 404').indexOf('Error 404') != -1) {<br \/>\n          imagechartthere=false;<br \/>\n          document.getElementById('myh3').style.left='' + eval(eval('' + screen.width) * 7 \/ 10) + 'px';<br \/>\n          document.getElementById('myh3').style.top='' + eval('' + document.getElementById('myh3').getBoundingClientRect().bottom) + 'px';<br \/>\n          setTimeout(function(){<br \/>\n          document.getElementById('tdleft').style.backgroundPosition=\"right center\";<br \/>\n          }, 60000);<br \/>\n       }<br \/>\n       <br \/>\n       }<br \/>\n  }<br \/>\n  \/\/<br \/>\n  \/\/ and then later ...<br \/>\n  \/\/<br \/>\n  setTimeout(function(){<br \/>\n              if (!imagechartthere && document.getElementById('myh3')) {<br \/>\n              document.getElementById('more').style.left='' + eval(-170 + eval(('' + document.getElementById('myh3').style.left).replace('px',''))) + 'px';<br \/>\n              } else {<br \/>\n              document.getElementById('more').style.left='' + eval(eval(360 * lastiizoom \/ 2) + eval('' + document.getElementById('more').style.left.replace('px',''))) + 'px';<br \/>\n              }<br \/>\n  }, 3000);<br \/>\n<\/code><\/p>\n<p> &#8230; working via the &#8220;client pre-emptive iframe&#8221; feeling &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe style=\"display:none;\" src=\"\/PHP\/http_methods.php?url=https%3A%2F%2Fchart.googleapis.com%2Fchart\" onload=\"checkimagechart(this);\"&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; along with making the <i>opacity<\/i> toggling of the country background SVG slightly more pronounced in <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html----------------------------------GETME'>the changed<\/a> <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html----------------------------------GETME'>regions_via_countries.html<\/a> <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html'>Region Picker<\/a>.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Ignoring the kludginess of codelines &#8230;<\/p>\n<p><code><br \/>\n         ipbit=ipbit.trim();<br \/>\n         setTimeout(function(){ ipbit=ipbit.trim();   }, 5000);<br \/>\n<\/code><\/p>\n<p> &#8230; how do you think we arrived at the need to write the second line of code for our <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html'>Region Picker<\/a>?  Goo &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone?<\/a> &#8230; <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Richie_Cunningham'><font size=1>guffaw<\/font><\/a> <\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Richie_Cunningham'><p>Sir, could you repeat the question?<\/p><\/blockquote>\n<p> Goo &#8230; <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Potsie_Weber'><font size=1>guffaw<\/font><\/a> <\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Potsie_Weber'><p>Sir, could you repeat the question?<\/p><\/blockquote>\n<p> Goo &#8230; <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Ralph_Malph'><font size=1>guffaw<\/font><\/a> <\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Ralph_Malph'><p>Sir, could you repeat the question?<\/p><\/blockquote>\n<p> Goo &#8230; <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Fonzie'><font size=1>guffaw<\/font><\/a> <\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Fonzie'><p>Sir, could you repeat the question?<\/p><\/blockquote>\n<p> &#8230; Goo &#8230; well, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone?<\/a> &#8230; Google Chrome web inspector.  Rings any bells?!<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n &#8230; Okay, see you tomorrow.  But catch up on <a target=_blank href='https:\/\/developer.chrome.com\/docs\/devtools\/javascript\/watch-variables' title='Useful link, thanks'><i>the debugging and &#8220;watch&#8221; of variables dynamically<\/i><\/a> before tomorrow&#8217;s lesson &#8230;<\/p>\n<p><img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries_sv.jpg'><\/img><\/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\/google-charts-geo-chart-region-picker-conditional-positioning-tutorial\/'>Google Charts Geo Chart Region Picker Conditional Positioning Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcgcrpat'>Previous relevant <a target=_blank title='Google Charts Geo Chart Region Picker Alignment Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-charts-geo-chart-region-picker-alignment-tutorial\/'>Google Charts Geo Chart Region Picker Alignment Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Charts Geo Chart Region Picker Alignment Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries_scroll_into_view.jpg\" title=\"Google Charts Geo Chart Region Picker Alignment Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Charts Geo Chart Region Picker Alignment Tutorial<\/p><\/div>\n<p>In our inhouse <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html'>Region Picker<\/a> we like the way the right hand webpage side involved some useful &#8230;<\/p>\n<p><code><br \/>\n  position: sticky;<br \/>\n<\/code><\/p>\n<p> &#8230; positioning, useful within the realms of what is going on on the right hand side.<\/p>\n<p>But now we&#8217;re wanting some horizontal integration, linking commonalities of left and right regarding the country of interest, as a user&#8217;s eyes scan across the webpage, at pivotal times.<\/p>\n<p>Our new Javascript functions to help, today, further to the recent <a title='Google Charts Geo Chart Region Picker Shading Tutorial' href='#gcgcrpst'>Google Charts Geo Chart Region Picker Shading Tutorial<\/a> &#8230;<\/p>\n<p><code><br \/>\n  var glincode='';<br \/>\n  <br \/>\n  function prebrize() {<br \/>\n    if (glincode != '') {<br \/>\n       document.getElementById('a' + glincode).scrollIntoView();<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function brizetwo(pb, lincode) {<br \/>\n     if (eval('' + lincode.length) == 2) {<br \/>\n        glincode=lincode;<br \/>\n        document.getElementById('a' + lincode).scrollIntoView();<br \/>\n        setTimeout(function(){  document.getElementById('a' + lincode).scrollIntoView(); document.getElementById('mychart').style.paddingTop='' + document.body.scrollTop + 'px'; }, 6000);<br \/>\n     }<br \/>\n     return brize(pb);<br \/>\n  }<br \/>\n  <br \/>\n    function brize(pb) {<br \/>\n     var torectx=null, vsrectx=null, aidis='';<br \/>\n     var torectxtop=0;<br \/>\n     if (eval('' + andynft.length) == 8) {<br \/>\n     aidis='a' + andynft.split('title=')[1];<br \/>\n     if (pb == '') {<br \/>\n     torectx=document.getElementById(aidis).getBoundingClientRect();<br \/>\n     if (document.getElementById('pspacer')) {<br \/>\n     document.getElementById('pspacer').height='' + torectx.top + 'px';<br \/>\n     } else if (document.getElementById('language')) {<br \/>\n     document.getElementById('language').style.paddingTop='' + eval(eval('' + torectx.top) + eval('' + document.body.scrollTop)) + 'px';<br \/>\n     } else if (document.getElementById(aidis) && document.getElementById('mychart')) {<br \/>\n     document.getElementById('mychart').style.paddingTop='' + eval(eval('' + torectx.top) + eval('' + document.body.scrollTop)) + 'px';<br \/>\n     }<br \/>\n     } else {<br \/>\n     if (document.getElementById(aidis) && document.getElementById('mychart')) {<br \/>\n     torectx=document.getElementById(aidis).getBoundingClientRect();<br \/>\n     vsrectx=document.getElementById('mychart').getBoundingClientRect();<br \/>\n     document.getElementById('mychart').style.paddingTop='' + eval(eval('' + torectx.top) + eval('' + document.body.scrollTop) - eval('' + vsrectx.top)) + 'px';<br \/>\n     return pb;<br \/>\n     } else if (document.getElementById(aidis) && document.getElementById('language')) {<br \/>\n     torectx=document.getElementById(aidis).getBoundingClientRect();<br \/>\n     vsrectx=document.getElementById('language').getBoundingClientRect();<br \/>\n     document.getElementById('language').style.paddingTop='' + eval(eval('' + torectx.top) + eval('' + document.body.scrollTop) - eval('' + vsrectx.top)) + 'px';<br \/>\n     }<br \/>\n     }<br \/>\n     }<br \/>\n     return pb;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; all feature the great [element].<a target=_blank title='HTML DOM scrollIntoView information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_scrollintoview.asp'>scrollIntoView<\/a>() way to programmatically scroll, rather than use (the sometimes ignored) <i>window.scrollTo([left],[top]);<\/i> or <i>location.href=&#8217;#[elementID]&#8217;;<\/i> approaches.  It has the advantage of not altering <i>location.hash<\/i> (if you see that as a plus).  We&#8217;d rather not add complexity, so, yes, we prefer the <i>[aCountryElement].scrollIntoView();<\/i> call approach, at those pivotal times.  This accounts for the left hand side of the webpage agreeing to the right hand side&#8217;s vertical scroll position.  But what about the other way around?  There, we started applying a CSS <i>padding-top<\/i> property to relevant right hand side elements (via DOM <i>[element].style.paddingTop=[pixelsToExtendDown]px;<\/i>), at pivotal points in the programming flow.<\/p>\n<p>And on double clicking a right hand side button to start creating those background Geo Chart SVG based &#8220;images&#8221; we turn on a progress cursor, at least for non-mobile platforms, because the user needs patience here, in <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html---------------------------------GETME'>the changed<\/a> <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html---------------------------------GETME'>regions_via_countries.html<\/a> <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html'>Region Picker<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-google-charts-geo-chart-region-picker-shading-tutorial\/'>New Google Charts Geo Chart Region Picker Shading Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcgcrpst'>Previous relevant <a target=_blank title='Google Charts Geo Chart Region Picker Shading Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-charts-geo-chart-region-picker-shading-tutorial\/'>Google Charts Geo Chart Region Picker Shading Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Charts Geo Chart Region Picker Shading Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries_mapback_cc_events.jpg\" title=\"Google Charts Geo Chart Region Picker Shading Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Charts Geo Chart Region Picker Shading Tutorial<\/p><\/div>\n<p>We have a few major improvements onto yesterday&#8217;s <a title='Google Charts Geo Chart Region Picker Nesting Tutorial' href='#gcgcrpnt'>Google Charts Geo Chart Region Picker Nesting Tutorial<\/a>&#8216;s work &#8230;<\/p>\n<ul>\n<li>shading of country in the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> &#8230;<\/li>\n<li>addition of event logic for the &#8220;overlay\/underlay<font size=1>\/<a target=_blank title=? href='https:\/\/www.google.com\/search?q=what+did+speedy+gonzales+say&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=what+did+speedy+g&#038;gs_lcrp=EgZjaHJvbWUqBwgAEAAYgAQyBwgAEAAYgAQyBwgBEAAYgAQyBggCEEUYOTIHCAMQABiABDIHCAQQABiABDIICAUQABgWGB4yCAgGEAAYFhgeMggIBxAAGBYYHjIICAgQABgWGB4yCAgJEAAYFhgeqAIAsAIB&#038;sourceid=chrome&#038;ie=UTF-8'>arriba<\/a><\/font>&#8221; Google Charts Geo Chart incarnation &#8230; via Javascript DOM dynamic manipulation of Geo Chart <font color=blue>z-index<\/font> via &#8230;<br \/>\n<code><br \/>\n  function reposition() {<br \/>\n    document.getElementById(gaid).style.display='block';<br \/>\n    var nrect=document.getElementById(gaid).getBoundingClientRect();<br \/>\n    document.getElementById(gulid).style.top='' + eval(eval('' + nrect.top) + eval('' + document.body.scrollTop)) + 'px';<br \/>\n    document.getElementById(gulid).style.left='' + eval(eval('' + nrect.left) + eval('' + document.body.scrollLeft)) + 'px';<br \/>\n    document.getElementById(gulid).style.width='' + nrect.width + 'px';<br \/>\n    document.getElementById(gulid).style.height='' + nrect.height + 'px';<br \/>\n    <font color=blue>if (('' + document.getElementById(gulid).style.zIndex).indexOf('-') != -1) {<br \/>\n      document.getElementById(gulid).style.zIndex='' + ('' + document.getElementById(gulid).style.zIndex).replace('-','');<br \/>\n    } else {<br \/>\n      document.getElementById(gulid).style.zIndex='-' + ('' + document.getElementById(gulid).style.zIndex).replace('-','');<br \/>\n    }<\/font><br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; effectively toggling between &#8220;overlay&#8221; and &#8220;underlay&#8221; &#8230; <a target=_blank title=? href='https:\/\/www.google.com\/search?q=what+did+speedy+gonzales+say&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=what+did+speedy+g&#038;gs_lcrp=EgZjaHJvbWUqBwgAEAAYgAQyBwgAEAAYgAQyBwgBEAAYgAQyBggCEEUYOTIHCAMQABiABDIHCAQQABiABDIICAUQABgWGB4yCAgGEAAYFhgeMggIBxAAGBYYHjIICAgQABgWGB4yCAgJEAAYFhgeqAIAsAIB&#038;sourceid=chrome&#038;ie=UTF-8'>arriba<\/a><\/font>\n<\/li>\n<li>oncontextmenu (ie. right click) means by which any clashing region name text can be &#8220;unclashed&#8221;<\/li>\n<\/ul>\n<p>Codewise, this needed ..<\/p>\n<ul>\n<li><a target=_blank title='geo_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php--------------------------------------------------------------------------------------GETME'>the changed<\/a> <a target=_blank title='geo_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php--------------------------------------------------------------------------------------GETME'>geo_chart.php<\/a> <a target=_blank title='geo_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php'>Geo Chart<\/a> creating the new &#8220;as if background image&#8221; Google Charts Geo Chart &#8230;<\/li>\n<li> &#8230; used by <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html--------------------------------GETME'>the changed<\/a> <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html--------------------------------GETME'>regions_via_countries.html<\/a> <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html'>Region Picker<\/a><\/li>\n<li> &#8230; and helped out by <a target=_blank title='image_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php----------------------GETME'>the changed<\/a> <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php----------------------GETME'>image_chart.php<\/a> <a target=_blank title='image_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php'>Image Chart<\/a> supervisor<\/li>\n<\/ul>\n<p> &#8230; with WordPress blog 404.php helper changes as per &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  function yourfile_get_contents($wone) { \/\/, $ucc, $ctname) {<br \/>\n    global $geomapurl, $getmapdata, $iso_country_codes; \/\/ &lt;a href=\"\/wiki\/Autonomous_Republic_of_Crimea\" title=\"Autonomous Republic of Crimea\"&gt;Avtonomna Respublika Krym&lt;\/a&gt;<br \/>\n    \/\/ %20[51.4769|-0.0005|~From~,2]%20,%20[51.4769|-0.0005|~To~,2]%20,<br \/>\n    \/\/ &lt;img style=\"z-index:25;\" onload=\"  return true; \" id=\"ici\" data-onmouseout=\"this.title=origtitle;\" onmousemove=\" if (isclear || 1 == 1) { document.getElementById('moimode').value='mouseover'; filloutform(event,0); }\" src=\"\/\/www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&chld=AF|AF-BDG|AF-BGL|AF-BAL|AF-BAM|AF-DAY|AF-FRA|AF-FYB|AF-GHA|AF-GHO|AF-HEL|AF-HER|AF-JOW|AF-KAB|AF-KAN|AF-KAP|AF-KHO|AF-KNR|AF-KDZ|AF-LAG|AF-LOG|AF-NAN|AF-NIM|AF-NUR|AF-PKA|AF-PIA|AF-PAN|AF-PAR|AF-SAM|AF-SAR|AF-TAK|AF-URU|AF-WAR|AF-ZAB|&amp;chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274|7ccdef|e65814|477b73|87f592|ed75f2|09526e|27a51c|58c662|4b4840|7d01b5|f6a557|b69f63|cac10b|f3e9ab|26192c|ad7629|3b21b4|7238ab|aa1e07|23f0d7|d8dfb3|8c07c2|7a5bbf|b0ee12&amp;screenheight=900\" title=\"Optionally click in relevant region for menu\"&gt;<br \/>\n    if (file_exists('..\/HTMLCSS\/rvc_' . my_s_s_server_remote_addr() . '.html')) {<br \/>\n      sleep(5);<br \/>\n      unlink('..\/HTMLCSS\/rvc_' . my_s_s_server_remote_addr() . '.html');<br \/>\n    }<br \/>\n    $iso_underscore=false;<br \/>\n    $ucc='';<br \/>\n    $ctname='';<br \/>\n    $okwone='';<br \/>\n    $ones=[];<br \/>\n    if (strpos($wone, 'chld=') === false) {<br \/>\n      return @file_get_contents($wone);<br \/>\n    } else if (1 == 1 || strpos($wone, 'screenheight=') !== false) {<br \/>\n      $ucc=strtoupper(trim(explode('_', explode('|', explode('chld=', $wone)[1])[0])[0]));<br \/>\n      for ($ire=0; $ire&lt;sizeof($iso_country_codes); $ire+=2) {<br \/>\n        if ($ucc == strtoupper($iso_country_codes[$ire])) {<br \/>\n          $ctname=$iso_country_codes[1 + $ire];<br \/>\n        }<br \/>\n      }<br \/>\n      $okwone=file_get_contents($wone);<br \/>\n      $wone='http:\/\/en.wikipedia.org\/wiki\/ISO_3166-2:' . $ucc;<br \/>\n    }<br \/>\n    if (strlen($ucc) != 2) {<br \/>\n      return @file_get_contents($wone);<br \/>\n    }<br \/>\n    $tbit=$ucc . ';' . $ctname;<br \/>\n    $geomapurl='';<br \/>\n    $wpg='';<br \/>\n    $ones=[];<br \/>\n    $preurl='';<br \/>\n    $saveducc=@file_get_contents('saveducc.txt');<br \/>\n    $linfnd=explode($ucc . '=', $saveducc);<br \/>\n    if (sizeof($linfnd) &gt; 1) {<br \/>\n    $geomapurl=explode(\"\\n\", $linfnd[1])[0];<br \/>\n    }<br \/>\n     file_put_contents('xcc.xcc', $tbit . ' ' . $wone);<br \/>\n    if (strpos($wone, '\/wiki\/') !== false && strpos($wone, 'http') !== false) {<br \/>\n      $preurl='http' . explode('\/wiki\/', explode('http', $wone)[-1 + sizeof(explode('http', $wone))])[0];<br \/>\n    }<br \/>\n    $one=file_get_contents($wone);<br \/>\n    if ($geomapurl != '') {<br \/>\n    sleep(9);<br \/>\n    } else {<br \/>\n    file_put_contents('xccone.xcc', $preurl . ' ... ' . $one);<br \/>\n    if (strpos($one, ' sortable\"') !== false && $preurl != '') {<br \/>\n      $ones=explode('&lt;a href=\"\/wiki\/', explode(' sortable\"', explode(\"See also \", $one)[0])[1]);<br \/>\n    } else if ($preurl != '') {<br \/>\n      $ones=explode('&lt;a href=\"\/wiki\/', explode(\"See also \", $one)[0]);<br \/>\n    }<br \/>\n    <br \/>\n    for ($ii=1; $ii&lt;sizeof($ones); $ii++) {<br \/>\n      if (!$iso_underscore) {<br \/>\n      $rname=explode('&lt;', explode('&gt;', $ones[$ii])[1])[0];<br \/>\n      if (substr(($rname . '    '),0,3) == 'ISO') { $iso_underscore=true;  }<br \/>\n      if ($ii == 1) {<br \/>\n        file_put_contents('xccuccit.xcc', $ucc . ' - ' . $rname . \"\\n\");<br \/>\n      }<br \/>\n      if (trim($rname) != '') {<br \/>\n      file_put_contents('xccu.xcc', $preurl . '\/wiki\/' . explode('\"', $ones[$ii])[0]);<br \/>\n      $wpg=file_get_contents($preurl . '\/wiki\/' . explode('\"', $ones[$ii])[0]);<br \/>\n  $rname=str_replace('_',' ',explode('\"', $ones[$ii])[0]);<br \/>\n      file_put_contents('xccuc.xcc', $wpg);<br \/>\n      $wpgs=explode(' class=\"geo\"&gt;', $wpg);<br \/>\n      if (sizeof($wpgs) &gt; 1) {<br \/>\n        file_put_contents('xccuu.xcc', $preurl . '\/wiki\/' . explode('\"', $ones[$ii])[0]);<br \/>\n        $ltlg=str_replace(' ','',str_replace(';',',',explode('&lt;', $wpgs[1])[0]));<br \/>\n        file_put_contents('xccuuu.xcc', $ltlg);<br \/>\n        if ($geomapurl != '') { $geomapurl.=','; }<br \/>\n        $geomapurl.=str_replace(\"%27\",\"+\",\"%20[\" . str_replace(',','|',$ltlg) . '|~' . str_replace(\"%27\",\"+\",str_replace('%27~','~',urlencode($rname) . '~')) . ',2]%20');<br \/>\n        file_put_contents('xcz.xc', $geomapurl);<br \/>\n        file_put_contents('xccuccit.xcc', file_get_contents('xccuccit.xcc') . $ii . ' : ' . str_replace(\"%27\",\"+\",\"%20[\" . str_replace(',','|',$ltlg) . '|~' . str_replace(\"%27\",\"+\",str_replace('%27~','~',urlencode($rname) . '~')) . ',2]%20') . \"\\n\");<br \/>\n      } else {<br \/>\n        file_put_contents('xccuccit.xcc', file_get_contents('xccuccit.xcc') . $ii . ' ; ' . explode('\"', $ones[$ii])[0] . \"\\n\");<br \/>\n      }<br \/>\n      }<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n<br \/>\n    if ($geomapurl != '') {<br \/>\n      if (sizeof($linfnd) &lt;= 1) {<br \/>\n        file_put_contents('saveducc.txt', $saveducc . $ucc . '=' . $geomapurl . \"\\n\");<br \/>\n      }<br \/>\n      file_put_contents('xc.xc', $geomapurl);<br \/>\n      if (strlen('\/PHP\/GeoChart\/geo_chart.php#onclick=y&retsvg=y&overlay=a' . $ucc . '&text=text&wouldlikeyoutoseekpermission=y&width=834&height=520&country=Places&popularity=&aregeographicals=y&title=' . urlencode($tbit) . '&data=' . $geomapurl) &lt; 850) {<br \/>\n      file_put_contents('..\/HTMLCSS\/rvc_' . my_s_s_server_remote_addr() . '.html', '&lt;html&gt;&lt;head&gt;&lt;scri' . 'pt type=text\/javascript&gt; var aconto=null; function flowthrough(iois) { aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } } if (window.opener) { if (window.opener.setifrmoreacontochild) { window.opener.setifrmoreacontochild(aconto);  }   }   }   &lt;\/scr' . 'ipt&gt;&lt;\/head&gt;&lt;body&gt;&lt;iframe onload=flowthrough(this); style=width:98%;height:98%; src=\"\/PHP\/GeoChart\/geo_chart.php#onclick=y&retsvg=y&overlay=a' . $ucc . '&shade=' . $ucc . '&iso=' . $ucc . '&text=text&wouldlikeyoutoseekpermission=y&width=834&height=520&country=Places&popularity=&aregeographicals=y&title=' . urlencode($tbit) . '&data=' . unduplicate($geomapurl) . '\"&gt;&lt;\/iframe&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n      } else {<br \/>\n      file_put_contents('..\/HTMLCSS\/rvc_' . my_s_s_server_remote_addr() . '.html', '&lt;html&gt;&lt;head&gt;&lt;scri' . 'pt type=text\/javascript&gt; var aconto=null; function flowthrough(iois) { aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } } if (window.opener) { if (window.opener.setifrmoreacontochild) { window.opener.setifrmoreacontochild(aconto);  }   }   }   &lt;\/scr' . 'ipt&gt;&lt;\/head&gt;&lt;body&gt;&lt;iframe onload=flowthrough(this); style=width:98%;height:98%; src=\"\/PHP\/GeoChart\/geo_chart.php#onclick=y&retsvg=y&overlay=a' . $ucc . '&shade=' . $ucc . '&iso=' . $ucc . '&text=text&wouldlikeyoutoseekpermission=y&width=834&height=520&country=Places&popularity=&aregeographicals=y&title=' . urlencode($tbit) . '&data=' . unduplicate($geomapurl) . '\"&gt;&lt;\/iframe&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n      }<br \/>\n      <br \/>\n      \/\/ '&lt;html&gt;&lt;body&gt;&lt;iframe style=width:98%;height:98%; src=\"\/PHP\/GeoChart\/geo_chart.php#onclick=y&text=text&wouldlikeyoutoseekpermission=y&width=834&height=520&country=Places&popularity=&aregeographicals=y&title=' . urlencode($tbit) . '&data=' . $geomapurl . '\"&gt;&lt;\/iframe&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n    \/\/if (file_exists('..\/rvc_' . my_s_s_server_remote_addr() . '.html')) {<br \/>\n    \/\/  sleep(35);<br \/>\n    \/\/  unlink('..\/rvc_' . my_s_s_server_remote_addr() . '.html');<br \/>\n    \/\/}<br \/>\n    }<br \/>\n  <br \/>\n    return $okwone;<br \/>\n  }<br \/>\n  <br \/>\n  function unduplicate($inbn) {<br \/>\n     $outbn=$inbn;<br \/>\n     $thiso='';<br \/>\n     $sofarfound=';';<br \/>\n     $outbs=explode('|~', $inbn);<br \/>\n     for ($iout=1; $iout&lt;sizeof($outbs); $iout++) {<br \/>\n       $thiso=explode('~', $outbs[$iout])[0];<br \/>\n       if (strpos($sofarfound, ';' . $thiso . ';') !== false) {<br \/>\n          $youtbs=explode('|~' . $thiso . '~', $outbn);<br \/>\n          for ($jout=2; $iout&lt;sizeof($youtbs); $jout++) {<br \/>\n            $outbn=str_replace('~' . $thiso . '~' . $youtbs[$jout], '~' . '~' . $youtbs[$jout], $outbn);<br \/>\n          }<br \/>\n       } else {<br \/>\n          $sofarfound.=$thiso . ';';<br \/>\n       }<br \/>\n     }<br \/>\n     return $outbn;<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;<\/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\/google-charts-geo-chart-region-picker-shading-tutorial\/'>Google Charts Geo Chart Region Picker Shading Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcgcrpnt'>Previous relevant <a target=_blank title='Google Charts Geo Chart Region Picker Nesting Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-charts-geo-chart-region-picker-nesting-tutorial\/'>Google Charts Geo Chart Region Picker Nesting Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Charts Geo Chart Region Picker Nesting Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries_mapback.jpg\" title=\"Google Charts Geo Chart Region Picker Nesting Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Charts Geo Chart Region Picker Nesting Tutorial<\/p><\/div>\n<p>It was really our <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">inhouse Region Picker<\/a> web application we had in mind behind the &#8220;create a map background&#8221; motivations of yesterday&#8217;s <a title='Google Charts Geo Chart Nesting Tutorial' href='#gcgcnt'>Google Charts Geo Chart Nesting Tutorial<\/a>.<\/p>\n<p>We found trying the &#8230;<\/p>\n<ul>\n<li>background-image:url(&#8216;data:image\/svg+xml;utf8, blahde blah &#8216;); nor background-image:url(&#8216;data:image\/svg+xml;base64, blahde blah &#8216;); ideas were not working for us &#8230; but today, we started to try &#8230;<\/li>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\">overlay<\/a> HTML div position:absolute; opacity:0.5; z-index:-4; &#8230;<br \/>\n<table>\n<tr>\n<th><a target=_blank title='geo_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-------------------------------------------------------------------------------------GETME'>the changed<\/a> <a target=_blank title='geo_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-------------------------------------------------------------------------------------GETME'>geo_chart.php<\/a> <a target=_blank title='geo_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php'>Geo Chart<\/a> creating the new &#8220;as if background image&#8221; Google Charts Geo Chart &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n&lt;?php echo &#8221;<br \/>\n<code style='font-size:8px;'><br \/>\n   function ovmap(winobj, goodid, goodrect, thesvg) {<br \/>\n      \/\/ contain svg opacity z-index ul next to aXX display property of that ul determines pre-click<br \/>\n      var jgeo='doverlay';<br \/>\n      \/\/alert(987);<br \/>\n      if (winobj.document.getElementById(jgeo)) {<br \/>\n        winobj.document.getElementById(jgeo).style.position='absolute';<br \/>\n        winobj.document.getElementById(jgeo).style.top='' + goodrect.top + 'px';<br \/>\n        winobj.document.getElementById(jgeo).style.left='' + goodrect.left + 'px';<br \/>\n        winobj.document.getElementById(jgeo).style.width='' + goodrect.width + 'px';<br \/>\n        winobj.document.getElementById(jgeo).style.height='' + goodrect.height + 'px';<br \/>\n        winobj.document.getElementById(jgeo).style.opacity='0.5';<br \/>\n        winobj.document.getElementById(jgeo).style.zIndex='-4';<br \/>\n        winobj.document.getElementById(jgeo).style.display='block';<br \/>\n        \/\/winobj.document.getElementById(jgeo).innerHTML=thesvg.replace(\/\\#ffffff\/g,'transparent').replace(\/white\/g,'transparent');<br \/>\n        winobj.document.getElementById(jgeo).innerHTML=winobj.bsvg(jgeo, goodid, window.self, thesvg<font color=magenta>.replace(\/\\#ffffff\/g,'transparent').replace(\/white\/g,'transparent')<\/font>);<br \/>\n      }<br \/>\n    }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/td>\n<\/tr>\n<tr>\n<th> &#8230; used by <a target=_blank title='geo_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-------------------------------GETME'>the changed<\/a> <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-------------------------------GETME'>regions_via_countries.html<\/a> <a target=_blank title='regions_via_countries.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html'>Region Picker<\/a><\/th>\n<\/tr>\n<tr>\n<td>\n<code style='font-size:8px;'><br \/>\nvar gulid='', gchildwin=null, gulbsvg='', gaid='';<br \/>\n<br \/>\nvar gulid='', gchildwin=null, gulbsvg='', gaid='';<br \/>\n<br \/>\n  function setifrmoreacontochild(what) {<br \/>\n     ifrmoreacontochild=what;<br \/>\n  }<br \/>\n  <br \/>\n  function getifrmoreacontochild() {<br \/>\n     return ifrmoreacontochild;<br \/>\n  }<br \/>\n  <br \/>\n  function reposition() {<br \/>\n    document.getElementById(gaid).style.display='block';<br \/>\n    var nrect=document.getElementById(gaid).getBoundingClientRect();<br \/>\n    document.getElementById(gulid).style.top='' + nrect.top + 'px';<br \/>\n    document.getElementById(gulid).style.left='' + nrect.left + 'px';<br \/>\n    document.getElementById(gulid).style.width='' + nrect.width + 'px';<br \/>\n    document.getElementById(gulid).style.height='' + nrect.height + 'px';<br \/>\n  }<br \/>\n<br \/>\n  function bsvg(ulid, aid, childwin, ulbsvg) {<br \/>\n    gulid=ulid;<br \/>\n    gchildwin=childwin;<br \/>\n    gulbsvg=ulbsvg;<br \/>\n    if (gaid == '') {<br \/>\n      setInterval(reposition, 3000);<br \/>\n    }<br \/>\n    gaid=aid;<br \/>\n    \/\/alert('svg is ' + ulbsvg);<br \/>\n    \/\/alert(ifrmoreaconto.body.innerHTML);<br \/>\n    if (ifrmoreacontochild) {<br \/>\n       \/\/alert('child there');<br \/>\n       if (ifrmoreacontochild.getElementById('chart_div')) {<br \/>\n       \/\/alert('child svg there');<br \/>\n       \/\/alert('will apply ' + '<svg' + ifrmoreacontochild.getElementById('chart_div').innerHTML.split('<\/s' + 'vg>')[0].split('<s' + 'vg')[eval(-1 + ifrmoreacontochild.getElementById('chart_div').innerHTML.split('<\/s' + 'vg>')[0].split('<s' + 'vg').length)].replace(\/\\#dddddd\/g, 'black') + '<\/s' + 'vg>');<br \/>\n       setTimeout(function(){ document.getElementById(gulid).innerHTML='<svg' + ifrmoreacontochild.getElementById('chart_div').innerHTML.split('<\/s' + 'vg>')[0].split('<s' + 'vg')[eval(-1 + ifrmoreacontochild.getElementById('chart_div').innerHTML.split('<\/s' + 'vg>')[0].split('<s' + 'vg').length)].replace(\/\\#dddddd\/g, 'black') + '<\/s' + 'vg>'; }, 9000);<br \/>\n       }<br \/>\n    }<br \/>\n    return ulbsvg;<br \/>\n  }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th> &#8230; helped out by <font color=blue>an improved<\/font> this WordPress blog 404.php&#8221;not found&#8221; processor<\/th>\n<\/tr>\n<tr>\n<td>\n&lt;?php<br \/>\n<code style='font-size:8px;'><br \/>\n      if (strlen('\/PHP\/GeoChart\/geo_chart.php#onclick=y&retsvg=y&overlay=a' . $ucc . '&text=text&wouldlikeyoutoseekpermission=y&width=834&height=520&country=Places&popularity=&aregeographicals=y&title=' . urlencode($tbit) . '&data=' . $geomapurl) &lt; 850) {<br \/>\n      file_put_contents('..\/HTMLCSS\/rvc_' . my_s_s_server_remote_addr() . '.html', '&lt;html&gt;<font color=blue>&lt;head&gt;&lt;scri' . 'pt type=text\/javascript&gt; var aconto=null; function flowthrough(iois) { aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } } if (window.opener) { if (window.opener.setifrmoreacontochild) { window.opener.setifrmoreacontochild(aconto);  }   }   }   &lt;\/scr' . 'ipt&gt;&lt;\/head&gt;<\/font>&lt;body&gt;&lt;iframe <font color=blue>onload=flowthrough(this); <\/font>style=width:98%;height:98%; src=\"\/PHP\/GeoChart\/geo_chart.php#onclick=y<font color=blue>&retsvg=y&overlay=a' . $ucc . '<\/font>&text=text&wouldlikeyoutoseekpermission=y&width=834&height=520&country=Places&popularity=&aregeographicals=y&title=' . urlencode($tbit) . '&data=' . $geomapurl . '\"&gt;&lt;\/iframe&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n      } else {<br \/>\n      file_put_contents('..\/HTMLCSS\/rvc_' . my_s_s_server_remote_addr() . '.html', '&lt;html&gt;<font color=blue>&lt;head&gt;&lt;scri' . 'pt type=text\/javascript&gt; var aconto=null; function flowthrough(iois) { aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } } if (window.opener) { if (window.opener.setifrmoreacontochild) { window.opener.setifrmoreacontochild(aconto);  }   }   }   &lt;\/scr' . 'ipt&gt;&lt;\/head&gt;<\/font>&lt;body&gt;&lt;iframe <font color=blue>onload=flowthrough(this); <\/font>style=width:98%;height:98%; src=\"\/PHP\/GeoChart\/geo_chart.php#onclick=y<font color=blue>&retsvg=y&overlay=a' . $ucc . '<\/font>&text=text&wouldlikeyoutoseekpermission=y&width=834&height=520&country=Places&popularity=&aregeographicals=y&title=' . urlencode($tbit) . '&data=' . $geomapurl . '\"&gt;&lt;\/iframe&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n      }<br \/>\n<\/code><br \/>\n?&gt;\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ul>\n<p> &#8230; with more success.<\/p>\n<p>We can&#8217;t remember a &#8220;foreground overlay&#8221; scenario so resembling a &#8220;background image feeling&#8221; end result, the <font color=magenta>transparent<\/font> colour introduced into the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> <a target=_blank title='SVG information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG'>SVG<\/a> being crucial to help make this all work.<\/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\/google-charts-geo-chart-region-picker-nesting-tutorial\/'>Google Charts Geo Chart Region Picker Nesting Tutorial<\/a>.<\/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\/google-charts-geo-chart-region-picker-nesting-tutorial\/'>Google Charts Geo Chart Region Picker Nesting Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcgcnt'>Previous relevant <a target=_blank title='Google Charts Geo Chart Nesting Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-charts-geo-chart-nesting-tutorial\/'>Google Charts Geo Chart Nesting 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\/GeoChart\/geotest.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Charts Geo Chart Nesting Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geotest.jpg\" title=\"Google Charts Geo Chart Nesting Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Charts Geo Chart Nesting Tutorial<\/p><\/div>\n<p>Today we&#8217;re working on more <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 information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\">inhouse web application interfacer<\/a> functionality other web applications might be able to make use of &#8230; &#8220;tool&#8221; functionality, if you will.<\/p>\n<p>We want to be able to control the way a Google Charts Geo Chart can be nested within an HTML div element, for instance.  We started the day wanting to be able to make &#8230;<\/p>\n<ul>\n<li>a Google Charts Geo Chart be a background image to a div element &#8230; alas, on this first draft we couldn&#8217;t get there (but will continue with the research here) &#8230; whereas we succeeded &#8230;<\/li>\n<li>adding the Google Charts Geo Chart interfacer&#8217;s resultant <a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> data as the innerHTML (ie. content) &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction newbackin() {<br \/>\n  if (dmyxhr.readyState == 4) {<br \/>\n    if (dmyxhr.status == 200) {<br \/>\n      if (dmyxhr.responseText) {<br \/>\n        var m_t='image\/jpeg';<br \/>\n        var h_t='179';<br \/>\n        var w_t='320';<br \/>\n        var dbits = dmyxhr.responseText.split('\\\"height\\\": ');<br \/>\n        if (dbits.length &gt; 1) {<br \/>\n          h_t=dbits[1].split(',')[0].split(String.fromCharCode(10))[0].split('}')[0].trim();<br \/>\n        }<br \/>\n        dbits = dmyxhr.responseText.split('\\\"mime_type\\\": \\\"');<br \/>\n        if (dbits.length &gt; 1) {<br \/>\n          m_t=dbits[1].split('\\\"')[0];<br \/>\n        }<br \/>\n        dbits = dmyxhr.responseText.split('\\\"width\\\": ');<br \/>\n        if (dbits.length &gt; 1) {<br \/>\n          w_t=dbits[1].split(',')[0].split(String.fromCharCode(10))[0].split('}')[0].trim();<br \/>\n        }<br \/>\n        dbits = dmyxhr.responseText.split('\\\"data\\\":');<br \/>\n        dbits = dmyxhr.responseText.split('\\\"data\\\":');<br \/>\n        if (dbits.length &gt; 1) {<br \/>\n         \/\/ replace all '_' with '\/' and all '-' with '+' thanks to https:\/\/stackoverflow.com\/questions\/757675\/website-screenshots<br \/>\n         dgsbi='&lt;img alt=\\\"Blog Posting Image\\\" style=\\\"width:' + w_t + 'px;height:' + h_t + 'px;\\\" width=' + w_t + ' height=' + h_t + ' src=\\\"data:' + m_t + ';base64,' + dbits[1].split('\\\"')[1].split('\\\"')[0].replace(\/\\_\/g,'\/').replace(\/\\-\/g,'+') + '\\\"&gt;&lt;\/img&gt;';<br \/>\n        \/\/alert('dgsbi=' + dgsbi);<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction ajaxit(urlin) {<br \/>\n  if (urlin.length &gt; 0) {<br \/>\n      aurl=urlin;<br \/>\n      if (window.XMLHttpRequest) {<br \/>\n        dmyxhr = new window.XMLHttpRequest;<br \/>\n    }<br \/>\n    else {<br \/>\n  try {<br \/>\n    dmyxhr = new ActiveXObject('Msxml2.XMLHTTP');<br \/>\n  } catch (othermicrosoft) {<br \/>\n    try {<br \/>\n      dmyxhr = new ActiveXObject('Microsoft.XMLHTTP');<br \/>\n    } catch (failed) {<br \/>\n      dmyxhr = false;<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n  var xurl = 'https:\/\/www.googleapis.com\/pagespeedonline\/v1\/runPagespeed?url=' + encodeURIComponent(urlin) + '&screenshot=true';<br \/>\n  if (dmyxhr) {<br \/>\n    dmyxhr.onreadystatechange = newbackin;<br \/>\n    dmyxhr.open('GET', xurl, true);<br \/>\n    dmyxhr.send(null);<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\n  function wbtoa(instris) {<br \/>\n    var outstris=instris;<br \/>\n    while (outstris.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n      outstris=outstris.replace(String.fromCharCode(10),'');<br \/>\n    }<br \/>\n    var xzs=prompt(outstris, outstris);<br \/>\n    return outstris.replace(\/\\\\\\\"\/g, \\\"'\\\");<br \/>\n  }<br \/>\n    <br \/> <br \/>\n      function svgret(swhat) {<br \/>\n        var igeo='georeceiver', aspfactor=1.0, swis=-1, shis=-1, whrect=null;<br \/>\n        var newswis=-1, newshis=-1, cswis=' ', cshis=' ', newcswis=' ', newcshis=' ', whdelim='';<br \/>\n                    var newercswis=' width=' + whdelim + '100%' + whdelim;<br \/>\n                    var newercshis=' height=' + whdelim + '100%' + whdelim;<br \/>\n        var cswistwo=' ', cshistwo=' ', newcswistwo=' ', newcshistwo=' ';<br \/>\n        var retsvg=(location.search + ('' + location.hash).replace(\/^null\/g,'').replace(\/^undefined\/g,'').replace(\/^\\#\/g,'&')).split('retsvg=')[1] ? (decodeURIComponent((location.search + ('' + location.hash).replace(\/^null\/g,'').replace(\/^undefined\/g,'').replace(\/^\\#\/g,'&')).split('retsvg=')[1].split('&')[0])) : ' ';<br \/>\n        if (retsvg != ' ') {<br \/>\n          if (swhat.indexOf('&lt;svg') != -1 && swhat.indexOf('&lt;\/s' + 'vg&gt;') != -1) {<br \/>\n            var candidate=false;<br \/>\n            if (swhat.indexOf(' width=') != -1 && swhat.indexOf(' height=') != -1) {<br \/>\n              if (swhat.split(' width=')[1].substring(0,1) &lt; '0') {<br \/>\n                whdelim=swhat.split(' width=')[1].substring(0,1);<br \/>\n                cswis=' width=' + swhat.split(' width=')[1].split(' ')[0].split('&gt;')[0];<br \/>\n                cshis=' height=' + swhat.split(' height=')[1].split(' ')[0].split('&gt;')[0];<br \/>\n                newcswis=cswis;<br \/>\n                newcshis=cshis;<br \/>\n                swis=eval('' + swhat.split(' width=')[1].substring(1).split(swhat.split(' width=')[1].substring(0,1))[0]);<br \/>\n                shis=eval('' + swhat.split(' height=')[1].substring(1).split(swhat.split(' height=')[1].substring(0,1))[0]);<br \/>\n              } else {<br \/>\n                cswis=' width=' + swhat.split(' width=')[1].split(' ')[0].split('&gt;')[0];<br \/>\n                cshis=' height=' + swhat.split(' width=')[1].split(' ')[0].split('&gt;')[0];<br \/>\n                newcswis=cswis;<br \/>\n                newcshis=cshis;<br \/>\n                swis=eval('' + swhat.split(' width=')[1].split(' ')[0].split('&gt;')[0]);<br \/>\n                shis=eval('' + swhat.split(' height=')[1].split(' ')[0].split('&gt;')[0]);<br \/>\n              }<br \/>\n            }<br \/>\n            if (window.opener && !candidate) {<br \/>\n              if (window.opener.document.getElementById(igeo)) {<br \/>\n                candidate=true;<br \/>\n                if (('' + window.opener.document.getElementById(igeo).value).replace('undefined','').replace('null','') != '') {<br \/>\n                  igeo=window.opener.document.getElementById(igeo).value;<br \/>\n                }<br \/>\n                if (cswis.trim() != '') {<br \/>\n                  whrect=window.opener.document.getElementById(igeo).getBoundingClientRect();<br \/>\n                  \/\/ 2000 x 2500 to fit into 800 x 654<br \/>\n                  if (eval(swis \/ eval('' + whrect.width)) &lt; eval(shis \/ eval('' + whrect.height))) {<br \/>\n                    aspfactor=eval(eval('' + whrect.width) \/ swis);<br \/>\n                    cswistwo='&width=' + ('' + swis).split('.')[0];<br \/>\n                    cshistwo='&height=' + ('' + shis).split('.')[0];<br \/>\n                    newcswistwo='&width=' + Math.floor(eval(swis * aspfactor));<br \/>\n                    newcshistwo='&height=' + Math.floor(eval(shis * aspfactor));<br \/>\n                    newcswis=' width=' + whdelim + eval(swis * aspfactor) + whdelim;<br \/>\n                    newcshis=' height=' + whdelim + eval(shis * aspfactor) + whdelim;<br \/>\n                  } else {<br \/>\n                    aspfactor=eval(eval('' + whrect.height) \/ shis);<br \/>\n                    cswistwo='&width=' + ('' + swis).split('.')[0];<br \/>\n                    cshistwo='&height=' + ('' + shis).split('.')[0];<br \/>\n                    newcswistwo='&width=' + Math.floor(eval(swis * aspfactor));<br \/>\n                    newcshistwo='&height=' + Math.floor(eval(shis * aspfactor));<br \/>\n                    newcswis=' width=' + whdelim + eval(swis * aspfactor) + whdelim;<br \/>\n                    newcshis=' height=' + whdelim + eval(shis * aspfactor) + whdelim;<br \/>\n                  }<br \/>\n                }<br \/>\n                if (('' + window.opener.document.getElementById(igeo).outerHTML).indexOf('background') != -1) {<br \/>\n                  window.opener.document.getElementById(igeo).style.backgroundSize='cover';<br \/>\n                  window.opener.document.getElementById(igeo).style.backgroundRepeat='no-repeat';<\/br><br \/>\n window.opener.document.getElementById(igeo).style.backgroundImage='URL(`data:image\/svg+xml;utf8,' + wbtoa('&lt;svg viewBox=\\\"0 0 ' + Math.floor(eval(swis * aspfactor)) + ' ' + Math.floor(eval(shis * aspfactor)) + '\\\" ' + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg')[eval(-1 + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg').length)].replace(\/\\#ffffff\/g,'white').replace(\/\\#000000\/g,'black').replace(\/\\#cccccc\/g,'gray').replace(\/\\#dddddd\/g,'silver').replace(\/\\#_ABSTRACT_RENDERER_ID_2\/g,'').replace(\/\\#_ABSTRACT_RENDERER_ID_1\/g,'').replace(\/\\#109618\/g,'green').replace(\/\\#f5f5f5\/g,'lightgray').replace('hidden;','visible;').replace(cswistwo,newcswistwo).replace(cshistwo,newcshistwo) + '&lt;\/s' + 'vg&gt;') + '`)';<br \/>\n                  if (('' + window.opener.document.getElementById(igeo).outerHTML).indexOf('none;') != -1) {<br \/>\n                    window.opener.document.getElementById(igeo).style.display='block';<br \/>\n                  }<br \/>\n                } else if (('' + window.opener.document.getElementById(igeo).innerHTML) == '' || ('' + window.opener.document.getElementById(igeo).innerHTML).indexOf('&lt;svg') == 0) {<br \/>\n                  \/\/window.opener.document.getElementById(igeo).innerHTML='&lt;svg viewBox=\\\"0 0 ' + Math.floor(eval(swis * aspfactor)) + ' ' + Math.floor(eval(shis * aspfactor)) + '\\\" ' + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg')[eval(-1 + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg').length)].replace(\/\\#ffffff\/g,'white').replace(\/\\#000000\/g,'black').replace(\/\\#cccccc\/g,'gray').replace(\/\\#dddddd\/g,'silver').replace(\/\\#_ABSTRACT_RENDERER_ID_2\/g,'').replace(\/\\#_ABSTRACT_RENDERER_ID_1\/g,'').replace(\/\\#109618\/g,'green').replace(\/\\#f5f5f5\/g,'lightgray').replace('hidden;','visible;').replace(cswistwo,newcswistwo).replace(cshistwo,newcshistwo).replace(cswis,newercswis).replace(cshis,newercshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis) + '&lt;\/s' + 'vg&gt;';<br \/>\n                  window.opener.document.getElementById(igeo).innerHTML='&lt;svg viewBox=\\\"0 0 ' + Math.floor(eval(swis * aspfactor)) + ' ' + Math.floor(eval(shis * aspfactor)) + '\\\" ' + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg')[eval(-1 + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg').length)].replace(\/\\#ffffff\/g,'#ffffff').replace(\/\\#000000\/g,'#000000').replace(\/\\#cccccc\/g,'#cccccc').replace(\/\\#dddddd\/g,'#cccccc').replace(\/\\#_ABSTRACT_RENDERER_ID_2\/g,'#_ABSTRACT_RENDERER_ID_2').replace(\/\\#_ABSTRACT_RENDERER_ID_1\/g,'#_ABSTRACT_RENDERER_ID_1').replace(\/\\#109618\/g,'#109618').replace(\/\\&lt;text\/g,'&lt;!--text').replace(\/\\&lt;\\\/text\\&gt;\/g,'&lt;\/text--&gt;').replace(\/\\#f5f5f5\/g,'#e5e5e5').replace('hidden;','visible;').replace(cswistwo,newcswistwo).replace(cshistwo,newcshistwo).replace(cswis,newercswis).replace(cshis,newercshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis) + '&lt;\/s' + 'vg&gt;';<br \/>\n                  if (('' + window.opener.document.getElementById(igeo).outerHTML).indexOf('none;') != -1) {<br \/>\n                    window.opener.document.getElementById(igeo).style.display='block';<br \/>\n                  }<br \/>\n                }<br \/>\n              }<br \/>\n            }<br \/>\n<br \/>\n            if (window.parent && !candidate) {<br \/>\n              if (window.parent.document.getElementById(igeo)) {<br \/>\n                candidate=true;<br \/>\n                if (('' + window.parent.document.getElementById(igeo).value).replace('undefined','').replace('null','') != '') {<br \/>\n                  igeo=window.parent.document.getElementById(igeo).value;<br \/>\n                }<br \/>\n                if (cswis.trim() != '') {<br \/>\n                  whrect=window.parent.document.getElementById(igeo).getBoundingClientRect();<br \/>\n                  \/\/ 2000 x 2500 to fit into 800 x 654<br \/>\n                  if (eval(swis \/ eval('' + whrect.width)) &lt; eval(shis \/ eval('' + whrect.height))) {<br \/>\n                    aspfactor=eval(eval('' + whrect.width) \/ swis);<br \/>\n                    cswistwo='width=' + ('' + swis).split('.')[0];<br \/>\n                    cshistwo='height=' + ('' + shis).split('.')[0];<br \/>\n                    newcswistwo='width=' + Math.floor(eval(swis * aspfactor));<br \/>\n                    newcshistwo='height=' + Math.floor(eval(shis * aspfactor));<br \/>\n                    \/\/alert('cswistwo=' + cswistwo + ' and newcswistwo=' + newcswistwo);<br \/>\n                    \/\/if (swhat.indexOf(' clip-path=') != -1) {<br \/>\n                    \/\/   alert(swhat.split(' clip-path=')[1].substring(0,400));<br \/>\n                    \/\/}<br \/>\n                    newcswis=' width=' + whdelim + eval(swis * aspfactor) + whdelim;<br \/>\n                    newcshis=' height=' + whdelim + eval(shis * aspfactor) + whdelim;<br \/>\n                  } else {<br \/>\n                    aspfactor=eval(eval('' + whrect.height) \/ shis);<br \/>\n                    cswistwo='width=' + ('' + swis).split('.')[0];<br \/>\n                    cshistwo='height=' + ('' + shis).split('.')[0];<br \/>\n                    newcswistwo='width=' + Math.floor(eval(swis * aspfactor));<br \/>\n                    newcshistwo='height=' + Math.floor(eval(shis * aspfactor));<br \/>\n                    \/\/alert('Cswistwo=' + cswistwo + ' and newcswistwo=' + newcswistwo);<br \/>\n                    \/\/if (swhat.indexOf(' clip-path=') != -1) {<br \/>\n                    \/\/   alert(swhat.split(' clip-path=')[1].substring(0,400));<br \/>\n                    \/\/}<br \/>\n                    newcswis=' width=' + whdelim + eval(swis * aspfactor) + whdelim;<br \/>\n                    newcshis=' height=' + whdelim + eval(shis * aspfactor) + whdelim;<br \/>\n                  }<br \/>\n                }<br \/>\n                if (('' + window.parent.document.getElementById(igeo).outerHTML).indexOf('background') != -1) {<br \/>\n                  \/\/ajaxit(document.URL);<br \/>\n                  window.parent.document.getElementById(igeo).style.backgroundSize='cover';<br \/>\n                  window.parent.document.getElementById(igeo).style.backgroundRepeat='no-repeat';<br \/>\n             <br \/> <br \/>\n \/\/window.parent.document.getElementById(igeo).style.backgroundImage='URL(`data:image\/svg+xml;utf8,' + wbtoa('&lt;svg viewBox=\\\"0 0 ' + Math.floor(eval(swis * aspfactor)) + ' ' + Math.floor(eval(shis * aspfactor)) + '\\\" ' + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg')[eval(-1 + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg').length)].replace(\/\\#ffffff\/g,'white').replace(\/\\#000000\/g,'black').replace(\/\\#cccccc\/g,'gray').replace(\/\\#dddddd\/g,'silver').replace(\/\\#_ABSTRACT_RENDERER_ID_2\/g,'').replace(\/\\#_ABSTRACT_RENDERER_ID_1\/g,'').replace(\/\\#109618\/g,'green').replace(\/\\#f5f5f5\/g,'lightgray').replace('hidden;','visible;').replace(cswistwo,newcswistwo).replace(cshistwo,newcshistwo) + '&lt;\/s' + 'vg&gt;') + '`)';<br \/>\n                  \/\/alert('URL(\\\"data:image\/svg+xml;utf8,' + (wbtoa('&lt;svg viewBox=\\\"0 0 ' + Math.floor(eval(swis * aspfactor)) + ' ' + Math.floor(eval(shis * aspfactor)) + '\\\" ' + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg')[eval(-1 + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg').length)].replace(\/\\#ffffff\/g,'white').replace(\/\\#000000\/g,'black').replace(\/\\#cccccc\/g,'gray').replace(\/\\#dddddd\/g,'silver').replace(\/\\#_ABSTRACT_RENDERER_ID_2\/g,'').replace(\/\\#_ABSTRACT_RENDERER_ID_1\/g,'').replace(\/\\#109618\/g,'green').replace(\/\\#f5f5f5\/g,'lightgray').replace('hidden;','visible;').replace(cswistwo,newcswistwo).replace(cshistwo,newcshistwo) + '&lt;\/s' + 'vg&gt;')) + '\\\")');<br \/>\n                window.parent.document.getElementById(igeo).style.backgroundImage='URL(\\\"data:image\/svg+xml;utf8,' + (wbtoa('&lt;svg viewBox=\\\"0 0 ' + Math.floor(eval(swis * aspfactor)) + ' ' + Math.floor(eval(shis * aspfactor)) + '\\\" ' + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg')[eval(-1 + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg').length)].replace(\/\\#ffffff\/g,'white').replace(\/\\#000000\/g,'black').replace(\/\\#cccccc\/g,'gray').replace(\/\\#dddddd\/g,'silver').replace(\/\\#_ABSTRACT_RENDERER_ID_2\/g,'').replace(\/\\#_ABSTRACT_RENDERER_ID_1\/g,'').replace(\/\\#109618\/g,'green').replace(\/\\#f5f5f5\/g,'lightgray').replace('hidden;','visible;').replace(cswistwo,newcswistwo).replace(cshistwo,newcshistwo) + '&lt;\/s' + 'vg&gt;')) + '\\\")';<br \/>\n                  if (('' + window.parent.document.getElementById(igeo).outerHTML).indexOf('none;') != -1) {<br \/>\n                    window.parent.document.getElementById(igeo).style.display='block';<br \/>\n                  }<br \/>\n                  \/\/window.parent.document.getElementById('rest').innerHTML='&lt;img src=\\\"' + 'data:image\/svg+xml;base64,' + window.btoa(wbtoa('&lt;svg viewBox=\\\"0 0 ' + Math.floor(eval(swis * aspfactor)) + ' ' + Math.floor(eval(shis * aspfactor)) + '\\\" ' + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg')[eval(-1 + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg').length)].replace(\/\\#ffffff\/g,'white').replace(\/\\#000000\/g,'black').replace(\/\\#cccccc\/g,'gray').replace(\/\\#dddddd\/g,'silver').replace(\/\\#_ABSTRACT_RENDERER_ID_2\/g,'').replace(\/\\#_ABSTRACT_RENDERER_ID_1\/g,'').replace(\/\\#109618\/g,'green').replace(\/\\#f5f5f5\/g,'lightgray').replace('hidden;','visible;').replace(cswistwo,newcswistwo).replace(cshistwo,newcshistwo) + '&lt;\/s' + 'vg&gt;')) + '\\\"&gt;&lt;\/img&gt;';<br \/>\n                } else if (('' + window.parent.document.getElementById(igeo).innerHTML) == '' || ('' + window.parent.document.getElementById(igeo).innerHTML).indexOf('&lt;svg') == 0) {<br \/>\n                  window.parent.document.getElementById(igeo).innerHTML='&lt;svg viewBox=\\\"0 0 ' + Math.floor(eval(swis * aspfactor)) + ' ' + Math.floor(eval(shis * aspfactor)) + '\\\" ' + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg')[eval(-1 + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg').length)].replace(\/\\#ffffff\/g,'#ffffff').replace(\/\\#000000\/g,'#000000').replace(\/\\#cccccc\/g,'#cccccc').replace(\/\\#dddddd\/g,'#cccccc').replace(\/\\#_ABSTRACT_RENDERER_ID_2\/g,'#_ABSTRACT_RENDERER_ID_2').replace(\/\\#_ABSTRACT_RENDERER_ID_1\/g,'#_ABSTRACT_RENDERER_ID_1').replace(\/\\#109618\/g,'#109618').replace(\/\\&lt;text\/g,'&lt;!--text').replace(\/\\&lt;\\\/text\\&gt;\/g,'&lt;\/text--&gt;').replace(\/\\#f5f5f5\/g,'#e5e5e5').replace('hidden;','visible;').replace(cswistwo,newcswistwo).replace(cshistwo,newcshistwo).replace(cswis,newercswis).replace(cshis,newercshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis) + '&lt;\/s' + 'vg&gt;';<br \/>\n                  if (('' + window.parent.document.getElementById(igeo).outerHTML).indexOf('none;') != -1) {<br \/>\n                    window.parent.document.getElementById(igeo).style.display='block';<br \/>\n                  }<br \/>\n                }<br \/>\n              }<br \/>\n            }<br \/>\n<br \/>\n            if (window.top && !candidate) {<br \/>\n              if (window.top.document.getElementById(igeo)) {<br \/>\n                candidate=true;<br \/>\n                if (('' + window.top.document.getElementById(igeo).value).replace('undefined','').replace('null','') != '') {<br \/>\n                  igeo=window.top.document.getElementById(igeo).value;<br \/>\n                }<br \/>\n                if (cswis.trim() != '') {<br \/>\n                  whrect=window.top.document.getElementById(igeo).getBoundingClientRect();<br \/>\n                  \/\/ 2000 x 2500 to fit into 800 x 654<br \/>\n                  if (eval(swis \/ eval('' + whrect.width)) &lt; eval(shis \/ eval('' + whrect.height))) {<br \/>\n                    aspfactor=eval(eval('' + whrect.width) \/ swis);<br \/>\n                    cswistwo='&width=' + ('' + swis).split('.')[0];<br \/>\n                    cshistwo='&height=' + ('' + shis).split('.')[0];<br \/>\n                    newcswistwo='&width=' + Math.floor(eval(swis * aspfactor));<br \/>\n                    newcshistwo='&height=' + Math.floor(eval(shis * aspfactor));<br \/>\n                    newcswis=' width=' + whdelim + eval(swis * aspfactor) + whdelim;<br \/>\n                    newcshis=' height=' + whdelim + eval(shis * aspfactor) + whdelim;<br \/>\n                  } else {<br \/>\n                    aspfactor=eval(eval('' + whrect.height) \/ shis);<br \/>\n                    cswistwo='&width=' + ('' + swis).split('.')[0];<br \/>\n                    cshistwo='&height=' + ('' + shis).split('.')[0];<br \/>\n                    newcswistwo='&width=' + Math.floor(eval(swis * aspfactor));<br \/>\n                    newcshistwo='&height=' + Math.floor(eval(shis * aspfactor));<br \/>\n                    newcswis=' width=' + whdelim + eval(swis * aspfactor) + whdelim;<br \/>\n                    newcshis=' height=' + whdelim + eval(shis * aspfactor) + whdelim;<br \/>\n                  }<br \/>\n                }<br \/>\n                if (('' + window.top.document.getElementById(igeo).outerHTML).indexOf('background') != -1) {<br \/>\n                  window.top.document.getElementById(igeo).style.backgroundSize='cover';<br \/>\n                  window.top.document.getElementById(igeo).style.backgroundRepeat='no-repeat';<br \/>\n                  window.top.document.getElementById(igeo).style.backgroundImage='URL(`data:image\/svg+xml;utf8,' + wbtoa('&lt;svg viewBox=\\\"0 0 ' + Math.floor(eval(swis * aspfactor)) + ' ' + Math.floor(eval(shis * aspfactor)) + '\\\" ' + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg')[eval(-1 + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg').length)].replace(\/\\#ffffff\/g,'white').replace(\/\\#000000\/g,'black').replace(\/\\#cccccc\/g,'gray').replace(\/\\#dddddd\/g,'silver').replace(\/\\#_ABSTRACT_RENDERER_ID_2\/g,'').replace(\/\\#_ABSTRACT_RENDERER_ID_1\/g,'').replace(\/\\#109618\/g,'green').replace(\/\\#f5f5f5\/g,'lightgray').replace('hidden;','visible;').replace(cswistwo,newcswistwo).replace(cshistwo,newcshistwo) + '&lt;\/s' + 'vg&gt;') + '`)';<br \/>\n                  if (('' + window.top.document.getElementById(igeo).outerHTML).indexOf('none;') != -1) {<br \/>\n                    window.top.document.getElementById(igeo).style.display='block';<br \/>\n                  }<br \/>\n                } else if (('' + window.top.document.getElementById(igeo).innerHTML) == '' || ('' + window.top.document.getElementById(igeo).innerHTML).indexOf('&lt;svg') == 0) {<br \/>\n                  \/\/window.top.document.getElementById(igeo).innerHTML='&lt;svg viewBox=\\\"0 0 ' + Math.floor(eval(swis * aspfactor)) + ' ' + Math.floor(eval(shis * aspfactor)) + '\\\" ' + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg')[eval(-1 + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg').length)].replace(\/\\#ffffff\/g,'white').replace(\/\\#000000\/g,'black').replace(\/\\#cccccc\/g,'gray').replace(\/\\#dddddd\/g,'silver').replace(\/\\#_ABSTRACT_RENDERER_ID_2\/g,'').replace(\/\\#_ABSTRACT_RENDERER_ID_1\/g,'').replace(\/\\#109618\/g,'green').replace(\/\\#f5f5f5\/g,'lightgray').replace('hidden;','visible;').replace(cswistwo,newcswistwo).replace(cshistwo,newcshistwo).replace(cswis,newercswis).replace(cshis,newercshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis) + '&lt;\/s' + 'vg&gt;';<br \/>\n                  window.top.document.getElementById(igeo).innerHTML='&lt;svg viewBox=\\\"0 0 ' + Math.floor(eval(swis * aspfactor)) + ' ' + Math.floor(eval(shis * aspfactor)) + '\\\" ' + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg')[eval(-1 + swhat.split('&lt;\/s' + 'vg&gt;')[0].split('&lt;svg').length)].replace(\/\\#ffffff\/g,'#ffffff').replace(\/\\#000000\/g,'#000000').replace(\/\\#cccccc\/g,'#cccccc').replace(\/\\#dddddd\/g,'#cccccc').replace(\/\\#_ABSTRACT_RENDERER_ID_2\/g,'#_ABSTRACT_RENDERER_ID_2').replace(\/\\#_ABSTRACT_RENDERER_ID_1\/g,'#_ABSTRACT_RENDERER_ID_1').replace(\/\\#109618\/g,'#109618').replace(\/\\&lt;text\/g,'&lt;!--text').replace(\/\\&lt;\\\/text\\&gt;\/g,'&lt;\/text--&gt;').replace(\/\\#f5f5f5\/g,'#e5e5e5').replace('hidden;','visible;').replace(cswistwo,newcswistwo).replace(cshistwo,newcshistwo).replace(cswis,newercswis).replace(cshis,newercshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis).replace(cswis,newcswis).replace(cshis,newcshis) + '&lt;\/s' + 'vg&gt;';<br \/>\n                  if (('' + window.top.document.getElementById(igeo).outerHTML).indexOf('none;') != -1) {<br \/>\n                    window.top.document.getElementById(igeo).style.display='block';<br \/>\n                  }<br \/>\n                }<br \/>\n              }<br \/>\n            }<br \/>\n<br \/>\n          }<br \/>\n        }<br \/>\n        return swhat;<br \/>\n      }<br \/>\n           <br \/> <br \/>\n      setTimeout(function(){ svgret(document.body.innerHTML); }, 5000);<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; in ><a target=_blank title='geo_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php------------------------------------------------------------------------------------GETME'>the changed<\/a> <a target=_blank title='geo_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php------------------------------------------------------------------------------------GETME'>geo_chart.php<\/a> <a target=_blank title='geo_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php'>Geo Chart<\/a><\/li>\n<p> interfacer of the div element &#8230;<\/li>\n<\/ul>\n<p> &#8230; and offering user control over the resultant Google Charts Geo Chart &#8230;<\/p>\n<ol>\n<li>width<\/li>\n<li>height<\/li>\n<li>latitude<\/li>\n<li>longitude<\/li>\n<li>place(s)<\/li>\n<\/ol>\n<p> &#8230; further to the previous progress regarding Google Charts Geo Charts when we presented <a title='TimeZone Places Nearest Places Tweak Tutorial' href='#tzpnptt'>TimeZone Places Nearest Places Tweak Tutorial<\/a>.<\/p>\n<p>Our <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geotest.html_GETME\">first draft geotest.html<\/a> &#8220;proof of concept&#8221; tests of this are <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geotest.html\">available here<\/a>.<\/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\/google-charts-geo-chart-nesting-tutorial\/'>Google Charts Geo Chart Nesting Tutorial<\/a>.<\/p-->\n<hr>\n<p id='tzpnptt'>Previous relevant <a target=_blank title='TimeZone Places Nearest Places Tweak Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/timezone-places-nearest-places-tweak-tutorial\/'>TimeZone Places Nearest Places Tweak 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\/tz_places.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"TimeZone Places Nearest Places Tweak Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places_becomes.gif\" title=\"TimeZone Places Nearest Places Tweak Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">TimeZone Places Nearest Places Tweak Tutorial<\/p><\/div>\n<p>When we presented <a title='GeoJson World Countries Drag and Drop Makeover Nuance Tutorial' href='#gjwcddmnt'>GeoJson World Countries Drag and Drop Makeover Nuance Tutorial<\/a> we tweaked our inhouse TimeZone Places PHP web application.  But it needs a &#8220;re-tweak&#8221;.<\/p>\n<p>In that Nearest Places form part of the TimeZone places webpage, we noticed that even when shaping to enter a TimeZone Placename in the first textbox we made no attempt to fill in &#8230;<\/p>\n<ul>\n<li>latitude<\/li>\n<li>longitude<\/li>\n<\/ul>\n<p> &#8230; when we have the information to do so, and even if we&#8217;re misunderstanding a placename designation, that should not stop us from trying, because those two numerical fields above can be corrected, and the form resubmitted, in these scenarios.<\/p>\n<p>Apart from making a PHP derived Javascript var<font size=1>iable<\/font> be made available to the code, we <font color=blue>&#8220;wrap&#8221;<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  $otherform=\"&lt;br&gt;&lt;br&gt;&lt;iframe id=nearestif name=nearestif style=display:none; src=about:none&gt;&lt;\/iframe&gt;&lt;div id=nearest&gt;&lt;\/div&gt;&lt;form target=nearestif action=.\/tz_places.php method=GET style=background-color:#f0f0f0;&gt;Place: &lt;input onblur=\\\" if (this.value.length &gt; 0) { document.getElementById('nearestif').src=<font color=blue>perhapsfillin(<\/font>'.\/tz_places.php?latitude=&longitude=&place=' + encodeURIComponent(this.value)<font color=blue>)<\/font>;  } \\\" type=text id=nplace name=place value=&gt;&lt;\/input&gt; Latitude: &lt;input type=number id=latitude name=latitude value=0.0000 max=90.0000 min=-90.0000 step=0.0001&gt;&lt;\/input&gt; Longitude: &lt;input type=number id=longitude name=longitude value=0.0000 max=180.0000 min=-180.0000 step=0.0001&gt;&lt;\/input&gt;&lt;br&gt;&lt;input style=background-color:orange; type=submit id=inearest value='Nearest TimeZone Places'&gt;&lt;\/input&gt;&lt;\/form&gt;\";<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; the &#8220;a&#8221; link content call via &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction perhapsfillin(inidea) {<br \/>\n \/\/ '.\/tz_places.php?latitude=&longitude=&place=' + encodeURIComponent(this.value))<br \/>\n var outidea=inidea;<br \/>\n if (inidea.indexOf('place=') != -1) {<br \/>\n   var inplaceis=decodeURIComponent(inidea.split('place=')[1].split('&')[0].split('#')[0]);<br \/>\n   \/\/ +07'&gt;Asia\/Tomsk&lt;\/option&gt;&lt;option value='Europe\/London' data-geo='51.5074,-0.1278,BST,GB,+0'&gt;Europe\/London&lt;\/<br \/>\n   if (yourtzlist.toLowerCase().indexOf('\/' + inplaceis.toLowerCase().replace(\/\\ \/g,'_') + '&lt;') != -1) {<br \/>\n    document.getElementById('latitude').value='' + eval('' + yourtzlist.toLowerCase().split('\/' + inplaceis.toLowerCase().replace(\/\\ \/g,'_') + '&lt;')[0].split(' data-geo=')[eval(-1 + yourtzlist.toLowerCase().split('\/' + inplaceis.toLowerCase().replace(\/\\ \/g,'_') + '&lt;')[0].split(' data-geo=').length)].substring(1).split(',')[0]).toPrecision(6);<br \/>\n    document.getElementById('longitude').value='' +  eval('' + yourtzlist.toLowerCase().split('\/' + inplaceis.toLowerCase().replace(\/\\ \/g,'_') + '&lt;')[0].split(' data-geo=')[eval(-1 + yourtzlist.toLowerCase().split('\/' + inplaceis.toLowerCase().replace(\/\\ \/g,'_') + '&lt;')[0].split(' data-geo=').length)].substring(1).split(',')[1]).toPrecision(6);<br \/>\n    outidea=outidea.replace('latitude=' + inidea.split('latitude=')[1].split('&')[0].split('#')[0], 'latitude=' + document.getElementById('latitude').value);<br \/>\n    outidea=outidea.replace('longitude=' + inidea.split('longitude=')[1].split('&')[0].split('#')[0], 'longitude=' + document.getElementById('longitude').value);<br \/>\n   }<br \/>\n }<br \/>\n return outidea;<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/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\/tz_places.php--------------------------GETME\" title=\"tz_places.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\" title=\"TimeZone Places\">TimeZone Places<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php--------------------------GETME\" title=\"tz_places.php\">tz_places.php<\/a><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-geojson-world-countries-drag-and-drop-makeover-nuance-tutorial\/'>New GeoJson World Countries Drag and Drop Makeover Nuance Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcddmnt'>Previous relevant <a target=_blank title='GeoJson World Countries Drag and Drop Makeover Nuance Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-drag-and-drop-makeover-nuance-tutorial\/'>GeoJson World Countries Drag and Drop Makeover Nuance Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries Drag and Drop Makeover Nuance Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/bad_to_good.gif\" title=\"GeoJson World Countries Drag and Drop Makeover Nuance Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries Drag and Drop Makeover Nuance Tutorial<\/p><\/div>\n<p>Nuance alert!   We&#8217;re not sure if you noticed, but if you tried out the Drag and Drop functionality in the World Countries web application of yesterday&#8217;s <a title='GeoJson World Countries Drag and Drop Makeover Tutorial' href='#gjwcddmt'>GeoJson World Countries Drag and Drop Makeover Tutorial<\/a> you may have noticed &#8230;<\/p>\n<ul>\n<li>for a country with lots of TimeZone places, like Brazil, you could get a decent <a 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.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\">Google Chart<\/a> Geo Chart map up &#8230; but if you were to click the &#8220;Map?&#8221; link down the bottom of that iframe &#8230;<\/li>\n<li>it would fail to show a <a 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.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\">Google Chart<\/a> Map Chart for that country&#8217;s TimeZone places<\/li>\n<\/ul>\n<p>This fix, believe it or not, is interesting, perhaps only in an &#8220;internal use only&#8221; sense, we grant you.  But our solution got us delving even more into hashtagging data, so that the solution we came up with was a hybrid whereby &#8230;<\/p>\n<ul>\n<li>stayed with PHP $_GET[] (ie. address bar ? and &#038; argumented) data (versus using PHP $_POST[] methodologies) &#8230; but &#8230;<\/li>\n<li>where it came to the &#038;data=[most of the data] part, other than its first character, we hashtagged the rest<\/li>\n<\/ul>\n<p> &#8230; so that the logic flows as per usual, but we intervene at places and flesh it out via location.hash (client side only) means.  We won&#8217;t bore you too much with all the places of intervention except the receiving map.php&#8217;s <font color=blue>&#8220;easiest to get&#8221; intervention<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$gtw=\"\";<br \/>\n<br \/>\nif (isset($_POST['title'])) {<br \/>\n        foreach ($_POST as $name =&gt; $val) {<br \/>\n          if (strpos($val, 'data:') !== false) {<br \/>\n            $fval=urlencode($val); \/\/str_replace(\" \", \"%20\", str_replace(\"'\", urlencode(\"'\"), str_replace('\"', urlencode('\"'), str_replace('=', urlencode('='), str_replace('&gt;', urlencode('&gt;'), str_replace('&lt;', urlencode('&lt;'), str_replace('?', urlencode('?'), str_replace('&', urlencode('&'), $val))))))));<br \/>\n          } else {<br \/>\n            $fval=str_replace('+','%20',urlencode(str_replace('   ',' + ',str_replace('+',' ',$val)))); \/\/str_replace(\" \", \"%20\", str_replace(\"'\", urlencode(\"'\"), str_replace('\"', urlencode('\"'), str_replace('=', urlencode('='), str_replace('&gt;', urlencode('&gt;'), str_replace('&lt;', urlencode('&lt;'), str_replace('?', urlencode('?'), str_replace('&', urlencode('&'), $val))))))));<br \/>\n          }<br \/>\n          if ($shto == \"\") {<br \/>\n            $shto=\"#\" . $name . \"=\" . $fval; \/\/str_replace(\" \", \"%20\", str_replace(\"'\", urlencode(\"'\"), str_replace('\"', urlencode('\"'), str_replace('=', urlencode('='), str_replace('&gt;', urlencode('&gt;'), str_replace('&lt;', urlencode('&lt;'), str_replace('?', urlencode('?'), str_replace('&', urlencode('&'), $val))))))));<br \/>\n          } else {<br \/>\n            $shto.=\"&\" . $name . \"=\" . $fval; \/\/str_replace(\" \", \"%20\", str_replace(\"'\", urlencode(\"'\"), str_replace('\"', urlencode('\"'), str_replace('=', urlencode('='), str_replace('&gt;', urlencode('&gt;'), str_replace('&lt;', urlencode('&lt;'), str_replace('?', urlencode('?'), str_replace('&', urlencode('&'), $val))))))));<br \/>\n          }<br \/>\n        }<br \/>\n}<br \/>\n<br \/>\nif (isset($_GET['data'])) {<br \/>\n        foreach ($_GET as $name =&gt; $val) {<br \/>\n          if (strpos($val, 'data:') !== false) {<br \/>\n            $fval=urlencode($val); \/\/str_replace(\" \", \"%20\", str_replace(\"'\", urlencode(\"'\"), str_replace('\"', urlencode('\"'), str_replace('=', urlencode('='), str_replace('&gt;', urlencode('&gt;'), str_replace('&lt;', urlencode('&lt;'), str_replace('?', urlencode('?'), str_replace('&', urlencode('&'), $val))))))));<br \/>\n          } else {<br \/>\n            \/\/$fval=str_replace('+','%20',urlencode($val)); \/\/str_replace(\" \", \"%20\", str_replace(\"'\", urlencode(\"'\"), str_replace('\"', urlencode('\"'), str_replace('=', urlencode('='), str_replace('&gt;', urlencode('&gt;'), str_replace('&lt;', urlencode('&lt;'), str_replace('?', urlencode('?'), str_replace('&', urlencode('&'), $val))))))));<br \/>\n            $fval=str_replace('+','%20',urlencode(str_replace('   ',' + ',str_replace('+',' ',$val)))); \/\/str_replace(\" \", \"%20\", str_replace(\"'\", urlencode(\"'\"), str_replace('\"', urlencode('\"'), str_replace('=', urlencode('='), str_replace('&gt;', urlencode('&gt;'), str_replace('&lt;', urlencode('&lt;'), str_replace('?', urlencode('?'), str_replace('&', urlencode('&'), $val))))))));<br \/>\n          }<br \/>\n          if ($shto == \"\") {<br \/>\n            $gshto=\"#\" . $name . \"=\" . $fval; \/\/str_replace(\" \", \"%20\", str_replace(\"'\", urlencode(\"'\"), str_replace('\"', urlencode('\"'), str_replace('=', urlencode('='), str_replace('&gt;', urlencode('&gt;'), str_replace('&lt;', urlencode('&lt;'), str_replace('?', urlencode('?'), str_replace('&', urlencode('&'), $val))))))));<br \/>\n          } else {<br \/>\n            $gshto.=\"&\" . $name . \"=\" . $fval; \/\/str_replace(\" \", \"%20\", str_replace(\"'\", urlencode(\"'\"), str_replace('\"', urlencode('\"'), str_replace('=', urlencode('='), str_replace('&gt;', urlencode('&gt;'), str_replace('&lt;', urlencode('&lt;'), str_replace('?', urlencode('?'), str_replace('&', urlencode('&'), $val))))))));<br \/>\n          }<br \/>\n        }<br \/>\n        <font color=blue><br \/>\n        if ($gshto != '' && strlen($_GET['data']) &lt; 10) {<br \/>\n           $gtw=\"\\n<br \/>\n           if (document.URL.split('#')[0].indexOf('?') != -1 && decodeURIComponent(decodeURIComponent(('' + location.hash + 'x'))).indexOf('[') == 1) {<br \/>\n  var jformoh='&lt;iframe name=lastfig id=lastfig style=\\\"position:absolute;width:100%;height:100%;z-index:897;top:0px;left:0px;\\\" src=&gt;&lt;\/iframe&gt;&lt;br&gt;&lt;form style=display:none; target=_self method=POST action=\\\"' + document.URL.split('#')[0].split('?')[0] + '\\\"&gt;&lt;input id=gjformsubis type=submit value=Submit style=display:none;&gt;&lt;\/input&gt;&lt;\/form&gt;';<br \/>\n  var iiareflds=0, areflds=(document.URL.split('#')[0] + decodeURIComponent(decodeURIComponent((',' + location.hash.substring(1))))).replace('#','&').replace('?','&').split('=');<br \/>\n  for (var iiareflds=1; iiareflds&lt;areflds.length; iiareflds++) {<br \/>\n   jformoh=jformoh.replace('&lt;\/form&gt;','&lt;input type=hidden name=\\\"' + areflds[eval(-1 + iiareflds)].split('&')[eval(-1 + areflds[eval(-1 + iiareflds)].split('&').length)] + '\\\" value=\\\"' + decodeURIComponent(areflds[iiareflds].split('&')[0]).replace(\/^%2C\/g,'').replace(\/\\,1\\]\/g,']').replace(\/\\|\/g,',').replace(\/\\,\\,\/g,',') + '\\\"&gt;&lt;\/input&gt;&lt;\/form&gt;');<br \/>\n  }<br \/>\n  setTimeout(function() {<br \/>\n  document.body.innerHTML+=jformoh;<br \/>\n  document.getElementById('gjformsubis').click(); }, 7000);<br \/>\n            }<br \/>\n            \";<br \/>\n        }<\/font><br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; just a matter of concern for &#8230;<\/p>\n<ul>\n<li><a target=_blank title='map.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php-----------------------------------------------------GETME'>changed<\/a> <a target=_blank title='map.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php-----------------------------------------------------GETME'>map.php<\/a> <a target=_blank title='map.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php'>Map Chart<\/a> &#8230; and &#8230;<\/li>\n<li><a target=_blank title='geo_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-----------------------------------------------------------------------------------GETME'>changed<\/a> <a target=_blank title='geo_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-----------------------------------------------------------------------------------GETME'>geo_chart.php<\/a> <a target=_blank title='geo_chart.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php'>Geo Chart<\/a><\/li>\n<\/ul>\n<p> &#8230; using the <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\">World Countries GeoJson web application<\/a>.<\/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\/geojson-world-countries-drag-and-drop-makeover-nuance-tutorial\/'>GeoJson World Countries Drag and Drop Makeover Nuance Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcddmt'>Previous relevant <a target=_blank title='GeoJson World Countries Drag and Drop Makeover Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-drag-and-drop-makeover-tutorial\/'>GeoJson World Countries Drag and Drop Makeover Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries Drag and Drop Makeover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_tz_places_better.jpg\" title=\"GeoJson World Countries Drag and Drop Makeover Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries Drag and Drop Makeover Tutorial<\/p><\/div>\n<p>In a similar vein to the recent <a title='GeoJson World Coastlines Drag and Drop Makeover Tutorial' href='#gjwcddmt'>GeoJson World Coastlines Drag and Drop Makeover Tutorial<\/a>, today, we have got a mild makeover happening with the Drag and Drop functionality related to GeoJson <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\">World Countries<\/a> web application usage.<\/p>\n<p>In addition to the <a target=_blank title='Wikipedia ... thanks' href='http:\/\/wikipedia.org'>Wikipedia<\/a> information, at the very least, presented following a successful drag and drop operation, from today, we also start presenting a new HTML iframe element containing &#8230;<\/p>\n<blockquote><p>\nNearest TimeZone places along with Google Charts for each unique country involved\n<\/p><\/blockquote>\n<p> &#8230; used by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php-------------------------GETME\" title=\"tz_places.php\">that changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\" title=\"TimeZone Places\">TimeZone Places<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php-------------------------GETME\" title=\"tz_places.php\">tz_places.php<\/a> helped out by <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js----------GETME\">the changed<\/a> external Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js----------GETME\">countries.js<\/a> external Javascript all called by our unchanged  GeoJson <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\">World Countries<\/a> web application.<\/p>\n<p>The work from that last makeover helped, and today the changes involve &#8230;<\/p>\n<table>\n<tr>\n<th>In tz_places.php start doing what you did for regions.php <font color=blue>now for countries.php<\/font><\/th>\n<\/tr>\n<tr>\n<td>\n&lt;?php<br \/>\n<code style=font-size:8px;><br \/>\necho \"&lt;!doctype html&gt;&lt;html&gt;&lt;body onload=\\\"if (('' + top.document.URL)<font color=blue>.replace('\/countries.','\/regions.')<\/font>.indexOf('\/regions.') != -1) { if (document.getElementById('snearest')) { document.getElementById('snearest').style.left='0px';   }   }\\\" style='background-color:yellow;\" . $backstyle . \"'&gt;&lt;h1&gt;Nearest Timezones ... RJM Programming ... April, 2018 ... &lt;a target=_blank title='Thanks to ...' href='\/\/php.net\/manual\/en\/datetimezone.getlocation.php'&gt;\/\/php.net\/manual\/en\/datetimezone.getlocation.php&lt;\/a&gt;&lt;\/h1&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\" . $pd . $ret . \"&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n<\/code><br \/>\n?&gt;\n<\/th>\n<\/tr>\n<tr>\n<th>And in countries.js <font color=blue>intervene<\/font> in the dragover event<\/th>\n<\/tr>\n<tr>\n<td><code style=font-size:8px;><br \/>\ntarget.addEventListener(\"dragover\", (ev) => {<br \/>\n  console.log(\"dragOver\");<br \/>\n   <font color=blue>if (window.parent) {<br \/>\n    if (parent.document.URL.indexOf('\/countries.') != -1) {<br \/>\n       var ftables=parent.document.getElementsByTagName('table');<br \/>\n       if (eval('' + ftables.length) &gt; 0) {<br \/>\n         if (ftables[0].innerHTML.indexOf('lastrow') == -1) {<br \/>\n            ftables[0].innerHTML+='&lt;tr id=lastrow&gt;&lt;td&gt;&lt;iframe id=lastif style=display:none;width:100%;height:900px; src=\"\/PHP\/tz_places.php\"&gt;&lt;\/iframe&gt;&lt;\/td&gt;&lt;\/tr&gt;';<br \/>\n         }<br \/>\n       }<br \/>\n    }<br \/>\n   }<\/font><br \/>\n  ev.preventDefault();<br \/>\n});<br \/>\n<\/code><\/th>\n<\/tr>\n<tr>\n<th><font color=blue>Intervene again<\/font>, where applicable<\/th>\n<\/tr>\n<tr>\n<td><code style=font-size:8px;><br \/>\n           if (parent.document.URL.indexOf('\/regions.') != -1) {<br \/>\n           window.open('\/PHP\/tz_places.php?place=&latitude=' + encodeURIComponent('' + parent.derivethislat(pos4)) + '&longitude=' + encodeURIComponent('' + parent.derivethislong(pos3)) + '&ntztontz=y','_blank','top=180,left=' + eval(-350 + screen.width) + ',width=350,height=600');<br \/>\n           } else {<br \/>\n            <font color=blue>if (parent.document.getElementById('lastif')) {<br \/>\n               parent.document.getElementById('lastif').style.display='block';<br \/>\n               parent.document.getElementById('lastif').src='\/PHP\/tz_places.php?place=&latitude=' + encodeURIComponent('' + parent.derivethislat(pos4)) + '&longitude=' + encodeURIComponent('' + parent.derivethislong(pos3)) + '&ntztontz=y';<br \/>\n            }<\/font><br \/>\n           window.open('\/\/wikipedia.org\/wiki\/' + encodeURIComponent(tdid.replace(\/\\ \/g,'_')),'_blank','top=180,left=' + eval(-350 + screen.width) + ',width=350,height=600');<br \/>\n           }<br \/>\n<\/code><\/th>\n<\/tr>\n<\/table>\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\/geojson-world-countries-drag-and-drop-makeover-tutorial\/'>GeoJson World Countries Drag and Drop Makeover Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcddmt'>Previous relevant <a target=_blank title='GeoJson World Coastlines Drag and Drop Makeover Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastlines-drag-and-drop-makeover-tutorial\/'>GeoJson World Coastlines Drag and Drop Makeover Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Coastlines Drag and Drop Makeover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tz_places_off_regions.jpg\" title=\"GeoJson World Coastlines Drag and Drop Makeover Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Coastlines Drag and Drop Makeover Tutorial<\/p><\/div>\n<p>We&#8217;ve got a mild makeover happening with the Drag and Drop functionality related to <a title='GeoJson World Coastlines Drag and Drop Tutorial' href='#gjwcddt'>GeoJson World Coastlines Drag and Drop Tutorial<\/a> today.<\/p>\n<p>At first &#8230;<\/p>\n<ul>\n<li>we wanted the first popup window content be aligned to the top and left &#8230; and then &#8230;<\/li>\n<li>we thought it would be good to also, in &#8220;Drag and Drop land&#8221;, relevant countries nearby to the user&#8217;s drop point TimeZone Places be showing below that (and it panned out the best way to show this, for us, was via an iframe pointing at another incarnation of the tz_places.php webpage, because it could have GET arguments <i>iso<\/i>, <i>iso2<\/i>, <i>iso3<\/i> etcetera to point at ISO 2 letter country codes, which we made more readily available (via a new <i>data-cc<\/i> <a target=_blank href='https:\/\/www.w3schools.com\/tags\/att_global_data.asp' title='Global data attributes information from W3schools'>global data attribute<\/a> applied to the select <i>option<\/i> subelements presented) for <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js---------GETME\">the changed<\/a> external Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js---------GETME\">countries.js<\/a> we decided should get into the mix via a new Javascript function &#8230;<br \/>\n<code><br \/>\n function tzagain(inhtml) {<br \/>\n    var outhtml=inhtml, dccs=[], getarg='?', theone=1;<br \/>\n    if (inhtml.indexOf('left:0px;') != -1 && inhtml.indexOf(' data-cc=') != -1) {<br \/>\n      dccs=inhtml.split(' data-cc=');<br \/>\n      for (var ii=1; ii&lt;dccs.length; ii++) {<br \/>\n      if (getarg == '?') {<br \/>\n        getarg+='iso=' + dccs[ii].substring(0,4).replace(\/\\'\/g,'').replace(\/\\\"\/g,'').substring(0,2);<br \/>\n        theone++;<br \/>\n      } else if (getarg.indexOf('=' + dccs[ii].substring(0,4).replace(\/\\'\/g,'').replace(\/\\\"\/g,'').substring(0,2)) == -1) {<br \/>\n        getarg+='&iso' + theone + '=' + dccs[ii].substring(0,4).replace(\/\\'\/g,'').replace(\/\\\"\/g,'').substring(0,2);<br \/>\n        theone++;<br \/>\n      }<br \/>\n      }<br \/>\n      if (getarg != '?') {<br \/>\n        if (inhtml.indexOf('&lt;\/bo' + 'ody&gt;') != -1) {<br \/>\n         outhtml=inhtml.split('&lt;\/bo' + 'dy&gt;')[0] + '&lt;iframe src=\".\/tz_places.php' + getarg + '\" style=\"position:absolute;left:0px;top:120px;width:100%;height:900px;\"&gt;&lt;\/iframe&gt;&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n        } else {<br \/>\n         outhtml=inhtml + '&lt;iframe src=\".\/tz_places.php' + getarg + '\" style=\"position:absolute;left:0px;top:120px;width:100%;height:900px;\"&gt;&lt;\/iframe&gt;';<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    return outhtml;<br \/>\n }<br \/>\n<\/code><br \/>\n)<\/li>\n<\/ul>\n<p> &#8230; used by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php------------------------GETME\" title=\"tz_places.php\">that changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\" title=\"TimeZone Places\">TimeZone Places<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php------------------------GETME\" title=\"tz_places.php\">tz_places.php<\/a> <font color=blue>as exemplified below<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n        echo \"&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;<font color=blue>&lt;scr\" . \"ipt type='text\/javascript' src='\/HTMLCSS\/countries.js?rand=\" . rand(0,16756453) . \"'&gt;&lt;\/scr\" . \"ipt&gt;<\/font>&lt;scr\" . \"ipt type='text\/javascript'&gt; function lookoutfortop() { if (parent.document.getElementById('getmell')) { parent.document.getElementById('nearest').innerHTML=\\\"\" . $pd . $retmore . \"\\\";  } else if (top.document.getElementById('nearest')) {  if (top.document.getElementById('getmell')) { top.document.getElementById('nearest').innerHTML=\\\"\" . $pd . $retmore . \"\\\";  } else { top.document.getElementById('nearest').innerHTML=\\\"\" . $pd . $ret . \"\\\"; } top.window.scrollTo(0,0);  } else { if (top.document.getElementById('getmell')) { document.body.innerHTML=tzagain(\\\"\" . $pd . $retmore . \"\\\");  } else {  document.body.innerHTML=<font color=blue>tzagain(<\/font>\\\"\" . $pd . <font color=blue>str_replace(':70px;',':0px;',str_replace(':350px;',':0px;',<\/font>$ret<font color=blue>))<\/font> . \"\\\"<font color=blue>)<\/font>; }  }  if (('' + top.document.URL).indexOf('\/regions.') != -1) { if (document.getElementById('snearest')) { document.getElementById('snearest').style.left='0px';   }   } } &lt;\/scr\" . \"ipt&gt;&lt;\/head&gt;&lt;body onload=' lookoutfortop();'\" . $backfullstyle . \"&gt;\" . $pd . $ret . \"&lt;\/body&gt;&lt;\/html&gt;\";  \/\/$ret;<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; that superfluous looking <i>?rand=blah<\/i> measure being pretty useful really regarding getting around the cache keeping old external Javascript in its mind after changes.<\/p>\n<p>Curiously, the grandparent regions.php starting off all this needed no changing!  We hope you like these tweaks!<\/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\/geojson-world-coastlines-drag-and-drop-makeover-tutorial\/'>GeoJson World Coastlines Drag and Drop Makeover Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcddt'>Previous relevant <a target=_blank title='GeoJson World Coastlines Drag and Drop Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastlines-drag-and-drop-tutorial\/'>GeoJson World Coastlines Drag and Drop Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Coastlines Drag and Drop Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_draganddrop.jpg\" title=\"GeoJson World Coastlines Drag and Drop Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Coastlines Drag and Drop Tutorial<\/p><\/div>\n<p>The primary aim of today&#8217;s work, onto yesterday&#8217;s <a title='GeoJson World Drag and Drop on iPad Tutorial' href='#gjwddpt'>GeoJson World Drag and Drop on iPad Tutorial<\/a> iPad integration is to &#8230;<\/p>\n<ul>\n<li>add similar drag and drop logic into our World Coastlines GeoJson web application &#8230; and along the way, also for the World Countries web application &#8230;<\/li>\n<li>hold off involving the <font size=1>(pretty kludgy looking)<\/font> <font color=blue>vertical scrollbar<\/font> of our drag and drop pin&#8217;s underlying HTML iframe &#8230;<br \/>\n<code><br \/>\n&lt;iframe <font color=blue>scrolling=no <\/font>frameborder=0 name=iftr id=iftr style=display:none; srcdoc=\"&lt;body style=background-color:transparent;&gt;&lt;p id=mg title='Wikipedia country page below via drag and drop to world map' draggable='true'&gt;&#128205;&lt;\/p&gt;&lt;br&gt;&lt;br&gt;&lt;div id=myh1&gt;&lt;\/div&gt;&lt;script type='text\/javascript' src='.\/countries.js?rand=321156747657' defer&gt;&lt;\/script&gt;&lt;\/body&gt;\" data-src=&gt;&lt;\/iframe&gt;<br \/>\n<\/code><br \/>\n &#8230; until the first drag operation starting, calls on &#8230;<br \/>\n<code><br \/>\n    parent.document.getElementById('iftr').scrolling='yes';<br \/>\n<\/code><br \/>\n &#8230; proving a Javascript DOM control of the &#8220;scrolling&#8221; attribute works <font size=1>(as we weren&#8217;t sure, having never done this before)<\/font><\/li>\n<\/ul>\n<p>It&#8217;s worth beavering away at a guinea pig web application until <font size=1>(just about complete)<\/font> satisfaction <font size=1>(for now)<\/font> before having a parallel set of code changes happening simultaneously, we&#8217;ve always found.<\/p>\n<p>So, what happened in &#8220;external Javascript land&#8221;?  No need for a &#8220;regions.js&#8221; here, as <i>parent.document.URL<\/i> can be scrutinised in that &#8220;external Javascript land&#8221; to discover which web application is the parent, and act accordingly.  So changed were <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js----GETME\">our changed<\/a> external Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js----GETME\">countries.js<\/a> in &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php---------------GETME\" title=\"countries.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php---------------GETME\" title=\"countries.php\">countries.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"GeoJson PHP web application\">GeoJson World Countries PHP web application<\/a> &#8230; and &#8230;<\/li>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php--------GETME\" title=\"regions.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php--------GETME\" title=\"regions.php\">regions.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\">GeoJson World Coastlines PHP web application<\/a><\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastlines-drag-and-drop-tutorial\/'>GeoJson World Coastlines Drag and Drop Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwddpt'>Previous relevant <a target=_blank title='GeoJson World Drag and Drop on iPad Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-drag-and-drop-on-ipad-tutorial\/'>GeoJson World Drag and Drop on iPad Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Drag and Drop on iPad Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geojson_countries_drag_and_drop_on_ipad.gif\" title=\"GeoJson World Drag and Drop on iPad Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Drag and Drop on iPad Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='GeoJson World Drag and Drop Google Tutorial' href='#gjwddgt'>GeoJson World Drag and Drop Google Tutorial<\/a> had us at a very interesting position, one that we cannot recall ever happening before, that being &#8230;<\/p>\n<ul>\n<li>our GeoJson World Countries web application Drag and Drop logic worked on an iPhone &#8230; but &#8230;<\/li>\n<li>our GeoJson World Countries web application Drag and Drop logic did not work on an iPad<\/li>\n<\/ul>\n<p>They&#8217;re both iOS!  And usually the smaller iPhone has the problem and the larger iPad is okay when there is an odd scenario happening.  So, what gives?  Well, the odd thing is, it was just rearrangements of code and iframe <a target=_blank title='HTML iframe srcdoc attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_iframe_srcdoc.asp'><i>srcdoc<\/i><\/a> <font color=blue>usage<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe frameborder=0 name=iftr id=iftr style=display:none; <font color=blue>srcdoc=\"&lt;body style=background-color:transparent;&gt;&lt;p id=mg title='Wikipedia country page below via drag and drop to world map' draggable='true'&gt;&#128205;&lt;\/p&gt;&lt;br&gt;&lt;br&gt;&lt;div id=myh1&gt;&lt;\/div&gt;&lt;script type='text\/javascript' src='.\/countries.js?rand=321156747657' defer&gt;&lt;\/script&gt;&lt;\/body&gt;\"<\/font> data-src=&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; that ended up helping us fix the issues.  Figure this, on iPad our emoji pin could not be made visible down the bottom left of iPad screen but could be made to work in the title elements section?!  Of course, we might have been having a bad day, but in our defence, even debugging in Safari via &#8230;<\/p>\n<ul>\n<li>iPad Safari web browser invocation &#8230;<\/li>\n<li>Apple white lead from iPad to MacBook Air &#8230;<\/li>\n<li>MacBook Air Safari web browser Develop menu dropdown got us to debugging functionality<\/li>\n<\/ul>\n<p> &#8230; <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geojson_countries_drag_and_drop_on_ipad.gif\">showed nothing untoward<\/a>, and neither did, on the iPad&#8217;s Chrome browser &#8230;<\/p>\n<p><code><br \/>\nchrome:\/\/inspect<br \/>\n<\/code><\/p>\n<p> &#8230; debugging techniques.<\/p>\n<p>Changed were <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js---GETME\">our changed<\/a> external Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js---GETME\">countries.js<\/a> in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php--------------GETME\" title=\"countries.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php--------------GETME\" title=\"countries.php\">countries.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"GeoJson PHP web application\">GeoJson World Countries PHP web application<\/a> in a new window.   If you have any clues yourself, the comments are there?!<\/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\/geojson-world-drag-and-drop-on-ipad-tutorial\/'>GeoJson World Drag and Drop on iPad Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwddgt'>Previous relevant <a target=_blank title='GeoJson World Drag and Drop Google Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-drag-and-drop-google-tutorial\/'>GeoJson World Drag and Drop Google Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Drag and Drop Google Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_gearth.jpg\" title=\"GeoJson World Drag and Drop Google Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Drag and Drop Google Tutorial<\/p><\/div>\n<p>We often turn to what we like to call &#8230;<\/p>\n<ul>\n<li>&#8220;long hover&#8221; (ie. on non-mobile, wait for a long while after the onmouseover event initiation to see whether the user is still hovering) &#8230; and today, a bit like that, is the new, for us &#8230;<\/li>\n<li>&#8220;long drag&#8221; (the user waits a long time between the drag initialization and the drop event)<\/li>\n<\/ul>\n<p> &#8230; and because we found &#8220;dawdling&#8221; on a drag and drop fairly unnatural, we think this &#8220;long drag&#8221; idea &#8220;has legs&#8221;, in that it works well as a deliberate act made by a user, knowing at the end they benefit from their actions.  For us, with our GeoJSON Map web application, yesterday, with  <a title='GeoJson World Drag and Drop Pin Tutorial' href='#gjwddpt'>GeoJson World Drag and Drop Pin Tutorial<\/a>, the drag and drop led to &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Wikipedia ... thanks' href='http:\/\/wikipedia.org'>Wikipedia<\/a> country information webpage &#8230; and today, we allow a &#8220;long drag&#8221; get you to &#8230;<\/li>\n<li><a target=_blank title='Google Maps ... thanks' href='http:\/\/maps.google.com'>Google Maps<\/a> drop position information webpage &#8230; if the &#8220;long drag&#8221; is for 10 or more seconds &#8230;<\/li>\n<li><a target=_blank title='Google Earth ... thanks' href='http:\/\/earth.google.com'>Google Earth<\/a> drop position information webpage &#8230; if the &#8220;very long drag&#8221; is for 20 or more seconds<\/li>\n<\/ul>\n<p> &#8230; arranged for via <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js--GETME\">our changed<\/a> external Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js--GETME\">countries.js<\/a> in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php-------------GETME\" title=\"countries.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php-------------GETME\" title=\"countries.php\">countries.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"GeoJson PHP web application\">GeoJson World Countries PHP web application<\/a> in a new window.<\/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\/geojson-world-drag-and-drop-google-tutorial\/'>GeoJson World Drag and Drop Google Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwddpt'>Previous relevant <a target=_blank title='GeoJson World Drag and Drop Pin Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-drag-and-drop-pin-tutorial\/'>GeoJson World Drag and Drop Pin Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Drag and Drop Pin Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_draganddrop.gif\" title=\"GeoJson World Drag and Drop Pin Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Drag and Drop Pin Tutorial<\/p><\/div>\n<p>Before today, with the GeoJson Countries web application from <a title='GeoJson World Colour Wheel Wikipedia Integration Tutorial' href='#gjwcwwit'>GeoJson World Colour Wheel Wikipedia Integration Tutorial<\/a> we&#8217;ve mainly used &#8230;<\/p>\n<ul>\n<li>onclick event logic &#8230; and today, we start to also include &#8230;<\/li>\n<li>drag and drop event logic (like, but nuanced as explained below, the experimental drag and drop ideas included in the recent <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/planet-moon-game-tutorial\/' title='Planet Moon Game Tutorial'>Planet Moon Game Tutorial<\/a>) &#8230; the nuanced differences involving &#8230;\n<ol>\n<li>the drag part of the events occurs in an iframe (populated via small amount of <i>srcdoc<\/i> HTML and Javascript) able to reference its originator via window.parent &#8230;<\/li>\n<li>drop part of the events occurs in that originator parent and so several Javascript function called by the child reside in the parent &#8230; and &#8230;<\/li>\n<li>the child &#8220;drag&#8221; event controller uses the new external Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js-GETME\">countries.js<\/a> &#8230;<br \/>\n<code><br \/>\n\/\/ countries.js<br \/>\n\/\/ July, 2023<br \/>\n\/\/ RJM Programming<br \/>\n\/\/ Help out countries.html and countries.php<br \/>\n var pos3=0, pos4=0, tdid='', poligono, punto, coone='', prectis;<br \/>\n<br \/>\n\/\/ var poligono = [[2,9],[8,6],[12,10],[15,2],[10,4],[5,1]];<br \/>\n\/\/ var punto = [6, 5];<br \/>\n  <br \/>\n function pointInPolygon(polygon, point) { \/\/ thanks to https:\/\/community.appinventor.mit.edu\/t\/geofence-check-if-a-point-is-inside-a-polygon-javascript-map\/57091<br \/>\n    var odd = false;<br \/>\n    for (var i = 0, j = polygon.length - 1; i &lt; polygon.length; i++) {<br \/>\n        if (((polygon[i][1] &gt; point[1]) !== (polygon[j][1] &gt; point[1]))<br \/>\n            && (point[0] &lt; ((polygon[j][0] - polygon[i][0]) * (point[1] - polygon[i][1]) \/ (polygon[j][1] - polygon[i][1]) + polygon[i][0]))) {<br \/>\n            odd = !odd;<br \/>\n        }<br \/>\n        j = i;<br \/>\n    }<br \/>\n    return odd;<br \/>\n }<br \/>\n<br \/>\n function andlaterstill() {<br \/>\n  if (9 == 6) { \/\/ temporary<br \/>\n  if (tdid != '') {<br \/>\n    document.getElementById(tdid).innerHTML=document.getElementById(tdid).innerHTML.substring(0,1);<br \/>\n  } else if (document.getElementById('mytable').innerHTML.indexOf(clonedatatwo) != '') {<br \/>\n    document.getElementById('myh1').innerHTML=document.getElementById('myh1').innerHTML.split('&lt;\/table&gt;')[0] + '&lt;\/table&gt;';<br \/>\n  }<br \/>\n  if (document.getElementsByTagName('div')[0].innerHTML.indexOf(clonedatatwo) != -1) {<br \/>\n    document.getElementsByTagName('div')[0].innerHTML=document.getElementsByTagName('div')[0].innerHTML.replace(clonedatatwo,'');<br \/>\n  } else if (document.getElementsByTagName('div')[0].innerHTML.indexOf(clonedatatwo.replace('dragging','')) != -1) {<br \/>\n    document.getElementsByTagName('div')[0].innerHTML=document.getElementsByTagName('div')[0].innerHTML.replace(clonedatatwo.replace('dragging',''),'');<br \/>\n  } else if (document.body.innerHTML.split('&lt;table')[0].indexOf(clonedatatwo.replace('dragging','')) != -1) {<br \/>\n    document.body.innerHTML=document.body.innerHTML.replace(document.body.innerHTML.split('&lt;table')[0], document.body.innerHTML.split('&lt;table')[0].replace(clonedatatwo.replace('dragging',''),''));<br \/>\n  } else if (document.body.innerHTML.split('&lt;table')[0].indexOf(clonedatatwo) != -1) {<br \/>\n    document.body.innerHTML=document.body.innerHTML.replace(document.body.innerHTML.split('&lt;table')[0], document.body.innerHTML.split('&lt;table')[0].replace(clonedatatwo,''));<br \/>\n  }<br \/>\n  }<br \/>\n  tdid='';<br \/>\n }<br \/>\n <br \/>\n  function getprectis() {<br \/>\n    if (window.opener) {<br \/>\n       if (window.opener.document.getElementsByTagName('body')[0]) {<br \/>\n           return window.opener.document.body.getBoundingClientRect();<br \/>\n       } else if (window.parent) {<br \/>\n         if (parent.document.getElementsByTagName('body')[0]) {<br \/>\n           return parent.document.body.getBoundingClientRect();<br \/>\n         }<br \/>\n       }<br \/>\n    } else if (window.parent) {<br \/>\n         if (parent.document.getElementsByTagName('body')[0]) {<br \/>\n           return parent.document.body.getBoundingClientRect();<br \/>\n         }<br \/>\n    }<br \/>\n    return null;<br \/>\n }<br \/>\n<br \/>\n function wod(ididea) {<br \/>\n    if (window.opener) {<br \/>\n       if (window.opener.document.getElementsByTagName(ididea)[0]) {<br \/>\n           return window.opener.document.getElementsByTagName(ididea)[0];<br \/>\n       } else if (window.parent) {<br \/>\n         if (parent.document.getElementsByTagName(ididea)[0]) {<br \/>\n           return parent.document.getElementsByTagName(ididea)[0];<br \/>\n         }<br \/>\n       }<br \/>\n    } else if (window.parent) {<br \/>\n         if (parent.document.getElementsByTagName(ididea)[0]) {<br \/>\n           return parent.document.getElementsByTagName(ididea)[0];<br \/>\n         }<br \/>\n    }<br \/>\n    return null;<br \/>\n }<br \/>\n <br \/>\n function ccit() {<br \/>\n     var divs, esot=[], bodyois=null;<br \/>\n     if (window.opener) {<br \/>\n       if (window.opener.document.getElementsByTagName('body')[0]) {<br \/>\n          bodyois=window.opener.document.getElementsByTagName('body')[0];<br \/>\n          divs=window.opener.document.getElementsByTagName('div');<br \/>\n       } else if (window.parent) {<br \/>\n         if (parent.document.getElementsByTagName('body')[0]) {<br \/>\n           bodyois=parent.document.getElementsByTagName('body')[0];<br \/>\n           divs=parent.document.getElementsByTagName('div');<br \/>\n         }<br \/>\n       }<br \/>\n    } else if (window.parent) {<br \/>\n         if (parent.document.getElementsByTagName('body')[0]) {<br \/>\n           bodyois=parent.document.getElementsByTagName('body')[0];<br \/>\n           divs=parent.document.getElementsByTagName('div');<br \/>\n         }<br \/>\n    }<br \/>\n  <br \/>\n  for (var ii=0; ii&lt;divs.length; ii++) {<br \/>\n      if (divs[ii].outerHTML.split('&gt;')[0].indexOf(' title=' + String.fromCharCode(34) + coone) != -1) {<br \/>\n       divs[ii].innerHTML=divs[ii].innerHTML.replace('z-index:24;', 'z-index:123;').replace('lime;', 'rgba(200,200,200,0.3);');<br \/>\n       divs[ii].name='d' + tdid.replace(\/\\ \/g, '_');<br \/>\n      }<br \/>\n  }<br \/>\n}<br \/>\n <br \/>\n function andqlater() {<br \/>\n  \/\/alert('HeRe');<br \/>\n  tdid='';<br \/>\n  var ppig='[]', coo='', coos=[], ip=0;<br \/>\n  var squares; \/\/=window.opener.document.getElementsByTagName('area');<br \/>\n  <br \/>\n    if (window.opener) {<br \/>\n       if (window.opener.document.getElementsByTagName('body')[0]) {<br \/>\n          squares=window.opener.document.getElementsByTagName('area');<br \/>\n       } else if (window.parent) {<br \/>\n         if (parent.document.getElementsByTagName('body')[0]) {<br \/>\n           squares=parent.document.getElementsByTagName('area');<br \/>\n         }<br \/>\n       }<br \/>\n    } else if (window.parent) {<br \/>\n         if (parent.document.getElementsByTagName('body')[0]) {<br \/>\n           squares=parent.document.getElementsByTagName('area');<br \/>\n         }<br \/>\n    }<br \/>\n  <br \/>\n  for (var ii=1; ii&lt;=squares.length; ii++) {<br \/>\n     ppig='[]';<br \/>\n     coos=squares[eval(-1 + ii)].coords.replace(\/\\ \/g,',').split(',');<br \/>\n     ppig='[[' + coos[0] + ',' + coos[1] + ']]';<br \/>\n     for (ip=2; ip&lt;coos.length; ip+=2) {<br \/>\n        ppig=ppig.replace(']]', '],[' + coos[ip] + ',' + coos[eval(1 + ip)] + ']]');<br \/>\n        poligono=eval(ppig);<br \/>\n        \/\/alert('' + punto);<br \/>\n        if (pointInPolygon(poligono, punto)) {<br \/>\n          tdid='' + squares[eval(-1 + ii)].getAttribute('data-cname');<br \/>\n          coone=('' + squares[eval(-1 + ii)].coords).split(' ')[0];<br \/>\n          setTimeout(ccit, 2000);<br \/>\n          console.log('tdid=' + tdid + ' and coone=' + coone);<br \/>\n    if (window.opener) {<br \/>\n       if (window.opener.document.getElementsByTagName('body')[0]) {<br \/>\n          window.focus();<br \/>\n          document.getElementById('myh1').innerHTML='&lt;iframe style=\"width:100%;height:800px;\" src=\"\/\/wikipedia.org\/wiki\/' + encodeURIComponent(tdid.replace(\/\\ \/g,'_')) + '\"&gt;&lt;\/iframe&gt;';<br \/>\n       } else if (window.parent) {<br \/>\n         if (parent.document.getElementsByTagName('body')[0]) {<br \/>\n           document.getElementById('myh1').innerHTML='&lt;iframe style=\"width:100%;height:800px;\" src=\"\/\/wikipedia.org\/wiki\/' + encodeURIComponent(tdid.replace(\/\\ \/g,'_')) + '\"&gt;&lt;\/iframe&gt;';<br \/>\n           window.open('\/\/wikipedia.org\/wiki\/' + encodeURIComponent(tdid.replace(\/\\ \/g,'_')),'_blank','top=180,left=' + eval(-350 + screen.width) + ',width=350,height=600');<br \/>\n         }<br \/>\n       }<br \/>\n    } else if (window.parent) {<br \/>\n         if (parent.document.getElementsByTagName('body')[0]) {<br \/>\n           document.getElementById('myh1').innerHTML='&lt;iframe style=\"width:100%;height:800px;\" src=\"\/\/wikipedia.org\/wiki\/' + encodeURIComponent(tdid.replace(\/\\ \/g,'_')) + '\"&gt;&lt;\/iframe&gt;';<br \/>\n           window.open('\/\/wikipedia.org\/wiki\/' + encodeURIComponent(tdid.replace(\/\\ \/g,'_')),'_blank','top=180,left=' + eval(-350 + screen.width) + ',width=350,height=600');<br \/>\n         }<br \/>\n    }<br \/>\n          return tdid;<br \/>\n        }<br \/>\n     }<br \/>\n  }<br \/>\n  console.log('tdid=' + tdid);<br \/>\n  \/\/setTimeout(andlaterstill, 100);<br \/>\n  return '';<br \/>\n }<br \/>\n<br \/>\n  window.addEventListener(\"DOMContentLoaded\", () =&gt; {<br \/>\nconst source = document.querySelector(\"#mg\");<br \/>\nconsole.log('source.id=' + source.id);<br \/>\nsource.addEventListener(\"dragstart\", (ev) =&gt; {<br \/>\n  console.log(\"dragStart\");<br \/>\n  \/\/ Change the source element's background color<br \/>\n  \/\/ to show that drag has started<br \/>\n  ev.currentTarget.classList.add(\"dragging\");<br \/>\n  \/\/ Clear the drag data cache (for all formats\/types)<br \/>\n  ev.dataTransfer.clearData();<br \/>\n  \/\/ Set the drag's format and data.<br \/>\n  \/\/ Use the event target's id for the data<br \/>\n  ev.dataTransfer.setData(\"text\/plain\", ev.target.id);<br \/>\n  \/\/ev.dataTransfer.setData(\"text\/html\", ev.target.outerHTML);<br \/>\n});<br \/>\nsource.addEventListener(\"dragend\", (ev) =&gt;<br \/>\n  ev.target.classList.remove(\"dragging\")<br \/>\n);<br \/>\n<br \/>\nconst target = wod('body'); \/\/window.opener.document.getElementsByTagName('body')[0];<br \/>\ntarget.id='usemap';<br \/>\nconsole.log('target.id=' + target.id);<br \/>\ntarget.addEventListener(\"dragover\", (ev) =&gt; {<br \/>\n  console.log(\"dragOver\");<br \/>\n  ev.preventDefault();<br \/>\n});<br \/>\ntarget.addEventListener(\"drop\", (ev) =&gt; {<br \/>\n  console.log(\"Drop\");<br \/>\n  ev.preventDefault();<br \/>\n  \/\/ Get the data, which is the id of the source element<br \/>\n  const data = ev.dataTransfer.getData(\"text\");<br \/>\n  const source = document.getElementById(data);<br \/>\n  <br \/>\n       var prectis=getprectis();<br \/>\n   <br \/>\n       console.log('' + ev.target.id);<br \/>\n       if (!document.getElementById('callback')) {<br \/>\n       if (('' + ev.target.id).substring(0,2) == 'im') {<br \/>\n         score+=eval(ev.target.innerHTML.substring(0,1));<br \/>\n       }<br \/>\n       } else if (1 == 1) { \/\/document.getElementById('callback')) {<br \/>\n         secs++;<br \/>\n         if (('' + ev.target.getAttribute('data-answer')) == ('' + document.getElementById('mg').getAttribute('data-answer'))) {<br \/>\n           score++;<br \/>\n           document.getElementById('score').innerHTML='Score: ' + score + '\/' + secs + '';<br \/>\n         } else {<br \/>\n           document.getElementById('score').innerHTML='Score: ' + score + '\/' + secs + '';<br \/>\n           alert('Correct answer was ' + document.getElementById('mg').getAttribute('data-answer'));<br \/>\n         }<br \/>\n         location.href=document.getElementById('callback').value + '?score=' + score + '&secs=' + secs;<br \/>\n       }<br \/>\n       if (1 == 2) {<br \/>\n         \/\/clonedatatwo=document.getElementById('source').outerHTML;<br \/>\n         \/\/document.getElementById('mytable').innerHTML=document.getElementById('mytable').innerHTML.replace(clonedatatwo, '');<br \/>\n         \/\/ev.target.innerHTML=ev.target.innerHTML.substring(0,1) + clonedatatwo;<br \/>\n       } else if ((9 == 9 || ('' + ev.target.id).substring(0,2) == 'im')) {<br \/>\n         \/\/clonedatatwo=document.getElementById('source').outerHTML;<br \/>\n         \/\/   \/\/ andqlater();<br \/>\n         \/\/document.getElementById('mytable').innerHTML=document.getElementById('mytable').innerHTML.replace(clonedatatwo, '');<br \/>\n         \/\/ev.target.innerHTML=ev.target.innerHTML.substring(0,1) + clonedatatwo;<br \/>\n         \/\/document.getElementById('myh1').appendChild(source);<br \/>\n         \/\/if (('' + ev.target.id).substring(0,2) != 'im') {<br \/>\n         \/\/document.getElementById('myh1').insertAdjacentHTML('beforeend', clonedatatwo);<br \/>\n         \/\/} else {<br \/>\n         \/\/ev.target.insertAdjacentHTML('beforeend', clonedatatwo);<br \/>\n         \/\/}<br \/>\n       } else {<br \/>\n         ev.target.appendChild(source);<br \/>\n       }<br \/>\n       <br \/>\n       prectis=getprectis();<br \/>\n     <br \/>\n       if (ev.touches) {<br \/>\n       if (ev.touches[0].pageX) {<br \/>\n       pos3 = ev.touches[0].pageX;<br \/>\n       pos4 = ev.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = ev.touches[0].clientX;<br \/>\n       pos4 = ev.touches[0].clientY;<br \/>\n       }<br \/>\n       console.log('pos3 = ' + pos3 + ',pos4 = ' + pos4);<br \/>\n       } else if (ev.clientX || ev.clientY) {<br \/>\n        pos3 = ev.clientX;<br \/>\n        pos4 = ev.clientY;<br \/>\n       console.log('pos3 = ' + pos3 + ' ,pos4 = ' + pos4);<br \/>\n       } else {<br \/>\n        pos3 = ev.pageX;<br \/>\n        pos4 = ev.pageY;<br \/>\n       console.log('pos3 = ' + pos3 + ', pos4 = ' + pos4);<br \/>\n       }<br \/>\n       \/\/alert('[' + pos3 + ',' + pos4 + ']');<br \/>\n       var wop=0;<br \/>\n    if (window.opener) {<br \/>\n       if (window.opener.document.getElementsByTagName('body')[0]) {<br \/>\n          window.opener.derivethislong(pos3);<br \/>\n          window.opener.derivethislat(pos4);<br \/>\n          wop=window.opener.getzoom();<br \/>\n       } else if (window.parent) {<br \/>\n         if (parent.document.getElementsByTagName('body')[0]) {<br \/>\n           parent.derivethislong(pos3);<br \/>\n           parent.derivethislat(pos4);<br \/>\n           wop=parent.getzoom();<br \/>\n         }<br \/>\n       }<br \/>\n    } else if (window.parent) {<br \/>\n         if (parent.document.getElementsByTagName('body')[0]) {<br \/>\n           parent.derivethislong(pos3);<br \/>\n           parent.derivethislat(pos4);<br \/>\n           wop=parent.getzoom();<br \/>\n         }<br \/>\n    }<br \/>\n    <br \/>\n    \/\/pos3+=eval(wop * prectis.left);<br \/>\n    \/\/pos4+=eval(wop * prectis.top);<br \/>\n      var xwop='1';<br \/>\n<br \/> <br \/>\n       console.log('prectis.left\/top=' + prectis.left + '\/' + prectis.top);<br \/>\n<br \/> <br \/>\n       \/\/punto=eval('[' + eval(eval('' + pos3) \/ eval('' + wop)) + ',' + eval(eval('' + pos4) \/ eval('' + wop)) + ']');<br \/>\n<br \/>\n       punto=eval('[' + eval(eval(-prectis.left * eval('' + wop) + eval('' + pos3)) \/ eval('' + wop)) + ',' + eval(eval(-prectis.top * eval('' + wop) + eval('' + pos4)) \/ eval('' + wop)) + ']');<br \/>\n<br \/>\n       console.log(punto);<br \/>\n       andqlater();<br \/>\n<br \/>\n});<br \/>\n<br \/>\n\/\/const reset = document.querySelector(\"#reset\");<br \/>\n\/\/reset.addEventListener(\"click\", () =&gt; document.location.reload());<br \/>\n<br \/>\n});<br \/>\n<br \/>\n function dragorig() {<br \/>\n   if (document.getElementById('mg')) {<br \/>\n     document.getElementById('mg').draggable='true';<br \/>\n   } else {<br \/>\n     setTimeout(dragorig, 5000);<br \/>\n   }<br \/>\n }<br \/>\n <br \/>\n\/\/ setTimeout(dragorig, 5000);<\/code>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; to open Wikipedia Country information webpages of dropped into user drags (on a world map), in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php------------GETME\" title=\"countries.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php------------GETME\" title=\"countries.php\">countries.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"GeoJson PHP web application\">GeoJson World Countries PHP web application<\/a> in a new window.<\/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\/geojson-world-drag-and-drop-pin-tutorial\/'>GeoJson World Drag and Drop Pin Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcwwit'>Previous relevant <a target=_blank title='GeoJson World Colour Wheel Wikipedia Integration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-colour-wheel-wikipedia-integration-tutorial\/'>GeoJson World Colour Wheel Wikipedia Integration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Colour Wheel Wikipedia Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_wikipedia_integration.gif\" title=\"GeoJson World Colour Wheel Wikipedia Integration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Colour Wheel Wikipedia Integration Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='GeoJson World Coastline Quiz Deployments Tutorial' href='#gjwcqdt'>GeoJson World Coastline Quiz Deployments Tutorial<\/a>, with our two &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\">GeoJson World Coastline<\/a> &#8230; and &#8230;<\/li>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"GeoJson PHP web application\">GeoJson World Countries<\/a><\/li>\n<\/ul>\n<p> &#8230; web applications, today we want to deepen the integration with <a target=_blank title='Wikipedia ... thanks' href='http:\/\/wikipedia.org'>Wikipedia<\/a> on two fronts &#8230;<\/p>\n<ul>\n<li>GeoJson World Coastline optional quiz <a target=_blank title='Wikipedia ... thanks' href='http:\/\/wikipedia.org'>Wikipedia<\/a> webpage navigation offerings, achieved via a Javascript override initiative &#8230;<br \/>\n<code><br \/>\n  const confirm = (cblurb) =&gt; {<br \/>\n    if (cblurb.indexOf('Answer was ') != -1 && cblurb.indexOf('. ') != -1) {<br \/>\n      var resp=prompt(cblurb.replace(cblurb.split('Answer was ')[1].split('. ')[0] + '. ', cblurb.split('Answer was ')[1].split('. ')[0] + ' (answer W to see more information on Wikipedia). '), '');<br \/>\n      if (resp != null) {<br \/>\n        if (resp.toLowerCase() == 'w') {<br \/>\n         window.open('\/\/en.wikipedia.org\/wiki\/' + cblurb.split('Answer was ')[1].split('. ')[0].replace(\/\\ \/g,'_'), '_blank', 'top=70,left=70,width=650,height=650');<br \/>\n         return true;<br \/>\n        }<br \/>\n        return true;<br \/>\n      } else {<br \/>\n        return false;<br \/>\n      }<br \/>\n    }<br \/>\n    return window.confirm(cblurb);<br \/>\n  };<br \/>\n<\/code>\n<\/li>\n<li>GeoJson World Countries and Coastline <a target=_blank title='map.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php-----------------------------------GETME'>changed<\/a> <a target=_blank title='map.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php-----------------------------------GETME'>map.php<\/a> <a target=_blank title='map.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php'>Map Chart<\/a> new onclick menu links to our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html\">Colour Wheel web application<\/a>, and its Wikipedia images and TimeZone information<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php------GETME\" title=\"regions.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php------GETME\" title=\"regions.php\">regions.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\">GeoJson World Coastlines PHP web application<\/a> in a new window, or you can <a href='#regionsif'>also try below<\/a>.<\/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\/geojson-world-colour-wheel-wikipedia-integration-tutorial\/'>GeoJson World Colour Wheel Wikipedia Integration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcqdt'>Previous relevant <a target=_blank title='GeoJson World Coastline Quiz Deployments Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-quiz-deployments-tutorial\/'>GeoJson World Coastline Quiz Deployments Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Coastline Quiz Deployments Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_function_deployment.jpg\" title=\"GeoJson World Coastline Quiz Deployments Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Coastline Quiz Deployments Tutorial<\/p><\/div>\n<p>The deployment follow up to yesterday&#8217;s <a title='GeoJson World Coastline Function Noun Naming Tutorial' href='#gjwcfnnt'>GeoJson World Coastline Function Noun Naming Tutorial<\/a> seems to concern mobile platform use of the new &#8230;<\/p>\n<ul>\n<li>Rivers Quiz &#8230; and newer &#8230;<\/li>\n<li>Populations Quiz (thanks to <a target=_blank title='geojson.xyz' href='HTTP:\/\/geojson.xyz'>HTTP:\/\/geojson.xyz<\/a>&#8216;s <a target=_blank title='GeoJson populated places' href='https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_50m_populated_places.geojson'>GeoJson populated places, downloaded and uploaded as population.geojson<\/a>)<\/li>\n<\/ul>\n<p> &#8230; where heap memory concerns related to the global variables memory used in our GeoJson World Coastlines webpage could cause mobile platform usage reloads of the web application, reminiscent of the external Javascript concerns we had back at <a target=_blank title='GeoJson World Countries SVG Overlay Safari Error Tutorial' href='#gjwcsvgoset'>GeoJson World Countries SVG Overlay Safari Error Tutorial<\/a>.<\/p>\n<p>There, as for here, mobile usage got better by swapping global variable usage for HTML content static PHP &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n&lt;select id=spops style=display:none;&gt;\" . $sih . \"&lt;\/select&gt;<br \/>\n&lt;select id=srivs style=display:none;&gt;\" . $rih . \"&lt;\/select&gt;<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; via &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n $sih='';<br \/>\n $rih='';<br \/>\n<br \/>\nfunction oururlencode($instuff) {<br \/>\n  $outstuff='';<br \/>\n  $dotbits=explode('.', $instuff);<br \/>\n  if (sizeof($dotbits) &gt; 1) {<br \/>\n    $outstuff=$instuff;<br \/>\n    for ($ii=1; $ii&lt;sizeof($dotbits); $ii++) {<br \/>\n      if (strlen( explode(',',  explode(' ', $dotbits[$ii])[0])[0]  ) &gt; 3) {<br \/>\n        $outstuff=str_replace('.' . explode(',',  explode(' ', $dotbits[$ii])[0])[0], '.' . substr(explode(',',  explode(' ', $dotbits[$ii])[0])[0],0,3), $outstuff);<br \/>\n      }<br \/>\n    }<br \/>\n    return urlencode($outstuff);<br \/>\n  }<br \/>\n  return urlencode($instuff);<br \/>\n}<br \/>\n<br \/>\nif (file_exists('population.geojson')) {<br \/>\n  $rbits=explode(']}}', file_get_contents('.\/population.geojson'));<br \/>\n  for ($irr=1; $irr&lt;(-1 + sizeof($rbits)); $irr++) {<br \/>\n       $hdrbit=explode('{\"type\":\"Feature', $rbits[-1 + $irr])[-1 + sizeof(explode('{\"type\":\"Feature', $rbits[-1 + $irr]))];<br \/>\n       $hbits=explode(',\"NAME\":\"', $hdrbit);<br \/>\n       if (sizeof($hbits) &gt; 1) {<br \/>\n       if (strpos($sih, ' id=' . str_replace('+','%20',urlencode(explode('\"', $hbits[1])[0])) . ' ') === false) {<br \/>\n       $sih.='&lt;option id=' . str_replace('+','%20',urlencode(explode('\"', $hbits[1])[0])) . ' value=' . str_replace('+','%20', str_replace('[','', str_replace(']','', str_replace('],[',',' ,explode(']}', explode(':[',$hdrbit)[1])[0])))) . '&gt;&lt;\/option&gt;';<br \/>\n       }<br \/>\n       }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nif (file_exists('rivers.geojson')) {<br \/>\n  $rbits=explode(']]}}', file_get_contents('.\/rivers.geojson'));<br \/>\n  for ($irr=1; $irr&lt;(-1 + sizeof($rbits)); $irr++) {<br \/>\n       $hdrbit=explode('{\"type\":\"Feature', $rbits[-1 + $irr])[-1 + sizeof(explode('{\"type\":\"Feature', $rbits[-1 + $irr]))];<br \/>\n       $hbits=explode(',\"name\":\"', $hdrbit);<br \/>\n       if (sizeof($hbits) &gt; 1) {<br \/>\n       if (strpos($sih, 'id=river' . str_replace('+','%20',urlencode(explode('\"', $hbits[1])[0])) . '&gt;') === false) {<br \/>\n       $rih.='&lt;option value=' . str_replace('+','%20', oururlencode(str_replace('[','', str_replace(']','', str_replace('],[', ',', str_replace(']],[[', ' ', explode(']]}', explode(':[[',$hdrbit)[1])[0])))))) . ' id=river' . str_replace('+','%20',urlencode(explode('\"', $hbits[1])[0])) . '&gt;&lt;\/option&gt;';<br \/>\n       } else {<br \/>\n       $rih=str_replace(' id=river' . str_replace('+','%20', oururlencode(explode('\"', $hbits[1])[0])) . '&gt;', str_replace('+','%20', urlencode(str_replace('[','', str_replace(']','', str_replace('],[', ',', str_replace(']],[[', ' ', explode(']]}', explode(':[[',$hdrbit)[1])[0])))))) . ' id=river' . str_replace('+','%20',urlencode(explode('\"', $hbits[1])[0])) . '&gt;', $rih);<br \/>\n       }<br \/>\n       }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; code usage (ie. the HTML file ends up bigger, to help) in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php------GETME\" title=\"regions.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php------GETME\" title=\"regions.php\">regions.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\">GeoJson World Coastlines PHP web application<\/a> in a new window, or you can <a href='#regionsif'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-geojson-world-coastline-function-noun-naming-tutorial\/'>New GeoJson World Coastline Function Noun Naming Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcfnnt'>Previous relevant <a target=_blank title='GeoJson World Coastline Function Noun Naming Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-function-noun-naming-tutorial\/'>GeoJson World Coastline Function Noun Naming Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Coastline Function Noun Naming Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_function_naming.jpg\" title=\"GeoJson World Coastline Function Noun Naming Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Coastline Function Noun Naming Tutorial<\/p><\/div>\n<p>We&#8217;re working on an extension to yesterday&#8217;s <a title='GeoJson World Coastline Rivers Quiz Tutorial' href='#gjwcrqt'>GeoJson World Coastline Rivers Quiz Tutorial<\/a>&#8216;s  Rivers Quiz functionality within our GeoJson World Coastlines web application, and have &#8230;<\/p>\n<ul>\n<li>settled on an <i>approach<\/i> &#8230; but &#8230;<\/li>\n<li>not yet finished on deployment issues<\/li>\n<\/ul>\n<p> &#8230; but it is this <i>approach<\/i> we wanted to talk about today.<\/p>\n<p>Our <i>approach<\/i> borrows from Object Oriented Programming (OOP) the idea that &#8230;<\/p>\n<ul>\n<li>just as with OOP thinking class names are like nouns and the methods within that class are like verbs &#8230; we, with our <i>approach<\/i> &#8230;<\/li>\n<li>help readability of our non-OOP functional code by including those nouns and verbs, as well as ideas like use of plurals to indicate array involvement, with our Javascript function naming<\/li>\n<\/ul>\n<p> &#8230; we can best illustrate to you via showing you <font color=blue>new functions and variables<\/font> and <font color=purple>modified code<\/font> to show you this <i>approach<\/i> in code &#8230;<\/p>\n<p><code><br \/>\n  var rivers='', arivers=[], iguess=-1, isofar=' ', jscore=0, jgoes=0, elema=null, contexta=null, rectisleft=0, rectistop=0, isokto=true;<br \/>\n  <font color=blue>var populations='', apopulations=[], jguess=-1, jsofar=' ', both=false, jlastn='';<br \/>\n  var idone=false;<\/font><br \/>\n<br \/>\n  function populaterivers() {<br \/>\n    var found=-1, ifnd=0;<br \/>\n    var rbits=rivers.split(']]}}');<br \/>\n    var murraytotal=0.0;<br \/>\n    rivers='';<br \/>\n    var lastn='', hdrbit='', hbits=[];<br \/>\n    for (var irr=1; irr&lt;(-1 + rbits.length); irr++) {<br \/>\n      hdrbit=rbits[-1 + irr].split('{' + String.fromCharCode(34) + 'type' + String.fromCharCode(34) + ':' + String.fromCharCode(34) + 'Feature')[eval(-1 + rbits[-1 + irr].split('{' + String.fromCharCode(34) + 'type' + String.fromCharCode(34) + ':' + String.fromCharCode(34) + 'Feature').length)] + '';<br \/>\n\/\/alert(hdrbit);<br \/>\n      hbits=hdrbit.split(',' + String.fromCharCode(34) + 'name' + String.fromCharCode(34) + ':' + String.fromCharCode(34));<br \/>\n      if (hbits.length &gt; 1) {<br \/>\n        if ((!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) || eval('' + arivers.length) &lt;= 200)) {<br \/>\n        if (lastn != hbits[1].split(String.fromCharCode(34))[0]) {<br \/>\n          lastn=hbits[1].split(String.fromCharCode(34))[0];<br \/>\n          found=-1;<br \/>\n          if (arivers.length &gt; 0) {<br \/>\n          for (ifnd=0; ifnd&lt;arivers.length; ifnd++) {<br \/>\n            if (('' + arivers[ifnd]).indexOf(':') != -1 && found == -1) {<br \/>\n              if (('' + arivers[ifnd]).split(':')[0] == lastn) { found=ifnd; }<br \/>\n            }<br \/>\n          }<br \/>\n          }<br \/>\n          if (found &gt;= 0) {<br \/>\n          if (lastn == 'Murray') {<br \/>\n            console.log(hdrbit.split(':[[')[1].replace(\/\\]\\]\\,\\[\\[\/g,' ').replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,''));<br \/>\n          }<br \/>\n          if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n          arivers[found]+=' ' + lessit(hdrbit.split(':[[')[1].replace(\/\\]\\]\\,\\[\\[\/g,' ').replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,''));<br \/>\n          }<br \/>\n          } else {<br \/>\n          if (lastn == 'Murray') {<br \/>\n            console.log(lastn + ':' + hdrbit.split(':[[')[1].replace(\/\\]\\]\\,\\[\\[\/g,' ').replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,''));<br \/>\n          }<br \/>\n          arivers.push(lastn + ':' + lessit(hdrbit.split(':[[')[1].replace(\/\\]\\]\\,\\[\\[\/g,' ').replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,'')));<br \/>\n          }<br \/>\n        } else if (1 == 1 || !navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n          if (lastn == 'Murray') {<br \/>\n            console.log(hdrbit.split(':[[')[1].replace(\/\\]\\]\\,\\[\\[\/g,' ').replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,''));<br \/>\n          }<br \/>\n          arivers[-1 + arivers.length]+=' ' + lessit(hdrbit.split(':[[')[1].replace(\/\\]\\]\\,\\[\\[\/g,' ').replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,''));<br \/>\n        }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    rbits=[];<br \/>\n    lastn='';<br \/>\n    \/\/if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    \/\/  alert(arivers.length);<br \/>\n    \/\/}<br \/>\n    \/\/return;<br \/>\n    \/\/plotariver(getariver());<br \/>\n    if (!idone) { idone=true; getariver();  }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  <font color=blue>function lessit(maybe) {<br \/>\n     var altmaybe='', altmaybed='';<br \/>\n     if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n       var acsvs=maybe.split(',');<br \/>\n       for (var ic=0; ic&lt;acsvs.length; ic++) {<br \/>\n          altmaybe+=altmaybed + (acsvs[ic] + '.xyz').substring(0,eval(3 + (acsvs[ic] + '.xyz').indexOf('.'))).split('.xyz')[0];<br \/>\n          altmaybed=',';<br \/>\n       }<br \/>\n       acsvs=[];<br \/>\n       return altmaybe;<br \/>\n     }<br \/>\n     return maybe;<br \/>\n  }<\/font><br \/>\n<br \/> <br \/>\n  <font color=blue>function populatepopulations() {<br \/>\n    var found=-1, ifnd=0;<br \/>\n    var rbits=populations.split(']}}');<br \/>\n    populations='';<br \/>\n    var jlastn='', hdrbit='', hbits=[];<br \/>\n    for (var irr=1; irr&lt;(-1 + rbits.length); irr++) {<br \/>\n      hdrbit=rbits[-1 + irr].split('{' + String.fromCharCode(34) + 'type' + String.fromCharCode(34) + ':' + String.fromCharCode(34) + 'Feature')[eval(-1 + rbits[-1 + irr].split('{' + String.fromCharCode(34) + 'type' + String.fromCharCode(34) + ':' + String.fromCharCode(34) + 'Feature').length)] + '';<br \/>\n\/\/alert(hdrbit);<br \/>\n      hbits=hdrbit.split(',' + String.fromCharCode(34) + 'NAME' + String.fromCharCode(34) + ':' + String.fromCharCode(34));<br \/>\n      if (hbits.length &gt; 1) {<br \/>\n        if (jlastn != hbits[1].split(String.fromCharCode(34))[0]) {<br \/>\n          jlastn=hbits[1].split(String.fromCharCode(34))[0];<br \/>\n          found=-1;<br \/>\n          if (apopulations.length &gt; 0) {<br \/>\n          for (ifnd=0; ifnd&lt;apopulations.length; ifnd++) {<br \/>\n            if (('' + apopulations[ifnd]).indexOf(':') != -1 && found == -1) {<br \/>\n              if (('' + apopulations[ifnd]).split(':')[0] == jlastn) { found=ifnd; }<br \/>\n            }<br \/>\n          }<br \/>\n          }<br \/>\n          if (found &gt;= 0) {<br \/>\n          if (jlastn == 'Sydney') { console.log(hdrbit.split(':[')[1].replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,'')); }<br \/>\n          apopulations[found]+=' ' + lessit(hdrbit.split(':[')[1].replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,''));<br \/>\n          } else {<br \/>\n          if (jlastn == 'Sydney') { console.log(jlastn + ':' + hdrbit.split(':[')[1].replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,'')); }<br \/>\n          apopulations.push(jlastn + ':' + lessit(hdrbit.split(':[')[1].replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,'')));<br \/>\n          }<br \/>\n        } else {<br \/>\n          if (jlastn == 'Sydney') { console.log(hdrbit.split(':[')[1].replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,'')); }<br \/>\n          apopulations[-1 + apopulations.length]+=' ' + lessit(hdrbit.split(':[')[1].replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,''));<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    rbits=[];<br \/>\n    jlastn='';<br \/>\n    \/\/return;<br \/>\n    \/\/plotariver(getariver());<br \/>\n  }<\/font><br \/>\n<br \/> <br \/>\n  function getariver() {<br \/>\n    \/\/for (var ih=0; ih&lt;arivers.length; ih++) {<br \/>\n    \/\/  if (arivers[ih].split(':')[0] == 'Murray') { return ih; }<br \/>\n    \/\/}<br \/>\n    if (!idone) { document.getElementById('ifrivers').src='.\/rivers.geojson';  } else if (arivers.length &gt; 0) {<br \/>\n    iguess=Math.floor(Math.random() * arivers.length);<br \/>\n    if (isofar.indexOf(',' + iguess + ',') != -1) {<br \/>\n    while (isofar.indexOf(',' + iguess + ',') != -1) {<br \/>\n    iguess=Math.floor(Math.random() * arivers.length);<br \/>\n    }<br \/>\n    }<br \/>\n    isofar+=',' + iguess + ',';<br \/>\n    lastn=arivers[iguess].split(':')[0];<br \/>\n    plotariver(iguess);<br \/>\n    setTimeout(askariver, 8000);<br \/>\n    return iguess;<br \/>\n    }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  <font color=purple>function askariver() {<br \/>\n    var another=false;<br \/>\n    var midbit='';<br \/>\n    var origboth=both;<br \/>\n    var thing='river';<br \/>\n    if (!both) {  midbit='Append spaces to also answer a question regarding the Populations Quiz, or P to just do Populations Quiz.';   } else { thing='population'; }<br \/>\n    var retthis=prompt('What is the name of this new blue river plotted on the world map?  ' + midbit + '  Enter ? to get given more time looking at (longitude,latitude) = (' + arivers[iguess].split(':')[1].split(',')[0] + ',' + arivers[iguess].split(':')[1].split(',')[1] + ')', '');<br \/>\n    if (retthis == null) {<br \/>\n      both=false;<br \/>\n      jgoes++;<br \/>\n      another=confirm('Bad luck. Answer was ' + lastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n    } else if (retthis.toLowerCase().trim() == 'p') {<br \/>\n      both=false;<br \/>\n      isokto=true;<br \/>\n      getapopulation();<br \/>\n      return '';<br \/>\n    } else if (retthis.trim() == '?') {<br \/>\n      if (retthis.trim() != retthis && !origboth) { both=true;   }<br \/>\n      setTimeout(askariver, 8000);<br \/>\n      return '';<br \/>\n    } else if (retthis.trim() == '') {<br \/>\n      if (retthis != '' && !origboth) { thing='population'; }<br \/>\n      jgoes++;<br \/>\n      another=confirm('Bad luck. Answer was ' + lastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n      if (retthis != '' && !origboth) { isokto=true;  both=true; getapopulation();   }<br \/>\n    } else if (lastn.toLowerCase().indexOf(retthis.toLowerCase()) != -1 && lastn.toLowerCase() == retthis.toLowerCase() && retthis.trim().length &gt;= 1) {<br \/>\n      if (retthis.trim() != retthis && !origboth) { both=true;  thing='population';    }<br \/>\n      jgoes++;<br \/>\n      jscore++;<br \/>\n      another=confirm('Will pay that.  Answer was ' + lastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n    } else if (lastn.toLowerCase().indexOf(retthis.toLowerCase()) == -1) {<br \/>\n      if (retthis.trim() != retthis && !origboth) { both=true;   thing='population';  }<br \/>\n      jgoes++;<br \/>\n      another=confirm('Bad luck. Answer was ' + lastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n    } else if (lastn.toLowerCase() == retthis.toLowerCase()) {<br \/>\n      if (retthis.trim() != retthis && !origboth) { both=true;  thing='population';   }<br \/>\n      jgoes++;<br \/>\n      jscore++;<br \/>\n      another=confirm('Well done!  Answer was ' + lastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n    } else if (retthis.trim().length &gt;= 1) {<br \/>\n      if (retthis.trim() != retthis && !origboth) { both=true;  thing='population';   }<br \/>\n      jgoes++;<br \/>\n      another=confirm('Bad luck. Answer was ' + lastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n    } else {<br \/>\n      if (retthis.trim() != retthis && !origboth) { both=true;  thing='population';   }<br \/>\n      jgoes++;<br \/>\n      jscore++;<br \/>\n      another=confirm('Will pay that.  Answer was ' + lastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n    }<br \/>\n    if (both && !origboth) { isitok=true; getapopulation();  return '';   } else if (both) {  return '';  }<br \/>\n    if (another) {  if (both) { getariver(); getapopulation(); } else { getariver(); } } else {   contexta.clearRect(0,0,360,180);   }<br \/>\n    return '';<br \/>\n  }<\/font><br \/>\n<br \/> <br \/>\n  function plotariver(which) {<br \/>\n    if (both) { isokto=true; }<br \/>\n    if (isokto) { contexta.clearRect(0,0,360,180); }<br \/>\n    if (both) { isokto=false; }<br \/>\n    lastn=arivers[which].split(':')[0];<br \/>\n    var rest=arivers[which].split(':')[1];<br \/>\n    var consolelog='';<br \/>\n    console.log(rest);<br \/>\n    var restlonglat=[];  \/\/rest.split(',');<br \/>\n    var therest=rest.split(' ');<br \/>\n    \/\/alert(eval(180.0 + eval('' + restlonglat[0])) + ',' + eval(90.0 - eval('' + restlonglat[1])));<br \/>\n    for (var jrrr=0; jrrr&lt;therest.length; jrrr++) {<br \/>\n    restlonglat=therest[jrrr].split(',');<br \/>\n    for (var irrr=2; irrr&lt;restlonglat.length; irrr+=2) {<br \/>\n       if (eval(1 + irrr) &lt; eval('' + restlonglat.length)) {<br \/>\n       if (irrr == 2) {<br \/>\n         contexta.strokeStyle = '#0000ff';<br \/>\n         contexta.lineWidth = 1;<br \/>\n         contexta.beginPath();<br \/>\n         \/\/console.log('context.moveTo(' + eval(180.0 + eval('' + restlonglat[0])) + ',' + eval(90.0 - eval('' + restlonglat[1])) + ');');<br \/>\n         contexta.moveTo(eval(180.0 + eval('' + restlonglat[0])), eval(90.0 - eval('' + restlonglat[1])));<br \/>\n       }<br \/>\n    \/\/alert(eval(180.0 + eval('' + restlonglat[irrr])) + ',' + eval(90.0 - eval('' + restlonglat[1 + irrr])));<br \/>\n         consolelog=('context.lineTo(' + eval(180.0 + eval('' + restlonglat[eval(0 + eval('' + irrr))])) + ',' + eval(90.0 - eval('' + restlonglat[eval(1 + eval('' + irrr))])) + ');');<br \/>\n       if (consolelog.indexOf('NaN') == -1) {<br \/>\n       contexta.lineTo(eval(180.0 + eval('' + restlonglat[eval(0 + eval('' + irrr))])), eval(90.0 - eval('' + restlonglat[eval(1 + eval('' + irrr))])));<br \/>\n       }<br \/>\n       \/\/if (eval(irrr + 1) &gt;= eval('' + restlonglat.length)) { context.stroke(); }<br \/>\n       }<br \/>\n    }<br \/>\n    contexta.stroke();<br \/>\n    }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function getthejson(iois) {<br \/>\n    if (iois.src.indexOf('.geojson') != -1) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n       if (aconto.body != null) {<br \/>\n       if (iois.src.indexOf('rivers.geojson') != -1) {<br \/>\n       rivers='' + aconto.body.innerHTML;<br \/>\n       setTimeout(populaterivers, 500);<br \/>\n       <font color=purple>iois.src='.\/population.geojson';<\/font><br \/>\n       } <font color=purple>else if (iois.src.indexOf('population.geojson') != -1) { \/\/ && !navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n       populations='' + aconto.body.innerHTML;<br \/>\n       setTimeout(populatepopulations, 500);<br \/>\n       }<\/font><br \/>\n       }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  <font color=blue>function getapopulation() {<br \/>\n    \/\/for (var ih=0; ih&lt;apopulations.length; ih++) {<br \/>\n    \/\/  if (apopulations[ih].split(':')[0] == 'Murray') { return ih; }<br \/>\n    \/\/}<br \/>\n    jguess=Math.floor(Math.random() * apopulations.length);<br \/>\n    if (jsofar.indexOf(',' + jguess + ',') != -1) {<br \/>\n    while (jsofar.indexOf(',' + jguess + ',') != -1) {<br \/>\n    jguess=Math.floor(Math.random() * apopulations.length);<br \/>\n    }<br \/>\n    }<br \/>\n    jsofar+=',' + jguess + ',';<br \/>\n    jlastn=apopulations[jguess].split(':')[0];<br \/>\n    plotapopulation(jguess);<br \/>\n    setTimeout(askapopulation, 9000);<br \/>\n    return jguess;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function askapopulation() {<br \/>\n    var another=false;<br \/>\n    var origboth=both;<br \/>\n    var midbit='';<br \/>\n    var thing='population';<br \/>\n    if (!both) {  midbit='Append spaces to also answer a question regarding the Rivers Quiz, or R to just do Rivers Quiz.';   } else { thing='river'; }<br \/>\n    var retthis=prompt('What is the name of this new red population area plotted on the world map? ' + midbit + '  Enter ? to get given more time looking at (longitude,latitude) = (' + apopulations[jguess].split(':')[1].split(',')[0] + ',' + apopulations[jguess].split(':')[1].split(',')[1] + ')', '');<br \/>\n    if (retthis == null) {<br \/>\n      both=false;<br \/>\n      jgoes++;<br \/>\n      another=confirm('Bad luck. Answer was ' + jlastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n    } else if (retthis.toLowerCase().trim() == 'r') {<br \/>\n      both=false;<br \/>\n      isokto=true;<br \/>\n      getariver();<br \/>\n      return '';<br \/>\n    } else if (retthis.trim() == '?') {<br \/>\n      if (retthis.trim() != retthis && !origboth) { both=true;   }<br \/>\n      setTimeout(askapopulation, 9000);<br \/>\n      return '';<br \/>\n    } else if (retthis.trim() == '') {<br \/>\n      if (retthis != '' && !origboth) { thing='river'; }<br \/>\n      jgoes++;<br \/>\n      another=confirm('Bad luck. Answer was ' + jlastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n      if (retthis != '' && !origboth) { isokto=true;  both=true; getariver();   }<br \/>\n    } else if (jlastn.toLowerCase().indexOf(retthis.toLowerCase()) != -1 && jlastn.toLowerCase() == retthis.toLowerCase() && retthis.trim().length &gt;= 1) {<br \/>\n      if (retthis.trim() != retthis && !origboth) { both=true;  thing='river';    }<br \/>\n      jgoes++;<br \/>\n      jscore++;<br \/>\n      another=confirm('Will pay that.  Answer was ' + jlastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n    } else if (jlastn.toLowerCase().indexOf(retthis.toLowerCase()) == -1) {<br \/>\n      if (retthis.trim() != retthis && !origboth) { both=true;  thing='river';   }<br \/>\n      jgoes++;<br \/>\n      another=confirm('Bad luck. Answer was ' + jlastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n    } else if (jlastn.toLowerCase() == retthis.toLowerCase()) {<br \/>\n      if (retthis.trim() != retthis && !origboth) { both=true;  thing='river';    }<br \/>\n      jgoes++;<br \/>\n      jscore++;<br \/>\n      another=confirm('Well done!  Answer was ' + jlastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n    } else if (retthis.trim().length &gt;= 1) {<br \/>\n      if (retthis.trim() != retthis && !origboth) { both=true;  thing='river';    }<br \/>\n      jgoes++;<br \/>\n      another=confirm('Bad luck. Answer was ' + jlastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n    } else {<br \/>\n      if (retthis.trim() != retthis && !origboth) { both=true;  thing='river';    }<br \/>\n      jgoes++;<br \/>\n      jscore++;<br \/>\n      another=confirm('Will pay that.  Answer was ' + jlastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new ' + thing + '?');<br \/>\n    }<br \/>\n    if (both) {   contexta.clearRect(0,0,360,180);   }<br \/>\n    if (both && !origboth) { isitok=true; getariver();  return '';   }<br \/>\n    if (another) { if (both) { getariver(); getapopulation(); } else { getapopulation(); } } else {   contexta.clearRect(0,0,360,180);   }<br \/>\n    return '';<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function plotapopulation(which) {<br \/>\n    if (isokto) { contexta.clearRect(0,0,360,180); }<br \/>\n    \/\/if (both) { isokto=true; }<br \/>\n    jlastn=apopulations[which].split(':')[0];<br \/>\n    var rest=apopulations[which].split(':')[1];<br \/>\n    var restlonglat=[];  \/\/rest.split(',');<br \/>\n    restlonglat=rest.split(',');<br \/>\n    if (eval('' + restlonglat.length) &gt;= 2) {<br \/>\n    contexta.fillStyle = 'red';<br \/>\n    contexta.fillRect(eval(180.0 + eval('' + restlonglat[0])), eval(90.0 - eval('' + restlonglat[1])),1,1);<br \/>\n    contexta.fill();<br \/>\n    }<br \/>\n  }<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php-----GETME\" title=\"regions.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php-----GETME\" title=\"regions.php\">regions.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\">GeoJson World Coastlines PHP web application<\/a> in a new window, or you can <a href='#regionsif'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-geojson-world-coastline-rivers-quiz-tutorial\/'>New GeoJson World Coastline Function Noun Naming Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcrqt'>Previous relevant <a target=_blank title='GeoJson World Coastline Rivers Quiz Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-rivers-quiz-tutorial\/'>GeoJson World Coastline Rivers Quiz Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Coastline Rivers Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_rivers_quiz.jpg\" title=\"GeoJson World Coastline Rivers Quiz Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Coastline Rivers Quiz Tutorial<\/p><\/div>\n<p>It&#8217;s time to turn our attention away from GeoJson World Countries, as talked about with yesterday&#8217;s <a title='GeoJson World Countries Plotted Ports Tutorial' href='#gjwcppt'>GeoJson World Countries Plotted Ports Tutorial<\/a>, and back to GeoJson World Coastline ideas.  Why?  We want to add a &#8230;<\/p>\n<p><code><br \/>\nRivers Quiz<br \/>\n<\/code><\/p>\n<p> &#8230; via the (generously provided) <a target=_blank title='HTTP:\/\/geojson.xyz rivers lake centerlines' href='https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_50m_rivers_lake_centerlines.geojson'>HTTP:\/\/geojson.xyz rivers lake centerlines<\/a> GeoJSON data we download and then uploaded to become rivers.geojson data file.   Now we were wondering out of &#8230;<\/p>\n<ul>\n<li>use the URL to this GeoJSON file as the &#8220;src&#8221; attribute of an HTML iframe &#8230;<br \/>\n<code><br \/>\n&lt;iframe id=ifrivers onload=getthejson(this); style=display:none; src=.\/rivers.geojson&gt;&lt;\/iframe&gt;<br \/>\n<\/code><br \/>\n &#8230; element (and then access the content via the onload event &#8230;<br \/>\n<code><br \/>\n  var rivers='', arivers=[], iguess=-1, isofar=' ', jscore=0, jgoes=0, elema=null, contexta=null, rectisleft=0, rectistop=0;<br \/>\n  <br \/>\n  function getthejson(iois) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n       if (aconto.body != null) {<br \/>\n       rivers='' + aconto.body.innerHTML;<br \/>\n       setTimeout(populaterivers, 500);<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; function) would suffice, or if we would end up using &#8230;\n<\/li>\n<li>Ajax call<\/li>\n<\/ul>\n<p> &#8230; to access this data, and were a bit surprised the former method was all fine.  Of course there are snazzy inbuilt Javascript hierarchical calls you can make to process the data, but we find, with GeoJSON data, in the client realm (where we&#8217;re keen to stay with today&#8217;s work<font size=1> (though PHP serverside can, of course, be purloined to do all this work, should you have that available)<\/font>), of Javascript, we just need very basic string functions &#8230;<\/p>\n<ul>\n<li>split <font size=1>(versus PHP explode)<\/font><\/li>\n<li>index <font size=1>(versus PHP strpos)<\/font><\/li>\n<li>substring <font size=1>(versus PHP substr)<\/font><\/li>\n<li>replace <font size=1>(versus PHP str_replace)<\/font><\/li>\n<li>push <font size=1>(versus PHP array_push)<\/font><\/li>\n<\/ul>\n<p> &#8230; to get by processing &#8230;<\/p>\n<p><code><br \/>\n  var rivers='', arivers=[], iguess=-1, isofar=' ', jscore=0, jgoes=0, elema=null, contexta=null, rectisleft=0, rectistop=0;<br \/>\n  <br \/>\n  function populaterivers() {<br \/>\n    var found=-1, ifnd=0;<br \/>\n    var rbits=rivers.split(']]}}');<br \/>\n    var lastn='', hdrbit='', hbits=[];<br \/>\n    for (var irr=1; irr&lt;(-1 + rbits.length); irr++) {<br \/>\n      hdrbit=rbits[-1 + irr].split('{' + String.fromCharCode(34) + 'type' + String.fromCharCode(34) + ':' + String.fromCharCode(34) + 'Feature')[eval(-1 + rbits[-1 + irr].split('{' + String.fromCharCode(34) + 'type' + String.fromCharCode(34) + ':' + String.fromCharCode(34) + 'Feature').length)] + '';<br \/>\n      hbits=hdrbit.split(',' + String.fromCharCode(34) + 'name' + String.fromCharCode(34) + ':' + String.fromCharCode(34));<br \/>\n      if (hbits.length &gt; 1) {<br \/>\n        if (lastn != hbits[1].split(String.fromCharCode(34))[0]) {<br \/>\n          lastn=hbits[1].split(String.fromCharCode(34))[0];<br \/>\n          found=-1;<br \/>\n          if (arivers.length &gt; 0) {<br \/>\n          for (ifnd=0; ifnd&lt;arivers.length; ifnd++) {<br \/>\n            if (('' + arivers[ifnd]).indexOf(':') != -1 && found == -1) {<br \/>\n              if (('' + arivers[ifnd]).split(':')[0] == lastn) { found=ifnd; }<br \/>\n            }<br \/>\n          }<br \/>\n          }<br \/>\n          if (found &gt;= 0) {<br \/>\n          \/\/if (lastn == 'Murray') { console.log(hdrbit.split(':[[')[1].replace(\/\\]\\]\\,\\[\\[\/g,' ').replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,'')); }<br \/>\n          arivers[found]+=' ' + hdrbit.split(':[[')[1].replace(\/\\]\\]\\,\\[\\[\/g,' ').replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,'');<br \/>\n          } else {<br \/>\n          \/\/if (lastn == 'Murray') { console.log(lastn + ':' + hdrbit.split(':[[')[1].replace(\/\\]\\]\\,\\[\\[\/g,' ').replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,'')); }<br \/>\n          arivers.push(lastn + ':' + hdrbit.split(':[[')[1].replace(\/\\]\\]\\,\\[\\[\/g,' ').replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,''));<br \/>\n          }<br \/>\n        } else {<br \/>\n          \/\/if (lastn == 'Murray') { console.log(hdrbit.split(':[[')[1].replace(\/\\]\\]\\,\\[\\[\/g,' ').replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,'')); }<br \/>\n          arivers[-1 + arivers.length]+=' ' + hdrbit.split(':[[')[1].replace(\/\\]\\]\\,\\[\\[\/g,' ').replace(\/\\]\\,\\[\/g,',').replace(\/\\[\/g,'').replace(\/\\]\/g,'');<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    lastn='';<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; the (ever so) consistent GeoJSON data!<\/p>\n<p>The progress with GeoJson World Countries helped too.  We knew to add another HTML canvas layer <font color=purple>as per<\/font> &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-colour-infill-tutorial\/'>\n<ul>\n<li>document.body <font color=purple><strike>(now with the new <i>onmousemove=airportplot(event);<\/i> event logic)<\/strike><\/font> lowest level &#8230;<\/li>\n<li>overlayed by HTML canvas element plotted with world country linework &#8230; <font color=purple>now including &#8230;<\/font><\/li>\n<li><font color=purple>overlayed by HTML canvas element dedicated to nearest airport plotting &#8230;<\/font><br \/>\n<code><br \/>\n<font color=purple>&lt;canvas id=myacanvas height='180' width='360' style='background-color:transparent;z-index:55;display:inline-block;position:absolute;top:0px;left:0px;'&gt;&lt;\/canvas&gt;<\/font><br \/>\n<\/code>\n<\/li>\n<li>overlayed by HTML img (transparent image) element and its associated image map area elements &#8230; <font color=purple><strike>and today we add into the mix &#8230;<\/strike><\/font><\/li>\n<li><font color=purple><strike>HTML div hosting <a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> elements overlay<font color=blue><strike>ing<\/strike> initialized with &#8220;land&#8221; parts green infilled SVG at a mid range z-index<\/font> (<font color=blue><strike>only<\/strike> as well as<\/font> when called upon) individual GeoJson entities overlay<\/strike><\/font><\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; and to, at document.body onload logic &#8230;<\/p>\n<p><code><br \/>\n\/\/ ... and extended document.body onload event logic has added, up near its top ...<br \/>\n    elema = document.getElementById('myacanvas');<br \/>\n    contexta = elema.getContext('2d');<br \/>\n<\/code><\/p>\n<p> &#8230; and supplement with another HTML sub &#8220;emoji button&#8221; &#10067; ( &amp;#10067; ) type element &#8230;<\/p>\n<p><code><br \/>\n&lt;sub style=cursor:pointer; onclick=getariver(); title='River Quiz'&gt;&amp;#10067;&lt;\/sub&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; allowing for &#8230;<\/p>\n<p><code><br \/>\n  function getariver() {<br \/>\n    \/\/for (var ih=0; ih&lt;arivers.length; ih++) {<br \/>\n    \/\/  if (arivers[ih].split(':')[0] == 'Murray') { return ih; }<br \/>\n    \/\/}<br \/>\n    iguess=Math.floor(Math.random() * arivers.length);<br \/>\n    if (isofar.indexOf(',' + iguess + ',') != -1) {<br \/>\n    while (isofar.indexOf(',' + iguess + ',') != -1) {<br \/>\n    iguess=Math.floor(Math.random() * arivers.length);<br \/>\n    }<br \/>\n    }<br \/>\n    isofar+=',' + iguess + ',';<br \/>\n    lastn=arivers[iguess].split(':')[0];<br \/>\n    plotariver(iguess);<br \/>\n    setTimeout(askariver, 8000);<br \/>\n    return iguess;<br \/>\n  }<br \/>\n  <br \/>\n  function askariver() {<br \/>\n    var another=false;<br \/>\n    var retthis=prompt('What is the name of this new blue river plotted on the world map?   Enter ? to get given more time looking at (longitude,latitude) = (' + arivers[iguess].split(':')[1].split(',')[0] + ',' + arivers[iguess].split(':')[1].split(',')[1] + ')', '');<br \/>\n    if (retthis == null) {<br \/>\n      jgoes++;<br \/>\n      another=confirm('Bad luck. Answer was ' + lastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new river?');<br \/>\n    } else if (retthis.trim() == '?') {<br \/>\n      setTimeout(askariver, 8000);<br \/>\n      return '';<br \/>\n    } else if (retthis.trim() == '') {<br \/>\n      jgoes++;<br \/>\n      another=confirm('Bad luck. Answer was ' + lastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new river?');<br \/>\n    } else if (lastn.toLowerCase().indexOf(retthis.toLowerCase()) == -1) {<br \/>\n      jgoes++;<br \/>\n      another=confirm('Bad luck. Answer was ' + lastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new river?');<br \/>\n    } else if (lastn.toLowerCase() == retthis.toLowerCase()) {<br \/>\n      jgoes++;<br \/>\n      jscore++;<br \/>\n      another=confirm('Well done!  Answer was ' + lastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new river?');<br \/>\n    } else if (retthis.trim().length &gt;= 1) {<br \/>\n      jgoes++;<br \/>\n      another=confirm('Bad luck. Answer was ' + lastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new river?');<br \/>\n    } else {<br \/>\n      jgoes++;<br \/>\n      jscore++;<br \/>\n      another=confirm('Will pay that.  Answer was ' + lastn + '. Score ' + jscore + '\/' + jgoes + '.  Another go with a new river?');<br \/>\n    }<br \/>\n    if (another) { getariver(); } else {   contexta.clearRect(0,0,360,180);   }<br \/>\n    return '';<br \/>\n  }<br \/>\n  <br \/>\n  function plotariver(which) {<br \/>\n    contexta.clearRect(0,0,360,180);<br \/>\n    lastn=arivers[which].split(':')[0];<br \/>\n    var rest=arivers[which].split(':')[1];<br \/>\n    console.log(rest);<br \/>\n    var restlonglat=[];  \/\/rest.split(',');<br \/>\n    var therest=rest.split(' ');<br \/>\n    \/\/alert(eval(180.0 + eval('' + restlonglat[0])) + ',' + eval(90.0 - eval('' + restlonglat[1])));<br \/>\n    for (var jrrr=0; jrrr&lt;therest.length; jrrr++) {<br \/>\n    restlonglat=therest[jrrr].split(',');<br \/>\n    for (var irrr=2; irrr&lt;restlonglat.length; irrr+=2) {<br \/>\n       if (irrr == 2) {<br \/>\n         contexta.strokeStyle = '#0000ff';<br \/>\n         contexta.lineWidth = 1;<br \/>\n         contexta.beginPath();<br \/>\n         console.log('context.moveTo(' + eval(180.0 + eval('' + restlonglat[0])) + ',' + eval(90.0 - eval('' + restlonglat[1])) + ');');<br \/>\n         contexta.moveTo(eval(180.0 + eval('' + restlonglat[0])), eval(90.0 - eval('' + restlonglat[1])));<br \/>\n       }<br \/>\n    \/\/alert(eval(180.0 + eval('' + restlonglat[irrr])) + ',' + eval(90.0 - eval('' + restlonglat[1 + irrr])));<br \/>\n         console.log('context.lineTo(' + eval(180.0 + eval('' + restlonglat[eval(0 + eval('' + irrr))])) + ',' + eval(90.0 - eval('' + restlonglat[eval(1 + eval('' + irrr))])) + ');');<br \/>\n      contexta.lineTo(eval(180.0 + eval('' + restlonglat[eval(0 + eval('' + irrr))])), eval(90.0 - eval('' + restlonglat[eval(1 + eval('' + irrr))])));<br \/>\n       \/\/if (eval(irrr + 1) &gt;= eval('' + restlonglat.length)) { context.stroke(); }<br \/>\n    }<br \/>\n    contexta.stroke();<br \/>\n    }<br \/>\n  }<br \/>\n<\/code>  <\/p>\n<p> &#8230; to work the Rivers Quiz.  Finally, though, for all good practicalities we also need those zoom logics out of GeoJson World Countries logic, via &#8220;emoji button&#8221; &#128270; ( &amp;#128270; ) &#8230;<\/p>\n<p><code><br \/>\n&lt;a style=cursor:pointer; title='Zoom In' onclick='event.stopPropagation(); event.preventDefault(); zoomin();'&gt;&amp;#128270;&lt;\/a&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; calling on meta name=viewport tag for mobile &#8230;<\/p>\n<p><code><br \/>\n&lt;meta id='myviewport' name='viewport' content='width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes'  &gt;<br \/>\n<\/code><\/p>\n<p> &#8230; as well as the zooming Javascript &#8230;<\/p>\n<p><code><br \/>\nvar jzoom=1.0, izoom=location.search.split('zoom=')[1] ? eval(decodeURIComponent(location.search.split('zoom=')[1].split('&')[0])) : 1.0;<br \/>\n<br \/>\nfunction zoomin() {<br \/>\n   if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n   jzoom*=2;<br \/>\n   document.getElementById('myviewport').setAttribute('content', 'width=device-width, initial-scale=' + eval(jzoom * izoom) + ', minimum-scale=0.1, maximum-scale=8, user-scalable=yes');<br \/>\n   window.scrollTo(0,0);    \/\/izoom*=2;<br \/>\n   } else {<br \/>\n   \/\/if (1 == 1) {<br \/>\n   \/\/  alert('Please use your web browser View Menu options Zoom In or Zoom Out');<br \/>\n   \/\/} else {<br \/>\n     document.body.style.zoom=('' + eval(izoom * 200.0) + '%');<br \/>\n     izoom*=2;<br \/>\n     \/\/location.href=document.URL.split('?')[0].split('#')[0] + '?zoom=' + encodeURIComponent('' + eval(2 * izoom));<br \/>\n   \/\/}<br \/>\n   }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>So feel free to try the new Rivers Quiz in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php----GETME\" title=\"regions.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php----GETME\" title=\"regions.php\">regions.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\">GeoJson World Coastlines PHP web application<\/a> in a new window, or you can <a href='#regionsif'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-geojson-world-countries-plotted-ports-tutorial\/'>New GeoJson World Countries Plotted Ports Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcppt'>Previous relevant <a target=_blank title='GeoJson World Countries Plotted Ports Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-plotted-ports-tutorial\/'>GeoJson World Countries Plotted Ports Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries Plotted Ports Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_ports_as_well.jpg\" title=\"GeoJson World Countries Plotted Airports Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries Plotted Ports Tutorial<\/p><\/div>\n<p>There are a few interesting aspects to today&#8217;s extension of functionality onto yesterday&#8217;s <a title='GeoJson World Countries Plotted Airports Tutorial' href='#gjwcpat'>GeoJson World Countries Plotted Airports Tutorial<\/a>&#8216;s GeoJson World Countries web application &#8230;<\/p>\n<ul>\n<li>where to modularise &#8230; we think &#8220;data collection&#8221; commonality is a good reason, and so we <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intair.php----GETME\" title='intair.php'>make these changes<\/a> to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/intair.php----GETME\" title='intair.php'>intair.php<\/a><\/li>\n<li>making an (&#8220;animated emoji&#8221;) button <font color=blue>dual purpose<\/font> on top of originally being a single purpose button &#8230;<br \/>\n<code><br \/>\n&lt;sub title='Show Nearby Airports' onclick='doair=<font color=blue>how(<\/font>true<font color=blue>,this)<\/font>; twothousand*=2; this.title=this.title.substring(0,4) + String.fromCharCode(105) + String.fromCharCode(110) + String.fromCharCode(103) + <font color=blue>this.title.replace(this.title.split(String.fromCharCode(32))[0] + String.fromCharCode(32), String.fromCharCode(32))<\/font>;' <font color=blue>data-type=9992<\/font> style=cursor:pointer; <font color=blue>id=portsub<\/font>&gt;&amp;#9992;&lt;\/sub&gt;<br \/>\n<\/code><br \/>\n &#8230; working with the intairsuffix global variable that could add a new GET argument where both the &#8220;port&#8221; label in &#038;port=[value] and that [value] can affect behaviour from the intair.php PHP helper tool above &#8230;<br \/>\n<code><br \/>\n<font color=blue>var intairsuffix='', zhra=null, zhrb=null, kklat=0, kklong=0, doair=false, vsll=[-999.0], answered=true;<\/font><br \/>\n<br \/>\n<font color=blue>function how(atr, isub) {<br \/>\n  var curgd=isub.getAttribute('data-type');<br \/>\n  if (('' + curgd) == '9992') { \/\/ airport<br \/>\n    if (intairsuffix != '') {<br \/>\n       intairsuffix='&port=air';<br \/>\n       isub.title='Showing Nearby Airports and Ports';<br \/>\n       document.getElementById('title').value='Nearby Timezone Places and Airports and Ports';<br \/>\n    }<br \/>\n  } else if (('' + curgd) == '128674') { \/\/ port<br \/>\n    if (intairsuffix == '') {<br \/>\n       if (doair) {<br \/>\n       intairsuffix='&port=air';<br \/>\n       isub.title='Showing Nearby Airports and Ports';<br \/>\n       document.getElementById('title').value='Nearby Timezone Places and Airports and Ports';<br \/>\n       } else {<br \/>\n       intairsuffix='&port=y';<br \/>\n       isub.title='Showing Nearby Ports';<br \/>\n       document.getElementById('title').value='Nearby Timezone Places and Ports';<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n  return true;<br \/>\n}<br \/>\n<br \/>\nfunction feedhow() {<br \/>\n  var isub=document.getElementById('portsub');<br \/>\n  var curgd=isub.getAttribute('data-type');<br \/>\n  if (('' + curgd) == '9992') { \/\/ airport<br \/>\n    isub.innerHTML='&amp;#128674;';<br \/>\n    isub.setAttribute('data-type', '128674');<br \/>\n  } else if (('' + curgd) == '128674') { \/\/ port<br \/>\n    isub.innerHTML='&amp;#9992;';<br \/>\n    isub.setAttribute('data-type', '9992');<br \/>\n  }<br \/>\n}<\/font><br \/>\n<\/code>\n<\/li>\n<li>Ajax asynchronous usage for <font color=blue>second half of a synchronous previous usage<\/font> &#8230;<br \/>\n<code><br \/>\n<font color=blue>var intairsuffix='', zhra=null, zhrb=null, kklat=0, kklong=0, doair=false, vsll=[-999.0], answered=true;<\/font><br \/>\n<br \/>\n <font color=blue>function stateChangedb() {<br \/>\n if (zhrb.readyState == 4) {<br \/>\n  if (zhrb.status == 200) {<br \/>\n       var rectis=document.body.getBoundingClientRect();<br \/>\n       var topllong=-180.0;<br \/>\n       var topllat=90.0;<br \/>\n       var onepixelequals=izoom;<br \/>\n   var bts=zhrb.response.split('.src + ' + String.fromCharCode(39));<br \/>\n   if (eval('' + bts.length) &gt; 1) {<br \/>\n   for (var ijh=1; ijh&lt;bts.length; ijh++) {<br \/>\n   var vs=eval(eval(eval(eval(-topllong + eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[1])) * onepixelequals) + eval(0 * eval(rectis.left))) +<br \/>\n   eval(eval(eval(topllat - eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[0])) * onepixelequals) + eval(0 * eval(rectis.top))));<br \/>\n   if (!inarray(vs,vsll)) {<br \/>\n   vsll.push(vs);<br \/>\n   drawaac(<br \/>\n   eval(eval(eval(-topllong + eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[1])) * onepixelequals) + eval(0 * eval(rectis.left))),<br \/>\n   eval(eval(eval(topllat - eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[0])) * onepixelequals) + eval(0 * eval(rectis.top)))<br \/>\n   );<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n  }<br \/>\n }<br \/>\n }<\/font><br \/>\n  <br \/>\n function stateChangeda() {<br \/>\n if (zhra.readyState == 4) {<br \/>\n  if (zhra.status == 200) {<br \/>\n       var rectis=document.body.getBoundingClientRect();<br \/>\n       var topllong=-180.0;<br \/>\n       var topllat=90.0;<br \/>\n       var onepixelequals=izoom;<br \/>\n   var bts=zhra.response.split('.src + ' + String.fromCharCode(39));<br \/>\n   if (eval('' + bts.length) &gt; 1) {<br \/>\n   for (var ijh=1; ijh&lt;bts.length; ijh++) {<br \/>\n    var vs=eval(eval(eval(eval(-topllong + eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[1])) * onepixelequals) + eval(0 * eval(rectis.left))) +<br \/>\n   eval(eval(eval(topllat - eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[0])) * onepixelequals) + eval(0 * eval(rectis.top))));<br \/>\n   if (!inarray(vs,vsll)) {<br \/>\n   vsll.push(vs);<br \/>\n   drawaac(<br \/>\n   eval(eval(eval(-topllong + eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[1])) * onepixelequals) + eval(0 * eval(rectis.left))),<br \/>\n   eval(eval(eval(topllat - eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[0])) * onepixelequals) + eval(0 * eval(rectis.top)))<br \/>\n   );<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n   <font color=blue>if (intairsuffix.indexOf('&port=air') != -1) {<br \/>\n   zhrb = new XMLHttpRequest();<br \/>\n   zhrb.onreadystatechange=stateChangedb;<br \/>\n   zhrb.open('get', '\/HTMLCSS\/intair.php?num=6&lat=' + kklat + '&long=' + kklong + '&port=y', true);<br \/>\n   zhrb.send(null);<br \/>\n   } <\/font><br \/>\n   answered=true;<br \/>\n  }<br \/>\n }<br \/>\n }<br \/>\n  <br \/>\n  function naira(klat, klong) {<br \/>\n   if (answered && doair) {<br \/>\n   answered=false;<br \/>\n   zhra = new XMLHttpRequest();<br \/>\n   zhra.onreadystatechange=stateChangeda;<br \/>\n   console.log('\/HTMLCSS\/intair.php?num=6&lat=' + klat + '&long=' + klong + intairsuffix);<br \/>\n   <font color=blue>if (intairsuffix.indexOf('&port=air') != -1) {<br \/>\n   kklat=klat;<br \/>\n   kklong=klong;<br \/>\n   zhra.open('get', '\/HTMLCSS\/intair.php?num=6&lat=' + klat + '&long=' + klong, true);<br \/>\n   } else {<\/font><br \/>\n   zhra.open('get', '\/HTMLCSS\/intair.php?num=6&lat=' + klat + '&long=' + klong<font color=blue> + intairsuffix<\/font>, true);<br \/>\n   <font color=blue>}<\/font><br \/>\n   zhra.send(null);<br \/>\n   }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; keeps a fast<sub>ish<\/sub> synchronous call (that we enforce via that answered global variable) but truely invokes an asynchronous arrangement extracting Nearby Ports data to plot, as applicable\n<\/li>\n<\/ul>\n<p> &#8230; <font color=blue>in adding<\/font> &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-nearest-airports-tutorial\/'>\n<p>So far, with yesterday&#8217;s <a title='GeoJson World Countries Google Directions Trip Tutorial' href='#gjwcgdtt'>GeoJson World Countries Google Directions Trip Tutorial<\/a>&#8216;s GeoJson World Countries points of interest include &#8230;<\/p>\n<p><\/p>\n<ul>\n<li>the clicked latitude and longitude &#8230; and &#8230;<\/li>\n<li>three nearby TimeZone Places &#8230; and today, we offer the optional &#8230;<\/li>\n<li><font color=blue><strike>four<\/strike>six<\/font> nearest Airports (via the &#9992; ( &amp;#9992; ) emoji button the user clicks)  and for this we need to thank, profusely, <a target=_blank title='The Global Airport Database' href='http:\/\/www.partow.net\/miscellaneous\/airportdatabase\/'>The Global Airport Database<\/a> project by Arash Partow, as with <a target=_blank title='HTML5 Canvas Map Clickaround Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-canvas-map-clickaround-follow-up-tutorial'>HTML5 Canvas Map Clickaround Follow Up Tutorial<\/a><\/li>\n<li><font color=blue>six nearest Ports (via the &#128674; ( &amp;#128674; ) emoji button the user clicks)  and for this we need to thank, profusely, <a target=_blank title='HTTP:\/\/geojson.xyz ports' href='https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_10m_ports.geojson'>HTTP:\/\/geojson.xyz ports<\/a> project, as with <a target=_blank title='Swift Playgrounds on macOS Map Emoji Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/swift-playgrounds-on-macos-map-emoji-tutorial\/'>Swift Playgrounds on macOS Map Emoji Tutorial<\/a><\/font><\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php----------GETME\" title=\"countries.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php----------GETME\" title=\"countries.php\">countries.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-geojson-world-countries-plotted-airports-tutorial\/'>New GeoJson World Countries Plotted Airports Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcpat'>Previous relevant <a target=_blank title='GeoJson World Countries Plotted Airports Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-plotted-airports-tutorial\/'>GeoJson World Countries Plotted Airports Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries Plotted Airports Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_airports_on_the_fly.jpg\" title=\"GeoJson World Countries Plotted Airports Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries Plotted Airports Tutorial<\/p><\/div>\n<p>Introducing the Map Chart recognition of nearby Airports with yesterday&#8217;s <a title='GeoJson World Countries Nearest Airports Tutorial' href='#gjwcnat'>GeoJson World Countries Nearest Airports Tutorial<\/a>&#8216;s progress on our latest GeoJson World Countries PHP web application, it set us to seeing &#8230;<\/p>\n<ul>\n<li>the combination of <a target=_blank href='https:\/\/www.google.com\/search?q=google+directions&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=google+directions&#038;aqs=chrome.0.69i59j0i512l6j69i60.4254j0j4&#038;sourceid=chrome&#038;ie=UTF-8' title='Google Directions'>Google Directions<\/a>&#8216;s talents allowing you to reposition on the fly &#8230; and &#8230;<\/li>\n<li>the onmousemove event, at least for our non-mobile users<\/li>\n<\/ul>\n<p> &#8230; could mean that if we pre-plot airports on the world map, given that the user has clicked the  &#9992; ( &amp;#9992; ) &#8220;Show an Interest in Airports&#8221; emoji button, as a non-mobile user hovers over the world map, this pre-plotting might help trip planners with their travel options, should air travel be part of their interest, in the same way it is an option up at <a target=_blank href='https:\/\/www.google.com\/search?q=google+directions&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=google+directions&#038;aqs=chrome.0.69i59j0i512l6j69i60.4254j0j4&#038;sourceid=chrome&#038;ie=UTF-8' title='Google Directions'>Google Directions<\/a> in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php---------GETME\" title=\"countries.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php---------GETME\" title=\"countries.php\">countries.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>.  The overlay scenario <font color=purple>now reads<\/font> &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-colour-infill-tutorial\/'>\n<ul>\n<li>document.body <font color=purple>(now with the new <i>onmousemove=airportplot(event);<\/i> event logic)<\/font> lowest level &#8230;<\/li>\n<li>overlayed by HTML canvas element plotted with world country linework &#8230; <font color=purple>now including &#8230;<\/font><\/li>\n<li><font color=purple>overlayed by HTML canvas element dedicated to nearest airport plotting &#8230;<\/font><br \/>\n<code><br \/>\n<font color=purple>&lt;canvas id=myacanvas height='180' width='360' style='background-color:transparent;z-index:55;display:inline-block;position:absolute;top:0px;left:0px;'&gt;&lt;\/canvas&gt;<\/font><br \/>\n<\/code>\n<\/li>\n<li>overlayed by HTML img (transparent image) element and its associated image map area elements &#8230; <font color=purple><strike>and today we add into the mix &#8230;<\/strike><\/font><\/li>\n<li>HTML div hosting <a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> elements overlay<font color=blue><strike>ing<\/strike> initialized with &#8220;land&#8221; parts green infilled SVG at a mid range z-index<\/font> (<font color=blue><strike>only<\/strike> as well as<\/font> when called upon) individual GeoJson entities overlay<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; worked by new (sometimes Ajax) Javascript code &#8230;<\/p>\n<p><code><br \/>\n  var zhra=null, elema=null, contexta=null, answered=true, vsll=[-999.0], doair=false; \/\/ clicking &#9992; sets doair=true;<br \/>\n  <br \/>\n  function drawaac(centerX, centerY) {<br \/>\n    contexta.beginPath();<br \/>\n    contexta.globalAlpha = 0.9;<br \/>\n    if (1 == 1) {<br \/>\n    contexta.fillStyle = 'black';<br \/>\n    contexta.fillRect(centerX \/ izoom, centerY \/ izoom,1,1);<br \/>\n    contexta.fill();<br \/>\n    } else {<br \/>\n    contexta.arc(centerX \/ izoom, centerY \/ izoom, 1, 0, 2 * Math.PI, false);<br \/>\n    contexta.fillStyle = 'black';<br \/>\n    contexta.fill();<br \/>\n    contexta.lineWidth = 5;<br \/>\n    contexta.lineWidth = 0.00001;<br \/>\n    contexta.strokeStyle = '#003300';<br \/>\n    contexta.stroke();<br \/>\n    }<br \/>\n    return true;<br \/>\n  }<br \/>\n  <br \/>\n function inarray(needle, haystack) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/784012\/javascript-equivalent-of-phps-in-array<br \/>\n    var length = haystack.length;<br \/>\n    for (var i = 0; i &lt; length; i++) {<br \/>\n        if (haystack[i] == needle) return true;<br \/>\n    }<br \/>\n    return false;<br \/>\n }<br \/>\n<br \/>\n function stateChangeda() {<br \/>\n if (zhra.readyState == 4) {<br \/>\n  if (zhra.status == 200) {<br \/>\n       var rectis=document.body.getBoundingClientRect();<br \/>\n       var topllong=-180.0;<br \/>\n       var topllat=90.0;<br \/>\n       var onepixelequals=izoom;<br \/>\n   var bts=zhra.response.split('.src + ' + String.fromCharCode(39));<br \/>\n   if (eval('' + bts.length) &gt; 1) {<br \/>\n   for (var ijh=1; ijh&lt;bts.length; ijh++) {<br \/>\n   var vs=eval(eval(eval(eval(-topllong + eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[1])) * onepixelequals) + eval(0 * eval(rectis.left))) +<br \/>\n   eval(eval(eval(topllat - eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[0])) * onepixelequals) + eval(0 * eval(rectis.top))));<br \/>\n   if (!inarray(vs,vsll)) {<br \/>\n   vsll.push(vs);<br \/>\n   drawaac(<br \/>\n   eval(eval(eval(-topllong + eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[1])) * onepixelequals) + eval(0 * eval(rectis.left))),<br \/>\n   eval(eval(eval(topllat - eval(bts[ijh].split(String.fromCharCode(39))[0].split('[')[1].split(',')[0])) * onepixelequals) + eval(0 * eval(rectis.top)))<br \/>\n   );<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n   answered=true;<br \/>\n  }<br \/>\n }<br \/>\n }<br \/>\n<br \/>\n  function naira(klat, klong) {<br \/>\n   if (answered && doair) {<br \/>\n   answered=false;<br \/>\n   zhra = new XMLHttpRequest();<br \/>\n   zhra.onreadystatechange=stateChangeda;<br \/>\n   zhra.open('get', '\/HTMLCSS\/intair.php?num=6&lat=' + klat + '&long=' + klong, true);<br \/>\n   zhra.send(null);<br \/>\n   }<br \/>\n  }<br \/>\n  <br \/>\n  function airportplot(e) {<br \/>\n    if (answered) {<br \/>\n       var rectis=null; \/\/document.body.getBoundingClientRect();<br \/>\n       var blat=0, blong=0;<br \/>\n       var topllong=-180.0;<br \/>\n       var topllat=90.0;<br \/>\n       onepixelequals=eval(0.0 + eval(1.0 * izoom));<br \/>\n       e = e || window.event;<br \/>\n       e.preventDefault();<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n   naira(eval(-rectisleft + e.touches[0].pageX), eval(-rectistop + e.touches[0].pageY)); \/\/if (drawac(eval(-rectisleft + e.touches[0].pageX), eval(-rectistop + e.touches[0].pageY)))  e = e; }<br \/>\n       } else {<br \/>\n   rectis=document.body.getBoundingClientRect();<br \/>\n   naira(eval(-rectis.left + e.touches[0].clientX), eval(-rectis.top + e.touches[0].clientY)); \/\/if (drawac(eval(-rectis.left + e.touches[0].clientX), eval(-rectis.top + e.touches[0].clientY))) { e = e; }<br \/>\n       }<br \/>\n       } else if (e.pageX || e.pageY) {<br \/>\n   blat=eval(eval(eval(topllat * onepixelequals - eval(-rectistop + e.pageY) * 1)) \/ onepixelequals);<br \/>\n   blong=eval(eval(eval(topllong * onepixelequals + eval(-rectisleft + e.pageX) * 1)) \/ onepixelequals);<br \/>\n   if ((blat &gt;= -90.0 && blat &lt;= 90.0) && (blong &gt;= -180.0 && blong &lt;= 180.0)) {<br \/>\n   naira(blat, blong); \/\/if (drawac(eval(-rectisleft + e.pageX), eval(-rectistop + e.pageY))) { e = e; }<br \/>\n   }<br \/>\n       } else {<br \/>\n   rectis=document.body.getBoundingClientRect();<br \/>\n   naira(eval(-rectis.left + e.clientX), eval(-rectis.top + e.clientY)); \/\/if (drawac(eval(-rectis.left + e.clientX), eval(-rectis.top + e.clientY))) { e = e; }<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n\/\/ ... and extended document.body onload event logic has added, up near its top ...<br \/>\n    elema = document.getElementById('myacanvas');<br \/>\n    contexta = elema.getContext('2d');<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-plotted-airports-tutorial\/'>GeoJson World Countries Plotted Airports Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcnat'>Previous relevant <a target=_blank title='GeoJson World Countries Nearest Airports Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-nearest-airports-tutorial\/'>GeoJson World Countries Nearest Airports Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries Nearest Airports Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_airports.jpg\" title=\"GeoJson World Countries Nearest Airports Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries Nearest Airports Tutorial<\/p><\/div>\n<p>So far, with yesterday&#8217;s <a title='GeoJson World Countries Google Directions Trip Tutorial' href='#gjwcgdtt'>GeoJson World Countries Google Directions Trip Tutorial<\/a>&#8216;s GeoJson World Countries points of interest include &#8230;<\/p>\n<ul>\n<li>the clicked latitude and longitude &#8230; and &#8230;<\/li>\n<li>three nearby TimeZone Places &#8230; and today, we offer the optional &#8230;<\/li>\n<li>four nearest Airports (via the &#9992; ( &amp;#9992; ) emoji button the user clicks)  and for this we need to thank, profusely, <a target=_blank title='The Global Airport Database' href='http:\/\/www.partow.net\/miscellaneous\/airportdatabase\/'>The Global Airport Database<\/a> project by Arash Partow, as with <a target=_blank title='HTML5 Canvas Map Clickaround Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-canvas-map-clickaround-follow-up-tutorial'>HTML5 Canvas Map Clickaround Follow Up Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; being as we&#8217;re into <font color=blue>trip planning now<\/font>!<\/p>\n<p><code><br \/>\n <font color=blue>var airportstuff='', doair=false, zhr=null;<br \/>\n<br \/>\n function stateChanged() {<br \/>\n if (zhr.readyState == 4) {<br \/>\n  if (zhr.status == 200) {<br \/>\n   var bts=zhr.response.split('.src + ' + String.fromCharCode(39));<br \/>\n   if (eval('' + bts.length) > 1) {<br \/>\n   for (var ijh=1; ijh<bts.length; ijh++) {\n   airportstuff+=bts[ijh].split(String.fromCharCode(39))[0]; \/\/zhr.response;\n   }\n   }\n   \/\/alert(airportstuff + ' ?');\n  }\n }\n }\n <br \/>\n function windowopen(p1, p2, p3) {<br \/>\n       if (p1.length &gt; 800) {<br \/>\n          document.getElementById('iddata').value=(p1.split('&data=')[1].split('&')[0].split('#')[0]).replace(\/\\&20\\;\/g,' ');<br \/>\n          document.getElementById('smapif').click();<br \/>\n          return null;<br \/>\n        }<br \/>\n        return window.open(p1, p2, p3);<br \/>\n }<br \/>\n <br \/>\n function apm(mu) {<br \/>\n   if (airportstuff != '' && doair) {<br \/>\n      return (mu + airportstuff).replace('&', encodeURIComponent(' and Airports') + '&');<br \/>\n   }<br \/>\n   return mu;<br \/>\n }<br \/>\n <br \/>\n  function nair(klat, klong) {<br \/>\n   airportstuff='';<br \/>\n   zhr = new XMLHttpRequest();<br \/>\n   zhr.onreadystatechange=stateChanged;<br \/>\n   zhr.open('get', '\/HTMLCSS\/intair.php?num=4&lat=' + klat + '&long=' + klong, true);<br \/>\n   zhr.send(null);<br \/>\n  }<\/font><br \/>\n  <br \/>\n  function alats(inlat) {<br \/>\n   if (inlat == 0 && lastlats.length == 0) { inlat=inlat; } else  { lastlats.push(inlat); }<br \/>\n   return inlat;<br \/>\n  }<br \/>\n  <br \/>\n  function alongs(inlong) {<br \/>\n   if (inlong == 0 && lastlongs.length == 0) { inlong=inlong; } else  { lastlongs.push(inlong); }<br \/>\n   <font color=blue>setTimeout(prenair, 200); \/\/nair(thislat, inlong);<\/font><br \/>\n   return inlong;<br \/>\n  }<br \/>\n  <br \/>\n  <font color=blue>function prenair() {<br \/>\n   nair(thislat, thislong);<br \/>\n  }<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; featuring Ajax Javascript code.<\/p>\n<p>Try this out with <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php--------GETME\" title=\"countries.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php--------GETME\" title=\"countries.php\">countries.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>.<\/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\/geojson-world-countries-nearest-airports-tutorial\/'>GeoJson World Countries Nearest Airports Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcgdtt'>Previous relevant <a target=_blank title='GeoJson World Countries Google Directions Trip Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-google-directions-trip-tutorial\/'>GeoJson World Countries Google Directions Trip Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries Google Directions Trip Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_directions.jpg\" title=\"GeoJson World Countries Google Directions Trip Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries Google Directions Trip Tutorial<\/p><\/div>\n<p>Adding to the &#8220;zoom&#8221; progress of yesterday&#8217;s <a title='GeoJson World Countries Zoom Tutorial' href='#gjwczt'>GeoJson World Countries Zoom Tutorial<\/a>, today, we wanted to &#8230;<\/p>\n<ul>\n<li>add interfacing functionality to the excellent <a target=_blank href='https:\/\/www.google.com\/search?q=google+directions&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=google+directions&#038;aqs=chrome.0.69i59j0i512l6j69i60.4254j0j4&#038;sourceid=chrome&#038;ie=UTF-8' title='Google Directions'>Google Directions<\/a> part of <a target=_blank title='Google Maps' href='https:\/\/maps.google.com'>Google Maps<\/a>, perhaps to help with Trip planning, or even just to associate a Placename with a latitude and longitude as clicked by the user, via the very simple URL arrangement &#8230;<br \/>\n<code>https:\/\/www.google.com\/maps\/dir\/[decimalLatitudeDegrees]\/[decimalLongitudeDegrees]<\/code><br \/>\n &#8230; helped out by new Javascript functions &#8230;<br \/>\n<code><br \/>\n  var lastlats=[], lastlongs=[], lastlat=-99.0, lastlong=-99.0, thislat=0.0, thislong=0.0;<br \/>\n<br \/>\n  function preface(inblurb) {<br \/>\n    var extras='';<br \/>\n    var outblurb=inblurb;<br \/>\n    if (Math.abs(eval('' + lastlat)) > 0.0 || Math.abs(eval('' + lastlong)) > 0.0) {<br \/>\n     if (Math.abs(eval('' + lastlat)) <= 90.0 &#038;&#038; Math.abs(eval('' + lastlong)) <= 180.0) {\n      extras=' Add G for Google Directions between (' + lastlat + ',' + lastlong + ') to (' + thislat + ',' + thislong + ') and spaces (also more trip legs) to hashtag navigate to Google Charts later. ';\n     }\n    }\n    return extras + outblurb;\n  }\n  <br \/>\n  function alats(inlat) {<br \/>\n   if (inlat == 0 && lastlats.length == 0) { inlat=inlat; } else  { lastlats.push(inlat); }<br \/>\n   return inlat;<br \/>\n  }<br \/>\n  <br \/>\n  function alongs(inlong) {<br \/>\n   if (inlong == 0 && lastlongs.length == 0) { inlong=inlong; } else  { lastlongs.push(inlong); }<br \/>\n   return inlong;<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; and &#8230;<\/li>\n<li>add some hashtag navigation (fairly self explanatory emoji button <a href='#myimg' title='Back to top'  id=abt>&#11014;<\/a> <a href='#mapchart' title='Down to Google Charts' id=abb>&#11015;<\/a> <a onclick='var scleft=0; var sctop=0; sctop=document.documentElement.scrollTop || document.body.scrollTop;  scleft=document.documentElement.scrollLeft || document.body.scrollLeft; window.scrollTo(scleft,sctop);' title='Back to last positioning' id=abd>&#8599;<\/a>) ideas now that our GeoJson world map can be zoomed in on<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php-------GETME\" title=\"countries.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php-------GETME\" title=\"countries.php\">countries.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>.<\/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\/geojson-world-countries-google-directions-trip-tutorial\/'>GeoJson World Countries Google Directions Trip Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwczt'>Previous relevant <a target=_blank title='GeoJson World Countries Zoom Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-zoom-tutorial\/'>GeoJson World Countries Zoom Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries Zoom Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_zoom.jpg\" title=\"GeoJson World Countries Zoom Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries Zoom Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='GeoJson World Countries TimeZone Times Tutorial' href='#gjwctztt'>GeoJson World Countries TimeZone Times Tutorial<\/a> GeoJson World Countries web application&#8217;s capabilities we want to add zooming, that doesn&#8217;t rely on web browser functionality (which continues to work).  With that in mind we create a new emoji ( &amp;#128270; ) &#128270; link, with this onclick event code &#8230;<\/p>\n<p><code><br \/>\nvar jzoom=1.0, izoom=location.search.split('zoom=')[1] ? eval(decodeURIComponent(location.search.split('zoom=')[1].split('&')[0])) : 1.0;<br \/>\n<br \/>\nfunction zoomin() {<br \/>\n   if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     jzoom*=2;<br \/>\n     document.getElementById('myviewport').setAttribute('content', 'width=device-width, initial-scale=' + eval(jzoom * izoom) + ', minimum-scale=0.1, maximum-scale=8, user-scalable=yes');<br \/>\n     window.scrollTo(0,0);<br \/>\n   } else {<br \/>\n     document.body.style.zoom=('' + eval(izoom * 200.0) + '%');<br \/>\n     izoom*=2;<br \/>\n   }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; to multiply the webpage zoom factor in a programmatical way.  To acheive this, we have a two way approach (as you might have surmised from above) &#8230;<\/p>\n<ul>\n<li>for mobile, the logic is easier by introducing a new meta name=viewport &#8230;<br \/>\n<code><br \/>\n&lt;meta id=\"myviewport\" name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes\"  &gt;<br \/>\n<\/code><br \/>\n &#8230; tag &#8230; while &#8230;<\/li>\n<li>for non-mobile  we needed to realize that <i>event.pageX<\/i> and <i>event.pageY<\/i> co-ordinates grow in proportion to the zoom factor, and that better latitude and longitude determining lines of code <font color=blue>would go<\/font> &#8230;<br \/>\n<code><br \/>\n  function canvasclick(e) {<br \/>\n       var rectis=document.body.getBoundingClientRect();<br \/>\n       var topllong=-180.0;<br \/>\n       var topllat=90.0;<br \/>\n       onepixelequals=eval(0.0 + eval(1.0 * izoom));<br \/>\n       \/\/document.title='canvasclick';<br \/>\n       e = e || window.event;<br \/>\n       e.preventDefault();<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n         \/\/lastl='Longitude,Latitude coordinates are ' + eval(topllong + eval(-rectis.left + e.touches[0].pageX) * onepixelequals) + ',' + eval(topllat - eval(-rectis.top + e.touches[0].pageY) * onepixelequals);<br \/>\n   if (drawc(eval(-rectisleft + e.touches[0].pageX), eval(-rectistop + e.touches[0].pageY))) {<br \/>\n   thislat=eval(topllat - eval(-rectistop + e.touches[0].pageY) * onepixelequals);<br \/>\n   thislong=eval(topllong + eval(-rectisleft + e.touches[0].pageX) * onepixelequals);<br \/>\n       \/\/console.log('rectistop=' + rectistop + ' and rectisleft=' + rectisleft + ' and rectisy=' + rectisy + ' and thislat=' + thislat);<br \/>\n   document.getElementById('nearestif').src='\/PHP\/tz_places.php?place=&latitude=' + encodeURIComponent('' + eval(topllat - eval(-rectistop + e.touches[0].pageY) * onepixelequals)) + '&longitude=' + encodeURIComponent('' + eval(topllong + eval(-rectisleft + e.touches[0].pageX) * onepixelequals)) + '&ntztontz=y';<br \/>\n   }<br \/>\n       } else {<br \/>\n<br \/>\n         \/\/lastl='Longitude,Latitude coordinates are ' + eval(topllong + eval(-rectis.left + e.touches[0].clientX) * onepixelequals) + ',' + eval(topllat - eval(-rectis.top + e.touches[0].clientY) * onepixelequals);<br \/>\n   if (drawc(eval(-rectis.left + e.touches[0].clientX), eval(-rectis.top + e.touches[0].clientY))) {<br \/>\n   thislat=eval(topllat - eval(-rectis.top + e.touches[0].clientY) * onepixelequals);<br \/>\n   thislong=eval(topllong + eval(-rectis.left + e.touches[0].clientX) * onepixelequals);<br \/>\n       \/\/console.log('rectis.top=' + rectis.top + ' and rectis.left=' + rectis.left + ' and rectis.y=' + rectis.y + ' anD thislat=' + thislat);<br \/>\n   document.getElementById('nearestif').src='\/PHP\/tz_places.php?place=&latitude=' + encodeURIComponent('' + eval(topllat - eval(-rectis.top + e.touches[0].clientY) * onepixelequals)) + '&longitude=' + encodeURIComponent('' + eval(topllong + eval(-rectis.left + e.touches[0].clientX) * onepixelequals)) + '&ntztontz=y';<br \/>\n   }<br \/>\n       }<br \/>\n       } else if (e.pageX || e.pageY) {<br \/>\n          \/\/lastl='Longitude,Latitude coordinates are ' + eval(topllong + e.clientX * onepixelequals) + ',' + eval(topllat - e.clientY * onepixelequals);<br \/>\n          \/\/alert('02: ' + e.screenX + ' ' + e.pageX + ' ' + e.screenY + ' ' + e.pageY + ' ' + thislong + ' ' + thislat);<br \/>\n   if (drawc(eval(-rectisleft + e.pageX), eval(-rectistop + e.pageY))) {<br \/>\n   <font color=blue>\/\/<\/font>thislat=eval(topllat - eval(-rectistop + e.pageY) * onepixelequals);<br \/>\n   <font color=blue>\/\/<\/font>thislong=eval(topllong + eval(-rectisleft + e.pageX) * onepixelequals);<br \/>\n   <font color=blue>thislat=eval(eval(eval(topllat * onepixelequals - eval(-rectistop + e.pageY) * 1)) \/ onepixelequals);<br \/>\n   thislong=eval(eval(eval(topllong * onepixelequals + eval(-rectisleft + e.pageX) * 1)) \/ onepixelequals);<\/font><br \/>\n          \/\/alert('22: ' + e.screenX + ' ' + e.pageX + ' ' + e.screenY + ' ' + e.pageY + ' ' + thislong + ' ' + thislat);<br \/>\n       \/\/console.log('rectistop=' + rectistop + ' and rectisleft=' + rectisleft + ' and rectisy=' + rectisy + ' aNd thislat=' + thislat + ' and e.pageY=' + e.pageY + ' and new plus idea=' + eval(topllat - eval(rectistop + e.pageY) * onepixelequals));<br \/>\n   <font color=blue>\/\/<\/font>document.getElementById('nearestif').src='\/PHP\/tz_places.php?place=&latitude=' + encodeURIComponent('' + eval(topllat - eval(-rectistop + e.pageY) * onepixelequals)) + '&longitude=' + encodeURIComponent('' + eval(topllong + eval(-rectisleft + e.pageX) * onepixelequals)) + '&ntztontz=y';<br \/>\n   <font color=blue>document.getElementById('nearestif').src='\/PHP\/tz_places.php?place=&latitude=' + encodeURIComponent('' + thislat) + '&longitude=' + encodeURIComponent('' + thislong) + '&ntztontz=y'; <\/font><br \/>\n   }<br \/>\n       } else {<br \/>\n         \/\/lastl='Longitude,Latitude coordinates are ' + eval(topllong + eval(-rectis.left + e.pageX) * onepixelequals) + ',' + eval(topllat - eval(-rectis.top + e.pageY) * onepixelequals);<br \/>\n   if (drawc(eval(-rectis.left + e.clientX), eval(-rectis.top + e.clientY))) {<br \/>\n   thislat=eval(topllat - eval(-rectis.top + e.clientY) * onepixelequals);<br \/>\n   thislong=eval(topllong + eval(-rectis.left + e.clientX) * onepixelequals);<br \/>\n       \/\/console.log('rectis.top=' + rectis.top + ' and rectis.left=' + rectis.left + ' and rectis.y=' + rectis.y + ' And thislat=' + thislat);<br \/>\n   document.getElementById('nearestif').src='\/PHP\/tz_places.php?place=&latitude=' + encodeURIComponent('' + eval(topllat - eval(-rectis.top + e.clientY) * onepixelequals)) + '&longitude=' + encodeURIComponent('' + eval(topllong + eval(-rectis.left + e.clientX) * onepixelequals)) + '&ntztontz=y';<br \/>\n   }<br \/>\n       }<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php------GETME\" title=\"countries.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php------GETME\" title=\"countries.php\">countries.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>.<\/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\/geojson-world-countries-zoom-tutorial\/'>GeoJson World Countries Zoom Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwctztt'>Previous relevant <a target=_blank title='GeoJson World Countries TimeZone Times Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-timezone-times-tutorial\/'>GeoJson World Countries TimeZone Times Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries TimeZone Times Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_clocks.jpg\" title=\"GeoJson World Countries TimeZone Times Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries TimeZone Times Tutorial<\/p><\/div>\n<p>Some readers might be aware of our &#8220;theory regarding adverbs&#8221; and &#8220;web applications&#8221; on the net &#8230;<\/p>\n<ul>\n<li>the most catered for adverb relates to the &#8220;where of life&#8221; &#8230; and the second banana is &#8230;<\/li>\n<li>the &#8220;when of life&#8221;<\/li>\n<\/ul>\n<p> &#8230; and, further to  yesterday&#8217;s <a title='GeoJson World Countries SVG Overlay Safari Error Tutorial' href='#gjwcsvgoset'>GeoJson World Countries SVG Overlay Safari Error Tutorial<\/a>&#8216;s emphasis on the &#8220;where of life&#8221;, today we add in a bit of the &#8220;when of life&#8221;, something right down the line of the remit of TimeZone talents.<\/p>\n<p>Seriously though, a lot of us dream of the rest of the world on a world map, and wonder what time it is in other parts of the world.  Phone call to relatives?  A reminder SMS call?  Email a game collaboration?  It could all be part of life&#8217;s rich tapestry!<\/p>\n<p>The expresion of this, for us, today, improving the communications with our current GeoJsom World Countries web application, take the form of emoji clocks from the 12 hour clock example forms such as &#8230;<\/p>\n<ul>\n<li>1  o&#8217;clock is &amp;#128336; &#128336;<\/li>\n<li>2  o&#8217;clock is &amp;#128337; &#128337;<\/li>\n<li>12 o&#8217;clock is &amp;#128347; &#128347;<\/li>\n<li>2:30 is &amp;#128349; &#128349;<\/li>\n<li>11:30 is &amp;#128358; &#128358;<\/li>\n<li>12:30 is &amp;#128359; &#128359;<\/li>\n<\/ul>\n<p> &#8230; to show in &#8220;prompt&#8221; and &#8220;confirm&#8221; popup windows, as well as Map Chart maps &#8230; via new Javascript functions &#8230;<\/p>\n<p><code><br \/>\n  function clockit(hoursoffgmt) {<br \/>\n\/\/ 1  o'clock is &#128336;<br \/>\n\/\/ 2  o'clock is &#128337;<br \/>\n\/\/ 12 o'clock is &#128347;<br \/>\n\/\/  2:30 is &#128349;<br \/>\n\/\/ 11:30 is &#128358;<br \/>\n\/\/ 12:30 is &#128359;<br \/>\n    var along='Saturday,Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday';<br \/>\n    var gmtdatetimeis='' + new Date().toUTCString();<br \/>\n    var daybit='';<br \/>\n    var ampm=' am';<br \/>\n    if (gmtdatetimeis.indexOf('day') != -1) {<br \/>\n      ampm+=', ' + gmtdatetimeis.split('day')[0].split(' ')[eval(-1 + gmtdatetimeis.split('day')[0].split(' ').length)] + 'day';<br \/>\n    } else if (gmtdatetimeis.indexOf(',') != -1) {<br \/>\n      ampm+=', ' + (gmtdatetimeis.split(',')[0].split(' ')[eval(-1 + gmtdatetimeis.split(',')[0].split(' ').length)] + '').replace(\/^Sat$\/g,'Saturday').replace(\/^Sun$\/g,'Sunday').replace(\/^Mon$\/g,'Monday').replace(\/^Tue$\/g,'Tuesday').replace(\/^Wed$\/g,'Wednesday').replace(\/^Thu$\/g,'Thursday').replace(\/^Fri$\/g,'Friday');<br \/>\n    }<br \/>\n    if (ampm.length &gt; 3) { daybit=ampm.substring(5); }<br \/>\n    var minis=eval('' + gmtdatetimeis.split(':')[1]);<br \/>\n    var hris=eval(('' + gmtdatetimeis.split(':')[0]).split(' ')[eval(-1 + ('' + gmtdatetimeis.split(':')[0]).split(' ').length)]);<br \/>\n    if (('' + hoursoffgmt).indexOf('-') != -1 && eval(eval('' + hoursoffgmt.replace('+','')) + hris) &lt; 0.0) {<br \/>\n      ampm=ampm.replace('am', 'pm');<br \/>\n      if (daybit != '') { ampm=ampm.replace(daybit, along.split(',' + daybit)[0].split(',')[eval(-1 + along.split(',' + daybit)[0].split(',').length)]); }<br \/>\n    } else if (('' + hoursoffgmt).indexOf('-') == -1 && eval(eval('' + hoursoffgmt.replace('+','')) + hris) &gt;= 24) {<br \/>\n      if (daybit != '') { ampm=ampm.replace(daybit, along.split(daybit + ',')[1].split(',')[0]); }<br \/>\n    } else if (('' + hoursoffgmt).indexOf('-') == -1 && eval(eval('' + hoursoffgmt.replace('+','')) + hris) &gt;= 12) {<br \/>\n      ampm=ampm.replace('am', 'pm');<br \/>\n    }<br \/>\n    hris+=eval(eval(24 + eval('' + hoursoffgmt.replace('+','').split('.')[0])) % 24);<br \/>\n    if (('' + hoursoffgmt.replace('+','')).indexOf('.5') != -1) {<br \/>\n      if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1 && minis &gt;= 30) {<br \/>\n        minis-=30;<br \/>\n      } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1) {<br \/>\n        hris--;<br \/>\n        if (hris &lt; 24) { hris=23; ampm=ampm.replace('am', 'pm'); if (daybit != '') { ampm=ampm.replace(daybit, along.split(',' + daybit)[0].split(',')[eval(-1 + along.split(',' + daybit)[0].split(',').length)]); } }<br \/>\n        minis+=30;<br \/>\n      } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') == -1 && minis &lt; 30) {<br \/>\n        minis+=30;<br \/>\n      } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1) {<br \/>\n        hris++;<br \/>\n        if (hris &gt; 24) { hris=24; ampm=ampm.replace('pm', 'am'); if (daybit != '') { ampm=ampm.replace(daybit, along.split(daybit + ',')[1].split(',')[0]); } }<br \/>\n        minis-=30;<br \/>\n      }<br \/>\n    } else if (('' + hoursoffgmt.replace('+','')).indexOf('.25') != -1) {<br \/>\n      if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1 && minis &gt;= 15) {<br \/>\n        minis-=15;<br \/>\n      } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1) {<br \/>\n        hris--;<br \/>\n        if (hris &lt; 24) { hris=23; ampm=ampm.replace('am', 'pm'); if (daybit != '') { ampm=ampm.replace(daybit, along.split(',' + daybit)[0].split(',')[eval(-1 + along.split(',' + daybit)[0].split(',').length)]); } }<br \/>\n        minis+=15;<br \/>\n      } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') == -1 && minis &lt; 45) {<br \/>\n        minis+=15;<br \/>\n      } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1) {<br \/>\n        hris++;<br \/>\n        if (hris &gt; 24) { hris=24; ampm=ampm.replace('pm', 'am'); if (daybit != '') { ampm=ampm.replace(daybit, along.split(daybit + ',')[1].split(',')[0]); } }<br \/>\n        minis-=15;<br \/>\n      }<br \/>\n    } else if (('' + hoursoffgmt.replace('+','')).indexOf('.75') != -1) {<br \/>\n      if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1 && minis &gt;= 45) {<br \/>\n        minis-=45;<br \/>\n      } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1) {<br \/>\n        hris--;<br \/>\n        if (hris &lt; 24) { hris=23; ampm=ampm.replace('am', 'pm'); if (daybit != '') { ampm=ampm.replace(daybit, along.split(',' + daybit)[0].split(',')[eval(-1 + along.split(',' + daybit)[0].split(',').length)]); } }<br \/>\n        minis+=45;<br \/>\n      } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') == -1 && minis &lt; 15) {<br \/>\n        minis+=45;<br \/>\n      } else if (('' + hoursoffgmt.replace('+','')).indexOf('-') != -1) {<br \/>\n        hris++;<br \/>\n        if (hris &gt; 24) { hris=24; ampm=ampm.replace('pm', 'am'); if (daybit != '') { ampm=ampm.replace(daybit, along.split(daybit + ',')[1].split(',')[0]); } }<br \/>\n        minis-=45;<br \/>\n      }<br \/>\n    }<br \/>\n    \/\/alert('' + hoursoffgmt + ' ' + hris + ' ' + minis + ' ' + gmtdatetimeis);<br \/>\n  <br \/> <br \/>\n    if (minis &gt; 45 && eval(hris % 12) == 0) {<br \/>\n      return ' ' + String.fromCodePoint(128336) + ampm;<br \/>\n    } else if (eval(hris % 12) == 0 && minis &lt;= 15) {<br \/>\n      return ' ' + String.fromCodePoint(128347) + ampm;<br \/>\n    } else if (eval(hris % 12) == 0) {<br \/>\n      return ' ' + String.fromCodePoint(128359) + ampm;<br \/>\n    } else if (minis &gt;= 45) {<br \/>\n      return ' ' + String.fromCodePoint(eval(eval(hris % 12) + 128336)) + ampm;<br \/>\n    } else if (minis &lt;= 15) {<br \/>\n      return ' ' + String.fromCodePoint(eval(eval(hris % 12) + 128335)) + ampm;<br \/>\n    } else {<br \/>\n      return ' ' + String.fromCodePoint(eval(eval(hris % 12) + 128347)) + ampm;<br \/>\n    }<br \/>\n    return '';<br \/>\n  }<br \/>\n  <br \/>\n  function emfilter(inih) {<br \/>\n     var bcxs=inih.split(' &#');<br \/>\n     var bitis='', ib=0;<br \/>\n     var outih=inih;<br \/>\n     for (ib=1; ib&lt;bcxs.length; ib++) {<br \/>\n       bitis=' &#' + bcxs[ib].split(' ')[0];<br \/>\n       outih=outih.replace(bitis, ' ' + eval('String.fromCodePoint(' + bitis.substring(3).replace(\/\\;\\&\\#\/g,',').replace(\/\\;\/g,'') + ')'));<br \/>\n     }<br \/>\n     bcxs=outih.split('(');<br \/>\n     for (ib=1; ib&lt;bcxs.length; ib++) {<br \/>\n       if (bcxs[ib].split(')')[0].indexOf(',') == -1 && bcxs[ib].split(')')[0].indexOf(' ') == -1 && (bcxs[ib].substring(0,1) == '-' || bcxs[ib].substring(0,1) == '+' || (bcxs[ib].substring(0,1) &gt;= '0' && bcxs[ib].substring(0,1) &lt;= '9'))) {<br \/>\n           outih=outih.replace('(' + bcxs[ib].split(')')[0] + ')', '(' + bcxs[ib].split(')')[0] + clockit(bcxs[ib].split(')')[0]) + ')');<br \/>\n       }<br \/>\n     }<br \/>\n     return outih;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p>Also, in these same places we add in Time Place country ISO-2 character code based emoji flags, adding to information and colour pizazz in the informational parts to the workings of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php-----GETME\" title=\"countries.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php-----GETME\" title=\"countries.php\">countries.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>.<\/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\/geojson-world-countries-timezone-times-tutorial\/'>GeoJson World Countries TimeZone Times Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcsvgoset'>Previous relevant <a target=_blank title='GeoJson World Countries SVG Overlay Safari Error Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-safari-error-tutorial\/'>GeoJson World Countries SVG Overlay Safari Error Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries SVG Overlay Safari Error Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_lime.jpg\" title=\"GeoJson World Countries SVG Overlay Safari Error Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries SVG Overlay Safari Error Tutorial<\/p><\/div>\n<p>Mostly on smaller devices (such as an iPhone), but elsewhere as well, but less drastically, this morning, using <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\">our current Display GeoJson Countries web application<\/a> we would get the Safari web browser error &#8230;<\/p>\n<blockquote><p>\nA problem repeatedly occurred with https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\n<\/p><\/blockquote>\n<p> &#8230; with web application work up to yesterday&#8217;s <a title='GeoJson World Countries SVG Overlay Colour Infill Tutorial' href='#gjwcsvgocit'>GeoJson World Countries SVG Overlay Colour Infill Tutorial<\/a>.<\/p>\n<p>On discovering our first solution theory of turning yesterday&#8217;s mapsvg.js external Javascript work into an <a target=_blank title='Javascript async information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/async_function'><i>async<\/i><\/a> piece of work made no difference to this situation, we surmised that the huge amount of content held in the Javascript (ie. client side) global variable <i>appendtoinnerHTML<\/i> was causing memory issues.  We couldn&#8217;t shift much to do with the overall amount of &#8220;data&#8221; needing to be handled, in order to implement country SVG colour infilling, but we could shift the data from being &#8230;<\/p>\n<ul>\n<li>client side (external) Javascript held &#8230; to, instead, (have that data) be (determined on the) &#8230;<\/li>\n<li>server side PHP filling in the contents of our (relevant) HTML div id=svgd ahead of the document.body onload event timing &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n$icnt=0;<br \/>\n<br \/>\nfunction apptohtmstuff($coordsare, $origc) {<br \/>\n  global $icnt;<br \/>\n  $minl=-1;<br \/>\n  $mint=-1;<br \/>\n  $maxl=-1;<br \/>\n  $maxt=-1;<br \/>\n  $zysare=explode(',', $coordsare);<br \/>\n  $svgcis='';<br \/>\n  for ($ij=0; $ij&lt;sizeof($zysare); $ij+=2) {<br \/>\n    if ($minl &lt; 0) {<br \/>\n      $minl=$zysare[$ij];<br \/>\n      $maxl=$zysare[$ij];<br \/>\n      $mint=$zysare[1 + $ij];<br \/>\n      $maxt=$zysare[1 + $ij];<br \/>\n    } else {<br \/>\n      if ($zysare[$ij] &lt; $minl) { $minl=$zysare[$ij];  }<br \/>\n      if ($zysare[$ij] &gt; $maxl) { $maxl=$zysare[$ij];  }<br \/>\n      if ($zysare[1 + $ij] &lt; $mint) { $mint=$zysare[1 + $ij];  }<br \/>\n      if ($zysare[1 + $ij] &gt; $maxt) { $maxt=$zysare[1 + $ij];  }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  for ($ij=0; $ij&lt;sizeof($zysare); $ij+=2) {<br \/>\n    if ($svgcis == '') {<br \/>\n      $svgcis='' . ($zysare[$ij] - $minl) . ',' . ($zysare[1 + $ij] - $mint);<br \/>\n    } else {<br \/>\n      $svgcis.=' ' . ($zysare[$ij] - $minl) . ',' . ($zysare[1 + $ij] - $mint);<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  $icnt++;<br \/>\n  return '&lt;div title=\"' . $coordsare . '\" id=\"dsa' . (-1 + $icnt) . '\" style=\"position:absolute;left:' . $minl . 'px;top:' . $mint . 'px;width:' . ($maxl - $minl) . 'px;height:' . ($maxt - $mint) . ';display:BLOCK;z-index:24;\"&gt;&lt;svg height=\"100%\" width=\"100%\"&gt;&lt;polygon points=\"' . $svgcis . '\" style=\"fill:lime;stroke:purple;stroke-width:1\"&gt;&lt;\/polygon&gt;&lt;\/svg&gt;&lt;\/div&gt;';<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; meaning the web application&#8217;s underlying HTML size increased at the expense of no need for external Javascript involvement any more<\/li>\n<\/ul>\n<p> &#8230;  in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php----GETME\" title=\"countries.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php----GETME\" title=\"countries.php\">countries.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>.<\/p>\n<p>We&#8217;re not exactly sure why, but &#8230;<\/p>\n<ul>\n<li>this improved web application stability &#8230;<br \/>\n<img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_iphone.jpg'><\/img><br \/>\n &#8230;everywhere &#8230; and an idea we&#8217;d ditched yesterday of &#8230;<\/li>\n<li>idea to pre-colour &#8220;land&#8221; parts of the world GeoJson map green (ahead of the document.body onload event) also came good (after causing problems yesterday)<\/li>\n<\/ul>\n<p> &#8230; meaning now, &#8220;overlay&#8221; wise, <font color=blue>we could say<\/font> &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-colour-infill-tutorial\/'>\n<ul>\n<li>document.body lowest level &#8230;<\/li>\n<li>overlayed by HTML canvas element plotted with world country linework &#8230;<\/li>\n<li>overlayed by HTML img (transparent image) element and its associated image map area elements &#8230; and today we add into the mix &#8230;<\/li>\n<li>HTML div hosting <a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> elements overlay<font color=blue><strike>ing<\/strike> initialized with &#8220;land&#8221; parts green infilled SVG at a mid range z-index<\/font> (<font color=blue><strike>only<\/strike> as well as<\/font> when called upon) individual GeoJson entities overlay<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; and we (reckon we&#8217;ve) improved the colour coding user experience at the same time.<\/p>\n<p>We noticed that tweaks in the changed &#8230;<\/p>\n<p><code><br \/>\nvar lastflagged='', appendtoinnerHTML='', waitplease=false; \/\/ used to make sure \"area\" element onclick code precedes any document.body onmousedown or ontouchdown code<br \/>\n<br \/>\nfunction checkdsa(ath) {<br \/>\n  waitplease=true;<br \/>\n  var wasih='';<br \/>\n  var athcoords=('' + ath.coords); \/\/.substring(0, Math.floor(eval(0.1 * ('' + ath.coords).length)));<br \/>\n  if (document.getElementById('svgd').innerHTML.indexOf(('' + athcoords)) != -1) {<br \/>\n    wasih='&lt;div title=' + String.fromCharCode(34) + '' + ath.coords + document.getElementById('svgd').innerHTML.split(ath.coords)[1].split('&lt;div ')[0];<br \/>\n    if (lastflagged == '') {<br \/>\n    if (wasih.indexOf(' id=' + String.fromCharCode(34)) != -1) { lastflagged=wasih.split(' id=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0]; } else { lastflagged=''; }<br \/>\n    } else {<br \/>\n    document.getElementById(lastflagged).innerHTML=document.getElementById(lastflagged).innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');<br \/>\n    if (wasih.indexOf(' id=' + String.fromCharCode(34)) != -1) { lastflagged=wasih.split(' id=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0]; } else { lastflagged=''; }<br \/>\n    }<br \/>\n    if (lastflagged != '') {<br \/>\n    document.getElementById(lastflagged).innerHTML=document.getElementById(lastflagged).innerHTML.replace('z-index:24;', 'z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);');<br \/>\n    document.getElementById(lastflagged).title=ath.title;<br \/>\n    } else {<br \/>\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(wasih, '&lt;div title=' + String.fromCharCode(34) + '' + ath.title + wasih.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);'));<br \/>\n    }<br \/>\n  } else if (('' + appendtoinnerHTML).indexOf(('' + athcoords)) != -1) {<br \/>\n    if (document.getElementById('svgd').innerHTML.indexOf(' title=' + String.fromCharCode(34) + '' + ath.title + '' + String.fromCharCode(34) + '') != -1) {<br \/>\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');<br \/>\n    document.getElementById('svgd').innerHTML+='&lt;div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace(\/\\ id\\=\/g, ' data-id=').replace('lime;', 'rgba(255,87,51,0.5);');<br \/>\n    } else {<br \/>\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');<br \/>\n    document.getElementById('svgd').innerHTML+='&lt;div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);');<br \/>\n    }<br \/>\n  }<br \/>\n  waitplease=false;<br \/>\n  return '';<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; also lessened the burden on the client side by only asking any Javascript DOM command operations act on single HTML element at a time, not a whole swathe of hosted ones, in any operation.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-geojson-world-countries-svg-overlay-colour-infill-tutorial\/'>New GeoJson World Countries SVG Overlay Colour Infill Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='gjwcsvgocit'>Previous relevant <a target=_blank title='GeoJson World Countries SVG Overlay Colour Infill Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-colour-infill-tutorial\/'>GeoJson World Countries SVG Overlay Colour Infill Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"GeoJson World Countries SVG Overlay Colour Infill Tutorial\"]<a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries SVG Overlay Colour Infill Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countriessvg.jpg\" title=\"GeoJson World Countries SVG Overlay Colour Infill Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>The \"overlay\" situation as of yesterday's <a title='GeoJson World Countries Geo Chart Tutorial' href='#gjwcgct'>GeoJson World Countries Geo Chart Tutorial<\/a> was ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>document.body lowest level ...<\/li>\n\n\n\n\n<li>overlayed by HTML canvas element plotted with world country linework ...<\/li>\n\n\n\n\n<li>overlayed by HTML img (transparent image) element and its associated image map area elements ... and today we add into the mix ...<\/li>\n\n\n\n\n<li>HTML div hosting <a target=_blank title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp'>SVG<\/a> elements overlaying (only when called upon) individual GeoJson entities overlay<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p>What can this achieve?  The GeoJson can become more user friendly via colour coding ...<\/li>\n\n\n\n\n\n<ul>\n\n\n<li>country linework is black and background colour is white to start with ... and ...<\/li>\n\n\n\n\n<li>as a user clicks an individual GeoJson entity the canvas element has a plotting circle created at a <a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a> below that of ...<\/li>\n\n\n\n\n<li>overlayed new div and SVG element initialized to <span style='color:rgba(255,87,51,0.5);'>infill colour<\/span> rgba(255,87,51,0.5) while any other previous infills become <span style='color:rgba(200,200,200,0.3);'>dimmer infill colour<\/span> rgba(200,200,200,0.3) ... the transparency of which allows the canvas plotting circle to show through<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... helping contextualize in other \"drilled into\" maps presented, in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php---GETME\" title=\"countries.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php---GETME\" title=\"countries.php\">countries.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>, now helped out by <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mapsvg.js--GETME\" title=\"mapsvg.js\">the tweaked<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mapsvg.js--GETME\" title=\"mapsvg.js\">mapsvg.js<\/a> external Javascript helper last talked about at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-map-element-svg-context-google-search-tutorial\/' title='HTML Map Element SVG Context Google Search Tutorial'>HTML Map Element SVG Context Google Search Tutorial<\/a>.  Its analysis of existent HTML webpage image map area subelements is called via a new Javascript function ...<\/p>\n\n\n\n<code>\nfunction checkdsa(ath) {\n  if (('' + appendtoinnerHTML).indexOf(('' + ath.coords)) != -1) {\n    if (document.getElementById('svgd').innerHTML.indexOf(' title=' + String.fromCharCode(34) + '' + ath.title + '' + String.fromCharCode(34) + '') != -1) {\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');\n    document.getElementById('svgd').innerHTML+='&lt;div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace(\/\\ id\\=\/g, ' data-id=').replace('lime;', 'rgba(255,87,51,0.5);');\n    } else {\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');\n    document.getElementById('svgd').innerHTML+='&lt;div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);');\n    }\n  }\n}\n<\/code>  \n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-colour-infill-tutorial\/'>GeoJson World Countries SVG Overlay Colour Infill Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcgct'>Previous relevant <a target=_blank title='GeoJson World Countries Geo Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-geo-chart-tutorial\/'>GeoJson World Countries Geo 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\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries Geo Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_geo_chartmore.jpg\" title=\"GeoJson World Countries Geo Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries Geo Chart Tutorial<\/p><\/div>\n<p>There are many advantages regarding today&#8217;s task to &#8230;<\/p>\n<blockquote><p>\nIntegrate <a 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.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\">Google Chart<\/a> <a title=\"Google Chart Geo Chart information from Google\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart\" target=\"_blank\">Geo Chart<\/a>\n<\/p><\/blockquote>\n<p> &#8230; as an additional &#8220;drill down&#8221; map option, functionality adding onto the work of yesterday&#8217;s <a title='GeoJson World Countries Tutorial' href='#gjwct'>GeoJson World Countries Tutorial<\/a>.<\/p>\n<p>What deducible data item needs to be determined for these Geo Charts to work?  We need a way to deduce ISO-2 character country codes from the ISO-3 character codes existing in the GeoJson &#8220;countries.geojson&#8221; data from yesterday&#8217;s work.  We happened upon the <a target=_blank title='Useful link' href='http:\/\/gist.github.com\/tadast\/8827699'>extremely generous mapping data webpage<\/a> <font color=blue>to help with these ISO-2 character deductions<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$geojsonis=file_get_contents('countries.geojson');<br \/>\n$parts=explode(\"]]\", $geojsonis);<br \/>\n$globalattr=\"\";<br \/>\n<font color=blue>$mappings=file_get_contents('ht<\/font><font color=blue>tp:\/\/gist.github.com\/tadast\/8827699');  \/\/ thanks<br \/>\nif (strpos($mappings, '&gt;IN&lt;\/td&gt;') !== false) {<br \/>\n  $mappings.='&lt;td&gt;IN&lt;\/td&gt;&lt;td&gt;KAS&lt;\/td&gt;&lt;td&gt;EH&lt;\/td&gt;&lt;td&gt;SAH&lt;\/td&gt;&lt;td&gt;SO&lt;\/td&gt;&lt;td&gt;SOL&lt;\/td&gt;&lt;td&gt;SS&lt;\/td&gt;&lt;td&gt;SDS&lt;\/td&gt;&lt;td&gt;XK&lt;\/td&gt;&lt;td&gt;KOS&lt;\/td&gt;&lt;td&gt;CY&lt;\/td&gt;&lt;td&gt;CYN&lt;\/td&gt;&lt;\/body&gt;';<br \/>\n}<\/font><br \/>\n<br \/>\nfor ($i=0; $i&lt;(-1 + sizeof($parts)); $i++) {<br \/>\n  if (strpos($parts[$i], '\"sr_sov_a3\":\"') !== false) {<br \/>\n    $globalattr=' data-iso3=\"' . explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0] . '\"';<br \/>\n    if (strpos($mappings, '&gt;' . explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0] . '&lt;\/td&gt;') !== false) {<br \/>\n      $iparts=explode('&gt;' . explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0] . '&lt;\/td&gt;', $mappings);<br \/>\n      $globalattr.=' data-iso2=\"' . explode('&gt;', explode('&lt;\/td&gt;', $iparts[0])[-2 + sizeof(explode('&lt;\/td&gt;', $iparts[0]))])[-1 + sizeof(explode('&gt;', explode('&lt;\/td&gt;', $iparts[0])[-2 + sizeof(explode('&lt;\/td&gt;', $iparts[0]))]))] . '\"';<br \/>\n    } else if (substr(explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0],-1,1) &gt;= '0' && substr(explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0],-1,1) &lt;= '9') {<br \/>\n      $globalattr.=' data-iso2=\"' . substr(explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0],0,2) . '\"';<br \/>\n    }<br \/>\n  }<br \/>\n  if (strpos($parts[$i], '\"sr_subunit\":\"') !== false) {<br \/>\n    $globalattr.=' data-cname=\"' . explode('\"', explode('\"sr_subunit\":\"', $parts[$i])[1])[0] . '\"';<br \/>\n  }<br \/>\n  $coords=str_replace('[','',str_replace(']','',explode('[[' , $parts[$i])[-1 + sizeof(explode('[[' , $parts[$i]))]));<br \/>\n  $newcoords=$coords;<br \/>\n  if (!$dolatlong || 1 == 1) {<br \/>\n  $lls=explode(\",\", $coords);<br \/>\n  $newcoords=\"\";<br \/>\n  for ($j=0; $j&lt;sizeof($lls); $j+=2) {<br \/>\n  $lls[$j]=($lls[$j] + $longoff) * $factor;<br \/>\n  $lls[$j + 1]=($lls[$j + 1] + $latoff) * $factor;<br \/>\n  if ($newcoords != \"\") { $newcoords.=\",\";  $htmlis=str_replace(\"}\", \" context.lineTo(\" . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]) . \"); \\n}\", $htmlis);  } else { $htmlis=str_replace(\"}\", \" context.stroke(); \\n context.beginPath(); \\n context.moveTo(\" . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]) . \"); \\n}\", $htmlis); }<br \/>\n  $newcoords.='' . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]);<br \/>\n  }<br \/>\n  }<br \/>\n  $abit.=\"&lt;area\" . $globalattr . \" onclick=\\\"ouralert(this.getAttribute('data-cname'),this.getAttribute('data-iso3'),this.getAttribute('data-iso2'),'Longitude,Latitude coordinates are \" . $coords . \"');\\\" shape='poly' coords='\" . $newcoords . \"'&gt;&lt;\/area&gt;\\n\";<br \/>\n  \/\/echo \"&lt;area type='poly' coords='\" . $newcoords . \"'&gt;&lt;\/area&gt;\\n\";<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; in our image map area elements PHP creation code above.  As you can see, extra &#8220;intelligence&#8221;, moving forward, is contained in area element <a target=_blank href='https:\/\/www.w3schools.com\/tags\/att_global_data.asp' title='Global data attributes information from W3schools'>global data attributes<\/a>.<\/p>\n<p>Which leaves us with why any of this helps functionality within <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php--GETME\" title=\"countries.php\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php--GETME\" title=\"countries.php\">countries.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>?<\/p>\n<ul>\n<li>Geo Chart can zoom into a country view &#8230;<\/li>\n<li>Geo Chart can involve emoji (&#127968; &amp;127968;) or image (SVG) circle based symbology for the &#8220;User Clicked Place&#8221; and nearby TimeZone places respectively &#8230;<\/li>\n<li>all these symbols can be clicked to open popup windows containing TimeZone Place <a target=_blank title='Wikipedia ... thanks' href='http:\/\/wikipedia.org'>Wikipedia<\/a> webpages of relevance &#8230;<\/li>\n<li>an emoji national flag (eg. Zambia &#8220;ZA&#8221; could be used to derive &amp;#127487;&amp;#127462; &#127487;&#127462; flag emoji) derived from those ISO-2 character codes can supplement the GeoJson (more ISO-3 character based) names presented in the underlying data, in the Geo Chart title &#8230;<\/li>\n<li>contextualizing the accompanying Map Chart &#8230; and &#8230;<\/li>\n<li>vice versa regarding hovering over symbology (which works on Map Chart, but not Geo Chart) &#8230;<\/li>\n<li>within the Map Chart iframe a &#8220;Geo&#8221; link can glean a &#8220;zoomed out&#8221; world Geo Chart view of your TimeZone places<\/li>\n<\/ul>\n<p>And feel free to (re-)try <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php---GETME\" title=\"regions.php\">our tweaked &#8220;to make thinner the coastline linework&#8221;<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php---GETME\" title=\"regions.php\">regions.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\">GeoJson PHP web application<\/a> in a new window, or you can <a href='#regionsif'>also try below<\/a>.<\/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\/geojson-world-countries-geo_chart-tutorial\/'>GeoJson World Countries Geo Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwct'>Previous relevant <a target=_blank title='GeoJson World Countries Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-tutorial\/'>GeoJson World Countries Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_ontop.jpg\" title=\"GeoJson World Countries Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries Tutorial<\/p><\/div>\n<p>Know your GeoJson!  Yes, pretty obviously, any two GeoJson datasets might display the same in that &#8220;map plotting&#8221; sense, but one might have different and\/or more &#8220;intelligence&#8221; than the other.  Often, an XML has more &#8220;intelligence&#8221; than equivalent HTML (barring the use of global data attributes, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg'>that is<\/a>), as today&#8217;s <strike>Corolla<\/strike>corollary.<\/p>\n<p>And so, moving on from yesterday&#8217;s <a title='GeoJson World Coastline TimeZone Tutorial' href='#gjwctzt'>GeoJson World Coastline TimeZone Tutorial<\/a>, today, we present a new GeoJson <a target=_blank href='https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_50m_admin_0_scale_rank.geojson'>admin 0 countries we download, and upload as &#8220;countries.geojson&#8221;<\/a> data set, again via the excellent <a target=_blank title='http:\/\/geojson.xyz\/' href='HTTP:\/\/geojson.xyz\/'>HTTP:\/\/geojson.xyz\/<\/a> repository, thanks.<\/p>\n<p>From it, we do get a <font color=blue>different JSON additional &#8220;intelligence&#8221;<\/font> &#8230;<\/p>\n<p><code><br \/>\n{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\"<font color=blue>,\"properties\":{\"scalerank\":1,\"labelrank\":1,\"sr_sov_a3\":\"ZWE\",\"sr_adm0_a3\":\"ZWE\",\"sr_gu_a3\":\"ZWE\",\"sr_su_a3\":\"ZWE\",\"sr_subunit\":\"Zimbabwe\",\"featureclass\":\"Admin-0 scale ranks\"}<\/font>,\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[31.287890625000017,-22.40205078125001],[31.197265625,-22.34492187500001],[31.07343750000001,-22.30781250000001],[30.916113281250006,-22.29072265625001],[30.71162109375001,-22.2978515625],[30.46015625000001,-22.32900390625001],[30.1904296875,-22.291113281250006],[29.90234375,-22.184179687500006],[29.6630859375,-22.146289062500003],[29.37744140625,-22.19277343750001],[29.36484375,-22.193945312500006],[29.315234375000017,-22.15771484375],[29.237207031250023,-22.07949218750001],[29.106835937500023,-22.065722656250003],[29.07148437500001,-22.047460937500006],[29.042382812500023,-22.018359375],[29.023339843750023,-21.98125],[29.01582031250001,-21.93994140625],[29.03730468750001,-21.811328125],[29.02558593750001,-21.796875],[28.99072265625,-21.78144531250001],[28.919335937500023,-21.766015625],[28.74775390625001,-21.707617187500006],[28.532031250000017,-21.65126953125001],[28.181640625,-21.58935546875],[28.04560546875001,-21.573046875],[28.014062500000023,-21.55419921875],[27.974609375,-21.50673828125001],[27.90742187500001,-21.35908203125001],[27.844140625000023,-21.261523437500003],[27.693457031250006,-21.11103515625001],[27.66943359375,-21.064257812500003],[27.67695312500001,-20.94482421875],[27.688085937500006,-20.84833984375001],[27.70429687500001,-20.76640625],[27.69697265625001,-20.689746093750003],[27.69482421875,-20.59453125],[27.699609375000023,-20.53066406250001],[27.679296875,-20.503027343750006],[27.624609375,-20.48359375000001],[27.46894531250001,-20.47480468750001],[27.28076171875,-20.47871093750001],[27.27460937500001,-20.3818359375],[27.256738281250023,-20.23203125],[27.221484375000017,-20.145800781250003],[27.17822265625,-20.10097656250001],[27.091796875,-20.05419921875],[26.91669921875001,-19.99013671875001],[26.67822265625,-19.89277343750001],[26.474609375,-19.748632812500006],[26.241015625000017,-19.5693359375],[26.168066406250006,-19.53828125000001],[26.081933593750023,-19.369921875],[25.95068359375,-19.08173828125001],[25.95917968750001,-18.985644531250003],[25.939355468750023,-18.93867187500001],[25.811914062500023,-18.79707031250001],[25.78369140625,-18.72353515625001],[25.76123046875,-18.64921875],[25.55830078125001,-18.441796875],[25.4892578125,-18.35126953125001],[25.43671875000001,-18.234960937500006],[25.384375,-18.14199218750001],[25.340234375000023,-18.1044921875],[25.28242187500001,-18.04121093750001],[25.242285156250006,-17.969042968750003],[25.224023437500023,-17.91523437500001],[25.239062500000017,-17.843066406250003],[25.2587890625,-17.793554687500006],[25.451757812500006,-17.84511718750001],[25.55712890625,-17.84951171875001],[25.6396484375,-17.82412109375001],[25.741601562500023,-17.858203125],[25.86328125,-17.951953125],[25.995898437500017,-17.969824218750006],[26.139550781250023,-17.91171875],[26.333398437500023,-17.929296875],[26.577539062500023,-18.022558593750006],[26.779882812500006,-18.04150390625],[27.020800781250017,-17.95839843750001],[27.235742187500023,-17.728320312500003],[27.437890625000023,-17.51191406250001],[27.63671875,-17.262109375],[27.75654296875001,-17.060351562500003],[27.932226562500006,-16.89619140625001],[28.16376953125001,-16.76972656250001],[28.399804687500023,-16.66279296875001],[28.760644531250023,-16.53193359375001],[28.760546875000017,-16.53212890625001],[28.83271484375001,-16.424121093750003],[28.856738281250017,-16.30615234375],[28.856738281250017,-16.14228515625001],[28.875585937500006,-16.0361328125],[28.9130859375,-15.98779296875],[28.973046875000023,-15.950097656250009],[29.050585937500017,-15.901171875],[29.287890625000017,-15.776464843750006],[29.4873046875,-15.69677734375],[29.729589843750006,-15.644628906250006],[29.994921875000017,-15.64404296875],[30.25068359375001,-15.643457031250009],[30.39609375,-15.64306640625],[30.39814453125001,-15.80078125],[30.409375,-15.978222656250011],[30.437792968750017,-15.995312500000011],[30.630175781250017,-15.999218750000011],[30.938769531250017,-16.01171875],[31.236230468750023,-16.02363281250001],[31.426171875000023,-16.15234375],[31.48984375,-16.1796875],[31.687597656250006,-16.214160156250003],[31.939843750000023,-16.428808593750006],[32.243261718750006,-16.44873046875],[32.45195312500002,-16.515722656250006],[32.635839843750006,-16.589453125],[32.741796875,-16.67763671875001],[32.81025390625001,-16.69765625],[32.902929687500006,-16.704199218750006],[32.94804687500002,-16.71230468750001],[32.93789062500002,-16.775976562500006],[32.87626953125002,-16.88359375],[32.884375,-17.03779296875001],[32.969335937500006,-17.2515625],[32.98076171875002,-17.4375],[32.9546875,-17.765429687500003],[32.95556640625,-18.08291015625001],[32.96464843750002,-18.1962890625],[32.978515625,-18.271484375],[32.99638671875002,-18.312597656250006],[32.99306640625002,-18.35957031250001],[32.942480468750006,-18.49267578125],[32.90166015625002,-18.632910156250006],[32.90029296875002,-18.6890625],[32.88457031250002,-18.728515625],[32.8544921875,-18.763671875],[32.72197265625002,-18.828417968750003],[32.69921875,-18.868457031250003],[32.69970703125,-18.94091796875],[32.71650390625001,-19.00185546875001],[32.766210937500006,-19.02431640625001],[32.826171875,-19.05878906250001],[32.84980468750001,-19.10439453125001],[32.85,-19.152441406250006],[32.83095703125002,-19.24140625000001],[32.77763671875002,-19.388769531250006],[32.83076171875001,-19.558203125],[32.89042968750002,-19.668066406250006],[32.97265625,-19.79541015625],[33.00673828125002,-19.873828125],[33.0048828125,-19.93017578125],[32.992773437500006,-19.98486328125],[32.86962890625,-20.2171875],[32.780859375,-20.36152343750001],[32.67255859375001,-20.51611328125],[32.529296875,-20.613085937500003],[32.49238281250001,-20.659765625],[32.477636718750006,-20.712988281250006],[32.48281250000002,-20.82890625],[32.476171875,-20.95009765625001],[32.353613281250006,-21.136523437500003],[32.429785156250006,-21.29707031250001],[32.41240234375002,-21.311816406250003],[32.37109375,-21.33486328125001],[32.19472656250002,-21.515429687500003],[32.01630859375001,-21.698046875],[31.88593750000001,-21.83154296875],[31.737695312500023,-21.9833984375],[31.57148437500001,-22.15351562500001],[31.429492187500017,-22.298828125],[31.287890625000017,-22.40205078125001]]]}}<br \/>\n<\/code><\/p>\n<p> &#8230; and &#8220;mapping look&#8221; because country borders are added in, and some JSON attributes we can call on to allow for &#8230;<\/p>\n<ul>\n<li>the similar  <a 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.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\">Google Chart<\/a> <a title=\"Google Chart Map Chart information from Google\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map\" target=\"_blank\">Map Chart<\/a> maps introduced yesterday into the user interaction mix &#8230; as well as &#8230;<\/li>\n<li><a target=_blank title='Wikipedia ... thanks' href='http:\/\/wikipedia.org'>Wikipedia<\/a>, thanks, webpage lookup possibilities calling on those new GeoJson property attributes presented within the dataset above<\/li>\n<\/ul>\n<p>We enable this, as we just add in some Javascript popup window type equals &#8220;prompt&#8221; to the existant &#8220;confirm&#8221; and &#8220;alert&#8221; logic of yesterday.<\/p>\n<p>Feel free to try <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php-GETME\" title=\"countries.php\">the how we got there<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php-GETME\" title=\"countries.php\">regions.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"GeoJson PHP web application\">GeoJson PHP World Countries web application<\/a> in a new window, or below &#8230;<\/p>\n<div style='width:800px;height:700px;-webkit-overflow-scrolling:touch;overflow:auto;'>\n<iframe id=countriesif style='width:100%;height:600px;' src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><\/iframe>\n<\/div>\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\/geojson-world-countries-tutorial\/'>GeoJson World Countries Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwctzt'>Previous relevant <a target=_blank title='GeoJson World Coastline TimeZone Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-timezone-tutorial\/'>GeoJson World Coastline TimeZone Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Coastline TimeZone Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_tz.jpg\" title=\"GeoJson World Coastline TimeZone Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Coastline TimeZone Tutorial<\/p><\/div>\n<p>Luckily for programmers all over, the organization of TimeZones has had an International flavour in its development and maintenance.  As such, given the &#8220;purely coastline&#8221; GeoJson data involved in our fledgling PHP web application of yesterday&#8217;s <a title='GeoJson World Coastline Primer Tutorial' href='#gjwcpt'>GeoJson World Coastline Primer Tutorial<\/a> a useful arrangement for improvement involves &#8230;<\/p>\n<ul>\n<li>document.body onclick event co-ordinates &#8230; able to be converted to &#8230;<\/li>\n<li>longitude, latitude <font size=1>(easily, only because of our simplistic map projection, of course)<\/font> &#8230; onfed to &#8230;<\/li>\n<li>our inhouse <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\">&#8220;TimeZone Places&#8221; web application<\/a> PHP helper<\/li>\n<\/ul>\n<p> &#8230; can have us helping out your curious web &#8220;clicking&#8221; user with the 3 nearest TimeZone places, as a reference as to where they are &#8220;clicking&#8221; in the world.<\/p>\n<p>Feel free to try <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php-GETME\" title=\"regions.php\">our improved<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php-GETME\" title=\"regions.php\">regions.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\">GeoJson PHP web application<\/a> in a new window, or below &#8230;<\/p>\n<div style='width:800px;height:700px;-webkit-overflow-scrolling:touch;overflow:auto;'>\n<iframe id=regionsif style='width:100%;height:600px;' src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\"><\/iframe>\n<\/div>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Our efforts in making <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php--GETME\" title=\"regions.php\">our new tweaked<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php--GETME\" title=\"regions.php\">regions.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\">GeoJson PHP web application<\/a> more mobile platform user friendly reminds us about a salutary issue regarding touch gestures &#8230;<\/a><\/p>\n<ul>\n<li>in a discrete click methodology of interest, you could adopt a non-mobile &#8220;onmousedown&#8221; logic set that does not get interfered with by a mobile &#8220;ontouchdown&#8221; logic set (perhaps leaving &#8220;onclick&#8221; event, which both non-mobile and mobile both recognise, for another event logic role) &#8230; and &#8230;<\/li>\n<li>neither will interrupt the mobile gestures associated with swiping and pinching, which refer to the events &#8220;ontouchstart&#8221; and &#8220;ontouchend&#8221; at either end of their lifespan<\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-geojson-world-coastline-primer-tutorial\/'>New GeoJson World Coastline Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcpt'>Previous relevant <a target=_blank title='GeoJson World Coastline Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-primer-tutorial\/'>GeoJson World Coastline 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\/HTMLCSS\/regions.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Coastline Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geojson_coastline.jpg\" title=\"GeoJson World Coastline Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Coastline Primer Tutorial<\/p><\/div>\n<p>We&#8217;re keen to further explore the possibilities of <a target=_blank title='GeoJson information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/GeoJSON'>GeoJson<\/a> public data sets, further to yesterday&#8217;s <a target=_blank title='Swift Playgrounds on macOS Map Emoji Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/swift-playgrounds-on-macos-map-emoji-tutorial'>Swift Playgrounds on macOS Map Emoji Tutorial<\/a>.<\/p>\n<p>And then we remembered some of the methodologies we used with <a target=_blank title='Responsive Web Design Landing Page Image Map Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-image-map-tutorial\/'>Responsive Web Design Landing Page Image Map Tutorial<\/a>, talking about <a target=_blank title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>image maps<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-image-map-tutorial\/'><p>\nAnd so, we arrive at a long planned for tilt at Image Map functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation to help us out \u2026 but not today?! Why not?  We have a funny set of needs, they being \u2026<br \/>\n<\/p>\n<ul>\n<li>our Image Map\u2019s image will have a variable set of width x height dimensions \u2026<\/li>\n<li>our Image Map\u2019s image will be transparent<\/li>\n<li>our Image Map needs to have a hole left aside inside it where the functionality that originally existed (and pointed to WordPress Blog content like you are reading), is still working<\/li>\n<\/blockquote>\n<p> &#8230; the first two ideas of which, along with &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element where the &#8230;<\/li>\n<li>GeoJson coordinates &#8230; thanks to <a target=_blank title=https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_110m_coastline.geojson href='https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_110m_coastline.geojson'>https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_110m_coastline.geojson<\/a> via <a target=_blank title='http:\/\/geojson.xyz\/' href='HTTP:\/\/geojson.xyz\/'>HTTP:\/\/geojson.xyz\/<\/a> &#8230;<\/li>\n<li>will be plotted &#8230; but the canvas element &#8230;<\/li>\n<li>has a <a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a> set below the image and image map above &#8230; meaning &#8230;<\/li>\n<li>we can add some region specific coding into the &#8230;<\/li>\n<li>image map <a target=_blank title='HTML area element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_area.asp'>area<\/a> element (shape=poly) onclick logics<\/li>\n<\/ul>\n<p> &#8230; in our &#8220;early days&#8221; &#8220;proof of concept&#8221; <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php_GETME\" title=\"regions.php\">regions.php<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\">GeoJson PHP web application<\/a>.<\/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='#d57945' onclick='var dv=document.getElementById(\"d57945\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geojson\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57945' 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='#d57962' onclick='var dv=document.getElementById(\"d57962\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/integration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57962' 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='#d57970' onclick='var dv=document.getElementById(\"d57970\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/countries\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57970' 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='#d57985' onclick='var dv=document.getElementById(\"d57985\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geo-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57985' 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='#d58002' onclick='var dv=document.getElementById(\"d58002\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58002' 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='#d58015' onclick='var dv=document.getElementById(\"d58015\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58015' 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='#d58021' onclick='var dv=document.getElementById(\"d58021\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58021' 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='#d58027' onclick='var dv=document.getElementById(\"d58027\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/zoom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58027' 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='#d58034' onclick='var dv=document.getElementById(\"d58034\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-directions\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58034' 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='#d58049' onclick='var dv=document.getElementById(\"d58049\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/airport\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58049' 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='#d64113' onclick='var dv=document.getElementById(\"d64113\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/position\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64113' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Because of the work at Curl HTTP Request Methods Tool Tutorial we can now &#8230; conditionally (depending on the existence of the Google Charts Image Charts API) &#8230; determine the positioning of Region Picker functionality elements &#8230; further to yesterday&#8217;s &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-charts-geo-chart-region-picker-conditional-positioning-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":[2824,72,2073,4813,4814,4815,3349,224,2335,2127,2365,342,4823,354,400,402,1619,519,2258,576,587,1577,652,745,2521,861,3987,876,894,4821,932,1988,997,1620,1069,1917,1107,3896,4143,4653,4640,1226,2005,1302,2996,1319,4351,1345,1350,1356,4822,2257,1431,1496],"class_list":["post-64113","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-absolute","tag-align","tag-alignment","tag-clash","tag-clashing","tag-clashing-text","tag-client-pre-emptive-iframe","tag-colour","tag-conditional","tag-cursor","tag-dimensions","tag-div","tag-document-body-scrolltop","tag-dom","tag-event","tag-events","tag-geo-chart","tag-google-charts","tag-height","tag-html","tag-iframe","tag-interface","tag-javascript","tag-map","tag-nest","tag-onclick","tag-oncontextmenu","tag-opacity","tag-overlay","tag-padding-top","tag-php","tag-position","tag-programming","tag-region","tag-right-click","tag-scroll","tag-scrolling","tag-scrollintoview","tag-scrolltop","tag-shade","tag-shading","tag-svg","tag-tool","tag-transparency","tag-transparent","tag-tutorial","tag-underlay","tag-url","tag-user-experience","tag-ux","tag-vertical-scroll","tag-width","tag-wikipedia","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64113"}],"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=64113"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64113\/revisions"}],"predecessor-version":[{"id":64147,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64113\/revisions\/64147"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=64113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=64113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=64113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}