{"id":64019,"date":"2024-06-27T03:55:12","date_gmt":"2024-06-26T17:55:12","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=64019"},"modified":"2024-06-26T18:03:29","modified_gmt":"2024-06-26T08:03:29","slug":"region-picker-geochart-region-wikipedia-representations-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geochart-region-wikipedia-representations-tutorial\/","title":{"rendered":"Region Picker GeoChart Region Wikipedia Representations Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker GeoChart Region Wikipedia Representations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rp_anew.jpg\" title=\"Region Picker GeoChart Region Wikipedia Representations Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker GeoChart Region Wikipedia Representations Tutorial<\/p><\/div>\n<p>We&#8217;re starting down the long and windy road, further to the recent <a title='Region Picker GeoJson Area of Interest Tutorial' href='#rpgjait'>Region Picker GeoJson Area of Interest Tutorial<\/a>, of providing &#8220;workaround Google Chart <a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> solutions to semi-cover the loss (because nothing will be quite as good, as far as we are concerned, alas) of Google Chart <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Chart<\/a> Map Chart&#8221; in our lives <font size=1>(please pass the tissues &#8230; <a target=_blank title='?' href='https:\/\/www.google.com\/search?q=blowing+nose+loudly+spelled+out&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=blowing+nose+loudly+spelled+out&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRigAdIBCTE4MzU5ajBqNKgCALACAQ&#038;sourceid=chrome&#038;ie=UTF-8'>fisst<\/a>)<\/font>.   In our case, the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a> intervention point (believe it or not) is our &#8230;<\/p>\n<ul>\n<li>WordPress Blog 404.php <font size=1>(missing webpage page)<\/font> logic we&#8217;ve tailored for all manner of image production purposes helping out &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-----------------------------GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-----------------------------GETME\">latest draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a> web application &#8230;<\/li>\n<\/ul>\n<p> &#8230; calling that 404.php helper.   And it&#8217;s within that changed 404.php &#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      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      file_put_contents('..\/HTMLCSS\/rvc_' . my_s_s_server_remote_addr() . '.html', '&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<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; logic we get the great help from <a target=_blank title='Wikipedia' href='\/\/www.wikipedia.org'>Wikipedia<\/a> to make up for &#8230;<\/p>\n<ul>\n<li>lack of boundary regional definition on a Google Chart Geo Chart marker map &#8230; with &#8230;<\/li>\n<li>Wikipedia&#8217;s representative region positioning, thanks, we can present as the &#8230;\n<ol>\n<li>region name &#8230; toggleable backwards and forwards to &#8230;<\/li>\n<li>region marker<\/li>\n<\/ol>\n<p> &#8230; on the Google Chart Geo Chart marker map now displayed to the user instead of what used to be a Google Chart Image Chart Map Chart regional boundary map &#8230; <font size=1>(please pass the tissues &#8230; <a target=_blank title='?' href='https:\/\/www.google.com\/search?q=blowing+nose+loudly+spelled+out&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=blowing+nose+loudly+spelled+out&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRigAdIBCTE4MzU5ajBqNKgCALACAQ&#038;sourceid=chrome&#038;ie=UTF-8'>fisst<\/a>)<\/font>.<\/li>\n<\/ul>\n<p>There is no doubt we&#8217;ll be tweaking away at all this, trying to improve the integrations for both user experience (including speed) and aesthetic means.  Please pack a sandwich (or 3) and a toothbrush &#8230; and toothpaste &#8230; and vegemite &#8230; and <a target=_blank title='?' href='https:\/\/www.google.com\/search?q=blowing+nose+loudly+spelled+out&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=blowing+nose+loudly+spelled+out&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRigAdIBCTE4MzU5ajBqNKgCALACAQ&#038;sourceid=chrome&#038;ie=UTF-8'>fisst, the tissues<\/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\/region-picker-geochart-region-wikipedia-representations-tutorial\/'>Region Picker GeoChart Region Wikipedia Representations Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpgjait'>Previous relevant <a target=_blank title='Region Picker GeoJson Area of Interest Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geojson-area-of-interest-tutorial\/'>Region Picker GeoJson Area of Interest Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html?isMobile=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker GeoJson Area of Interest Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/region_picker_clip_path_geojson.gif\" title=\"Region Picker GeoJson Area of Interest Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker GeoJson Area of Interest Tutorial<\/p><\/div>\n<p>Meanwhile, back in &#8220;Region Picker Land&#8221; where, if we&#8217;re not mistaken, the grapes are peculiarly sweet this season, and we needed their &#8220;fortification&#8221; to tackle today&#8217;s progress, that being &#8230;<\/p>\n<ul>\n<li>user has picked a country of interest and has gone &#8220;The Whole Shebang&#8221; resulting in those &#8230;<\/li>\n<li>tutti-frutti region links below the Image Chart (rightmost) button &#8230;<\/li>\n<li>one of which the user clicks\/touches &#8230; resulting in &#8230;<\/li>\n<li>presentation of inhouse menu prompt window &#8230; where &#8230;<\/li>\n<li>option &#8220;J&#8221; (for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.html\" title=\"GeoJson World Map\">GeoJson World Map<\/a> option) is presented (because a relevant latitude and longitude were found) &#8230; and &#8220;lo and behold&#8221; &#8230;<\/li>\n<li>user types in J &#8230;<\/li>\n<li>user does not click Cancel at the next prompt window &#8230; ready for it &#8230;<\/li>\n<li>as of today two new buttons appear &#8230;<br \/>\n<table>\n<tr>\n<th>Mobile<\/th>\n<th>Non-mobile<\/th>\n<tr>\n<tr>\n<td><button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); parent.setdefzoom(1); ' style=background-color:yellow; id=twoc onclick='event.stopPropagation(); parent.dotwoc();'>Circle of Interest via Next 2 Double Clicks<\/button>&nbsp;<button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation();  parent.setdefzoom(1); ' style=background-color:magenta; id=twoc onclick='event.stopPropagation(); parent.dotwor();'>Rectangle via 2 Double Clicks<\/button><\/td>\n<td><button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); parent.setdefzoom(1); ' style=background-color:yellow; id=twoc onclick='event.stopPropagation(); parent.dotwoc();'>Circle of Interest via Next 2 Right Clicks<\/button>&nbsp;<button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation();  parent.setdefzoom(1); ' style=background-color:magenta; id=twoc onclick='event.stopPropagation(); parent.dotwor();'>Rectangle via 2 Right Clicks<\/button><\/td>\n<tr>\n<\/table>\n<p> &#8230; to the right of the subheading &#8230; and while we&#8217;re there see how the innards &#8230;<\/p>\n<table>\n<tr>\n<th>Mobile<\/th>\n<th>Non-mobile<\/th>\n<tr>\n<tr>\n<td>\n&lt;button title=&#8217;One click uses hover 2x zoom afterwards &#8230; more for larger zoom &#8230; right click for no zoom&#8217; oncontextmenu=&#8217; event.stopPropagation(); parent.setdefzoom(1); &#8216; style=background-color:yellow; id=twoc onclick=&#8217;event.stopPropagation(); parent.dotwoc();&#8217;&gt;Circle of Interest via Next 2 Double Clicks&lt;\/button&gt;&nbsp;&lt;button title=&#8217;One click uses hover 2x zoom afterwards &#8230; more for larger zoom &#8230; right click for no zoom&#8217; oncontextmenu=&#8217; event.stopPropagation();  parent.setdefzoom(1); &#8216; style=background-color:magenta; id=twoc onclick=&#8217;event.stopPropagation(); parent.dotwor();&#8217;&gt;Rectangle via 2 Double Clicks&lt;\/button&gt;\n<\/td>\n<td>\n&lt;button title=&#8217;One click uses hover 2x zoom afterwards &#8230; more for larger zoom &#8230; right click for no zoom&#8217; oncontextmenu=&#8217; event.stopPropagation(); parent.setdefzoom(1); &#8216; style=background-color:yellow; id=twoc onclick=&#8217;event.stopPropagation(); parent.dotwoc();&#8217;&gt;Circle of Interest via Next 2 Right Clicks&lt;\/button&gt;&nbsp;&lt;button title=&#8217;One click uses hover 2x zoom afterwards &#8230; more for larger zoom &#8230; right click for no zoom&#8217; oncontextmenu=&#8217; event.stopPropagation();  parent.setdefzoom(1); &#8216; style=background-color:magenta; id=twoc onclick=&#8217;event.stopPropagation(); parent.dotwor();&#8217;&gt;Rectangle via 2 Right Clicks&lt;\/button&gt;\n<\/td>\n<tr>\n<\/table>\n<p> &#8230; are very <a target=_blank title='OOP information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming'>OOP<\/a> by nature <font size=1>(as is all DOM work in Javascript, when you think about it)<\/font>, allowing us to remain with the iframe initial content supervisor unchanged in code, and just referring back to the parent&#8217;s Javascript for anything new either via &#8230;<\/p>\n<ol>\n<li>means of the iframe onload event<\/li>\n<li>means of referring back to parent operations via references like &#8230;<br \/>\n<code><br \/>\n   parent.setdefzoom(1);  \/\/ which is setting the var<font size=1>iable<\/font> \"defzoom\", back in the parent, to 1<br \/>\n<\/code><br \/>\n &#8230; in this new Javascript &#8230;<br \/>\n<code><br \/>\n  var oneoftwo=0, xinxy=[], yinxy=[], opis='1.0', ovnum=1, defzoom=2, nextv='hidden';<br \/>\n  <font color=blue>var zaconto=null;<\/font> \/\/ this is populated at the iframe element's onload event function<br \/>\n<br \/>\n  function getxynow(e) {<br \/>\n       e = e || window.event;<br \/>\n       e.preventDefault();<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       xinxy.push(eval(e.touches[0].pageX + document.body.scrollLeft * 0) * browserZoomLevel * 0);<br \/>\n       yinxy.push(eval(e.touches[0].pageY + document.body.scrollTop * 0) * browserZoomLevel * 0);<br \/>\n       } else {<br \/>\n       xinxy.push(eval(e.touches[0].clientX + document.body.scrollLeft * 0) * browserZoomLevel * 0);<br \/>\n       yinxy.push(eval(e.touches[0].clientY + document.body.scrollTop * 0) * browserZoomLevel * 0);<br \/>\n       }<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        xinxy.push(e.clientX + document.body.scrollLeft * 0);<br \/>\n        yinxy.push(e.clientY + document.body.scrollTop * 0);<br \/>\n       } else {<br \/>\n        xinxy.push(e.pageX + document.body.scrollLeft * 0);<br \/>\n        yinxy.push(e.pageY + document.body.scrollTop * 0);<br \/>\n       }<br \/>\n         if (1 == 3 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    alert('' + xinxy.length);<br \/>\n         }<br \/>\n       \/\/filloutform(e,0);<br \/>\n       \/\/yinxy[eval(-1 + yinxy.length)]=eval(-385 + eval('' + yinxy[eval(-1 + yinxy.length)]));<br \/>\n       if (eval('' + xinxy.length) == 2) {<br \/>\n          overlayit(0);<br \/>\n       }<br \/>\n  }<br \/>\n  <br \/>\n  function dotwor() {<br \/>\n     if (oneoftwo == 1) {<br \/>\n       defzoom++;<br \/>\n     } else {<br \/>\n       defzoom=2;<br \/>\n     }<br \/>\n     oneoftwo=1;<br \/>\n  }<br \/>\n  <br \/>\n  function dotwoc() {<br \/>\n  \/\/alert(45);<br \/>\n     if (oneoftwo == -1) {<br \/>\n       defzoom++;<br \/>\n     } else {<br \/>\n       defzoom=2;<br \/>\n     }<br \/>\n     oneoftwo=-1;<br \/>\n  }<br \/>\n  <br \/>\n  function alternatevisibility() {<br \/>\n     var igh=1;<br \/>\n     while (zaconto.getElementById('iciov' + igh)) {<br \/>\n       if (igh == 1 && zaconto.getElementById('iciov' + igh).outerHTML.indexOf('visibility:') == -1) {<br \/>\n         nextv='hidden';<br \/>\n       } else if (igh == 1 && zaconto.getElementById('iciov' + igh).outerHTML.split('visibility:')[1].split(';')[0].split('&gt;')[0].toLowerCase().indexOf('visible') != -1) {<br \/>\n         nextv='hidden';<br \/>\n       } else if (igh == 1) {<br \/>\n         nextv='visible';<br \/>\n       }<br \/>\n       zaconto.getElementById('iciov' + igh).style.visibility='' + nextv;<br \/>\n       igh++;<br \/>\n     }<br \/>\n  }<br \/>\n  <br \/>\n  function overlayit(ootis) {<br \/>\n     var prerest='', zb='';<br \/>\n     if (ootis == 0) {<br \/>\n     \/\/alert('here0');<br \/>\n       if (eval('' + xinxy.length) == 2) {<br \/>\n   \/\/alert('here1');<br \/>\n         if (ovnum == 1) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/69491728\/how-to-zoom-an-image-on-mouse-hover-using-css<br \/>\n              prerest=' .zoom-img { width: ' + zaconto.getElementById('myimg').width + 'px;  height: ' + zaconto.getElementById('myimg').height + 'px; overflow: hidden; }  .zoom-img:hover { transform: scale(2.0); } ';<br \/>\n         }<br \/>\n         if (defzoom != 2) {<br \/>\n           zb=' #iciov' + ovnum + ':hover { z-index:1789; transform: scale(' + defzoom + '.0); } ';<br \/>\n         }<br \/>\n     \/\/alert('here2');<br \/>\n         if (oneoftwo &lt; 0) { \/\/ circle<br \/>\n         if (1 == 3 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n         alert(1);<br \/>\n         }<br \/>\n            zaconto.getElementById('myimg').style.opacity='1.0';<br \/>\n         \/\/alert(11);<br \/>\n          <br \/>  zaconto.getElementById('imgmore').innerHTML+=zaconto.getElementById('myimg').outerHTML.replace(\/myimg\/g,'iciov' + ovnum).replace('56;','2365;background-color:transparent;width:360px;height:180px;').replace(\/\\\\\\\"\\\\ on\/g, '\\\" data-on').replace('&lt;img ','&lt;img class=zoom-img ').replace(' src=',' src=\/HTMLCSS\/HYP_50M_SR_W.jpg width=360 height=180 data-src=').replace(' usemap=', ' data-usemap=');<br \/>\n         \/\/alert(zaconto.getElementById('myimg').outerHTML.replace(\/myimg\/g,'iciov' + ovnum).replace('56;','365;background-color:transparent;width:360px;height:180px;').replace(\/\\\\\\\"\\\\ on\/g, '\\\" data-on').replace('&lt;img ','&lt;img class=zoom-img ').replace(' src=',' src=\/HTMLCSS\/HYP_50M_SR_W.jpg width=360 height=180 data-src='));<br \/>\n            opis='' + eval(-0.1 + eval('' + opis));<br \/>\n            zaconto.getElementById('myimg').style.opacity='' + opis;<br \/>\n         \/\/alert(1111);<br \/>\n            zaconto.getElementById('dvstyle').innerHTML+='&lt;style&gt; ' + prerest + zb + ' #iciov' + ovnum + ' { margin-top: -385px; -webkit-filter: brightness(110%); filter: brightness(110%); transform-origin: ' + xinxy[0] + 'px ' + yinxy[0] + 'px; clip-path: circle(' + Math.sqrt(eval(xinxy[0] - xinxy[1]) * eval(xinxy[0] - xinxy[1]) + eval(yinxy[0] - yinxy[1]) * eval(yinxy[0] - yinxy[1])) + 'px at ' + xinxy[0] + 'px ' + yinxy[0] + 'px);  } &lt;\/style&gt;';<br \/>\n         \/\/alert('&lt;style&gt; ' + prerest + zb + ' #iciov' + ovnum + ' { -webkit-filter: brightness(150%); filter: brightness(150%); transform-origin: ' + xinxy[0] + 'px ' + yinxy[0] + 'px; clip-path: circle(' + Math.sqrt(eval(xinxy[0] - xinxy[1]) * eval(xinxy[0] - xinxy[1]) + eval(yinxy[0] - yinxy[1]) * eval(yinxy[0] - yinxy[1])) + 'px at ' + xinxy[0] + 'px ' + yinxy[0] + 'px);  } &lt;\/style&gt;');<br \/>\n         \/\/alert(zaconto.getElementById('imgmore').innerHTML + zaconto.getElementById('dvstyle').innerHTML);<br \/>\n         } else {  \/\/ rectangle<br \/>\n            zaconto.getElementById('myimg').style.opacity='1.0';<br \/>\n            zaconto.getElementById('imgmore').innerHTML+=zaconto.getElementById('myimg').outerHTML.replace(\/myimg\/g,'iciov' + ovnum).replace('56;','2365;position:absolute;background-color:transparent;top:0px;left:0px;').replace(\/\\\\\\\"\\\\ on\/g, '\\\" data-on').replace('&lt;img ','&lt;img class=zoom-img ').replace(' src=',' src=\/HTMLCSS\/HYP_50M_SR_W.jpg width=360 height=180 data-src=').replace(' usemap=', ' data-usemap=');<br \/>\n            opis='' + eval(-0.1 + eval('' + opis));<br \/>\n            zaconto.getElementById('myimg').style.opacity='' + opis;<br \/>\n            zaconto.getElementById('dvstyle').innerHTML+='&lt;style&gt; ' + prerest + zb + ' #iciov' + ovnum + '  { margin-top: -385px; -webkit-filter: brightness(110%); filter: brightness(110%); transform-origin: ' + eval(eval(xinxy[0] + xinxy[1]) \/ 2) + 'px ' + eval(eval(yinxy[0] + yinxy[1]) \/ 2) + 'px;  clip-path: polygon(' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.max(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.max(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.max(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.max(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px' + ');  } &lt;\/style&gt;';<br \/>\n         }<br \/>\n         if (ovnum == 1) {  setInterval(alternatevisibility, 15000);  }<br \/>\n         ovnum++;<br \/>\n       }<br \/>\n       oneoftwo=ootis;<br \/>\n       defzoom=2;<br \/>\n       xinxy=[];<br \/>\n       yinxy=[];<br \/>\n     }<br \/>\n  }<br \/>\n <br \/>\n  function setdefzoom(inv) {<br \/>\n     defzoom=inv;<br \/>\n  }<br \/>\n <br \/>\n  function setoneoftwo(inv) {<br \/>\n     defzoomoneoftwo=inv;<br \/>\n  }<br \/>\n <br \/>\n  function getoneoftwo() {<br \/>\n     return oneoftwo;<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; realized, back in the iframe &#8230;<br \/>\n<code><br \/>\n&lt;iframe onload='if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { ifcheck(this); } else { nonmifcheck(this); }' name=ifcountries id=ifcountries style='border-top:5px solid transparent;border-left:5px solid transparent;display:none;width:100%;height:900px;z-index:987;margin:0 0 0 0;padding:0 0 0 0;' src=''&gt;&lt;\/iframe&gt;<br \/>\n<\/code><br \/>\n &#8230; onload (via &#8230;<br \/>\n<code><br \/>\n         document.getElementById('ifcountries').src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564);<br \/>\n<\/code><br \/>\n &#8230; type call) event function (non-mobile one semi-shown below) &#8230;<br \/>\n<code><br \/>\n  function nonmifcheck(ziois) { \/\/ non-mobile iframe onload event function<br \/>\n       var waszoom=1;<br \/>\n       var sparear=null, gsparear=null;<br \/>\n       var xif=-999, yif=-999, xxif=-999, yyif=-999;<br \/>\n       <font color=blue>zaconto = (ziois.contentWindow || ziois.contentDocument);<br \/>\n       if (zaconto.document) { zaconto = zaconto.document; }<\/font><br \/>\n\/\/ ...<br \/>\n\/\/ used later into the function, as well as in that new Javascript above, everywhere ...<br \/>\n\/\/<br \/>\n                 zaconto.getElementsByTagName('table')[0].style.top='385px';<br \/>\n                 zaconto.getElementsByTagName('table')[0].style.left='0px';<br \/>\n                 if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n                 zaconto.getElementsByTagName('h3')[0].style.marginTop='6px';<br \/>\n                 zaconto.getElementsByTagName('h3')[0].innerHTML+=\"&amp;nbsp;&lt;button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); parent.setdefzoom(1); ' style=background-color:yellow; id=twoc onclick='event.stopPropagation(); parent.dotwoc();'&gt;Circle of Interest via Next 2 Right Clicks&lt;\/button&gt;&amp;nbsp;&lt;button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation();  parent.setdefzoom(1); ' style=background-color:magenta; id=twoc onclick='event.stopPropagation(); parent.dotwor();'&gt;Rectangle via 2 Right Clicks&lt;\/button&gt;&lt;div id=imgmore&gt;&lt;\/div&gt;&lt;div id=dvstyle&gt;\";<br \/>\n                 zaconto.body.oncontextmenu=function(event){  if (parent.getoneoftwo() == 0) {  event=event;  } else if (Math.abs(parent.getoneoftwo()) == 1) { event.stopPropagation(); parent.getxynow(event); if (parent.getoneoftwo() &lt; 0) {  parent.setoneoftwo(eval(-1 + eval('' + parent.getoneoftwo())));  } else { parent.setoneoftwo(eval(1 + eval('' + parent.getoneoftwo()))); }  } else if (Math.abs(parent.getoneoftwo()) == 2) { event.stopPropagation();  parent.getxynow(event); if (1 == 3) { parent.overlayit(0); }  } };<br \/>\n                 } else {<br \/>\n                 zaconto.getElementsByTagName('h3')[0].innerHTML+=\"&amp;nbsp;&lt;button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); parent.setdefzoom(1); ' style=background-color:yellow; id=twoc onclick='event.stopPropagation(); parent.dotwoc();'&gt;Circle of Interest via Next 2 Double Clicks&lt;\/button&gt;&amp;nbsp;&lt;button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation();  parent.setdefzoom(1); ' style=background-color:magenta; id=twoc onclick='event.stopPropagation(); parent.dotwor();'&gt;Rectangle via 2 Double Clicks&lt;\/button&gt;&lt;div id=imgmore&gt;&lt;\/div&gt;&lt;div id=dvstyle&gt;\";<br \/>\n                 zaconto.body.ondblclick=function(event){  if (parent.getoneoftwo() == 0) {  event=event;  } else if (Math.abs(parent.getoneoftwo()) == 1) { event.stopPropagation(); parent.getxynow(event); if (parent.getoneoftwo() &lt; 0) {  parent.setoneoftwo(eval(-1 + eval('' + parent.getoneoftwo())));  } else { parent.setoneoftwo(eval(1 + eval('' + parent.getoneoftwo()))); }  } else if (Math.abs(parent.getoneoftwo()) == 2) { event.stopPropagation();  parent.getxynow(event); if (1 == 3) { parent.overlayit(0); }  } };<br \/>\n                 }<br \/>\n  \/\/ ...<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; and yet, elements are added to the &#8220;iframe child&#8221; <font size=1>(rather than to the parent document.body element)<\/font> here &#8230; believe me &#8230; this, and using the Mercator Projection means of moving between &#8220;pixel land&#8221; and &#8220;latitude and longitude land&#8221;, is better!\n<\/li>\n<\/ol>\n<li>which have the on hover blurb &#8230;<br \/>\n<blockquote><p>\nOne click uses hover 2x zoom afterwards &#8230; more for larger zoom &#8230; right click for no zoom\n<\/p><\/blockquote>\n<p> &#8230; which is just to say that the more clicks in a row of the button, the more resultant zoom goes into an onmouseover &#8220;hover&#8221; over that intermittently shown &#8220;circle&#8221; or &#8220;polygon&#8221; rectangle <a target=_blank title='CSS property clip-path' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_clip-path.php'><i>clip-path<\/i><\/a> affected image (ie. img) overlay element placed according to the 2x set of user right click sets (for non-mobile) or double click sets (for mobile) the user subsequently makes on the GeoJson world map above these new buttons\n<\/li>\n<\/li>\n<\/ul>\n<p> &#8230; that, if actioned by the user, ends up with an &#8220;augmented reality&#8221; <font size=1>(in what we like to think of as a <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=tYkZNPBxZyk'>Who Framed Roger Rabbit<\/a><sub>esque<\/sub> (or is that a &#8220;reverse <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=tYkZNPBx'>Who Framed Roger Rabbit<\/a><sub>esque<\/sub>&#8220;) approach which happens, at least for us, when you overlay some more realistic media over a representation of that &#8220;realia&#8221; with the same scale)<\/font> if you&#8217;ll pardon any &#8220;jargon clash&#8221; here?!<\/p>\n<p>As such, onto the recent <a title='Region Picker Area of Interest Tutorial' href='#rpait'>Region Picker Area of Interest Tutorial<\/a> we have <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html----------------------------GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html----------------------------GETME\">latest draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a> for you to try all this out.<\/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\/region-picker-geojson-area-of-interest-tutorial\/'>Region Picker GeoJson Area of Interest Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpait'>Previous relevant <a target=_blank title='Region Picker Area of Interest Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-area-of-interest-tutorial\/'>Region Picker Area of Interest Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html?isMobile=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker Area of Interest Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart_clip_path.gif\" title=\"Region Picker Area of Interest Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Area of Interest Tutorial<\/p><\/div>\n<p>Recently we stumbled across the intriguing CSS property <a target=_blank title='CSS property clip-path' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_clip-path.php'><i>clip-path<\/i><\/a> and set ourselves a one day thinking time to see whether we could make use of this CSS feature.<\/p>\n<p>And then it occurred to us with our recent Region Picker, as talked about at yesterday&#8217;s <a title='Region Picker Google Translate Tutorial' href='#rpgtt'>Region Picker Google Translate Tutorial<\/a>, with that &#8230;<\/p>\n<ul>\n<li>Image Chart Map Chart interfacer &#8230; call &#8230; off &#8230;<\/li>\n<li>ondblclick event (ie. double click) of right hand Image Chart button<\/li>\n<\/ul>\n<p> &#8230; scenario, regular readers may remember beginning as a concept back at the posting of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-double-click-tutorial\/' title='Region Picker Double Click Tutorial'>Region Picker Double Click Tutorial<\/a>, how &#8230;<\/p>\n<ul>\n<li>an intermittent <font size=1>(<font color=blue>because the highlighting used can meddle<\/font> with the original colour coding reasoning)<\/font> highlighting &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n&lt;body onkeydown=\\\"return okd(event);\\\" style=\\\"width:600px;height:600px;\\\" onclick=\\\" <font color=blue>if (oneoftwo == 0) {<\/font>  document.getElementById('lastcol').value='';  isclear=false; document.getElementById('imode').value='click'; filloutform(event,1); <font color=blue>} else if (Math.abs(oneoftwo) == 1) { getxynow(event); if (oneoftwo &lt; 0) { oneoftwo--; } else { oneoftwo++; }  } else if (Math.abs(oneoftwo) == 2) {  getxynow(event); overlayit(0);  }<\/font>\\\" onload=\\\" setTimeout(thisonl,2000); if (window.opener) {  document.getElementById('premyp').innerHTML=lfdfn(window.opener.document.getElementById('myp').outerHTML);  document.getElementById('patparent').value=window.opener.document.getElementById('myp').innerHTML; document.getElementById('mopatparent').value=window.opener.document.getElementById('myp').innerHTML; } else if (window.parent) {  document.getElementById('premyp').innerHTML=lfdfn(parent.document.getElementById('myp').outerHTML);  document.getElementById('patparent').value=parent.document.getElementById('myp').innerHTML; document.getElementById('mopatparent').value=parent.document.getElementById('myp').innerHTML; }  \\\"&gt;<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; and &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n&lt;button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation(); defzoom=1; ' style=background-color:yellow; id=twoc onclick='event.stopPropagation(); dotwoc();'&gt;Circle of Interest via Next 2 Clicks&lt;\/button&gt;&lt;br&gt;&lt;br&gt;&nbsp;&lt;button title='One click uses hover 2x zoom afterwards ... more for larger zoom ... right click for no zoom' oncontextmenu=' event.stopPropagation();  defzoom=1; ' style=background-color:magenta; id=twoc onclick='event.stopPropagation(); dotwor();'&gt;Rectangle via 2 Clicks&lt;\/button&gt;<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; of Image Chart Map Chart image (ie. img) element &#8220;area of interest&#8221; <font size=1>(for which we&#8217;ve coded for &#8220;circle&#8221; and &#8220;polygon&#8221; rectangle, so far)<\/font> &#8230;<\/li>\n<li>coupled with &#8220;zoom on hover&#8221; &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var oneoftwo=0, xinxy=[], yinxy=[], opis='1.0', ovnum=1, defzoom=2;<br \/>\n <br \/>\n  function getxynow(e) {<br \/>\n       e = e || window.event;<br \/>\n       e.preventDefault();<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       xinxy.push(eval(e.touches[0].pageX + document.body.scrollLeft) * browserZoomLevel);<br \/>\n       yinxy.push(eval(e.touches[0].pageY + document.body.scrollTop) * browserZoomLevel);<br \/>\n       } else {<br \/>\n       xinxy.push(eval(e.touches[0].clientX + document.body.scrollLeft) * browserZoomLevel);<br \/>\n       yinxy.push(eval(e.touches[0].clientY + document.body.scrollTop) * browserZoomLevel);<br \/>\n       }<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        xinxy.push(e.clientX + document.body.scrollLeft);<br \/>\n        yinxy.push(e.clientY + document.body.scrollTop);<br \/>\n       } else {<br \/>\n        xinxy.push(e.pageX + document.body.scrollLeft);<br \/>\n        yinxy.push(e.pageY + document.body.scrollTop);<br \/>\n       }<br \/>\n    \/\/alert('' + xinxy.length);<br \/>\n       filloutform(e,0);<br \/>\n  }<br \/>\n  <br \/>\n  function dotwor() {<br \/>\n     if (oneoftwo == 1) {<br \/>\n       defzoom++;<br \/>\n     } else {<br \/>\n       defzoom=2;<br \/>\n     }<br \/>\n     oneoftwo=1;<br \/>\n  }<br \/>\n  <br \/>\n  function dotwoc() {<br \/>\n     if (oneoftwo == -1) {<br \/>\n       defzoom++;<br \/>\n     } else {<br \/>\n       defzoom=2;<br \/>\n     }<br \/>\n     oneoftwo=-1;<br \/>\n  }<br \/>\n  <br \/>\n  function alternatevisibility() {<br \/>\n     var igh=1;<br \/>\n     while (document.getElementById('iciov' + igh)) {<br \/>\n       if (igh == 1 && document.getElementById('iciov' + igh).outerHTML.indexOf('visibility:') == -1) {<br \/>\n         nextv='hidden';<br \/>\n       } else if (igh == 1 && document.getElementById('iciov' + igh).outerHTML.split('visibility:')[1].split(';')[0].split('&gt;')[0].toLowerCase().indexOf('visible') != -1) {<br \/>\n         nextv='hidden';<br \/>\n       } else if (igh == 1) {<br \/>\n         nextv='visible';<br \/>\n       }<br \/>\n       document.getElementById('iciov' + igh).style.visibility='' + nextv;<br \/>\n       igh++;<br \/>\n     }<br \/>\n  }<br \/>\n  <br \/>\n  function overlayit(ootis) {<br \/>\n     var prerest='', zb='';<br \/>\n     if (ootis == 0) {<br \/>\n       if (eval('' + xinxy.length) == 2) {<br \/>\n         if (ovnum == 1) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/69491728\/how-to-zoom-an-image-on-mouse-hover-using-css<br \/>\n              prerest=' .zoom-img { width: ' + document.getElementById('ici').width + 'px;  height: ' + document.getElementById('ici').height + 'px; overflow: hidden; }  .zoom-img:hover { transform: scale(2.0); } ';<br \/>\n         }<br \/>\n         if (defzoom != 2) {<br \/>\n           zb=' #iciov' + ovnum + ':hover { transform: scale(' + defzoom + '.0); } ';<br \/>\n         }<br \/>\n         if (oneoftwo &lt; 0) { \/\/ circle<br \/>\n            document.getElementById('ici').style.opacity='1.0';<br \/>\n            document.getElementById('imgmore').innerHTML+=document.getElementById('ici').outerHTML.replace('ici','iciov' + ovnum).replace('25;','35;position:absolute;background-color:transparent;top:0px;left:0px;').replace(\/\\\\\\\"\\\\ on\/g, '\\\" data-on').replace('&lt;img ','&lt;img class=zoom-img ');<br \/>\n            opis='' + eval(-0.1 + eval('' + opis));<br \/>\n            document.getElementById('ici').style.opacity='' + opis;<br \/>\n            document.getElementById('dvstyle').innerHTML+='&lt;style&gt; ' + prerest + zb + ' #iciov' + ovnum + ' { -webkit-filter: brightness(150%); filter: brightness(150%); transform-origin: ' + xinxy[0] + 'px ' + yinxy[0] + 'px; clip-path: circle(' + Math.sqrt(eval(xinxy[0] - xinxy[1]) * eval(xinxy[0] - xinxy[1]) + eval(yinxy[0] - yinxy[1]) * eval(yinxy[0] - yinxy[1])) + 'px at ' + xinxy[0] + 'px ' + yinxy[0] + 'px);  } &lt;\/style&gt;';<br \/>\n         } else {  \/\/ rectangle<br \/>\n            document.getElementById('ici').style.opacity='1.0';<br \/>\n            document.getElementById('imgmore').innerHTML+=document.getElementById('ici').outerHTML.replace('ici','iciov' + ovnum).replace('25;','35;position:absolute;background-color:transparent;top:0px;left:0px;').replace(\/\\\\\\\"\\\\ on\/g, '\\\" data-on').replace('&lt;img ','&lt;img class=zoom-img ');<br \/>\n            opis='' + eval(-0.1 + eval('' + opis));<br \/>\n            document.getElementById('ici').style.opacity='' + opis;<br \/>\n            document.getElementById('dvstyle').innerHTML+='&lt;style&gt; ' + prerest + zb + ' #iciov' + ovnum + '  { -webkit-filter: brightness(150%); filter: brightness(150%); transform-origin: ' + eval(eval(xinxy[0] + xinxy[1]) \/ 2) + 'px ' + eval(eval(yinxy[0] + yinxy[1]) \/ 2) + 'px;  clip-path: polygon(' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.max(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.max(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.max(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.max(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px,' + Math.min(eval(xinxy[0]),eval(xinxy[1])) + 'px ' + Math.min(eval(yinxy[0]),eval(yinxy[1])) + 'px' + ');  } &lt;\/style&gt;';<br \/>\n         }<br \/>\n         if (ovnum == 1) {  setInterval(alternatevisibility, 15000);  }<br \/>\n         ovnum++;<br \/>\n       }<br \/>\n       oneoftwo=ootis;<br \/>\n       defzoom=2;<br \/>\n       xinxy=[];<br \/>\n       yinxy=[];<br \/>\n     }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<\/ul>\n<p> &#8230; could be a useful value adding part to <a target=_blank 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 href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php---------------------GETME\">image_chart.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php\">Google Chart Image Chart Map Chart interfacer<\/a> used by <a target=_blank 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 href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html---------------------------GETME\">latest draft<\/a> <a target=_blank 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\/region-picker-area-of-interest-tutorial\/'>Region Picker Area of Interest Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpgtt'>Previous relevant <a target=_blank title='Region Picker Google Translate Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-google-translate-tutorial\/'>Region Picker Google Translate Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html?isMobile=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker Google Translate Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries_gt.jpg\" title=\"Region Picker Google Translate Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Google Translate Tutorial<\/p><\/div>\n<p>We wanted to improve the internationalization credentials of our Region Picker web application, of recent times, adding to the progress of yesterday&#8217;s <a title='Region Picker Revealed Iframes Tutorial' href='#rprit'>Region Picker Revealed Iframes Tutorial<\/a>.  As such, we turn to another great Google product called <a target=_blank title='Google Translate' href='http:\/\/translate.google.com'>Google Translate<\/a> to translate &#8230;<\/p>\n<ul>\n<li>heading text and some button text &#8230; and &#8230;<\/li>\n<li>country names<\/li>\n<\/ul>\n<p> &#8230; this Region Picker being a suitable candidate for a &#8220;whole of webpage&#8221; Google Translation for a URL such as (this Dutch translation version below) &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='Dutch translation' href='https:\/\/www-rjmprogramming-com-au.translate.goog\/HTMLCSS\/regions_via_countries.htm?_x_tr_sl=en&#038;_x_tr_tl=nl&#038;_x_tr_hl=en-GB&#038;_x_tr_pto=nui'>https:\/\/www-rjmprogramming-com-au.translate.goog\/HTMLCSS\/regions_via_countries.htm?_x_tr_sl=en&_x_tr_tl=nl&_x_tr_hl=en-GB&_x_tr_pto=nui<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; or use the language dropdown to the right below &#8230;<\/p>\n<p><iframe src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html?isMobile=yES' style='width:100%;height:900px;'><\/iframe><\/p>\n<p>Yes, we wrote a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.htm\">regions_via_countries.htm<\/a> version of our Region Picker especially for the occasion, because there are nuances among innerHTML and innerText of elements, that need to be considered, while <a target=_blank 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 href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html--------------------------GETME\">latest draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a> gets given a new &#8220;languages&#8221; dropdown element that hangs around long enough to translate from English, via Google Translate, should the user wish to do so.  Once there in another language, alas, some of the Geographics based inhouse menu options cannot be achieved.<\/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\/region-picker-google-translate-tutorial\/'>Region Picker Google Translate Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rprit'>Previous relevant <a target=_blank title='Region Picker Revealed Iframes Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-revealed-iframes-tutorial\/'>Region Picker Revealed Iframes Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html?isMobile=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker Revealed Iframes Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries_less_popups.jpg\" title=\"Region Picker Revealed Iframes Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Revealed Iframes Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Region Picker Emoji Flags Tutorial' href='#rpeft'>Region Picker Emoji Flags Tutorial<\/a>&#8216;s progress, today, we combine two of our favourite concepts in our push forward &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> usage &#8230; as a preferable calling mechanism to popup windows, especially on mobile platforms &#8230; and our favourite &#8230;<\/li>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" title='WordPress reveal posts'>reveal<\/a> functionality via <a target=_blank title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>details<\/a>\/<a target=_blank title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>summary<\/a> usage &#8230; initially &#8230;<br \/>\n<code><br \/>\n&lt;details style=display:none;margin-left:50px; id=dtla1&gt;&lt;summary id=smya1&gt;Airports ...&lt;\/summary&gt;&lt;iframe id=ifra1 style=display:none; src=''&gt;&lt;\/iframe&gt;&lt;\/details&gt;<br \/>\n&lt;details style=display:none;margin-left:50px; id=dtlp1&gt;&lt;summary id=smyp1&gt;Ports ...&lt;\/summary&gt;&lt;iframe id=ifrp1 style=display:none; src=''&gt;&lt;\/iframe&gt;&lt;\/details&gt;<br \/>\n&lt;details style=display:none;margin-left:50px; id=dtls1&gt;&lt;summary id=smys1&gt;Sun Angle ...&lt;\/summary&gt;&lt;iframe id=ifrs1 style=display:none; src=''&gt;&lt;\/iframe&gt;&lt;\/details&gt;<br \/>\n&lt;details style=display:none;margin-left:50px; id=dtlm1&gt;&lt;summary id=smym1&gt;Moon Angle ...&lt;\/summary&gt;&lt;iframe id=ifrm1 style=display:none; src=''&gt;&lt;\/iframe&gt;&lt;\/details&gt;<br \/>\n&lt;details style=display:none;margin-left:50px; id=dtlc1&gt;&lt;summary id=smyc1&gt;Coriolis Effect ...&lt;\/summary&gt;&lt;iframe id=ifrc1 style=display:none; src=''&gt;&lt;\/iframe&gt;&lt;\/details&gt;<br \/>\n&lt;details style=display:none;margin-left:50px; id=dtli1&gt;&lt;summary id=smyi1&gt;Image Chart Image ...&lt;\/summary&gt;&lt;iframe id=ifri1 style=display:none; src=''&gt;&lt;\/iframe&gt;&lt;\/details&gt;<br \/>\n&lt;details style=display:none;margin-left:50px; id=dtli2&gt;&lt;summary id=smyi2&gt;Image Chart Legend ...&lt;\/summary&gt;&lt;iframe id=ifri2 style=display:none; src=''&gt;&lt;\/iframe&gt;&lt;\/details&gt;<br \/>\n&lt;details style=display:none;margin-left:50px; id=dtli&gt;&lt;summary id=smyi&gt;Image Chart Image Map ...&lt;\/summary&gt;&lt;iframe name=ifri id=ifri style=display:none; src=''&gt;&lt;\/iframe&gt;&lt;\/details&gt;<br \/>\n&lt;details style=display:none;margin-left:50px; id=dtlt1&gt;&lt;summary id=smyt1&gt;Timezone ...&lt;\/summary&gt;&lt;iframe name=ifrt1 id=ifrt1 style=display:none; src=''&gt;&lt;\/iframe&gt;&lt;\/details&gt;<br \/>\n&lt;details style=display:none;margin-left:50px; id=dtly1&gt;&lt;summary id=smyy1&gt;YouTube ...&lt;\/summary&gt;&lt;iframe name=ifry1 id=ifry1 style=display:none; src=''&gt;&lt;\/iframe&gt;&lt;\/details&gt;<br \/>\n&lt;details style=display:none;margin-left:50px; id=dtlo1&gt;&lt;summary id=smyo1&gt;Geo Chart ...&lt;\/summary&gt;&lt;iframe name=ifro1 id=ifro1 style=display:none; src=''&gt;&lt;\/iframe&gt;&lt;\/details&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; we reduce the dependency we have, in the Region Picker web application, on the use of popup windows.  For this we funnelled a lot of the <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools'>&#8220;window.open&#8221;<\/a> calls within the purview of the rjmprogramming.com.au domain through the Javascript &#8220;wrapper style of function&#8221; &#8230;<\/p>\n<p><code><br \/>\n  var gltrans=''; \/\/ contains first lowercase letter entered by user at a Javascript prompt inhouse menu answer<br \/>\n  <br \/> <br \/>\nfunction window_open(a1, a2, a3) {<br \/>\n  if (document.URL.indexOf('obile=') != -1 || navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     switch ((glrans + ' ').substring(0,1).toLowerCase()) {<br \/>\n        case 'i':<br \/>\n          if (a1.indexOf('cht=') != -1) {<br \/>\n    document.getElementById('dtli1').style.display='block';<br \/>\n    document.getElementById('ifri1').style.display='block';<br \/>\n    document.getElementById('ifri1').src=a1;<br \/>\n    document.getElementById('dtli1').style.display='92%';<br \/>\n    document.getElementById('ifri1').style.width='100%';<br \/>\n    document.getElementById('ifri1').style.height='600px';<br \/>\n    document.getElementById('dtli1').open=true;<br \/>\n    location.href='#dtli1';<br \/>\n          } else {<br \/>\n    document.getElementById('dtli2').style.display='block';<br \/>\n    document.getElementById('ifri2').style.display='block';<br \/>\n    document.getElementById('ifri2').src=a1;<br \/>\n    document.getElementById('dtli2').style.display='92%';<br \/>\n    document.getElementById('ifri2').style.width='100%';<br \/>\n    document.getElementById('ifri2').style.height='600px';<br \/>\n    document.getElementById('dtli2').open=true;<br \/>\n    location.href='#dtli2';<br \/>\n          }<br \/>\n          <br \/>\n          break;<br \/>\n          <br \/>\n        case 'a':<br \/>\n    document.getElementById('dtla1').style.display='block';<br \/>\n    document.getElementById('ifra1').style.display='block';<br \/>\n    document.getElementById('ifra1').src=a1;<br \/>\n    document.getElementById('dtla1').style.display='92%';<br \/>\n    document.getElementById('ifra1').style.width='100%';<br \/>\n    document.getElementById('ifra1').style.height='600px';<br \/>\n    document.getElementById('dtla1').open=true;<br \/>\n    location.href='#dtla1';<br \/>\n         <br \/>\n          break;<br \/>\n          <br \/>\n        case 't':<br \/>\n    document.getElementById('dtlt1').style.display='block';<br \/>\n    document.getElementById('ifrt1').style.display='block';<br \/>\n    document.getElementById('ifrt1').src=a1;<br \/>\n    document.getElementById('dtlt1').style.display='92%';<br \/>\n    document.getElementById('ifrt1').style.width='100%';<br \/>\n    document.getElementById('ifrt1').style.height='800px';<br \/>\n    document.getElementById('dtlt1').open=true;<br \/>\n    location.href='#dtlt1';<br \/>\n         <br \/>\n          break;<br \/>\n          <br \/>\n        case 'y':<br \/>\n    document.getElementById('dtly1').style.display='block';<br \/>\n    document.getElementById('ifry1').style.display='block';<br \/>\n    document.getElementById('ifry1').src=a1;<br \/>\n    document.getElementById('dtly1').style.display='92%';<br \/>\n    document.getElementById('ifry1').style.width='100%';<br \/>\n    document.getElementById('ifry1').style.height='600px';<br \/>\n    document.getElementById('dtly1').open=true;<br \/>\n    location.href='#dtly1';<br \/>\n         <br \/>\n          break;<br \/>\n          <br \/>\n        case 'o':<br \/>\n    document.getElementById('dtlo1').style.display='block';<br \/>\n    document.getElementById('ifro1').style.display='block';<br \/>\n    document.getElementById('ifro1').src=a1;<br \/>\n    document.getElementById('dtlo1').style.display='92%';<br \/>\n    document.getElementById('ifro1').style.width='100%';<br \/>\n    document.getElementById('ifro1').style.height='600px';<br \/>\n    document.getElementById('dtlo1').open=true;<br \/>\n    location.href='#dtlo1';<br \/>\n         <br \/>\n          break;<br \/>\n          <br \/>\n        case 'p':<br \/>\n    document.getElementById('dtlp1').style.display='block';<br \/>\n    document.getElementById('ifrp1').style.display='block';<br \/>\n    document.getElementById('ifrp1').src=a1;<br \/>\n    document.getElementById('dtlp1').style.display='92%';<br \/>\n    document.getElementById('ifrp1').style.width='100%';<br \/>\n    document.getElementById('ifrp1').style.height='600px';<br \/>\n    document.getElementById('dtlp1').open=true;<br \/>\n    location.href='#dtlp1';<br \/>\n          <br \/>\n          break;<br \/>\n          <br \/>\n        case 's':<br \/>\n    document.getElementById('dtls1').style.display='block';<br \/>\n    document.getElementById('ifrs1').style.display='block';<br \/>\n    document.getElementById('ifrs1').src=a1;<br \/>\n    document.getElementById('dtls1').style.display='92%';<br \/>\n    document.getElementById('ifrs1').style.width='100%';<br \/>\n    document.getElementById('ifrs1').style.height='600px';<br \/>\n    document.getElementById('dtls1').open=true;<br \/>\n    location.href='#dtls1';<br \/>\n          <br \/>\n          break;<br \/>\n          <br \/>\n        case 'm':<br \/>\n    document.getElementById('dtlm1').style.display='block';<br \/>\n    document.getElementById('ifrm1').style.display='block';<br \/>\n    document.getElementById('ifrm1').src=a1;<br \/>\n    document.getElementById('dtlm1').style.display='92%';<br \/>\n    document.getElementById('ifrm1').style.width='100%';<br \/>\n    document.getElementById('ifrm1').style.height='600px';<br \/>\n    document.getElementById('dtlm1').open=true;<br \/>\n    location.href='#dtlm1';<br \/>\n          <br \/>\n          break;<br \/>\n          <br \/>\n        case 'c':<br \/>\n    document.getElementById('dtlc1').style.display='block';<br \/>\n    document.getElementById('ifrc1').style.display='block';<br \/>\n    document.getElementById('ifrc1').src=a1;<br \/>\n    document.getElementById('dtlc1').style.display='92%';<br \/>\n    document.getElementById('ifrc1').style.width='100%';<br \/>\n    document.getElementById('ifrc1').style.height='600px';<br \/>\n    document.getElementById('dtlc1').open=true;<br \/>\n    location.href='#dtlc1';<br \/>\n          <br \/>\n          break;<br \/>\n          <br \/>\n        default:<br \/>\n          return window.open(a1, a2, a3);<br \/>\n          break;<br \/>\n     }<br \/>\n  <br \/>\n     return null;<br \/>\n  }<br \/>\n  return window.open(a1, a2, a3);<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-------------------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-------------------------GETME\">latest draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker (mobile uses iframes and non-mobile uses popups)<\/a> or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html?isMobile=y\">Region Picker (uses iframes where possible)<\/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\/region-picker-revealed-iframes-tutorial\/'>Region Picker Revealed Iframes  Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpeft'>Previous relevant <a target=_blank title='Region Picker Emoji Flags Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-emoji-flags-tutorial\/'>Region Picker Emoji Flags Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker Emoji Flags Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/better_transition.jpg\" title=\"Region Picker Emoji Flags Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Emoji Flags Tutorial<\/p><\/div>\n<p>Regular readers will know that we are keen on <a target=_blank title='Regional Indicator Symbol Letter A' href='https:\/\/emojipedia.org\/regional-indicator-symbol-letter-a'>emojis<\/a> &#8230;<\/p>\n<ul>\n<li>regarding their way to attract attention<\/li>\n<li>internationalization assistance<\/li>\n<li>text (content) that is (like a) graphic (display)<\/li>\n<\/ul>\n<p> &#8230; for we &#8220;graphically challenged&#8221;, shall we say?  We think our Region Picker from yesterday&#8217;s <a title='Region Picker Geo Chart Image Chart GeoJson Tutorial' href='#rpgcicgjt'>Region Picker Geo Chart Image Chart GeoJson Tutorial<\/a> could do with a little &#8220;emoji flag&#8221; help.  Yes, every country with an ISO-3166 two character code associated with it, can have an associated emoji flag via a Javascript function like &#8230;<\/p>\n<p><code><br \/>\n    function orflag(thiscc) {<br \/>\n  var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ';<br \/>\n  var dri=['127462','127463','127464','127465','127466','127467','127468','127469','127470','127471','127472','127473','127474','127475','127476','127477','127478','127479','127480','127481','127482','127483','127484','127485','127486','127487'];<br \/>\n      var ccsuff='', ccchar=' ', cde='';<br \/>\n      for (var iccsuff=0; iccsuff&lt;thiscc.length; iccsuff++) {<br \/>\n        ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase();<br \/>\n        ccsuff+=String.fromCodePoint(dri[eval('' + lri.indexOf(ccchar))]); \/\/'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';';<br \/>\n        cde='.';<br \/>\n      }<br \/>\n      return ccsuff;<br \/>\n    }<br \/>\n<\/code><\/p>\n<p>It might have been the recent work with our &#8220;rectangle of letter hashtag navigation <i>breadcrumb<\/i> emojis&#8221; in yesterday&#8217;s <a title='Region Picker Geo Chart Image Chart GeoJson Tutorial' href='#rpgcicgjt'>Region Picker Geo Chart Image Chart GeoJson Tutorial<\/a> that spurred us on, because the keen observer can look at the code above, and if they are &#8220;number orientated&#8221; they&#8217;ll tee up those &#8220;1274xx&#8221; numbers with ones below.  Can you believe that these <a target=_blank title='Regional Indicator Symbol Letter A' href='https:\/\/emojipedia.org\/regional-indicator-symbol-letter-a'>Regional Indicators<\/a> have a dual purpose for us now &#8230;<\/p>\n<ol>\n<li>singly they are helping with the breadcrumbs<\/li>\n<li>two together in the form of a country ISO-3166 two character code and they <font size=1>(we kind of think, miraculously)<\/font> turn into the national flag (emoji) for that country<\/li>\n<\/ol>\n<p>?  And mixing these up into the content mix, we do not have to be quite so sheepish about all the English assumptions in <a target=_blank 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 href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html------------------------GETME\">latest draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a>.<\/p>\n<p>Also, we think, it is clarifying the &#8220;dropdown&#8221; element in the Region Picker, contextualizing the right hand side as the &#8220;business end&#8221; of proceedings, which can have an &#8220;independent life&#8221; from &#8220;the work in progress&#8221; status of what goes on in that dropdown element (which, on non-mobile, is far more &#8220;jittery&#8221; because it responds to the &#8220;onmouseover&#8221; events going on).<\/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\/region-picker-emoji-flag-tutorial\/'>Region Picker Emoji Flag Tutorial<\/a>.<\/p-->\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Personally, we know of some products set up before there were emojis, and requiring flags for their functionality.   Sadly, they resorted to individual image files required for each country&#8217;s flag &#8230; these days with the &#8220;emoji flags&#8221; this amounts to being an awkward arrangement to maintain, and we Linux web server managers <i>go bananas<\/i> regarding such a waste of <a target=_blank title='Unix inode number information' href='https:\/\/www.google.com\/search?q=unix+inode+number&#038;sca_esv=78931ef932eb9f85&#038;rlz=1C5CHFA_enAU973AU973&#038;sxsrf=ACQVn0_jzvnE6awbH95dgIizI-pgUUtPkA%3A1707545037494&#038;ei=zRHHZfHVHYKa0-kPzuKrWA&#038;ved=0ahUKEwix8Jb7jKCEAxUCzTQHHU7xCgsQ4dUDCBE&#038;uact=5&#038;oq=unix+inode+number&#038;gs_lp=Egxnd3Mtd2l6LXNlcnAiEXVuaXggaW5vZGUgbnVtYmVyMgYQABgWGB4yCBAAGBYYHhgPMgYQABgWGB4yCxAAGIAEGIoFGIYDMgsQABiABBiKBRiGA0icHVDVBljFGnABeAGQAQCYAd4BoAG7EaoBBjAuMTAuMrgBA8gBAPgBAcICChAAGEcY1gQYsAPCAgsQABiABBiKBRiRAsICBRAAGIAEwgILEC4YgAQYigUYkQLiAwQYACBBiAYBkAYI&#038;sclient=gws-wiz-serp'>&#8220;inode numbers&#8221;<\/a> <font size=1>&#8230; because, the last time we looked, &#8220;inode numbers&#8221; do not grow on trees!<\/font><\/p>\n<hr>\n<p id='rpgcicgjt'>Previous relevant <a target=_blank title='Region Picker Geo Chart Image Chart GeoJson Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geo-chart-image-chart-geojson-tutorial\/'>Region Picker Geo Chart Image Chart GeoJson Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker Geo Chart Image Chart GeoJson Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_more.jpg\" title=\"Region Picker Geo Chart Image Chart GeoJson Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Geo Chart Image Chart GeoJson Tutorial<\/p><\/div>\n<p>Prior to yesterday&#8217;s <a title='Region Picker Mobile Background Position Tutorial' href='#rpmbpt'>Region Picker Mobile Background Position Tutorial<\/a>, when we presented <a target=_blank title='Region Picker Mobile GeoJson Trip Leg Tutorial' href='#rpmgjtlt'>Region Picker Mobile GeoJson Trip Leg Tutorial<\/a>, we readied the Region Picker for GeoJson interfacing smarts, and today we find ourselves wanting to add &#8230; <\/p>\n<ul>\n<li>Region Picker calls Image Chart add GeoJson interfacing smarts &#8230; and &#8230;<\/li>\n<li>Region Picker calls Geo Chart add GeoJson interfacing smarts<\/li>\n<\/ul>\n<p> &#8230; given the lead in work from a couple of days back.<\/p>\n<p>Another realization occurred to us regarding the wait a user had when using the Region Picker and trying to (on a non-mobile platform) right click a country name link (to release &#8220;The Whole Shebang&#8221;).  We realized that that &#8220;letter block&#8221; we used to create dynamically always had the same content, so why not make it some static HTML, as per &#8230;<\/p>\n<p><code><br \/>\n&lt;h4 id=\"myh3\" style=\"position: fixed; top: 30px; left: 380px; opacity: 0.7; z-index: 786;\"&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aAF\"&gt;&amp;#127462;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aBS\"&gt;&amp;#127463;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aKH\"&gt;&amp;#127464;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aDK\"&gt;&amp;#127465;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aEC\"&gt;&amp;#127466;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aFO\"&gt;&amp;#127467;&lt;\/a&gt;&lt;br&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aGA\"&gt;&amp;#127468;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aHT\"&gt;&amp;#127469;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aIS\"&gt;&amp;#127470;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aJM\"&gt;&amp;#127471;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aKZ\"&gt;&amp;#127472;&lt;\/a&gt;&lt;br&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aLA\"&gt;&amp;#127473;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aMO\"&gt;&amp;#127474;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aNA\"&gt;&amp;#127475;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aOM\"&gt;&amp;#127476;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aPK\"&gt;&amp;#127477;&lt;\/a&gt;&lt;br&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aQA\"&gt;&amp;#127478;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aRE\"&gt;&amp;#127479;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aBL\"&gt;&amp;#127480;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aTW\"&gt;&amp;#127481;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aUG\"&gt;&amp;#127482;&lt;\/a&gt;&lt;br&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aVU\"&gt;&amp;#127483;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aWF\"&gt;&amp;#127484;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aYE\"&gt;&amp;#127485;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aYE\"&gt;&amp;#127486;&lt;\/a&gt;&amp;nbsp;&lt;a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aZM\"&gt;&amp;#127487;&lt;\/a&gt;&amp;nbsp;&lt;span id=\"intodd\" title=\"Navigate to region list for last country selected\" style=\"border:1px solid green;text-shadow:-1px 1px 1px #2dff95;font-size:14px;text-decoration:underline;cursor:pointer;z-index:3245;\" onclick=\"if (document.getElementById('bremember')) {  window.scrollTo(eval(-80 + eval(document.getElementById('bremember').getBoundingClientRect().left)), 0); }\"&gt;\u2197&lt;\/span&gt;&lt;\/h4&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; looking like &#8230;<\/p>\n<h4 id=\"myh3\" data-style=\"position: fixed; top: 30px; left: 380px; opacity: 0.7; z-index: 786;\">&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aAF\">&#127462;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aBS\">&#127463;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aKH\">&#127464;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aDK\">&#127465;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aEC\">&#127466;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aFO\">&#127467;<\/a><br \/>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aGA\">&#127468;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aHT\">&#127469;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aIS\">&#127470;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aJM\">&#127471;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aKZ\">&#127472;<\/a><br \/>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aLA\">&#127473;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aMO\">&#127474;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aNA\">&#127475;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aOM\">&#127476;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aPK\">&#127477;<\/a><br \/>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aQA\">&#127478;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aRE\">&#127479;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aBL\">&#127480;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aTW\">&#127481;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aUG\">&#127482;<\/a><br \/>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aVU\">&#127483;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aWF\">&#127484;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aYE\">&#127485;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aYE\">&#127486;<\/a>&nbsp;<a style=\"color:blue;z-index:786;text-shadow:-1px 1px 1px #2dff95;\" href=\"#aZM\">&#127487;<\/a>&nbsp;<span id=\"intodd\" title=\"Navigate to region list for last country selected\" style=\"border:1px solid green;text-shadow:-1px 1px 1px #2dff95;font-size:14px;text-decoration:underline;cursor:pointer;z-index:3245;\" data-onclick=\"if (document.getElementById('bremember')) {  window.scrollTo(eval(-80 + eval(document.getElementById('bremember').getBoundingClientRect().left)), 0); }\">\u2197<\/span><\/h4>\n<p> &#8230; and contrary to what we often admire, &#8220;static content&#8221; serves us better than a &#8220;dynamic scenario&#8221;, with &#8220;right clicking&#8221; working much faster after the document.body onload event.<\/p>\n<p>Codewise we needed to work on &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html----------------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html----------------------GETME\">latest draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a><\/li>\n<li><a target=_blank 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 href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php--------------------GETME\">image_chart.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/image_chart.php\">Google Chart Image Chart Map Chart interfacer<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\">geo_chart.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">Geo Chart interfacer<\/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\/region-picker-geo-chart-image-chart-geojson-tutorial\/'>Region Picker Geo Chart Image Chart GeoJson Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpmbpt'>Previous relevant <a target=_blank title='Region Picker Mobile Background Position Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-mobile-background-position-tutorial\/'>Region Picker Mobile Background Position Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker Mobile Background Position Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_background_position.jpg\" title=\"Region Picker Mobile Background Position Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Mobile Background Position Tutorial<\/p><\/div>\n<p>Am sure there are users out there uncomfortable with overlapping or clashing HTML.  As a programmer, we recommend &#8220;some chill&#8221; when re-orienting the device can be possible, but if there is a way to avoid the issues in the first place, count us in as programmers interested in solutions.  So we spent a day in amongst the pixels, with some nitty gritty, further to yesterday&#8217;s <a title='Region Picker Mobile User Experience Tutorial' href='#rpmuet'>Region Picker Mobile User Experience Tutorial<\/a> mobile platform user experience start, and &#8230;<\/p>\n<ul>\n<li>turned the &#8220;breadcrumb&#8221; style ascii letter links into <a target=_blank title='Regional Indicator Symbol Letter A' href='https:\/\/emojipedia.org\/regional-indicator-symbol-letter-a'>emoji<\/a> links (and so &#8220;I&#8221; got the same width as &#8220;W&#8221;) &#8230; and &#8230;<\/li>\n<li>even added line feeds to some &#8220;a&#8221; country name links to help out so that background image overlapping happens less often to their left &#8230; and &#8230;<\/li>\n<li>added country name to rightmost &#8220;Image Chart Map Chart&#8221; button wording &#8230; and &#8230;<\/li>\n<li>played around with tablet and phone platform background-position (of the country image chart) images &#8230;<br \/>\n<code><br \/>\n  if (window.self == window.parent && eval('' + screen.width) &gt;= 800 || document.URL.indexOf('?right=') != -1) {<br \/>\n  document.getElementById('tdleft').style.backgroundPosition='right top';<br \/>\n  } else if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  \/\/document.getElementById('tdleft').style.backgroundPosition='' + eval(0.4 * eval('' + screen.width)) + 'px ' + eval(-450 + eval('' + screen.height)) + 'px'; \/\/ used to be center top<br \/>\n  document.getElementById('tdleft').style.backgroundPosition='200px 200px'; \/\/ used to be center top<br \/>\n  } else {<br \/>\n  document.getElementById('tdleft').style.backgroundPosition='center top'; \/\/ used to be center top<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; causing a whole lot less clashing, going on in <a target=_blank 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 href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html---------------------GETME\">latest draft<\/a> <a target=_blank 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\/region-picker-mobile-background-position-tutorial\/'>Region Picker Mobile Background Position Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpmuet'>Previous relevant <a target=_blank title='Region Picker Mobile User Experience Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-mobile-user-experience-tutorial\/'>Region Picker Mobile User Experience Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker Mobile User Experience Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_rc_equivalent.jpg\" title=\"Region Picker Mobile User Experience Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Mobile User Experience Tutorial<\/p><\/div>\n<p>Continuing on with mobile platform concerns regarding yesterday&#8217;s <a title='Region Picker Mobile GeoJson Trip Leg Tutorial' href='#rpmgjtlt'>Region Picker Mobile GeoJson Trip Leg Tutorial<\/a>&#8216;s work on the Region Picker web application, today we improve the user experience for mobile platform users by &#8230;<\/p>\n<ul>\n<li>making the <font color=blue>country text bigger<\/font> and more noticeable as they load the webpage &#8230;<br \/>\n&lt;style&gt;<br \/>\n<code><br \/>\na.ulmenulink {<br \/>\n   font-size: <font color=blue>28px<\/font>; \/* used to be 14px *\/<br \/>\n   font-weight: bold;<br \/>\n   \/* color: orange; *\/por<br \/>\n   background-image: linear-gradient(to right, lightblue 0%, rgb(255,255,127) 100%);<br \/>\n   text-shadow:-1px 1px 1px #ff2d95;<br \/>\n   <font color=purple>margin-left: 50px;<\/font><br \/>\n}<br \/>\n<\/code><br \/>\n&lt;style&gt;\n<\/li>\n<li>adding left hand side alternative way to get to non-mobile right click &#8220;the whole shebang&#8221; logic &#8230;<br \/>\n<code><br \/>\n&lt;span id=todd title='Navigate to region list for last country selected' style='border:1px solid green;position:fixed;text-shadow:-1px 1px 1px #2dff95;font-size:20px;left:8px;top:80px;text-decoration:underline;cursor:pointer;z-index:3245;' onclick=\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && lastop != null) { thewholeshebang(lastop); } else if (document.getElementById('bremember')) {  window.scrollTo(eval(-80 + eval(document.getElementById('bremember').getBoundingClientRect().left)), 0); } \"&gt;&amp;#8599;&lt;\/span&gt;<br \/>\n<\/code><br \/>\n &#8230; making some elements receive a <font color=purple>new CSS margin-left property<\/font> to help out &#8230;<br \/>\n&lt;style&gt;<br \/>\n<code><br \/>\na.ulmenulink {<br \/>\n   font-size: 28px;<br \/>\n   font-weight: bold;<br \/>\n   \/* color: orange; *\/<br \/>\n   background-image: linear-gradient(to right, lightblue 0%, rgb(255,255,127) 100%);<br \/>\n   text-shadow:-1px 1px 1px #ff2d95;<br \/>\n   <font color=purple>margin-left: 50px;<\/font><br \/>\n}<br \/>\n<br \/>\na.ulmenulink, li a {<br \/>\n   text-decoration: none;<br \/>\n   color: #006;<br \/>\n   background-image: linear-gradient(rgba(255,240,240,0.5), rgba(255,242,242,0.5),  rgba(255,244,244,0.5),  rgba(255,246,246,0.5),  rgba(255,248,248,0.5),  rgba(255,250,250,0.5)); \/* #fff0f0, #fff2f2, #fff4f4, #fff6f6, #fff8f8, #fffafa); *\/<br \/>\n   text-shadow:-1px 1px 1px #2dff95;<br \/>\n   <font color=purple>margin-left: 30px;<\/font><br \/>\n}<br \/>\n<\/code><br \/>\n&lt;style&gt;\n<\/li>\n<li>bunching up the single letter links <font color=magenta>into a rectangle of links<\/font> which do not overlay to the left (and as such do not interfere with any country links) &#8230;<br \/>\n<code><br \/>\nvar nexttodo='A', nextih='&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;', ournext='';<br \/>\n<font color=magenta>var orignextih=nextih;<br \/>\nvar newih='';<br \/>\n<br \/>\n\/\/registers mouseenter to each element in xelms array<br \/>\nnextih+=orignextih;<br \/>\nnextih+=orignextih;<br \/>\nnewih=nextih;<\/font><br \/>\nfor(var xi=0; xi&lt;xelms.length; xi++){<br \/>\n if (eval(('' + xelms[xi].id).length) == 3) {<br \/>\n    if (('' + xelms[xi].innerHTML).substring(0).substring(0,1) >= nexttodo) {<br \/>\n      ournext=('' + xelms[xi].innerHTML).substring(0).substring(0,1)<br \/>\n      \/\/alert('nexttodo=' + nexttodo + ' andpleasedonotbeequalveryoften ournext=' + ournext + ' and ' + xelms[xi].id);<br \/>\n      while (nexttodo &lt; ournext) {<br \/>\n         nextih+='&amp;nbsp;&lt;a style=color:blue;z-index:786; href=\"#' + xelms[xi].id + '\"&gt;' + nexttodo + '&lt;\/a&gt;';<br \/>\n         nexttodo=String.fromCharCode(1 + nexttodo.charCodeAt(0));<br \/>\n      \/\/alert('Nexttodo=' + nexttodo + ' and ournext=' + ournext + ' and ' + xelms[xi].id);<br \/>\n      }<br \/>\n      if (nexttodo <= 'Z') {\n         nextih+='&nbsp;&lt;a style=color:blue;z-index:786; href=\"#' + xelms[xi].id + '\"&gt;' + nexttodo + '&lt;\/a&gt;';\n         nexttodo=String.fromCharCode(1 + nexttodo.charCodeAt(0));\n      }\n    } \/\/else {\n      \/\/alert('no for nexttodo=' + nexttodo + ' and ournext=' + ournext + ' and ' + xelms[xi].id);\n    \/\/}\n }\n \/\/ more code follows\n} \/\/ end for\n<br \/>\nif (nextih != '') {<br \/>\n <font color=magenta>nextih=nextih.replace('>F<\/a>', '>F<\/a>' + '<br \/>' + newih);<br \/>\n nextih=nextih.replace('>J<\/a>', '>J<\/a>' + '<br \/>' + newih);<br \/>\n nextih=nextih.replace('>O<\/a>', '>O<\/a>' + '<br \/>' + newih);<br \/>\n nextih=nextih.replace('>T<\/a>', '>T<\/a>' + '<br \/>' + newih);<\/font><br \/>\n<br \/>\n  document.getElementById('myh3').innerHTML=nextih + \"<br \/>&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;<span id=intodd title='Navigate to region list for last country selected' style='border:1px solid green;text-shadow:-1px 1px 1px #2dff95;font-size:14px;text-decoration:underline;cursor:pointer;z-index:3245;' onclick=\" + String.fromCharCode(34) + \"if (document.getElementById('bremember')) {  window.scrollTo(eval(-80 + eval(document.getElementById('bremember').getBoundingClientRect().left)), 0); }\" + String.fromCharCode(34) + \">&amp;#8599;<\/span>\";<br \/>\n  var hrect=document.getElementById('myh3').getBoundingClientRect();<br \/>\n  document.getElementById('myh3').style.position='fixed';<br \/>\n  document.getElementById('myh3').style.top='38px';<br \/>\n  <font color=magenta>if (8 == 8) {    document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,'').replace(newih,'');<br \/>\n    document.getElementById('myh3').style.left='380px';<br \/>\n  } else {<\/font><br \/>\n    document.getElementById('myh3').style.left='' + hrect.left + 'px';<br \/>\n  <font color=magenta>}<\/font><br \/>\n  document.getElementById('myh3').style.opacity='0.4';<br \/>\n  document.getElementById('myh3').style.zIndex='786';<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>improving the <font color=brown>&#8220;highlight all dropdown options&#8221;<\/font> code &#8230;<br \/>\n<code><br \/>\nfunction selall() { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/55486020\/how-to-set-values-of-multiple-select-using-javascript<br \/>\nconst selecte = document.getElementsByTagName('select')[0];<br \/>\nconst selectValues = [''];<br \/>\nvar soh=selecte.innerHTML;<br \/>\nvar wassoh=soh;<br \/>\n<font color=brown>var its='', jits=0;<\/font><br \/>\n<br \/>\n\/* Iterate options of select element *\/<br \/>\nfor (const optionx of document.querySelectorAll('#' + selecte.id + ' option')) {<br \/>\n  \/* Parse value to integer *\/<br \/>\n  const valuex = Number.parseInt(optionx.value);<br \/>\n<br \/>\n  \/* If option value contained in values, set selected attribute *\/<br \/>\n  if (selectValues.indexOf(valuex) !== -1 || 1 == 1) {<br \/>\n    optionx.setAttribute('selected', 'selected');<br \/>\n    <font color=brown>if (soh.indexOf('\"&gt;' + optionx.innerText + '&lt;') != -1) {<\/font><br \/>\n    soh=soh.replace('\"&gt;' + optionx.innerText + '&lt;', '\" selected&gt;' + optionx.innerText + '&lt;');<br \/>\n    <font color=brown>} else {<br \/>\n    its=optionx.innerText;<br \/>\n    for (jits=eval(-1 + eval('' + optionx.innerText.length)); jits&gt;=2; jits--) {<br \/>\n       if (its != '' && soh.indexOf('\"&gt;' + optionx.innerText.substring(0,jits)) != -1) {<br \/>\n           soh=soh.replace('\"&gt;' + optionx.innerText.substring(0,jits), '\" selected&gt;' + optionx.innerText.substring(0,jits));<br \/>\n           its='';<br \/>\n       }<br \/>\n    }<br \/>\n    }<\/font><br \/>\n  }<br \/>\n  \/* Otherwise ensure no selected attribute on option *\/<br \/>\n  else {<br \/>\n    optionx.removeAttribute('selected');<br \/>\n  }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>add <font color=cyan>some background colour<\/font> to any dropdown to help highlight its importance once country is decided upon &#8230;<br \/>\n&lt;style&gt;<br \/>\n<code><br \/>\nselect {<br \/>\n  font-size: 7px;<br \/>\n  font-weight: bold;<br \/>\n  padding: 2 2 2 2;<br \/>\n  min-height: 90%;<br \/>\n  overflow-y: scroll;<br \/>\n  overflow-y: hidden;<br \/>\n  <font color=cyan>background-color: pink;<\/font><br \/>\n}<br \/>\n<\/code><br \/>\n&lt;style&gt;\n<\/li>\n<li>rule out the use of a meta name=&#8221;viewport&#8221; tag as being any help<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank 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 href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html--------------------GETME\">latest draft<\/a> <a target=_blank 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-region-picker-mobile-geojson-trip-leg-tutorial\/'>New Region Picker Mobile GeoJson Trip Leg Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpmgjtlt'>Previous relevant <a target=_blank title='Region Picker Mobile GeoJson Trip Leg Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-mobile-geojson-trip-leg-tutorial\/'>Region Picker Mobile GeoJson Trip Leg Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker Mobile GeoJson Trip Leg Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_region_picker_geojson.jpg\" title=\"Region Picker Mobile GeoJson Trip Leg Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Mobile GeoJson Trip Leg Tutorial<\/p><\/div>\n<p>The last couple of &#8220;right click leaning&#8221; days may have been annoying for mobile users of our Region Picker out there.  And so, onto yesterday&#8217;s <a title='Region Picker GeoJson Trip Leg Right Click Tutorial' href='#rpgjtlrct'>Region Picker GeoJson Trip Leg Right Click Tutorial<\/a> we&#8217;re starting the &#8230;<\/p>\n<ul>\n<li>mobile platform turnaround &#8230; recognising &#8230;<\/li>\n<li>on mobile platforms zooming will be via a spread gesture rather than a zoom button click &#8230;<\/li>\n<li>on mobile platforms the previous non-mobile right click logics will have to be replaced by other event logic (today being more &#8220;ondblclick&#8221; logic) as required &#8230;<\/li>\n<li>on mobile platforms we do not want to re-navigate to the GeoJson iframe content, and so we use the iframe URL and add <font color=blue>hashtag navigation<\/font> helpers &#8230;<br \/>\n<code><br \/>\n  <font color=blue>var locationhash='';<br \/>\n<br \/>\n  function lhit(inh) {<br \/>\n    locationhash=inh;<br \/>\n    ifcheck(document.getElementById('ifcountries'));<br \/>\n    return inh;<br \/>\n  }<\/font><br \/>\n<br \/>\nfunction menuize(rans) {<br \/>\n      var rdescis=lastplace;<br \/>\n      var latdeg=-999, longdeg=-999;<br \/>\n      if (gextras.indexOf(' (') != -1) {<br \/>\n       if (gextras.split('t to (')[1].split(')')[0].indexOf(',') != -1) {<br \/>\n        latdeg=eval('' + gextras.split('t to (')[1].split(')')[0].split(',')[0]);<br \/>\n        longdeg=eval('' + gextras.split('t to (')[1].split(')')[0].split(',')[1]);<br \/>\n       }<br \/>\n      } else if (storedsuffs.indexOf('~' + lpw(lastplace) + '`') != -1 && storedsuffs.indexOf('~' + lpw(lastplace) + '`@') == -1) {<br \/>\n       gextras=storedsuffs.split('~' + lpw(lastplace) + '`')[1].split('@')[0];<br \/>\n       if (gextras.split(' (')[1].split(')')[0].indexOf(',') != -1) {<br \/>\n        latdeg=eval('' + gextras.split(' (')[1].split(')')[0].split(',')[0]);<br \/>\n        longdeg=eval('' + gextras.split(' (')[1].split(')')[0].split(',')[1]);<br \/>\n       }<br \/>\n      }<br \/>\n<br \/>\n      if ((rans + ' ').toUpperCase().substring(0,1) == 'W') {<br \/>\n         if (rdescis == '') {<br \/>\n         window.open('\/\/wikipedia.org','_blank','top=180,left=400,width=600,height=600');<br \/>\n         } else {<br \/>\n         window.open('\/\/wikipedia.org\/wiki\/' + encodeURIComponent(rdescis.replace(\/\\ \\(\/g,', ').replace(\/\\)$\/g,'')).replace(\/\\%20\/g,'_'),'_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys)));<br \/>\n         }<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'I') {<br \/>\n         tryit();<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'Y') {<br \/>\n         if (rdescis == '') {<br \/>\n         window.open('\/\/www.youtube.com','_blank','top=180,left=400,width=600,height=600');<br \/>\n         } else {<br \/>\n         window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=' + encodeURIComponent('           ' + rdescis.replace(\/\\ \\(\/g,', ').replace(\/\\)$\/g,'')),'_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys)));<br \/>\n         }<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'G') {<br \/>\n         if (rdescis == '') {<br \/>\n         window.open('\/\/www.google.com','_blank','top=180,left=400,width=600,height=600');<br \/>\n         } else {<br \/>\n         window.open('\/\/www.google.com\/search?q=' + encodeURIComponent(rdescis.replace(\/\\ \\(\/g,', ').replace(\/\\)$\/g,'')) + '&tbm=isch','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys)));<br \/>\n         }<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'T') { \/\/ && eval(('' + document.getElementById('myp').getAttribute('data-fc')).length) == 2) {<br \/>\n         if (rdescis == '') {<br \/>\n         window.open('\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php','_blank','top=180,left=400,width=800,height=600');<br \/>\n         } else {<br \/>\n         window.open('\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php?iso=' + ('' + lastcode + '  ').toUpperCase().substring(0,2).trim(),'_blank','top=' + ys + ',left=' + xs + ',width=800,height=' + Math.max(100,eval(-100 + screenheight - ys)));<br \/>\n         }<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'A' && latdeg &gt;= -91 && gextras.indexOf(' (') != -1) {  \/\/ Airports<br \/>\n         iwo=window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/intair.php?num=3&lat=' + latdeg + '&long=' + longdeg + '&spawn=' + encodeURIComponent('\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php?title=' + maybenot(document.getElementById('myp').getAttribute('data-fc').toUpperCase(),rdescis) + ';' + encodeURIComponent(rdescis) + '%' + '20and%' + '20Airports&onclick=y&justmenu=y&label=[%' + '27Lat%' + '27,&value=%' + '27Lon%' + '27,%' + '27Name%' + '27]&data=,' + '[' + latdeg + ',' + longdeg + ',~' + encodeURIComponent(rdescis).replace(\/\\-\/g,'%' + '2d').replace(\/\\#\/g,'%' + '23') + '~]'),'_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys)));<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'P' && latdeg &gt;= -91 && gextras.indexOf(' (') != -1) {  \/\/ Ports<br \/>\n         iwo=window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/intair.php?num=4&lat=' + latdeg + '&long=' + longdeg + '&port=y&spawn=' + encodeURIComponent('\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php?title=' + maybenot(document.getElementById('myp').getAttribute('data-fc').toUpperCase(),rdescis) + ';' + encodeURIComponent(rdescis) + '%' + '20and%' + '20Ports&onclick=y&justmenu=y&label=[%' + '27Lat%' + '27,&value=%' + '27Lon%' + '27,%' + '27Name%' + '27]&data=,' + '[' + latdeg + ',' + longdeg + ',~' + encodeURIComponent(rdescis).replace(\/\\-\/g,'%' + '2d').replace(\/\\#\/g,'%' + '23') + '~]'),'_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys)));<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'S' && latdeg &gt;= -91 && gextras.indexOf(' (') != -1) {  \/\/ Sun Angle<br \/>\n         window.open('\/\/www.rjmprogramming.com.au\/PHP\/SunAngle\/sun_angle_now_at.php?latd=' + ('' + latdeg).split('.')[0] + '&latm=' + Math.round(eval(eval('0.' + ('' + latdeg + '.0').split('.')[1]) * 60)) + '&lats=0&longd=' + ('' + longdeg).split('.')[0] + '&longm=' + Math.round(eval(eval('0.' + ('' + longdeg + '.0').split('.')[1]) * 60)) + '&longs=0&from=from&done=y','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys)));<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'M' && latdeg &gt;= -91 && gextras.indexOf(' (') != -1) {  \/\/ Moon Angle<br \/>\n         window.open('\/\/www.rjmprogramming.com.au\/PHP\/MoonAngle\/moon_angle_now_at.php?latd=' + ('' + latdeg).split('.')[0] + '&latm=' + Math.round(eval(eval('0.' + ('' + latdeg + '.0').split('.')[1]) * 60)) + '&lats=0&longd=' + ('' + longdeg).split('.')[0] + '&longm=' + Math.round(eval(eval('0.' + ('' + longdeg + '.0').split('.')[1]) * 60)) + '&longs=0&from=from&done=y','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys)));<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'C' && latdeg &gt;= -91 && gextras.indexOf(' (') != -1) {  \/\/ Coriolis Effect<br \/>\n         window.open('\/\/www.rjmprogramming.com.au\/PHP\/Coriolis\/coriolis_force_at.php?latd=' + ('' + latdeg).split('.')[0] + '&latm=' + Math.round(eval(eval('0.' + ('' + latdeg + '.0').split('.')[1]) * 60)) + '&lats=0&longd=' + ('' + longdeg).split('.')[0] + '&longm=' + Math.round(eval(eval('0.' + ('' + longdeg + '.0').split('.')[1]) * 60)) + '&longs=0&from=from&done=y','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys)));<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'E' && latdeg &gt;= -91 && gextras.indexOf(' (') != -1) {  \/\/ Google Earth<br \/>\n         window.open('\/\/earth.google.com\/web\/@' + ('+' + latdeg).replace('+-','-') + (',+' + longdeg).replace('+-','-') + ',328.51120179a,63169669.71505167d,1y,0h,0t,0r','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys)));<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'O' && latdeg &gt;= -91 && gextras.indexOf(' (') != -1) {  \/\/ Geo Chart<br \/>\n         iwo=window.open('\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php' + '?title=' + maybenot(document.getElementById('myp').getAttribute('data-fc').toUpperCase(),rdescis) + ';' + encodeURIComponent(rdescis).replace(\/\\-\/g,'%' + '2d').replace(\/\\#\/g,'%' + '23') + '&aregexographicals=y&aregeographicals=&width=500&height=312&onclick=y&country=Places&popularity=&data=%20[' + latdeg + '|' + longdeg + '|~' + encodeURIComponent(rdescis).replace(\/\\-\/g,'%' + '2d').replace(\/\\#\/g,'%' + '23') + '~,2]','_blank','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys)));<br \/>\n      } else if ((rans + ' ').toUpperCase().substring(0,1) == 'J') {  \/\/ GeoJSON<br \/>\n         \/\/window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.html','ifcountries','top=' + ys + ',left=' + xs + ',width=600,height=' + Math.max(100,eval(-100 + screenheight - ys)));<br \/>\n         if (latdeg &lt; -990 && longdeg &lt; -990) {<br \/>\n              jjans=jjans + '     ';<br \/>\n         }<br \/>\n \/\/        if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n \/\/        jjans=jjans.replace('No Trip Planning','Yes Trip Planning');<br \/>\n \/\/        }<br \/>\n         if (sofararealist.indexOf('|' + ('' + lastcode + '  ').toUpperCase().substring(0,2).trim() + '|') == -1) {<br \/>\n         sofararealist+=('' + lastcode + '  ').toUpperCase().substring(0,2).trim() + '|';<br \/>\n         }<br \/>\n         if (1 == 9 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n         if (1 == 6) { zwin=window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564), '_blank'); } \/\/ 'ifcountries');<br \/>\n         } else {<br \/>\n         <font color=blue>if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && document.getElementById('ifcountries').src.indexOf('?') != -1 && document.getElementById('ifcountries').src.indexOf('\/countries.') != -1) {<br \/>\n         document.getElementById('placegeo').value='';<br \/>\n         document.getElementById('placegeo').title='' + latdeg + ',' + longdeg;<br \/>\n         sofararealist+=('' + lastcode + '  ').toUpperCase().substring(0,2).trim() + '|';<br \/>\n                       zoomword='zoom';<br \/>\n                       refreshword='refresh';<br \/>\n         document.getElementById('ifcountries').src+=lhit('#' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564));<br \/>\n         } else {   <\/font><br \/>\n         document.getElementById('ifcountries').src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564);<br \/>\n         <font color=blue>}<\/font><br \/>\n         }<br \/>\n         lastr=rdescis;<br \/>\n         if ((latdeg &lt; -990 && longdeg &lt; -990) || blurbone == '') {<br \/>\n         if (confirm('Taking you to ' + decodeURIComponent(rdescis) + ' on world map now' + blurbone + ' ...')) {<br \/>\n         jjans=jjans.replace('No Trip Planning','Yes Trip Planning').replace(\/\\ \\ \\ \\ \\ $\/g,'');<br \/>\n         if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n         document.getElementById('ifcountries').style.display='block';<br \/>\n         \/\/document.getElementById('ifcountries').src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564); \/\/zwin=window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.html?' + (Math.max(lastiizoom,1) == 1 ? zoomword + '=' + Math.max(lastiizoom,1) : 'zoom=' + Math.max(lastiizoom,1)) + '&' + refreshword + '=' + Math.floor(Math.random() * 198767564), 'ifcountries'); \/\/ 'ifcountries');<br \/>\n         location.href='#dstyle';<br \/>\n         } else {<br \/>\n         document.getElementById('ifcountries').style.display='block';<br \/>\n         \/\/document.getElementById('more').style.display='none';<br \/>\n         location.href='#dstyle';<br \/>\n         }<br \/>\n         }<br \/>\n         } else {<br \/>\n         jjans=jjans.replace(\/\\ \\ \\ \\ \\ $\/g,'');<br \/>\n jjans=prompt('Taking you to ' + decodeURIComponent(rdescis) + ' on world map now' + blurbtwo + ' ...', '' + jjans);<br \/>\n if (jjans != null) {<br \/>\n         document.getElementById('ifcountries').style.display='block';<br \/>\n         \/\/document.getElementById('more').style.display='none';<br \/>\n         location.href='#dstyle';<br \/>\n }<br \/>\n         }<br \/>\n      }<br \/>\n}<br \/>\n<\/code>\n<\/ul>\n<p> &#8230; in <a target=_blank 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 href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-------------------GETME\">latest draft<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a> for our ongoing quest to improve the user experience of our Region Picker on mobile platforms.<\/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\/region-picker-mobile-geojson-trip-leg-tutorial\/'>Region Picker Mobile GeoJson Trip Leg Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpgjtlrct'>Previous relevant <a target=_blank title='Region Picker GeoJson Trip Leg Right Click Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geojson-trip-leg-right-click-tutorial\/'>Region Picker GeoJson Trip Leg Right Click Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker GeoJson Trip Leg Right Click Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/region_picker_geojson_trip_planner_leg_right_click.gif\" title=\"Region Picker GeoJson Trip Leg Right Click Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker GeoJson Trip Leg Right Click Tutorial<\/p><\/div>\n<p>Regular readers know that we enjoy event-driven programming.  And we really enjoy scenarios where a whole layer of new functionality is possible via an event design initiative, and today we have a &#8230;<\/p>\n<blockquote><p>\nright click<br \/>\n&#8230; or &#8230;<br \/>\noncontextmenu\n<\/p><\/blockquote>\n<p> &#8230; event gala <font size=1>(minus any &#8220;h&#8221; appendix, thank you very much)<\/font> for you.<\/p>\n<p>It&#8217;s very rare that when you rely on a generic representation of a large entity with a single entity you will satisfy all users.   And so, as far as yesterday&#8217;s &#8230;<\/p>\n<blockquote><p>\nRegion Picker region representative geographical &#8220;marker&#8221; placement\n<\/p><\/blockquote>\n<p> &#8230; where the large entity is a whole country or region and the single entity is somewhere inside that, allowing for that is a start, but will only satisfy some users.   But what if, along the way, with our &#8230;<\/p>\n<ul>\n<li>GeoJson world map &#8230;<\/li>\n<li>image map &#8230;<\/li>\n<li>area subelement scouring &#8230; we could start adding to the relevant ones a whole &#8230;<\/li>\n<li>new layer of right click event (ie. <font color=blue>oncontextmenu<\/font> event) Javascript logic in amongst the iframe onload event function below &#8230;<br \/>\n<code><br \/>\n  function ifcheck(ziois) {<br \/>\n       var waszoom=1;<br \/>\n       var sparear=null, gsparear=null;<br \/>\n       var xif=-999, yif=-999, xxif=-999, yyif=-999;<br \/>\n       zaconto = (ziois.contentWindow || ziois.contentDocument);<br \/>\n   \/\/alert(11);<br \/>\n       zzaconto=zaconto;<br \/>\n       if (zaconto != null) {<br \/>\n   \/\/alert('111 ' + xiois.src);<br \/>\n       try {<br \/>\n       if (zaconto.document) { zaconto = zaconto.document; }<br \/>\n    \/\/alert('1111 ' + zaconto.body.innerHTML);<br \/>\n       if (zaconto.body.innerHTML.indexOf('&gt;') != -1) {<br \/>\n          zoomdone=false;<br \/>\n          lastiizoom=(ziois.src.indexOf('zoom=') != -1 ? eval(ziois.src.split('zoom=')[1].split('&')[0].split('#')[0]) : lastiizoom);<br \/>\n          var itwo='';<br \/>\n          if (document.getElementById('myp')) {<br \/>\n          itwo=('' + document.getElementById('myp').getAttribute('data-fc')).replace(\/^null\/g,'').replace(\/^undefined\/g,'').trim().toUpperCase();<br \/>\n          }<br \/>\n          if (itwo == '' && lastcode != '') { itwo=lastcode;  }<br \/>\n          if (eval('' + itwo.length) == 2 || (document.getElementById('placegeo').title + document.getElementById('placegeo').value).trim() != '') {<br \/>\n          var xlatdeg=0, xlongdeg=0;<br \/>\n          if ((document.getElementById('placegeo').title + document.getElementById('placegeo').value).indexOf(',') != -1) {<br \/>\n          xlatdeg=eval('' + (document.getElementById('placegeo').title + document.getElementById('placegeo').value).split(',')[0]);<br \/>\n          xlongdeg=eval('' + (document.getElementById('placegeo').title + document.getElementById('placegeo').value).split(',')[1]);<br \/>\n          }<br \/>\n          if (ziois.src.indexOf('refresh=') != -1 && ziois.src.indexOf('zoom=') != -1) {<br \/>\n          iizoom=lastiizoom;<br \/>\n          zaconto.getElementById('mg').onmousedown=function(){ lastiizoom=eval(2 * lastiizoom); setTimeout(parent.rifcheck, 3000); return true; };<br \/>\n          zaconto.getElementById('mg').ontouchdown=function(){ lastiizoom=eval(2 * lastiizoom); setTimeout(parent.rifcheck, 3000); return true; };<br \/>\n          setTimeout(rifcheck, 2000);<br \/>\n          \/\/alert('Where');<br \/>\n          return true;<br \/>\n          } else {<br \/>\n          iizoom=eval(eval('' + ('' + zaconto.getElementById('myimg').style.width).replace('px','')) \/ 360); \/\/eval('' + zaconto.getzoom());<br \/>\n          }<br \/>\n          xif=eval(iizoom * eval(180 + eval('' + xlongdeg)));<br \/>\n          yif=eval(iizoom * eval(90 - eval('' + xlatdeg)));<br \/>\n    \/\/alert('' + xif + ',' + yif);<br \/>\n    \/\/alert(itwo);<br \/>\n          var isp=0;<br \/>\n          var jsp=0;<br \/>\n          if (eval('' + itwo.length) == 2) {<br \/>\n            if (xif &gt;= -180 && yif &gt;= -90) {<br \/>\n            if (lastiizoom != iizoom || ziois.src.indexOf('refresh=') != -1) {<br \/>\n              var huhrect=document.getElementById('ifcountries').getBoundingClientRect();<br \/>\n              var ospancount=spancount;<br \/>\n              newone=eval(1 + spancount);<br \/>\n              while (document.getElementById('span' + isp)) {<br \/>\n                if (isp &lt; ospancount) {<br \/>\n                waszoom=document.getElementById('span' + isp).getAttribute('data-zoom');<br \/>\n                if (waszoom != iizoom) {<br \/>\n                  xlatdeg=eval('' + document.getElementById('span' + isp).getAttribute('data-geo').split(',')[0]);<br \/>\n                  xlongdeg=eval('' + document.getElementById('span' + isp).getAttribute('data-geo').split(',')[1]);<br \/>\n                  xxif=eval(iizoom * eval(180 + eval('' + xlongdeg)));<br \/>\n                  yyif=eval(iizoom * eval(90 - eval('' + xlatdeg)));<br \/>\n                  if (1 == 1) {<br \/>\n            document.getElementById('plots').innerHTML+='&lt;span id=sspan' + spancount + '&gt;&lt;span oncontextmenu=\"event.stopPropagation(); event.preventDefault(); if (isdouble == 0) { storeaway(this); }\" data-zoom=\"' + iiizoom + '\" data-iframepos=\"' + huhrect.left + ',' + huhrect.top + '\" data-geo=\"' + xlatdeg + ',' + xlongdeg + '\" title=\"' + decodeURIComponent(document.getElementById('span' + isp).title) + '\" id=span' + spancount + ' style=\"font-style:bold;text-shadow:-1px 1px 1px #ff2d95;font-size:6px;margin:0 0 0 0;padding:0 0 0 0;z-index:2134;position:fixed;top:' + eval(eval('' + huhrect.top) + yyif) + 'px;left:' + eval(eval('' + huhrect.left) + xxif) + 'px;\"&gt;x&lt;\/span&gt;&lt;\/span&gt;';<br \/>\n            nodiv(isp, spancount);<br \/>\n            spancount++;<br \/>\n            jsp++;<br \/>\n            document.getElementById('span' + isp).style.display='none';<br \/>\n                  } else {<br \/>\n                  document.getElementById('span' + isp).style.top='' + eval(eval('' + huhrect.top) + yyif) + 'px';<br \/>\n                  document.getElementById('span' + isp).style.left='' + eval(eval('' + huhrect.left) + xxif) + 'px';<br \/>\n                  document.getElementById('span' + isp).setAttribute('data-zoom', '' + iizoom);<br \/>\n                  document.getElementById('span' + isp).setAttribute('data-iframepos', '' + huhrect.left + ',' + huhrect.top);<br \/>\n                  document.getElementById('sspan' + isp).innerHTML=document.getElementById('span' + isp).outerHTML;<br \/>\n                  }<br \/>\n                }<br \/>\n                }<br \/>\n                isp++;<br \/>\n              }<br \/>\n            }<br \/>\n            spancount=eval(isp + jsp);<br \/>\n            if (jjans == jjans.replace(\/\\ \\ \\ \\ \\ $\/g,'')) {<br \/>\n            document.getElementById('plots').innerHTML+='&lt;span id=sspan' + spancount + '&gt;&lt;span oncontextmenu=\"event.stopPropagation(); event.preventDefault(); if (isdouble == 0) { storeaway(this); }\" data-zoom=\"' + iizoom + '\" data-iframepos=\"' + huhrect.left + ',' + huhrect.top + '\" data-geo=\"' + xlatdeg + ',' + xlongdeg + '\" title=\"' + decodeURIComponent(lastr) + '\" id=span' + spancount + ' style=\"font-style:bold;text-shadow:-1px 1px 1px #ff2d95;font-size:6px;margin:0 0 0 0;padding:0 0 0 0;z-index:2134;position:fixed;top:' + eval(eval('' + huhrect.top) + yif) + 'px;left:' + eval(eval('' + huhrect.left) + xif) + 'px;\"&gt;x&lt;\/span&gt;&lt;\/span&gt;';<br \/>\n            spancount++;<br \/>\n            setTimeout(nospan, 30000);<br \/>\n            }<br \/>\n            }<br \/>\n            sofararealist+=itwo + '|';<br \/>\n            var ars=zaconto.getElementsByTagName('area');<br \/>\n            for (var iars=0; iars&lt;ars.length; iars++) {<br \/>\n               while (('' + ars[iars].getAttribute('data-iso2')) == itwo || sofararealist.indexOf('|' + ('' + ars[iars].getAttribute('data-iso2')) + '|') != -1) {<br \/>\n            \/\/document.title='' + iars + ' ... ' + ('' + ars[iars].getAttribute('data-iso2'));<br \/>\n                 zaconto.getElementsByTagName('table')[0].style.top='385px';<br \/>\n                 zaconto.getElementsByTagName('table')[0].style.left='0px';<br \/>\n                 if (ars[iars].outerHTML.indexOf(' onclick=\"') != -1) {<br \/>\n                    \/\/itwo=' ';<br \/>\n                    if (('' + ars[iars].getAttribute('data-iso2')) == itwo) {<br \/>\n                    sparear=ars[iars];<br \/>\n                    \/\/document.title+=' ' + 'zzaconto.' + ars[iars].outerHTML.split(' onclick=\"')[1].split('\"')[0].trim().substring(0,220);<br \/>\n                    if (9 == 9) {<br \/>\n                    \/\/alert(11);<br \/>\n                      sparear.click();<br \/>\n                    \/\/alert(1);<br \/>\n                      <font color=blue>sparear.oncontextmenu=function(event){  event.stopPropagation();  event.preventDefault();    return parent.geojsonrightclick(event,iizoom,isdouble);   };<\/font><br \/>\n                    \/\/alert(111);<br \/>\n                      eval('zzaconto.' + ars[iars].outerHTML.split(' onclick=\"')[1].split('\"')[0].trim().replace(\/this\\.\/g,'sparear.').replace(\/this\\,\/g,'sparear,'));<br \/>\n                    } else {<br \/>\n                      eval('zzaconto.' + ars[iars].outerHTML.split(' onclick=\"')[1].split('\"')[0].trim().replace(\/this\\.\/g,'sparear.').replace(\/this\\,\/g,'sparear,'));<br \/>\n                    }<br \/>\n                    } else {<br \/>\n                    gsparear=ars[iars];<br \/>\n                    \/\/document.title+=' ' + 'zzaconto.' + ars[iars].outerHTML.split(' onclick=\"')[1].split('\"')[0].trim().substring(0,220);<br \/>\n                    if (9 == 9) {<br \/>\n                    \/\/alert(911);<br \/>\n                      gsparear.click();<br \/>\n                    \/\/alert(91);<br \/>\n                      <font color=blue>gsparear.oncontextmenu=function(event){  event.stopPropagation();  event.preventDefault();    return parent.geojsonrightclick(event,iizoom,isdouble);   };<\/font><br \/>\n                    \/\/alert(9111);<br \/>\n                      eval('zzaconto.' + ars[iars].outerHTML.split(' onclick=\"')[1].split('\"')[0].trim().replace(\/this\\.\/g,'gsparear.').replace(\/this\\,\/g,'gsparear,'));<br \/>\n                    } else {<br \/>\n                      eval('zzaconto.' + ars[iars].outerHTML.split(' onclick=\"')[1].split('\"')[0].trim().replace(\/this\\.\/g,'gsparear.').replace(\/this\\,\/g,'gsparear,'));<br \/>\n                    }<br \/>\n                    }<br \/>\n                 }<br \/>\n                 iars++;<br \/>\n                 \/\/itwo='';<br \/>\n               }<br \/>\n               if (sparear) { itwo='';  }<br \/>\n            }<br \/>\n          }<br \/>\n          jjans=jjans.replace(\/\\ \\ \\ \\ \\ $\/g,'');<br \/>\n          if (!zoomdone) {<br \/>\n          lastiizoom=iizoom;<br \/>\n          zaconto.getElementById('mg').onmousedown=function(){ setTimeout(parent.rifcheck, 3000); return true; };<br \/>\n          zaconto.getElementById('mg').ontouchdown=function(){ setTimeout(parent.rifcheck, 3000); return true; };<br \/>\n          } else {<br \/>\n          if (ziois.src.indexOf('refresh=') != -1) {<br \/>\n          lastiizoom=iizoom;<br \/>\n          zaconto.getElementById('mg').onmousedown=function(){ setTimeout(parent.rifcheck, 3000); return true; };<br \/>\n          zaconto.getElementById('mg').ontouchdown=function(){ setTimeout(parent.rifcheck, 3000); return true; };<br \/>\n          }<br \/>\n          lastiizoom=sein(iizoom);<br \/>\n          }<br \/>\n          if (itwo == '') {<br \/>\n zaconto.getElementsByTagName('canvas')[0].dispatchEvent(new Event(\"click\", {<br \/>\n  bubbles: true, \/\/ only bubbles and cancelable<br \/>\n  cancelable: true, \/\/ work in the Event constructor<br \/>\n  clientX: xif,<br \/>\n  clientY: yif<br \/>\n }));<br \/>\nif (1 == 2) {<br \/>\nif (zaconto.elementsFromPoint) {<br \/>\n  var elements = zaconto.elementsFromPoint(xif, yif);<br \/>\n  elements.forEach((elt, i) =&gt; {<br \/>\n    if (i &lt; elements.length - 1) {<br \/>\n zaconto.body.dispatchEvent(new Event(\"click\", {<br \/>\n  bubbles: true, \/\/ only bubbles and cancelable<br \/>\n  cancelable: true, \/\/ work in the Event constructor<br \/>\n  clientX: xif,<br \/>\n  clientY: yif<br \/>\n }));<br \/>\n    }<br \/>\n  });<br \/>\n} else {<br \/>\n          zaconto.elementFromPoint(xif, yif).click();<br \/>\n}<br \/>\n}<br \/>\n       }<br \/>\n          }<br \/>\n       }<br \/>\n       } catch(hgjgs) {  }<br \/>\n       }<br \/>\n       jjans=jjans.replace(\/\\ \\ \\ \\ \\ $\/g,'');<br \/>\n       return true;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function geojsonrightclick(ev,iiz,isd) {<br \/>\n       pos3=-999;<br \/>\n       pos4=-999;<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          if (pos3 &gt;= 0 && pos4 &gt;= 0) {<br \/>\n          if (iiz < lastiizoom) { iiz=lastiizoom; }\n          xlatdeg=eval(90 - eval(eval('' + pos4) \/ iiz));\n          xlongdeg=eval(-180 + eval(eval('' + pos3) \/ iiz));\n            var huhrect=document.getElementById('ifcountries').getBoundingClientRect();\n     \/\/alert(' ... second yay! ' + lastiizoom + ' vs ' + iiz + ' ' + ev.clientX + ',' + ev.clientY);\n            if (isdouble == 0) {\n            document.getElementById('plots').innerHTML+='&lt;span id=sspan' + spancount + '&gt;&lt;span oncontextmenu=\"event.stopPropagation(); event.preventDefault(); if (isdouble == 0) { storeaway(this); }\" data-zoom=\"' + iiz + '\" data-iframepos=\"' + huhrect.left + ',' + huhrect.top + '\" data-geo=\"' + xlatdeg + ',' + xlongdeg + '\" title=\"Right Click at ' + xlatdeg + ',' + xlongdeg + '\" id=span' + spancount + ' style=\"font-style:bold;text-shadow:-1px 1px 1px #ff2d95;font-size:6px;margin:0 0 0 0;padding:0 0 0 0;z-index:2134;position:fixed;top:' + eval(eval('' + huhrect.top) + pos4) + 'px;left:' + eval(eval('' + huhrect.left) + pos3) + 'px;\"&gt;&amp;#10067;&lt;\/span&gt;&lt;\/span&gt;';\n            storeaway(document.getElementById('span' + spancount));\n            spancount++;\n            setTimeout(nospan, 30000);\n            isdouble=1;\n            \/\/nolineplease=true;\n            blk='hidden';\n            setTimeout(isdf, 3000);\n            \/\/alert('Nolineplease');\n            } else {\n            blk='hidden';\n            nolineplease=true;\n            \/\/alert('nolineplease');\n            }\n          }\n     return false; \/\/' ... second yay! ' + lastiizoom + ' vs ' + iiz + ' ' + e.clientX + ',' + e.clientY;\n  }\n<\/code><br \/>\n ...\n<\/li>\n<li>within any programmatically shaded country area (and underlying div and SVG) elements representing the chosen country of interest from the Region Picker parent, and where the user chooses rather than where it is chosen for them\n<\/ul>\n<p>? And don't you find interesting with all this additional functionality, we've not touched the GeoJson World Map web application <font size=1>(being hosted in the Regional Picker iframe all this time)<\/font>, at all?!  We also enjoy not needing to change every component, when trying to achieve new functionality.<\/p>\n<p>And while we're into \"and\", it passes notice, especially with this work, how this is only a straightforward  approach because of the good old <a target=_blank title='Mercator projection information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Mercator_projection'>Mercator<\/a> projection used here, that many primary school kids get familiar with regarding wall maps.  A pixel is worth a Mercator projection degree, when \"unzoomed\", and that the top left corner is 90 degrees latitude and -180 longitude.  The implication is that areas near the poles are vastly bigger looking than they are (regarding surface area) in reality.  Many other projections would involve quite complex mathematics.   Phewwww!<\/p>\n<p>Today, further to yesterday's <a title='Region Picker GeoJson Trip Leg Tutorial' href='#rpgjtlt'>Region Picker GeoJson Trip Leg Tutorial<\/a>, we worried a lot about the \"zoom\" button &#128269;.  We encourage users who use the \"J\" inhouse menu option with \"Yes Trip Planning\" to click the \"zoom\" button as many times as they need to before any Trip Legs are defined via right click actions (within shaded countries).  You can involve multiple countries, too, where \"marker\" inhouse options are presented.<\/p>\n<p>We also allowed for Trip Leg visibility toggling <font size=1>(after the event)<\/font> via double click, on a leg, functionality in <a target=_blank 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 href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html------------------GETME\">latest draft<\/a> <a target=_blank 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-region-picker-geojson-trip-leg-tutorial\/'>New Region Picker GeoJson Trip Leg Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rpgjtlt'>Previous relevant <a target=_blank title='Region Picker GeoJson Trip Leg Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geojson-trip-leg-tutorial\/'>Region Picker GeoJson Trip Leg Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker GeoJson Trip Leg Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/region_picker_geojson_trip_planner_leg.gif\" title=\"Region Picker GeoJson Trip Leg Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker GeoJson Trip Leg Tutorial<\/p><\/div>\n<p>Nice legs!  Regarding the trips, of course.   Trip planning?   GeoJson?   Region Picker?<\/p>\n<p>Yes, yesterday's <a title='Region Picker GeoJson Trip Planning Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geojson-trip-planning-tutorial\/'>Region Picker GeoJson Trip Planning Tutorial<\/a>'s progress had us starting to allow for a Trip Planner subset of functionality for our Google Image Chart Map Chart interfacing Region Picker.   Our first job to do moving forward is to allow between ...<\/p>\n<ul>\n<li>Region Picker region representative geographical \"marker\" placements on the ...<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.html\" title=\"GeoJson World Map\">interfacing<\/a> <a target=_blank title='GeoJson information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/GeoJSON'>GeoJson<\/a> world map ...<\/li>\n<li>be able to be right clicked to flag sets of two such right clicks defining endpoints for a Trip \"Leg\" drawn as a straight line with huge thanks to ...<br \/>\n&lt;style&gt;<br \/>\n<code><br \/>\n.crossedtotl { \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css' href='https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css'>https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<\/a><br \/>\n     background:<br \/>\n         linear-gradient(to top left,<br \/>\n             rgba(0,0,0,0) 0%,<br \/>\n             rgba(0,0,0,0) calc(50% - 0.8px),<br \/>\n             rgba(0,0,0,1) 50%,<br \/>\n             rgba(0,0,0,0) calc(50% + 0.8px),<br \/>\n             rgba(0,0,0,0) 100%);<br \/>\n}<br \/>\n<br \/>\n.crossedtotr {<br \/>\n     background:<br \/>\n         linear-gradient(to top right,<br \/>\n             rgba(0,0,0,0) 0%,<br \/>\n             rgba(0,0,0,0) calc(50% - 0.8px),<br \/>\n             rgba(0,0,0,1) 50%,<br \/>\n             rgba(0,0,0,0) calc(50% + 0.8px),<br \/>\n             rgba(0,0,0,0) 100%);<br \/>\n}<br \/>\n<\/code><br \/>\n&lt;\/style&gt;<br \/>\n ... and from there be able to ...<\/li>\n<li>hover over a leg to see bearing and distance information ... as well as to ...<\/li>\n<li>click a leg to show a <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> webpage<\/li>\n<\/ul>\n<p> ... via ...<\/p>\n<p><code><br \/>\nfunction great_circle_bearing(talis, gnolis, latis, longis) {<br \/>\n    \/\/ Let \u2018R\u2019 be the radius of Earth,<br \/>\n    \/\/ \u2018L\u2019 be the longitude,<br \/>\n    \/\/ \u2018\u03b8\u2019 be latitude,<br \/>\n    \/\/ \u2018\u03b2\u2018 be Bearing.<br \/>\n<br \/>\n \/\/ Bearing from point A to B, can be calculated as,<br \/>\n \/\/ \u03b2 = atan2(X,Y),<br \/>\n \/\/ where, X and Y are two quantities and can be calculated as:<br \/>\n \/\/ X = cos \u03b8b * sin \u2206L<br \/>\n \/\/ Y = cos \u03b8a * sin \u03b8b \u2013 sin \u03b8a * cos \u03b8b * cos \u2206L<br \/>\n<br \/>\n       var ourbrg=eval(eval(360.0 + eval(eval(eval(180.0 \/ Math.PI) * Math.atan2(<br \/>\n       eval(eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + latis))) *<br \/>\n       eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval(eval('' + longis) - eval('' + gnolis))))),<br \/>\n       eval(eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + talis))) *<br \/>\n       eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval('' + latis)))) -<br \/>\n       eval(eval('' + Math.sin(eval(Math.PI \/ 180.0) * eval('' + talis))) *<br \/>\n       eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval('' + latis))) *<br \/>\n       eval('' + Math.cos(eval(Math.PI \/ 180.0) * eval(eval('' + longis) - eval('' + gnolis)))))<br \/>\n       )))) % 360.0);<br \/>\n<br \/>\n       return '' + ourbrg;<br \/>\n}<br \/>\n<br \/>\nfunction great_circle_distance(talis, gnolis, latis, longis) {<br \/>\n  var ourdist=0.0;<br \/>\n  var rgnol=eval((gnolis) * Math.PI \/ 180.0);<br \/>\n  var rtal=eval((talis) * Math.PI \/ 180.0);<br \/>\n  var rlong=eval((longis) * Math.PI \/ 180.0);<br \/>\n  var rlat=eval((latis) * Math.PI \/ 180.0);<br \/>\n  var deltalong = Math.abs(eval(((gnolis)-(longis)) * Math.PI \/ 180.0));<br \/>\n  var acof = eval(Math.sin(rtal) * Math.sin(rlat)) + (Math.cos(rtal) * Math.cos(rlat) * Math.cos(deltalong)); \/\/ via \/\/en.wikipedia.org\/wiki\/Great-circle_distance ... thanks<br \/>\n  ourdist = eval(Math.round((Math.acos(acof) * 6371000.0) + 0.00001) * 100) \/ 100;<br \/>\n  return '' + ourdist;<br \/>\n}<br \/>\n<br \/>\n  function storeaway(thisspano) {<br \/>\n    var lastspanoid=null;<br \/>\n    if (lastspano) { lastspanoid='' + lastspano.id;  }<br \/>\n    if (('' + thisspano.id).indexOf('sspan') == 0) { thisspano=document.getElementById(('' + thisspano.id).replace('sspan','span'));  }<br \/>\n    if (('' + lastspanoid) != ('' + thisspano.id) && ('' + thisspano.id).indexOf('span') == 0) {<br \/>\n       spanos.push(thisspano);<br \/>\n       lastspano=thisspano;<br \/>\n       thisspano.style.color='green';<br \/>\n       thisspano.innerHTML='&amp;#10060;';<br \/>\n       if (eval('' + spanos.length) &gt; 1) {<br \/>\n         drawlinebetween(spanos[eval(-2 + spanos.length)], spanos[eval(-1 + spanos.length)]);<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  function drawlinebetween(spanoone, spanotwo) {<br \/>\n        var xneeds=[], yneeds=[], classbit='';<br \/>\n        if (('' + spanoone.id).indexOf('sspan') == 0) { spanoone=document.getElementById(('' + spanoone.id).replace('sspan','span'));  }<br \/>\n        if (('' + spanotwo.id).indexOf('sspan') == 0) { spanotwo=document.getElementById(('' + spanotwo.id).replace('sspan','span'));  }<br \/>\n        if (('' + spanoone.id).indexOf('span') == 0 && ('' + spanotwo.id).indexOf('span') == 0) {<br \/>\n        xneeds.push(eval('' + ('' + spanoone.style.left).replace('px','')));<br \/>\n        yneeds.push(eval('' + ('' + spanoone.style.top).replace('px','')));<br \/>\n        xneeds.push(eval('' + ('' + spanotwo.style.left).replace('px','')));<br \/>\n        yneeds.push(eval('' + ('' + spanotwo.style.top).replace('px','')));<br \/>\n        if (Math.min(xneeds[0],xneeds[1]) == xneeds[0] && Math.min(yneeds[0],yneeds[1]) == yneeds[1]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else if (Math.min(xneeds[0],xneeds[1]) == xneeds[1] && Math.min(yneeds[0],yneeds[1]) == yneeds[0]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else {<br \/>\n        classbit=' class=\"crossedtotr\" ';<br \/>\n        }<br \/>\n        spanoone.innerHTML='&amp;#10060;';<br \/>\n        spanotwo.innerHTML='&amp;#10060;';<br \/>\n        document.getElementById('plots').innerHTML+='&lt;div onclick=\"window.open(' + \"'\/\/www.google.com\/maps\/dir\/\" + spanoone.getAttribute('data-geo') + \"\/\" + spanotwo.getAttribute('data-geo') + \"','_blank','left=20,top=20,width=900,height=800'\" + ');\" title=\"Leg from ' + spanoone.title + ' to ' + spanotwo.title + ' heads off at ' + great_circle_bearing(spanoone.getAttribute('data-geo').split(',')[0], spanoone.getAttribute('data-geo').split(',')[1], spanotwo.getAttribute('data-geo').split(',')[0], spanotwo.getAttribute('data-geo').split(',')[1]) + ' degrees for ' + eval(eval('' + great_circle_distance(spanoone.getAttribute('data-geo').split(',')[0], spanoone.getAttribute('data-geo').split(',')[1], spanotwo.getAttribute('data-geo').split(',')[0], spanotwo.getAttribute('data-geo').split(',')[1])) \/ 1000.0) + ' kilometers ... click for Google Directions\" id=line_' + spanoone.id.split('span')[1] + '_' + spanotwo.id.split('span')[1] + ' ' + classbit + ' style=\"margin:0 0 0 0;padding:0 0 0 0;position:fixed;left:' + Math.min(xneeds[0],xneeds[1]) + 'px;top:' + Math.min(yneeds[0],yneeds[1]) + 'px;width:' + Math.abs(xneeds[0] - xneeds[1]) + 'px;height:' + Math.abs(yneeds[0] - yneeds[1]) + 'px;\"&gt;&lt;\/div&gt;';<br \/>\n        }<br \/>\n  }<br \/>\n<br \/>\n  function ifcheck(ziois) {<br \/>\n       var waszoom=1;<br \/>\n       var sparear=null;<br \/>\n       var xif=-999, yif=-999, xxif=-999, yyif=-999;<br \/>\n       zaconto = (ziois.contentWindow || ziois.contentDocument);<br \/>\n   \/\/alert(11);<br \/>\n       zzaconto=zaconto;<br \/>\n       if (zaconto != null) {<br \/>\n   \/\/alert('111 ' + xiois.src);<br \/>\n       try {<br \/>\n       if (zaconto.document) { zaconto = zaconto.document; }<br \/>\n    \/\/alert('1111 ' + zaconto.body.innerHTML);<br \/>\n       if (zaconto.body.innerHTML.indexOf('&gt;') != -1) {<br \/>\n          zoomdone=false;<br \/>\n          lastiizoom=0;<br \/>\n          var itwo='';<br \/>\n          if (document.getElementById('myp')) {<br \/>\n          itwo=('' + document.getElementById('myp').getAttribute('data-fc')).replace(\/^null\/g,'').replace(\/^undefined\/g,'').trim().toUpperCase();<br \/>\n          }<br \/>\n          if (itwo == '' && lastcode != '') { itwo=lastcode;  }<br \/>\n          if (eval('' + itwo.length) == 2 || (document.getElementById('placegeo').title + document.getElementById('placegeo').value).trim() != '') {<br \/>\n          var xlatdeg=0, xlongdeg=0;<br \/>\n          if ((document.getElementById('placegeo').title + document.getElementById('placegeo').value).indexOf(',') != -1) {<br \/>\n          xlatdeg=eval('' + (document.getElementById('placegeo').title + document.getElementById('placegeo').value).split(',')[0]);<br \/>\n          xlongdeg=eval('' + (document.getElementById('placegeo').title + document.getElementById('placegeo').value).split(',')[1]);<br \/>\n          }<br \/>\n          iizoom=eval(eval('' + ('' + zaconto.getElementById('myimg').style.width).replace('px','')) \/ 360); \/\/eval('' + zaconto.getzoom());<br \/>\n          xif=eval(iizoom * eval(180 + eval('' + xlongdeg)));<br \/>\n          yif=eval(iizoom * eval(90 - eval('' + xlatdeg)));<br \/>\n          \/\/alert('' + xif + ',' + yif);<br \/>\n          \/\/alert(itwo);<br \/>\n          var isp=0;<br \/>\n          var jsp=0;<br \/>\n          if (eval('' + itwo.length) == 2) {<br \/>\n            if (xif &gt;= -180 && yif &gt;= -90) {<br \/>\n            if (lastiizoom != iizoom) {<br \/>\n              var huhrect=document.getElementById('ifcountries').getBoundingClientRect();<br \/>\n              var ospancount=spancount;<br \/>\n              newone=eval(1 + spancount);<br \/>\n              while (document.getElementById('span' + isp)) {<br \/>\n                if (isp &lt; ospancount) {<br \/>\n                waszoom=document.getElementById('span' + isp).getAttribute('data-zoom');<br \/>\n                if (waszoom != iizoom) {<br \/>\n                  xlatdeg=eval('' + document.getElementById('span' + isp).getAttribute('data-geo').split(',')[0]);<br \/>\n                  xlongdeg=eval('' + document.getElementById('span' + isp).getAttribute('data-geo').split(',')[1]);<br \/>\n                  xxif=eval(iizoom * eval(180 + eval('' + xlongdeg)));<br \/>\n                  yyif=eval(iizoom * eval(90 - eval('' + xlatdeg)));<br \/>\n                  if (1 == 1) {<br \/>\n            document.getElementById('plots').innerHTML+='&lt;span id=sspan' + spancount + '&gt;&lt;span oncontextmenu=\"event.stopPropagation(); event.preventDefault(); storeaway(this);\" data-zoom=\"' + iiizoom + '\" data-iframepos=\"' + huhrect.left + ',' + huhrect.top + '\" data-geo=\"' + xlatdeg + ',' + xlongdeg + '\" title=\"' + decodeURIComponent(document.getElementById('span' + isp).title) + '\" id=span' + spancount + ' style=\"font-style:bold;text-shadow:-1px 1px 1px #ff2d95;font-size:6px;margin:0 0 0 0;padding:0 0 0 0;z-index:2134;position:fixed;top:' + eval(eval('' + huhrect.top) + yyif) + 'px;left:' + eval(eval('' + huhrect.left) + xxif) + 'px;\"&gt;x&lt;\/span&gt;&lt;\/span&gt;';<br \/>\n            nodiv(isp, spancount);<br \/>\n            spancount++;<br \/>\n            jsp++;<br \/>\n            document.getElementById('span' + isp).style.display='none';<br \/>\n                  } else {<br \/>\n                  document.getElementById('span' + isp).style.top='' + eval(eval('' + huhrect.top) + yyif) + 'px';<br \/>\n                  document.getElementById('span' + isp).style.left='' + eval(eval('' + huhrect.left) + xxif) + 'px';<br \/>\n                  document.getElementById('span' + isp).setAttribute('data-zoom', '' + iizoom);<br \/>\n                  document.getElementById('span' + isp).setAttribute('data-iframepos', '' + huhrect.left + ',' + huhrect.top);<br \/>\n                  document.getElementById('sspan' + isp).innerHTML=document.getElementById('span' + isp).outerHTML;<br \/>\n                  }<br \/>\n                }<br \/>\n                }<br \/>\n                isp++;<br \/>\n              }<br \/>\n            }<br \/>\n            spancount=eval(isp + jsp);<br \/>\n            if (jjans == jjans.replace(\/\\ \\ \\ \\ \\ $\/g,'')) {<br \/>\n            document.getElementById('plots').innerHTML+='&lt;span id=sspan' + spancount + '&gt;&lt;span oncontextmenu=\"event.stopPropagation(); event.preventDefault(); storeaway(this);\" data-zoom=\"' + iizoom + '\" data-iframepos=\"' + huhrect.left + ',' + huhrect.top + '\" data-geo=\"' + xlatdeg + ',' + xlongdeg + '\" title=\"' + decodeURIComponent(lastr) + '\" id=span' + spancount + ' style=\"font-style:bold;text-shadow:-1px 1px 1px #ff2d95;font-size:6px;margin:0 0 0 0;padding:0 0 0 0;z-index:2134;position:fixed;top:' + eval(eval('' + huhrect.top) + yif) + 'px;left:' + eval(eval('' + huhrect.left) + xif) + 'px;\"&gt;x&lt;\/span&gt;&lt;\/span&gt;';<br \/>\n            spancount++;<br \/>\n            setTimeout(nospan, 30000);<br \/>\n            }<br \/>\n            }<br \/>\n            var ars=zaconto.getElementsByTagName('area');<br \/>\n            for (var iars=0; iars&lt;ars.length; iars++) {<br \/>\n               while (('' + ars[iars].getAttribute('data-iso2')) == itwo) {<br \/>\n            \/\/document.title='' + iars + ' ... ' + ('' + ars[iars].getAttribute('data-iso2'));<br \/>\n                 zaconto.getElementsByTagName('table')[0].style.top='385px';<br \/>\n                 zaconto.getElementsByTagName('table')[0].style.left='0px';<br \/>\n                 if (ars[iars].outerHTML.indexOf(' onclick=\"') != -1) {<br \/>\n                    \/\/itwo=' ';<br \/>\n                    sparear=ars[iars];<br \/>\n                    document.title+=' ' + 'zzaconto.' + ars[iars].outerHTML.split(' onclick=\"')[1].split('\"')[0].trim().substring(0,220);<br \/>\n                    if (9 == 9) {<br \/>\n                      sparear.click();<br \/>\n                      eval('zzaconto.' + ars[iars].outerHTML.split(' onclick=\"')[1].split('\"')[0].trim().replace(\/this\\.\/g,'sparear.').replace(\/this\\,\/g,'sparear,'));<br \/>\n                    } else {<br \/>\n                      eval('zzaconto.' + ars[iars].outerHTML.split(' onclick=\"')[1].split('\"')[0].trim().replace(\/this\\.\/g,'sparear.').replace(\/this\\,\/g,'sparear,'));<br \/>\n                    }<br \/>\n                 }<br \/>\n                 iars++;<br \/>\n                 \/\/itwo='';<br \/>\n               }<br \/>\n               if (sparear) { itwo='';  }<br \/>\n            }<br \/>\n<br \/> <br \/>\n          }<br \/>\n          jjans=jjans.replace(\/\\ \\ \\ \\ \\ $\/g,'');<br \/>\n          if (!zoomdone) {<br \/>\n          lastiizoom=iizoom;<br \/>\n          zaconto.getElementById('mg').onmousedown=function(){ setTimeout(parent.rifcheck, 3000); return true; };<br \/>\n          zaconto.getElementById('mg').ontouchdown=function(){ setTimeout(parent.rifcheck, 3000); return true; };<br \/>\n          } else {<br \/>\n          lastiizoom=sein(iizoom);<br \/>\n          }<br \/>\n          if (itwo == '') {<br \/>\n zaconto.getElementsByTagName('canvas')[0].dispatchEvent(new Event(\"click\", {<br \/>\n  bubbles: true, \/\/ only bubbles and cancelable<br \/>\n  cancelable: true, \/\/ work in the Event constructor<br \/>\n  clientX: xif,<br \/>\n  clientY: yif<br \/>\n }));<br \/>\nif (1 == 2) {<br \/>\nif (zaconto.elementsFromPoint) {<br \/>\n  var elements = zaconto.elementsFromPoint(xif, yif);<br \/>\n  elements.forEach((elt, i) =&gt; {<br \/>\n    if (i &lt; elements.length - 1) {<br \/>\n zaconto.body.dispatchEvent(new Event(\"click\", {<br \/>\n  bubbles: true, \/\/ only bubbles and cancelable<br \/>\n  cancelable: true, \/\/ work in the Event constructor<br \/>\n  clientX: xif,<br \/>\n  clientY: yif<br \/>\n }));<br \/>\n    }<br \/>\n  });<br \/>\n} else {<br \/>\n          zaconto.elementFromPoint(xif, yif).click();<br \/>\n}<br \/>\n}<br \/>\n       }<br \/>\n          }<br \/>\n       }<br \/>\n       } catch(hgjgs) {  }<br \/>\n       }<br \/>\n       jjans=jjans.replace(\/\\ \\ \\ \\ \\ $\/g,'');<br \/>\n       return true;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function nodiv(wasid, newid) {<br \/>\n      var divsoarr=document.getElementsByTagName('div');<br \/>\n      for (var idivs=0; idivs&lt;divsoarr.length; idivs++) {<br \/>\n        if (('' + divsoarr[idivs].id).indexOf('line_' + wasid + '_') == 0) {<br \/>\n           divsoarr[idivs].style.display='none';<br \/>\n           spanos.push(document.getElementById('span' + newid));<br \/>\n        \/\/alert('here ' + wasid + ' ' + spanos.length + ' ' + newone);<br \/>\n           if (eval('' + spanos.length) &gt; newone) {<br \/>\n        \/\/alert('here2');<br \/>\n             drawlinebetween(spanos[eval(-2 + spanos.length)], spanos[eval(-1 + spanos.length)]);<br \/>\n           }<br \/>\n        } else if (('' + divsoarr[idivs].id).indexOf('line_') == 0 && ('' + divsoarr[idivs].id + '~').indexOf('_' + wasid + '~') != -1) {<br \/>\n           divsoarr[idivs].style.display='none';<br \/>\n           spanos.push(document.getElementById('span' + newid));<br \/>\n        \/\/alert('there ' + wasid + ' ' + spanos.length + ' ' + newone);<br \/>\n           if (eval('' + spanos.length) &gt; newone) {<br \/>\n        \/\/alert('there2');<br \/>\n             drawlinebetween(spanos[eval(-2 + spanos.length)], spanos[eval(-1 + spanos.length)]);<br \/>\n           }<br \/>\n        }<br \/>\n      }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> ... for <a target=_blank 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 href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-----------------GETME\">latest draft<\/a> <a target=_blank 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\/region-picker-geojson-trip-leg-tutorial\/'>Region Picker GeoJson Trip Leg Tutorial<\/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='#d62502' onclick='var dv=document.getElementById(\"d62502\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/bearing\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62502' 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='#d62512' onclick='var dv=document.getElementById(\"d62512\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/oncontextmenu\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62512' 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='#d62537' onclick='var dv=document.getElementById(\"d62537\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ondblclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62537' 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='#d62540' onclick='var dv=document.getElementById(\"d62540\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62540' 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='#d62548' onclick='var dv=document.getElementById(\"d62548\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/background-position\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62548' 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='#d62563' onclick='var dv=document.getElementById(\"d62563\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/static\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62563' 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='#d62580' onclick='var dv=document.getElementById(\"d62580\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/flag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62580' 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='#d62590' onclick='var dv=document.getElementById(\"d62590\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62590' 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='#d62598' onclick='var dv=document.getElementById(\"d62598\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/translation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62598' 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='#d62608' onclick='var dv=document.getElementById(\"d62608\"); 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='d62608' 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='#d62659' onclick='var dv=document.getElementById(\"d62659\"); 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='d62659' 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='#d64019' onclick='var dv=document.getElementById(\"d64019\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/marker\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64019' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re starting down the long and windy road, further to the recent Region Picker GeoJson Area of Interest Tutorial, of providing &#8220;workaround Google Chart Geo Chart solutions to semi-cover the loss (because nothing will be quite as good, as far &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geochart-region-wikipedia-representations-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":[2914,2915,51,2824,1669,88,1885,112,126,2471,1970,1703,174,184,188,208,211,212,4286,4658,224,4506,227,230,257,2105,2246,2081,2247,281,290,2084,4655,2147,2310,327,1727,2848,354,359,367,1683,2447,1549,385,3192,1929,400,4295,3330,2242,3453,452,1550,1619,482,4198,485,486,4206,518,2969,524,532,541,2229,557,573,1608,576,587,590,4562,599,3101,1525,2469,1752,614,620,3266,4635,4642,652,673,1560,3272,2795,1992,3656,1807,707,2169,3862,4659,748,1943,2371,4638,752,770,772,795,830,2010,2921,860,861,3987,1666,870,2219,875,876,894,932,4616,1918,4656,967,968,970,997,4276,1761,2232,4649,4648,4674,4471,1620,4643,4657,3178,1997,1059,1063,1069,1094,1866,3097,1126,4653,4640,3721,1198,2311,1226,1254,1675,1693,1292,1294,1300,1301,1311,1694,1319,1339,1345,1350,1356,4654,2450,1404,4673,1431,1433,3171,2811,1496,1498],"class_list":["post-64019","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-_get","tag-_post","tag-above-the-fold","tag-absolute","tag-address-bar","tag-api","tag-argument","tag-attribute","tag-background","tag-background-position","tag-bearing","tag-breadcrumbs","tag-button","tag-canvas","tag-cartography","tag-circle","tag-click","tag-client","tag-clientside","tag-clip-path","tag-colour","tag-colour-code","tag-colour-matching-2","tag-column","tag-content","tag-context","tag-continent","tag-country","tag-country-code","tag-css","tag-data","tag-data-attributes","tag-degree","tag-delimiter","tag-details","tag-did-you-know","tag-distance","tag-document-getelementsbytagname","tag-dom","tag-double-click","tag-dropdown","tag-dynamic","tag-earth","tag-element","tag-emoji","tag-emoji-flag","tag-error","tag-event","tag-event-stoppropagation","tag-fill","tag-flag","tag-font-size","tag-form","tag-gd","tag-geo-chart","tag-geography","tag-geojson","tag-gesture","tag-getelementbyid","tag-global-data-attributes","tag-google-chart","tag-google-directions","tag-google-earth","tag-google-translate","tag-graphics","tag-hash","tag-hashtag","tag-hotkey","tag-hover","tag-html","tag-iframe","tag-image","tag-image-chart","tag-img","tag-inhouse","tag-innerhtml","tag-innertext","tag-inode","tag-integration","tag-internationalization","tag-iso-code","tag-iso-country-code","tag-iso-3166","tag-javascript","tag-keyboard","tag-language","tag-left","tag-leg","tag-legend","tag-length","tag-link","tag-linux","tag-location-hash","tag-lookup","tag-magnify","tag-mapping","tag-margin-left","tag-margin-top","tag-marker","tag-mathematics","tag-menu","tag-mercator","tag-mobile","tag-navigation","tag-object-oriented-programming","tag-offset","tag-onblur","tag-onclick","tag-oncontextmenu","tag-ondblclick","tag-onload","tag-onmousemove","tag-oop","tag-opacity","tag-overlay","tag-php","tag-picker","tag-pixel","tag-pole","tag-popup","tag-popup-window","tag-post","tag-programming","tag-projection","tag-prompt","tag-property","tag-pulldown","tag-pulldown-menu","tag-realia","tag-reality","tag-region","tag-regional","tag-regional-indicator","tag-representation","tag-request","tag-resize","tag-reveal","tag-right-click","tag-scale","tag-select","tag-setattribute","tag-settimeout","tag-shade","tag-shading","tag-static","tag-sticky","tag-summary","tag-svg","tag-text","tag-textbox","tag-timezone","tag-top","tag-touch","tag-translate","tag-translation","tag-trip","tag-trip-planner","tag-tutorial","tag-unix","tag-url","tag-user-experience","tag-ux","tag-vertical-bar","tag-view","tag-web-browser","tag-who-framed-roger-rabbit","tag-wikipedia","tag-window-open","tag-workflow","tag-world","tag-z-index","tag-zoom"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64019"}],"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=64019"}],"version-history":[{"count":19,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64019\/revisions"}],"predecessor-version":[{"id":64043,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64019\/revisions\/64043"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=64019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=64019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=64019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}