{"id":62254,"date":"2024-01-13T03:01:53","date_gmt":"2024-01-12T17:01:53","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=62254"},"modified":"2024-01-13T18:52:37","modified_gmt":"2024-01-13T08:52:37","slug":"region-picker-geo-chart-integration-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geo-chart-integration-tutorial\/","title":{"rendered":"Region Picker Geo Chart Integration 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 Geo Chart Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart_region_picker.gif\" title=\"Region Picker Geo Chart Integration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Geo Chart Integration Tutorial<\/p><\/div>\n<p>We&#8217;re tickled pink with our integration of yesterday&#8217;s <a title='Region Picker Primer Tutorial' href='#rppt'>Region Picker Primer Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>Region Picker web application &#8230; into &#8230;<\/li>\n<li><a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> interfacer<\/li>\n<\/ul>\n<p> &#8230; in that we&#8217;ve done better than the natural Geo Chart navigation without the Region Picker, which navigates to a new URL slapped onto the same web browser tab.  With our integration we have &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> interfacer parent &#8220;base layer&#8221; (with as little as one prompt window required) &#8230; and if called upon &#8220;above this&#8221; &#8230;<\/li>\n<li>Region Picker web application nested in an &#8220;overlay iframe&#8221; <font size=1>(with large CSS z-index value covering the whole screen)<\/font> &#8230; asks (for as little as) one more verifying prompt window question &#8230; and that same tab window content becomes the final &#8230;<\/li>\n<li><a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> interfacer result web page<\/li>\n<\/ul>\n<p>And seeing the country regional codes in play, the possibilities mount up here!  The user just includes &#8230;<\/p>\n<blockquote><p>\n&#038;regionpicker\n<\/p><\/blockquote>\n<p> &#8230; in a prompt window answer to start using Region Pickers in their user inputs.<\/p>\n<p>Codewise we needed &#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\">to change<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html-GETME\">&#8220;second draft&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">Region Picker<\/a> &#8230; might ask that one verifying prompt window in &#8230;<br \/>\n<code><br \/>\nfunction gcdomc() {<br \/>\n  var clauses='', popularity='Popularity', extras='';<br \/>\n  \/\/ &lt;img data-onload=\"canvit(this);\" onclick=\"if (atstart) { normalcall=false; ask(null);  normalcall=true; atstart=false; } else { ask(event); }\" title=\"Google Chart Image Chart \" +=\"\" cname=\"\" '=\"\" image=\"\" ...=\"\" to=\"\" modify,=\"\" please=\"\" click'=\"\" id=\"myvenn\" width=\"455\" height=\"350\" data-style=\"display:block;width:455px;height:743px;background:url(\/\/www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&amp;chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&amp;ufr=_4179574);background-size:cover;\" src=\"\/\/www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&amp;chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&amp;chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&amp;ufr=_4179574\" usemap=\"#mymap\"&gt;<br \/>\n  \/\/var x=prompt('www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274', 'www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274');<br \/>\nif (document.getElementById('mychchart')) {<br \/>\n  document.getElementById('mychchart').style.backgroundColor='orange';<br \/>\n  jccol='orange';<br \/>\n}<br \/>\n        if (gwl == '' && document.URL.indexOf('?') != -1) {<br \/>\n           gwl='\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?' + document.URL.split('?')[1].split('#')[0].replace(\/\\&data\\=$\/g, '');<br \/>\n           if (document.URL.indexOf('popularity=') != -1) {<br \/>\n              popularity=decodeURIComponent(document.URL.split('popularity=')[1].split('&')[0].split('#')[0]);<br \/>\n           }<br \/>\n        }<br \/>\n        var agwl=gwl.split('&');<br \/>\n        for (var iig=1; iig&lt;agwl.length; iig++) {<br \/>\n           if (iig == 1) { clauses=String.fromCharCode(10);   }<br \/>\n           if (agwl[iig] != 'data=' && agwl[iig].indexOf('regionpicker') == -1) {<br \/>\n           clauses+='&' + agwl[iig] + String.fromCharCode(10);<br \/>\n           }<br \/>\n        }<br \/>\n        \/\/if (clauses != '') { clauses+=String.fromCharCode(10); }<br \/>\n        gwocont=sofar;<br \/>\n        if (gwocont != '') {<br \/>\n           var xgwocont=null;<br \/>\n           if (1 == 1) {<br \/>\n             var setstuff='';<br \/>\n             if (gwl.indexOf('&data=') == -1) { setstuff='&data='; } else { extras=' (if &data= change prefix that in below appropriately)'; }<br \/>\n             var plis=('' + gwocont).split('|');<br \/>\n             for (var iplis=0; iplis&lt;plis.length; iplis++) {<br \/>\n               if (setstuff == '') {<br \/>\n                 setstuff='%20[~' + plis[iplis] + '~,2]';<br \/>\n               } else {<br \/>\n                 setstuff+='%20,%20[~' + plis[iplis] + '~,2]';<br \/>\n               }<br \/>\n             }<br \/>\n           try {<br \/>\n           xgwocont=prompt('Please amend as necessary where each of those 2 values are what we have so far assigned for the ' + popularity + ' value for each region\/country.  As necessary add in any amended ' + clauses + ' ideas too' + extras + '.', setstuff);<br \/>\n           } catch(hjgdf) { xgwocont=null;   }<br \/>\n           }<br \/>\n           if (xgwocont == null) { lastgwcont=gwocont; xgwocont=''; }<br \/>\n           gwocont=xgwocont;<br \/>\n           if (xgwocont != '') {<br \/>\n           \/\/alert('gwl=' + gwl);<br \/>\n        var lateragwl=xgwocont.replace(\/\\ \/g, '%20').split('&');<br \/>\n        for (var jig=1; jig&lt;lateragwl.length; jig++) {<br \/>\n          if (gwl.indexOf('&' + lateragwl[jig].split('=')[0] + '=') != -1) {<br \/>\n            gwl=gwl.replace('&' + lateragwl[jig].split('=')[0] + '=' + gwl.split('&' + lateragwl[jig].split('=')[0] + '=')[1].split('&')[0].split('#')[0], '');<br \/>\n          }<br \/>\n        }<br \/>\n              lhref=ourtoolong(gwl + xgwocont.replace(\/\\ \/g, '%20'));<br \/>\n              if (lhref != '') {<br \/>\n                location.href=lhref;<br \/>\n              }<br \/>\n           }<br \/>\n        }<br \/>\n  document.getElementById('tdleft').style.backgroundImage='URL(\"\/\/www.rjmprogramming.com.au\/ITblog\/455\/350\/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=' + enough('B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274',sofar) + '\")';<br \/>\n  document.getElementById('tdleft').style.backgroundRepeat='no-repeat';<br \/>\n  if (window.self == window.parent && eval('' + screen.width) &gt; 1000 || document.URL.indexOf('?right=') != -1) {<br \/>\n  document.getElementById('tdleft').style.backgroundPosition='right top';<br \/>\n  } else {<br \/>\n  document.getElementById('tdleft').style.backgroundPosition='center top';<br \/>\n  }<br \/>\n  document.getElementById('tdleft').title='Double click for new window version of ...' + String.fromCharCode(10) + String.fromCharCode(10) + sofardetail.replace(\/\\|\/g, String.fromCharCode(10));<br \/>\n  document.getElementById('tdleft').style.backgroundRepeat='no-repeat';<br \/>\n  if (!dbdone) {<br \/>\n  dbdone=true;<br \/>\n  \/\/document.getElementById('tdleft').ondblclick=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL(\"')[1].split('\"')[0],'_blank','top=50,left=50,width=700,height=600'); };<br \/>\n  \/\/document.getElementById('tdleft').oncontextmenu=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL(\"')[1].split('\"')[0],'_blank','top=50,left=50,width=700,height=600'); };<br \/>\n  \/\/document.body.oncontextmenu=function(){  window.open(document.getElementById('tdleft').style.background.split('URL(\"')[1].split('\"')[0],'_blank','top=50,left=50,width=700,height=600'); };<br \/>\n  }<br \/>\n  window.scrollTo(0,0);<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; and &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-----------------------------------------------------------------GETME\" title=\"geo_chart.php\">to change<\/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> &#8230; calls on the Region Picker in this new Javascript function &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n function winopen(oneurl, twotarget, threerest) {<br \/>\n   var hmore='';<br \/>\n   if (gwl != '' && gwl.indexOf('?') != -1 && oneurl.indexOf(gwl) == -1 && oneurl.indexOf('?') != -1) {<br \/>\n   \/\/alert(oneurl + '&' + gwl.split('?')[1]);<br \/>\n   if (decodeURIComponent(('' + location.hash)).indexOf('title=') != -1) {<br \/>\n      hmore='&' + decodeURIComponent(('' + location.hash).replace(\/^\\#\/g, '')).replace(\/\\ \/g,'%20');<br \/>\n      if (hmore.indexOf('&width=') == -1) { hmore+='&width=556'; }<br \/>\n      if (hmore.indexOf('&height=') == -1) { hmore+='&height=347'; }<br \/>\n      if (hmore.indexOf('&country=') == -1) { hmore+='&country=Country'; }<br \/>\n      if (hmore.indexOf('&popularity=') == -1) { hmore+='&popularity=Popularity'; }<br \/>\n      if (hmore.indexOf('&data=') == -1) { hmore+='&data='; }<br \/>\n   }<br \/>\n   document.getElementById(twotarget).src=oneurl + '&' + gwl.split('?')[1] + hmore;<br \/>\n   } else if (decodeURIComponent(('' + location.hash)).indexOf('title=') != -1) {<br \/>\n      hmore='&' + decodeURIComponent(('' + location.hash).replace(\/^\\#\/g, '')).replace(\/\\ \/g,'%20');<br \/>\n      if (hmore.indexOf('&width=') == -1) { hmore+='&width=556'; }<br \/>\n      if (hmore.indexOf('&height=') == -1) { hmore+='&height=347'; }<br \/>\n      if (hmore.indexOf('&country=') == -1) { hmore+='&country=Country'; }<br \/>\n      if (hmore.indexOf('&popularity=') == -1) { hmore+='&popularity=Popularity'; }<br \/>\n      if (hmore.indexOf('&data=') == -1) { hmore+='&data='; }<br \/>\n      document.getElementById(twotarget).src=oneurl + hmore;<br \/>\n   } else {<br \/>\n   document.getElementById(twotarget).src=oneurl;<br \/>\n   }<br \/>\n   return document.getElementById(twotarget);<br \/>\n }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/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-integration-tutorial\/'Region Picker Geo Chart Integration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rppt'>Previous relevant <a target=_blank title='Region Picker Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-primer-tutorial\/'>Region Picker Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Region Picker Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.gif\" title=\"Region Picker Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Region Picker Primer Tutorial<\/p><\/div>\n<p>All the <a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> and <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Chart<\/a> Map Chart <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-geo-chart-image-chart-mixed-mode-tutorial\/' title='Google Chart Geo Chart Image Chart Mixed Mode Tutorial'>work recently<\/a>, along with <a target=_blank title='ISO_3166-2 information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/ISO_3166-2'>Wikipedia<\/a> ISO-3166 regional and country coding help (thanks), has set us on the road towards a &#8230;<\/p>\n<p><code><br \/>\nRegion Picker<br \/>\n<\/code><\/p>\n<p> &#8230; online tool, which we envisage will &#8230;<\/p>\n<ul>\n<li>initially be a standalone HTML webpage &#8230; and later be &#8230;<\/li>\n<li>integrated into the user input phase of the Geo Chart interfacer<\/li>\n<\/ul>\n<p>So here we are today with the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html_GETME\">&#8220;first draft&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\">standalone version<\/a>, where we&#8217;ve used Pulldown Menus, you can read more about at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmlcssjavascript-pulldown-menus-javascript-tutorial\/' title='HTML\/CSS\/Javascript Pulldown Menus Javascript Tutorial'>HTML\/CSS\/Javascript Pulldown Menus Javascript Tutorial<\/a>, to construct a Region\/Country ISO code vertical bar delimited list of regions\/continents that you can display in an Image Chart Map Chart &#8230;<\/p>\n<p><iframe style=\"overflow:scroll;width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\"><\/iframe><\/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='#d62245' onclick='var dv=document.getElementById(\"d62245\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/menu\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62245' 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='#d62254' onclick='var dv=document.getElementById(\"d62254\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/integration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62254' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re tickled pink with our integration of yesterday&#8217;s Region Picker Primer Tutorial &#8230; Region Picker web application &#8230; into &#8230; Geo Chart interfacer &#8230; in that we&#8217;ve done better than the natural Geo Chart navigation without the Region Picker, which &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-geo-chart-integration-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":[2,12,14,37],"tags":[367,1619,518,576,587,4562,614,652,770,830,894,4616,997,1761,4649,4648,1620,4643,1866,1319,1496],"class_list":["post-62254","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-dropdown","tag-geo-chart","tag-google-chart","tag-html","tag-iframe","tag-image-chart","tag-integration","tag-javascript","tag-menu","tag-navigation","tag-overlay","tag-picker","tag-programming","tag-prompt","tag-pulldown","tag-pulldown-menu","tag-region","tag-regional","tag-select","tag-tutorial","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62254"}],"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=62254"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62254\/revisions"}],"predecessor-version":[{"id":62261,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62254\/revisions\/62261"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=62254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=62254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=62254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}