{"id":50374,"date":"2020-09-23T03:01:17","date_gmt":"2020-09-22T17:01:17","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=50374"},"modified":"2020-09-22T20:59:19","modified_gmt":"2020-09-22T10:59:19","slug":"personalizing-interesting-places-ajax-formdata-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/personalizing-interesting-places-ajax-formdata-tutorial\/","title":{"rendered":"Personalizing Interesting Places Ajax FormData Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Personalizing Interesting Places Ajax FormData Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_more_justplace.jpg\" title=\"Personalizing Interesting Places Ajax FormData Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Personalizing Interesting Places Ajax FormData Tutorial<\/p><\/div>\n<p>We come at progress for yesterday&#8217;s <a title='Personalizing Interesting Places Collaboration Tutorial' href='#pipct'>Personalizing Interesting Places Collaboration Tutorial<\/a> &#8220;Interesting Places&#8221; web application from &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>Ajax<\/a>\/<a target=_blank title='FormData object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData'>FormData<\/a> email collaboration<\/li>\n<li>Placename (only) entries (looking up Latitude,Longitude where possible)<\/li>\n<\/ul>\n<p>We like <a target=_blank title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>Ajax<\/a>\/<a target=_blank title='FormData object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData'>FormData<\/a> techniques a lot because they are so &#8220;midair&#8221;, a relief from having to worry about the look of webpage elements.<\/p>\n<p><code><br \/>\nfunction checkfortoolong(suffback, mto) {<br \/>\n  var llim=865; \/\/ 800;<br \/>\n  if (eval(eval('' + backtohere.length) + eval('' + suffback.length)) &gt; eval(-66 + llim)) {<br \/>\n    zhr = new XMLHttpRequest();<br \/>\n    zform=new FormData();<br \/>\n    zform.append('inline', '');<br \/>\n    zform.append('to', mto);<br \/>\n    var myhtml='&lt;body&gt;&lt;p&gt;Please click all the links below for the full picture ...&lt;\/p&gt;&lt;br&gt;&lt;br&gt;';<br \/>\n    var atemplate='&lt;span&gt;&lt;\/span&gt;&lt;a target=_blank href=\"' + (backtohere + suffback).split('&')[0] + '&' + suffback.split('&')[1].split('=')[0] + '=' + '\"&gt;Interesting Places 0&lt;\/a&gt;&lt;br&gt;';<br \/>\n    var svs=suffback.split('&')[1].split('=')[1].split(encodeURIComponent('\",\"'));<br \/>\n    var onest=1;<br \/>\n    var btemplate=atemplate.replace(' 0&lt;', ' ' + onest + '&lt;');<br \/>\n    var bdelim='';<br \/>\n    var placelist='', placedlim='';<br \/>\n    for (var jvs=1; jvs&lt;=svs.length; jvs++) {<br \/>\n      \/\/console.log('' + jvs + ' vs ' + svs.length);<br \/>\n      \/\/console.log(svs[eval(-1 + jvs)]);<br \/>\n      if (eval('' + btemplate.replace('\"&gt;Interesting ', encodeURIComponent(bdelim + svs[eval(-1 + jvs)]) + encodeURIComponent('\"') + '\"&gt;Interesting ').length) &gt; llim) {<br \/>\n        placedlim='';<br \/>\n        myhtml+=btemplate.replace('&lt;span&gt;&lt;\/span&gt;','&lt;span&gt;' + placelist + ': &lt;\/span&gt;').replace(encodeURIComponent('\"\"'), encodeURIComponent('\"'));<br \/>\n        placelist=decodeURIComponent(svs[eval(-1 + jvs)].split(encodeURIComponent(','))[2].split(encodeURIComponent('\"'))[0]);<br \/>\n        placedelim=' ,';<br \/>\n        onest++;<br \/>\n        btemplate=atemplate.replace(' 0&lt;', ' ' + onest + '&lt;');<br \/>\n        bdelim=encodeURIComponent('\"');<br \/>\n        btemplate=btemplate.replace('\"&gt;Interesting ', encodeURIComponent(bdelim + svs[eval(-1 + jvs)]) + encodeURIComponent('\"') + '\"&gt;Interesting ');<br \/>\n        bdelim=encodeURIComponent(',\"');<br \/>\n      } else {<br \/>\n        placelist+=placedlim + decodeURIComponent(svs[eval(-1 + jvs)].split(encodeURIComponent(','))[2].split(encodeURIComponent('\"'))[0]);<br \/>\n        placedelim=' ,';<br \/>\n        btemplate=btemplate.replace('\"&gt;Interesting ', encodeURIComponent(bdelim + svs[eval(-1 + jvs)]) + encodeURIComponent('\"') + '\"&gt;Interesting ');<br \/>\n        bdelim=encodeURIComponent(',\"');<br \/>\n      }<br \/>\n    }<br \/>\n    zform.append('subject', 'Sharing My Interesting Places');<br \/>\n    zform.append('body', (myhtml + btemplate.replace('&lt;span&gt;&lt;\/span&gt;','&lt;span&gt;' + placelist + ': &lt;\/span&gt;').replace(encodeURIComponent('\"\"'), encodeURIComponent('\"')) + '&lt;\/body&gt;').replace('\"\"', '\"').replace(encodeURIComponent('\"\"'), encodeURIComponent('\"')));<br \/>\n    zhr.open('post', '\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php', true);<br \/>\n    zhr.send(zform);<br \/>\n    \/\/alert((myhtml + btemplate.replace(encodeURIComponent('\"\"'), encodeURIComponent('\"')) + '&lt;\/body&gt;').replace('\"\"', '\"').replace(encodeURIComponent('\"\"'), encodeURIComponent('\"')));<br \/>\n    return '';<br \/>\n  }<br \/>\n  return suffback;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; the other advantage being the way the POST messaging allows for much more data involvement than the 800 to 900 character limits of GET (? and &amp; argumented) URLs, in case a collaborator has travelled widely!<\/p>\n<p>While speaking of &#8220;midair&#8221;, we did a &#8220;midair&#8221; feeling technique for (our) first time <i>before<\/i> the body onload event, so no webpage elements available &#8230;<\/p>\n<p><code><br \/>\n\/\/ Global user emoji array ...<br \/>\n  var people=[\"\", \" &amp;#128591;\", \" &amp;#49;&amp;#65039;&amp;#8419;\", \" &amp;#50;&amp;#65039;&amp;#8419;\", \" &amp;#51;&amp;#65039;&amp;#8419;\", \" &amp;#52;&amp;#65039;&amp;#8419;\", \" &amp;#53;&amp;#65039;&amp;#8419;\", \" &amp;#54;&amp;#65039;&amp;#8419;\", \" &amp;#55;&amp;#65039;&amp;#8419;\", \" &amp;#56;&amp;#65039;&amp;#8419;\", \" &amp;#57;&amp;#65039;&amp;#8419;\"];<br \/>\n\/\/ Create a \"midair\" div ...<br \/>\n  var ourdiv = document.createElement('div');<br \/>\n\/\/ Populate with emoji type data<br \/>\n  ourdiv.innerHTML=people[' '.length];<br \/>\n\/\/ We found this way the way to find a string containing some of that user emoji array characters ...<br \/>\n  sofaris+=',' + csvare[eval(2 + ikj)].replace(\/\\\"\/g,'').replace(\/\\'\/g,'').trim().split(' &amp;#')[0].split(ourdiv.innerHTML)[0] + people[lsbitsuffix.length];<br \/>\n<\/code><\/p>\n<p>And so you can use today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html-----GETME\">changed HTML<\/a> and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html-----GETME\">interesting_earth_air_based_map_places.html<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html\">live run<\/a> link to personalize and collaborate (at more length) with your &#8220;Interesting Places from the Air&#8221; experiences (with yourself, and collaborating) via a new <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html?ask=y\">all because you asked for it<\/a> user experience (perhaps at less length?)<\/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-personalizing-interesting-places-ajax-formdata-tutorial\/'>Personalizing Interesting Places Ajax FormData Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pipct'>Previous relevant <a target=_blank title='Personalizing Interesting Places Collaboration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/personalizing-interesting-places-collaboration-tutorial\/'>Personalizing Interesting Places Collaboration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Personalizing Interesting Places Collaboration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_more_collaborate.jpg\" title=\"Personalizing Interesting Places Collaboration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Personalizing Interesting Places Collaboration Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Personalizing Interesting Places Tutorial' href='#pipt'>Personalizing Interesting Places Tutorial<\/a>&#8216;s personalization has opened the door to this web application having &#8230;<\/p>\n<ul>\n<li>users &#8230; who &#8230;<\/li>\n<li>collaborate<\/li>\n<\/ul>\n<p>  &#8230; by sharing personalizations via &#8230;<\/p>\n<ul>\n<li>email<\/li>\n<li>SMS<\/li>\n<\/ul>\n<p>So, how to flag dropdowns for the link between a &#8230;<\/p>\n<ul>\n<li>place &#8230; and &#8230;<\/li>\n<li>whose content it is<\/li>\n<\/ul>\n<p>?  You&#8217;ll find difficulty cross-browser colour coding option elements, so, rather, we add emojis to place names to symbolize a collaborator, that first collaborator, &#8220;You&#8221; having the emoji &#128591; and the mechanism to add new collaborators being &#8230;<\/p>\n<p><code><br \/>\n  var elseenter=', else enter \"Email\/SMS To, Email\/SMS From\" sharing set';<br \/>\n<\/code><\/p>\n<p> &#8230; suffix to Javascript prompt.<\/p>\n<p>And so now, you can use today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html----GETME\">changed HTML<\/a> and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html----GETME\">interesting_earth_air_based_map_places.html<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html\">live run<\/a> link to personalize and collaborate with your &#8220;Interesting Places from the Air&#8221; experiences (with yourself, and collaborating) via a new <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html?ask=y\">all because you asked for it<\/a> user experience.<\/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\/personalizing-interesting-places-collaboration-tutorial\/'>Personalizing Interesting Places Collaboration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pipt'>Previous relevant <a target=_blank title='Personalizing Interesting Places Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/personalizing-interesting-places-tutorial\/'>Personalizing Interesting Places Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Personalizing Interesting Places Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_more.jpg\" title=\"Personalizing Interesting Places Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Personalizing Interesting Places Tutorial<\/p><\/div>\n<p>With the radio announcement &#8230;<\/p>\n<blockquote cite='https:\/\/www.fox5vegas.com\/coronavirus\/qantas-seven-hour-flight-to-nowhere-sells-out-in-10-minutes\/article_34e0a179-0537-563d-a306-e642e15bc3e7.html'><p>\nQantas seven-hour flight to nowhere sells out in 10 minutes\n<\/p><\/blockquote>\n<p> &#8230; the other day, we &#8230;<\/p>\n<ol>\n<li>were only mildly surprised, Australians being such avid travellers, and not just on our national carrier &#8230; and then wondered &#8230;<\/li>\n<li>if the experience would be as exciting as in a small aeroplane providing joy flights (with less ambitious distances flown, but perhaps a lower altitude?!) &#8230; and then we remembered our &#8230;<\/li>\n<li>inhouse (augmented by <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> (and onto <a target=_blank href='\/\/map.google.com' title='Google'>Google Maps<\/a> (in turn onto <a target=_blank title='Google Earth' href='https:\/\/www.google.com\/earth\/'>Google Earth<\/a>)) and <a target=_blank title='Wikipedia, thanks' href='https:\/\/wikipedia.org'>Wikipedia<\/a>) &#8220;Interesting Earth Air Based Map Places&#8221; web application should get a makeover to &#8230;<\/li>\n<li>add <i>personalized<\/i> functionality possibilities for a user to add (via Javascript prompt popup windows) in the data form &#8230;<br \/>\n<code><br \/>\nLatitude,Longitude,Placename<br \/>\n<\/code><br \/>\n &#8230; that is &#8230;<\/li>\n<li>recalled at the next session as well, the additional places getting to the top of the list &#8230; building on work of the previous &#8230;<\/li>\n<li><a title='Google Geo Chart Contextualizes Interesting Places Tutorial' href='#ggccipt'>Google Geo Chart Contextualizes Interesting Places Tutorial<\/a><\/li>\n<\/ol>\n<p>It&#8217;s not that we think an online Google Chart Map Chart -&gt; Google Maps -&gt; Google Earth experience replaces flying but we can say your choices can cover more than one joy flight for sure!<\/p>\n<p>The Javascript (via PHP) work here is not difficult but does come up against issues relating to how familiar users can be defining Latitude and Longitude (regarding the myriad data formats possible here), and regarding user entered data with respect to delimitation.  These all go on to be stored in <a target=_blank title='Window object localStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> ready for a user&#8217;s next session, and this delimitation becomes important here so that we code for Placenames not to have any commas, and suchlike.<\/p>\n<p>Now, you can use today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html---GETME\">changed HTML<\/a> and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html---GETME\">interesting_earth_air_based_map_places.html<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html\">live run<\/a> link to personalize your &#8220;Interesting Places from the Air&#8221; experiences (with yourself, for now) via a new <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html?ask=y\">all because you asked for it<\/a> user experience.  We&#8217;ve added a few other (and new) suggestions of great places listening into that radio conversation (eg. Lizard Island, Broome, Hong Kong, New York, Eyjafjallaj\u00f6kull, Timbuktu).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-google-geo-chart-contextualizes-interesting-places-tutorial\/'>New Google Geo Chart Contextualizes Interesting Places Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ggccipt'>Previous relevant <a target=_blank title='Google Geo Chart Contextualizes Interesting Places Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-geo-chart-contextualizes-interesting-places-tutorial\/'>Google Geo Chart Contextualizes Interesting Places 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\/interesting_earth_air_based_map_places.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Geo Chart Contextualizes Interesting Places Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ipoe_context.jpg\" title=\"Google Geo Chart Contextualizes Interesting Places Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Geo Chart Contextualizes Interesting Places Tutorial<\/p><\/div>\n<p>There&#8217;s still a bit to do improving the interface to the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> on top of the recent <a title='Google Geo Chart Co-ordinate Lines Tutorial' href='#ggcc-lt'>Google Geo Chart Co-ordinate Lines Tutorial<\/a> functionality extensions, but we&#8217;ll go more into that later.  Today, it is time to show how all this can be a &#8220;tool&#8221;, a &#8220;contextualizing tool&#8221;, for other &#8220;where of life&#8221; web applications we&#8217;ve written around here at RJM Programming.<\/p>\n<p>The first cab off the rank for this contextualization improvement is the web application we left off with when we presented <a target=_blank title='Interesting Places Sorting Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/interesting-places-sorting-tutorial\/'>Interesting Places Sorting Tutorial<\/a> in the early part of this year.  This web application, inspired by the wonderful photography of the book <i>The Earth from the Air<\/i> by Yann Arthus-Bertrand (ISBN: 9780500544846) used the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' title='Google Map Charts'>Map Chart<\/a> to attempt to recreate what Yann must have seen in his aeroplane, even if a lot of it has changed since.<\/p>\n<p>We really like using the Map Chart but the Map Chart usage alone can be lacking a bit of contextualization in that a lot of us would be lost in terms of what we are looking at relative to &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>to<\/a> &#8230; the wooooooorrrrrrrllllllddddd, that&#8217;s what!<\/p>\n<p>Mars is out of this wooooooorrrrrrrllllllddddd, but the Google Chart Geo Chart sticks to the confines of the wooooooorrrrrrrllllllddddd to give us a decent place on which &#8220;to hang our hats&#8221;, especially as there are no hat racks that I know of on Mars.<\/p>\n<p>As you use today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html--GETME\">changed HTML<\/a> and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html--GETME\">interesting_earth_air_based_map_places.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html\">live run<\/a> link you now see an additional top right HTML iframe hosting the newly implemented Geo Chart following your choices around the wooooooorrrrrrrllllllddddd looking for interesting places.  It works that the recent choice gets a bigger marker than others chosen earlier, and if that marker contains a localized image it is likely that to click it will navigate you to a relevant <a target=_blank title='Wikipedia' href='http:\/\/www.wikipedia.org'>Wikipedia<\/a> webpage where the user can find out more about that place.  This additional &#8220;onclick&#8221; logic augments other existant Map Chart &#8220;select&#8221; event (the Google Charts equivalent of the &#8220;onclick&#8221; event) menu functionality that is also available to the user.<\/p>\n<p>Please feel free to give it a go.<\/p>\n<hr>\n<p id='ggcc-lt'>Previous relevant <a target=_blank title='Google Geo Chart Co-ordinate Lines Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-geo-chart-co-ordinate-lines-tutorial\/'>Google Geo Chart Co-ordinate Lines Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Geo Chart Co-ordinate Lines Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geochart_plotting.jpg\" title=\"Google Geo Chart Co-ordinate Lines Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Geo Chart Co-ordinate Lines Tutorial<\/p><\/div>\n<p>Lately we&#8217;ve been using the variants of the word &#8220;plot&#8221; a lot.  Digitise, plot, overlay are words that Information Technology took up with zeal in the 1970&#8217;s and on in particular, because digital mapping became more feasible with the mainframe computer and graphic machine abilities then.  Photogrammetry and mapping, surveying and hard copy digitising were growing fields.  Back then, programming comments would talk a lot about &#8220;move pen&#8221; &#8230;<\/p>\n<ul>\n<li>pen up<\/li>\n<li>pen down<\/li>\n<\/ul>\n<p> &#8230; as the two modes needed to &#8220;plot&#8221; linework.<\/p>\n<p>Yesterday, am not sure if you noticed but we had in our web address URL arguments &#8220;&#038;junk=&#8221; which happened in the code to, when the user defines a title suffix such as &#8230;<\/p>\n<p><code><br \/>\n&areplaces=Sydney,Brisbane,Tennent Creek,Cairns,Broome,Hobart<br \/>\n<\/code><\/p>\n<p> &#8230; as a &#8220;reasonable ask&#8221; we internally reorganized to change the web address URL arguments to &#8230;<\/p>\n<p><code><br \/>\n&aregeographicals=http.Sydney%2Chttp.Brisbane%2Chttp.Tennant_Creek%2Chttp.Cairns%2Chttp.Broome%2Chttp.Hobart&junk=Sydney,Brisbane,Tennant%20Creek,Cairns,Broome,Hobart<br \/>\n<\/code><\/p>\n<p> .. for <font size=1>&#8230; don&#8217;t you just love it &#8230;<\/font> &#8220;internal use only&#8221; and the &#8220;&#038;junk=&#8221; was there because we hadn&#8217;t thought about whether there was a way to reuse what the user actually entered.  Then we thought about the possibility of &#8220;overlaying&#8221; (which we don&#8217;t &#8220;actually&#8221; do today, but it feels like it) lines between places (ie. markers).<\/p>\n<p>Joining all points with lines when you have a lot of points rarely &#8220;means&#8221; anything much, but suppose we introduced &#8220;pen up, pen down&#8221; &#8220;plotting&#8221; logic?  You see those commas in the &#8220;&#038;junk=&#8221; data?  Why not have a mechanism to flag a non-default &#8220;pen down&#8221; by allowing &#8220;,+&#8221; equate to &#8220;pen down&#8221; and the default &#8220;,&#8221; represents &#8220;pen up&#8221;?  And change &#8220;&#038;junk=&#8221; to &#8220;&#038;peninfo=&#8221;.  Sound like a plan?  We hope so.<\/p>\n<p>What can those new &#8220;line&#8221; SVG line elements help represent?  Well, that is up to the user, but we can think of &#8230;<\/p>\n<ul>\n<li>trip planner (which a Google Maps directions mode map we help you out with)<\/li>\n<li>trip report<\/li>\n<li>crow fly distance calculator (which we help you out with)<\/li>\n<li>linkage indicator that the numerical (defaults to &#8220;Popularity&#8221;) data field can relate to (this numerical data field is mentioned on a marker&#8217;s tooltip, and affects the size of the marker)<\/li>\n<\/ul>\n<p>As you can imagine, with an &#8220;overseas trip planner&#8221; &#8220;pen down&#8221; usage can equate to the aeroplane flights or sea voyages or train trips or road trips involved in the overall trip.  Discrete point maps are totally &#8220;pen up&#8221; (default) &#8220;&#038;peninfo=&#8221; scenarios, where the numerical data field may be the important feature of your map&#8217;s data.<\/p>\n<p>The changes to yesterday&#8217;s <a title='Google Geo Chart Co-ordinate Ajax Tutorial' href='#ggcc-at'>Google Geo Chart Co-ordinate Ajax Tutorial<\/a> involved adding SVG line elements and &#8220;intelligence&#8221; (via a title property) to the existant (<i>g<\/i> element nested) SVG circle element to store the placename it refers to, whereas the SVG line element title property is created with a &#8220;From place to To place&#8221; designation.  We use events on &#8230;<\/p>\n<ul>\n<li>SVG circle element <i>onclick<\/i> opens a relevant Wikipedia webpage as a popup window<\/li>\n<li>SVG line element <i>onmouseover<\/i> and <i>ontouchdown<\/i> open a Google Map directions mode webpage as a popup window<\/li>\n<\/ul>\n<p>The way this can be flagged by the user is again at the title prompt ot textbox using the <em.modified<\/em> rules as below &#8230;<\/p>\n<p><code><br \/>\n ...  and\/or &#038;aregeographicals=y (or instead of y put an http marker image URL like HTTP:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/mapc64b.png) for you prefixing Labels by lat|long| values and\/or &#038;areplaces=y (or instead of y put a comma separated http marker image URL or placename list<em> (with ,+ usage indicating to plot a line)<\/em>) for places rather than countries ...<br \/>\n<\/code><\/p>\n<p>Using yesterday&#8217;s URLs as a basis, we&#8217;ll show you below just such a call &#8230;<\/p>\n<p><iframe style='width:100%;height:700px;' src='\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=Australian%20Trip%20Plan&#038;arexplaces=y&#038;aregeographicals=http.Broome%2Chttp.Hobart%2Chttp.Tennant_Creek%2Chttp.Cairns%2Chttp.Sydney%2Chttp.Brisbane&#038;peninfo=Broome,+Hobart,Tennant%20Creek,+Cairns,Sydney,+Brisbane&#038;width=1000&#038;height=624&#038;country=Places&#038;popularity=Trip%20Days&#038;data=%20[-17.961944444444|122.23611111111|~Broome~,7]%20,%20[-42.88334|147.31666|~Hobart~,7]%20,%20[-19.647222222222|134.19027777778|~Tennant%20Creek~,2]%20,%20[-16.930277777778|145.77027777778|~Cairns~,2]%20,%20[-33.86667|151.21666|~Sydney~,1]%20,%20[-27.46667|153.03333|~Brisbane~,1]'><\/iframe><\/p>\n<p style=\"word-wrap:break-word;\"> &#8230; via the URL <a style=\"word-wrap:break-word;\" title='Geo Chart tailored markers' target=_blank  href='https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=Australian%20Trip%20Plan&#038;arexplaces=y&#038;aregeographicals=http.Broome%2Chttp.Hobart%2Chttp.Tennant_Creek%2Chttp.Cairns%2Chttp.Sydney%2Chttp.Brisbane&#038;peninfo=Broome,+Hobart,Tennant%20Creek,+Cairns,Sydney,+Brisbane&#038;width=1000&#038;height=624&#038;country=Places&#038;popularity=Trip%20Days&#038;data=%20[-17.961944444444|122.23611111111|~Broome~,7]%20,%20[-42.88334|147.31666|~Hobart~,7]%20,%20[-19.647222222222|134.19027777778|~Tennant%20Creek~,2]%20,%20[-16.930277777778|145.77027777778|~Cairns~,2]%20,%20[-33.86667|151.21666|~Sydney~,1]%20,%20[-27.46667|153.03333|~Brisbane~,1]'>https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=Australian%20Trip%20Plan&#038;arexplaces=y&#038;aregeographicals=http.Broome%2Chttp.Hobart%2Chttp.Tennant_Creek%2Chttp.Cairns%2Chttp.Sydney%2Chttp.Brisbane&#038;peninfo=Broome,+Hobart,Tennant%20Creek,+Cairns,Sydney,+Brisbane&#038;width=1000&#038;height=624&#038;country=Places&#038;popularity=Trip%20Days&#038;data=%20[-17.961944444444|122.23611111111|~Broome~,7]%20,%20[-42.88334|147.31666|~Hobart~,7]%20,%20[-19.647222222222|134.19027777778|~Tennant%20Creek~,2]%20,%20[-16.930277777778|145.77027777778|~Cairns~,2]%20,%20[-33.86667|151.21666|~Sydney~,1]%20,%20[-27.46667|153.03333|~Brisbane~,1]<\/a><\/p>\n<p>The new &#8220;lines&#8221; functionality above we&#8217;ve added into our <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> interfacing&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php---------------GETME\" title=\"geo_chart.php\">geo_chart.php<\/a> changed <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\">this way<\/a>.<\/p>\n<hr>\n<p id='ggcc-at'>Previous relevant <a target=_blank title='Google Geo Chart Co-ordinate Ajax Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-geo-chart-co-ordinate-ajax-tutorial\/'>Google Geo Chart Co-ordinate Ajax Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Geo Chart Co-ordinate Ajax Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geochart_place_markers.jpg\" title=\"Google Geo Chart Co-ordinate Ajax Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Geo Chart Co-ordinate Ajax Tutorial<\/p><\/div>\n<p>We&#8217;re joining &#8230;<\/p>\n<ul>\n<li>placenames &#8230; to &#8230;<\/li>\n<li>latitude and longitude geographical (co-ordinates)<\/li>\n<\/ul>\n<p> &#8230; adding onto yesterday&#8217;s <a title='Google Geo Chart Co-ordinate Marker Tutorial' href='#ggcc-mt'>Google Geo Chart Co-ordinate Marker Tutorial<\/a>&#8216;s work meaning that the <em>modified<\/em> title rules regarding this now go &#8230;<\/p>\n<p><code><br \/>\n ...  and\/or &aregeographicals=y (or instead of y put an http marker image URL like HTTP:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/mapc64b.png) for you prefixing Labels by lat|long| values and\/or &areplaces=y (or instead of y put a <em>comma separated<\/em> http marker image URL <em>or placename list<\/em>) for places rather than countries ...<br \/>\n<\/code><\/p>\n<p> &#8230; that if used by the user gives our interfacing PHP to the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> the chance to fill in Latitude|Longitude|Placename default values further down the line of Javascript prompt or textboxes that follow, the information gleaned from one of the following sources &#8230;<\/p>\n<ul>\n<li>PHP <a target=_blank title='PHP TimeZone list' href='http:\/\/php.net\/manual\/en\/timezones.php'>TimeZone<\/a> functionality<\/li>\n<li><a target=_blank title='Wikipedia' href='http:\/\/www.wikipedia.org'>Wikipedia<\/a> &#8230; thanks<\/li>\n<\/ul>\n<p> &#8230; the first of these can be handled by Javascript arrays, the second one needing the <a target=_blank title='Claytons Ajax synchronous calling via queue' href='https:\/\/stackoverflow.com\/questions\/133310\/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-re'>great advice of this wonderful webpage<\/a> for an <a target=_blank title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>Ajax<\/a> &#8220;<a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=ylH43Tcaj60'>Claytons<\/a> Ajax synchronous calling via queue&#8221; &#8230; ie. asynchronous Ajax feels synchronous via efficient queue usage.<\/p>\n<p>Below we&#8217;ll show you just such a call below &#8230;<\/p>\n<p><iframe style='width:100%;height:700px;' src='\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=My%20World%20Survey&#038;arexplaces=y&#038;aregeographicals=http.Sydney%2Chttp.Brisbane%2Chttp.Tennant_Creek%2Chttp.Cairns%2Chttp.Broome%2Chttp.Hobart&#038;junk=Sydney,Brisbane,Tennant%20Creek,Cairns,Broome,Hobart&#038;width=1000&#038;height=624&#038;country=Places&#038;popularity=Popularity&#038;data=%20[-33.86667|151.21666|~Sydney~,2]%20,%20[-27.46667|153.03333|~Brisbane~,2]%20,%20[-19.647222222222|134.19027777778|~Tennant%20Creek~,2]%20,%20[-16.930277777778|145.77027777778|~Cairns~,2]%20,%20[-17.961944444444|122.23611111111|~Broome~,2]%20,%20[-42.88334|147.31666|~Hobart~,2]'><\/iframe><\/p>\n<p style=\"word-wrap:break-word;\"> &#8230; via the URL <a style=\"word-wrap:break-word;\" title='Geo Chart tailored markers' target=_blank  href='https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=My%20World%20Survey&#038;arexplaces=y&#038;aregeographicals=http.Sydney%2Chttp.Brisbane%2Chttp.Tennant_Creek%2Chttp.Cairns%2Chttp.Broome%2Chttp.Hobart&#038;junk=Sydney,Brisbane,Tennant%20Creek,Cairns,Broome,Hobart&#038;width=1000&#038;height=624&#038;country=Places&#038;popularity=Popularity&#038;data=%20[-33.86667|151.21666|~Sydney~,2]%20,%20[-27.46667|153.03333|~Brisbane~,2]%20,%20[-19.647222222222|134.19027777778|~Tennant%20Creek~,2]%20,%20[-16.930277777778|145.77027777778|~Cairns~,2]%20,%20[-17.961944444444|122.23611111111|~Broome~,2]%20,%20[-42.88334|147.31666|~Hobart~,2]'>https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=My%20World%20Survey&#038;arexplaces=y&#038;aregeographicals=http.Sydney%2Chttp.Brisbane%2Chttp.Tennant_Creek%2Chttp.Cairns%2Chttp.Broome%2Chttp.Hobart&#038;junk=Sydney,Brisbane,Tennant%20Creek,Cairns,Broome,Hobart&#038;width=1000&#038;height=624&#038;country=Places&#038;popularity=Popularity&#038;data=%20[-33.86667|151.21666|~Sydney~,2]%20,%20[-27.46667|153.03333|~Brisbane~,2]%20,%20[-19.647222222222|134.19027777778|~Tennant%20Creek~,2]%20,%20[-16.930277777778|145.77027777778|~Cairns~,2]%20,%20[-17.961944444444|122.23611111111|~Broome~,2]%20,%20[-42.88334|147.31666|~Hobart~,2]<\/a><\/p>\n<p>The new &#8220;place meets geographicals&#8221; functionality above we&#8217;ve added into our <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> interfacing&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php--------------GETME\" title=\"geo_chart.php\">geo_chart.php<\/a> changed <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\">this way<\/a>.<\/p>\n<hr>\n<p id='ggcc-mt'>Previous relevant <a target=_blank title='Google Geo Chart Co-ordinate Marker Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-geo-chart-co-ordinate-marker-tutorial\/'>Google Geo Chart Co-ordinate Marker Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Geo Chart Co-ordinate Marker Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geochart_marker.jpg\" title=\"Google Geo Chart Co-ordinate Marker Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Geo Chart Co-ordinate Marker Tutorial<\/p><\/div>\n<p>Before we start in on &#8220;this new tool helping contextualise some other web applications involving latitude and longitude geographical information&#8221; of yesterday&#8217;s <a title='Google Geo Chart Co-ordinate Plotting Tutorial' href='#ggcc-pt'>Google Geo Chart Co-ordinate Plotting Tutorial<\/a> there are some interesting ways to improve functionality for our interfacing to the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> as per, today &#8230;<\/p>\n<ul>\n<li>allow for &#8220;stage 1&#8221; tailored markers (for plotting) via http image URLs &#8230; and &#8230;<\/li>\n<li>look into large user defined chart widths and heights and the implication of that for scrolling<\/li>\n<\/ul>\n<p>With the tailored markers we&#8217;d like to thank <a target=_blank title='Useful advice' href='https:\/\/stackoverflow.com\/questions\/11496734\/add-a-background-image-png-to-a-svg-circle-shape'>this webpage<\/a>&#8216;s advice, from which &#8220;section 7&#8221; was our favourite.  To get that advice to apply we needed to analyze Google&#8217;s SVG element <i>g<\/i> subelement circle subsubelement markers, to change their &#8220;fill&#8221; property to <em>something like<\/em> &#8230;<\/p>\n<p><code><br \/>\n&lt;circle cx = \"50%\" cy = \"50%\" r = \"35%\" fill = \"<em>url(#attachedImage)<\/em>\"\/&gt;<br \/>\n<\/code><\/p>\n<p>The way the user implements this is via the title prompt&#8217;s <i>&#038;aregeographicals=<\/i>(http image URL) and we&#8217;ll show you just such a call below &#8230;<\/p>\n<p><iframe style='width:100%;height:700px;' src='https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=Some%20Places&#038;aregeographicals=https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/mapc64b.png&#038;width=675&#038;height=420&#038;country=Places&#038;popularity=Popularity&#038;data=%20[-29.530000|137.46555555555555556|~Marree%20Man~,30]%20,%20[3.158000|101.712000|~Petronas%20Towers~,30]%20,%20[25.03361111111|121.56500000000|~Taipei%20101~,30]%20,%20[25.19713888888888886|55.2741111111111111|~Burj%20Khalifa~,30]'><\/iframe><\/p>\n<p style=\"word-wrap:break-word;\"> &#8230; via the URL <a style=\"word-wrap:break-word;\" title='Geo Chart tailored markers' target=_blank  href='https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=Some%20Places&#038;aregeographicals=https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/mapc64b.png&#038;width=675&#038;height=420&#038;country=Places&#038;popularity=Popularity&#038;data=%20[-29.530000|137.46555555555555556|~Marree%20Man~,30]%20,%20[3.158000|101.712000|~Petronas%20Towers~,30]%20,%20[25.03361111111|121.56500000000|~Taipei%20101~,30]%20,%20[25.19713888888888886|55.2741111111111111|~Burj%20Khalifa~,30]'>https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=Some%20Places&#038;aregeographicals=https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/mapc64b.png&#038;width=675&#038;height=420&#038;country=Places&#038;popularity=Popularity&#038;data=%20[-29.530000|137.46555555555555556|~Marree%20Man~,30]%20,%20[3.158000|101.712000|~Petronas%20Towers~,30]%20,%20[25.03361111111|121.56500000000|~Taipei%20101~,30]%20,%20[25.19713888888888886|55.2741111111111111|~Burj%20Khalifa~,30]<\/a><\/p>\n<p>As far as big width and\/or height scrolling (implications) goes, we needed to &#8230;<\/p>\n<ul>\n<li>make document.body element width:100%<\/li>\n<li>apply to two level of div element nesters (id=od1 and od2) of the Geo Chart (id=chart_div) element &#8230;<br \/>\n<code><br \/>\n style='display:inline-block;width:800px;overflow:scroll;-webkit-overflow-scrolling:touch;'<br \/>\n<\/code><br \/>\n &#8230; whose <i>800px<\/i> width is later (Javascript DOM) changed via &#8230;\n<\/li>\n<li>two seconds after load &#8230;<br \/>\n<code><br \/>\nif (document.getElementById('od1')) { document.getElementById('od1').style.width='' + eval(window.getComputedStyle(document.body, null).getPropertyValue('width').replace('px','')) + 'px'; }<br \/>\nif (document.getElementById('od2')) { document.getElementById('od2').style.width='' + eval(window.getComputedStyle(document.body, null).getPropertyValue('width').replace('px','')) + 'px'; }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>The new functionality above we&#8217;ve added into our <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> interfacing&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-------------GETME\" title=\"geo_chart.php\">geo_chart.php<\/a> changed <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\">this way<\/a>.<\/p>\n<hr>\n<p id='ggcc-pt'>Previous relevant <a target=_blank title='Google Geo Chart Co-ordinate Plotting Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-geo-chart-co-ordinate-plotting-tutorial\/'>Google Geo Chart Co-ordinate Plotting Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Geo Chart Co-ordinate Plotting Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geochart_context.jpg\" title=\"Google Geo Chart Co-ordinate Plotting Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Geo Chart Co-ordinate Plotting Tutorial<\/p><\/div>\n<p>Sometimes you read <a target=_blank title='Something so useful, thanks' href='https:\/\/stackoverflow.com\/questions\/14838494\/specify-latitute-and-longitute-for-google-visualization-geochart-instead-of-city'>something so useful<\/a> on the &#8220;web&#8221;, thanks, it opens your eyes to a whole new way to use something you had already written as a web application, just with some small tweaks.<\/p>\n<p>So it was today, building on the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> work we&#8217;d last visited with our PHP interfacing to it mentioned in <a title='Google Geo and Intensity Chart via Clipboard Co-ordinates Tutorial' href='#ggiccc-t'>Google Geo and Intensity Chart via Clipboard Co-ordinates Tutorial<\/a>.<\/p>\n<p>We already knew it could &#8230;<\/p>\n<ul>\n<li>highlight countries of interest in the world<\/li>\n<li>highlight some regions of interest within some countries &#8230; but discoveries today involved &#8230;<\/li>\n<li>the Google Chart Geo Chart can recognize some place names (it knows) and plot them &#8230; or &#8230;<\/li>\n<li>the Google Chart Geo Chart can be supplied latitude and longitude data to plot places on a map of the world<\/li>\n<\/ul>\n<p> &#8230; and it is this latter capability that is most exciting to us.  We can see &#8220;contextual&#8221; benefits interfacing to this new functionality we&#8217;ve added into our <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> interfacing&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php------------GETME\" title=\"geo_chart.php\">geo_chart.php<\/a> changed <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\">this way<\/a>.<\/p>\n<p>Stay tuned for this new tool helping contextualise some other web applications involving latitude and longitude geographical information.<\/p>\n<hr>\n<p id='ggiccc-t'>Previous relevant <a target=_blank title='Google Geo and Intensity Chart via Clipboard Co-ordinates Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-geo-and-intensity-chart-via-clipboard-co-ordinates-tutorial\/'>Google Geo and Intensity Chart via Clipboard Co-ordinates Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/IntensityChart\/intensity_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Geo and Intensity Chart via Clipboard Co-ordinates Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/IntensityChart\/geo_intensity_andmore.jpg\" title=\"Google Geo and Intensity Chart via Clipboard Co-ordinates Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Geo and Intensity Chart via Clipboard Co-ordinates Tutorial<\/p><\/div>\n<p>There are synergies among <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts'>Pie Chart<\/a> (remember the recent <a title='Google Pie Chart via Clipboard Co-ordinates Tutorial' href='#gpccc-t'>Google Pie Chart via Clipboard Co-ordinates Tutorial<\/a>)<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a><\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/intensitymap' title='Google Intensity Map'>Intensity Map<\/a> (or chart)<\/li>\n<\/ul>\n<p> &#8230; in that &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts'>Pie Chart<\/a> and <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> ask for a non-numerical,numerical set of data sets<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> and <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/intensitymap' title='Google Intensity Map'>Intensity Map<\/a> (or chart) are both concerned with a Country (Code or Name) non-numerical first data set member<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> can provide the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/intensitymap' title='Google Intensity Map'>Intensity Map<\/a> (or chart) with help regarding an <i>onclick<\/i> &#8220;select&#8221; event chance to enhance its functionality<\/li>\n<\/ul>\n<p>In this regard, it will be no surprise to many of you that with today&#8217;s changes to <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> and <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/intensitymap' title='Google Intensity Map'>Intensity Map<\/a> (or chart) PHP interfacings we take on today can be shown to you, again, using that data source (helper) we&#8217;ll present, again, today, below &#8230;<\/p>\n<p>If you want to recreate the conditions as shown in today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/IntensityChart\/geo_intensity_andmore.jpg\" title='Tutorial picture'>tutorial picture<\/a> &#8230;<\/p>\n<ol>\n<li>copy the contents below &#8230;<br \/>\n<iframe style='width:100%;height:330px;' src='http:\/\/www.rjmprogramming.com.au\/PHP\/ChartEditor\/intensity_chart.csv_GETME' title='Copy this'><\/iframe><br \/>\n &#8230; <\/li>\n<li>and paste into the 5th prompt (window&#8217;s text) box of the Google Charts Intensity Map (or Chart) interfacing <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/IntensityChart\/intensity_chart.php\" title=\"Click picture\">live run<\/a> link<\/li>\n<li>click OK button &#8230; P.S.  On first prompt, appending <i>&amp;onclick=y<\/i> to what you want as an Intensity Map (or Chart) title will work the Geo Chart&#8217;s select event logic we harness with this interfacing<\/li>\n<li>&#8230; or, if you are feeling lazy &#8230;<br \/>\n<a target=_blank title=\"http:\/\/www.rjmprogramming.com.au\/PHP\/IntensityChart\/intensity_chart.php?title=My%20World%20Population%20and%20Crude%20Birth%20Rate&#038;onclick=y&#038;width=300&#038;height=300&#038;country=Country&#038;area=Crude%20Birth%20Rate&#038;population=Population%20(mil)&#038;data=,%20[~http;China,1347000000,12,India,1241000000,22,United%20States,312000000,14,Indonesia,238000000,18,Brazil,197000000,15,Pakistan,177000000,27,Nigeria,162000000,40,Bangladesh,151000000,20,Russia,143000000,13,Japan,128000000,8,Mexico,115000000,19,Philippines,96000000,25,Vietnam,88000000,16,Ethiopia,87000000,31,Germany,81800000,8,Egypt,82600000,23,Iran,78000000,17,Turkey,74000000,18,Thailand,69500000,12,Congo,67800000,43,France,63300000,13,United%20Kingdom,62700000,13,Italy,60800000,9~,0,0]\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/IntensityChart\/intensity_chart.php?title=My%20World%20Population%20and%20Crude%20Birth%20Rate&#038;onclick=y&#038;width=300&#038;height=300&#038;country=Country&#038;area=Crude%20Birth%20Rate&#038;population=Population%20(mil)&#038;data=,%20[~http;China,1347000000,12,India,1241000000,22,United%20States,312000000,14,Indonesia,238000000,18,Brazil,197000000,15,Pakistan,177000000,27,Nigeria,162000000,40,Bangladesh,151000000,20,Russia,143000000,13,Japan,128000000,8,Mexico,115000000,19,Philippines,96000000,25,Vietnam,88000000,16,Ethiopia,87000000,31,Germany,81800000,8,Egypt,82600000,23,Iran,78000000,17,Turkey,74000000,18,Thailand,69500000,12,Congo,67800000,43,France,63300000,13,United%20Kingdom,62700000,13,Italy,60800000,9~,0,0]\">http:\/\/www.rjmprogramming.com.au\/PHP\/IntensityChart\/intensity_chart.php?title=My%20World%20Population%20and%20Crude%20Birth%20Rate&#038;onclick=y&#038;width=300&#038;height=300&#038;country=Country&#038;area=Crude%20Birth%20Rate&#038;population=Population%20(mil)&#038;data=,%20[~http;China,1347000000,12,India,1241000000,22,United%20States,312000000,14,Indonesia,238000000,18,Brazil,197000000,15,Pakistan,177000000,27,Nigeria,162000000,40,Bangladesh,151000000,20,Russia,143000000,13,Japan,128000000,8,Mexico,115000000,19,Philippines,96000000,25,Vietnam,88000000,16,Ethiopia,87000000,31,Germany,81800000,8,Egypt,82600000,23,Iran,78000000,17,Turkey,74000000,18,Thailand,69500000,12,Congo,67800000,43,France,63300000,13,United%20Kingdom,62700000,13,Italy,60800000,9~,0,0]<\/a><\/li>\n<\/ol>\n<p>There was that &#8220;clipboard&#8221; and URL compatibility worked on today, and, biting the bullet, getting great help from <a target=_blank title='Useful link, thanks' href='https:\/\/gist.github.com\/vxnick\/380904'>this useful link<\/a>, thanks, we improved the Intensity Map (or Chart) input requirements, allowing (quietly) a user to enter whole Country Names, and behind the scenes we&#8217;ll try to map these to the ISO-2 character country codes the Intensity Map (or Chart) requires as input data.<\/p>\n<p>The two Google Charts featuring today, we like to think of as two of the &#8220;where triplets&#8221;, those being, to us &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' title='Google Map Charts'>Map Chart<\/a> (remember the recent <a title='Google Map Chart via Clipboard Co-ordinates Tutorial' href='#gmccc-t'>Google Map Chart via Clipboard Co-ordinates Tutorial<\/a>  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" title=\"Click picture\">live run<\/a>)<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php---GETME\" title=\"geo_chart.php\">geo_chart.php<\/a> changed <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\">this way<\/a><\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/intensitymap' title='Google Intensity Map'>Intensity Map<\/a> (or chart) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/IntensityChart\/intensity_chart.php\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/IntensityChart\/intensity_chart.php---GETME\" title=\"intensity_chart.php\">intensity_chart.php<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/IntensityChart\/intensity_chart.php---GETME\" title=\"intensity_chart.php\">this way<\/a><\/li>\n<\/ul>\n<p> &#8230; along with the PHP helper <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/csv.php-----------GETME\">csv.php<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/csv.php-----------GETME\">this way<\/a>.<\/p>\n<hr>\n<p id='gpccc-t'>Previous relevant <a target=_blank title='Google Pie Chart via Clipboard Co-ordinates Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-pie-chart-via-clipboard-co-ordinates-tutorial\/'>Google Pie Chart via Clipboard Co-ordinates Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Pie Chart via Clipboard Co-ordinates Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart_clipboard.jpg\" title=\"Google Pie Chart via Clipboard Co-ordinates Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Pie Chart via Clipboard Co-ordinates Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Google Map Chart via Clipboard Co-ordinates Tutorial' href='#gmccc-t'>Google Map Chart via Clipboard Co-ordinates Tutorial<\/a> was a good precursor to today&#8217;s work interfacing this time to the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts'>Pie Chart<\/a>.<\/p>\n<p>With this work, we&#8217;ve started refining the clipboard &#8220;smarts&#8221; by looking for linefeeds &#8230; in Javascript thoughts &#8230;<\/p>\n<p><code><br \/>\nString.fromCharCode(10)<br \/>\n<\/code><\/p>\n<p> &#8230; and as the data exits the Javascript prompt window on its way, before navigating back to the PHP itself, we can check for too many fields to the right of the data, and truncate the clipboard data, as necessary.  Along the way, we may be able to reject any header records with this same approach.  We can check for no numerical fields here.  Business specific logic can be applied here too.  With a Pie Chart, the original data, or the user, may be tempted to place &#8220;%&#8221; after the numerical data, and we can take the opportunity to weed these out.  Also, with the character data, it may be delimited by a double quote (ie. within &#8220;&#8221;), and with this knowledge in mind, we may be able to weed out confusing additional commas that could confuse us with the clipboard comma separated value format of the data.<\/p>\n<p>The lesson here, is to &#8220;validate early&#8221; and it could be good to &#8220;validate often&#8221; as well.  Real data can be strange indeed.<\/p>\n<p><code><br \/>\n function dlp(thisris) {<br \/>\n      if (thisris != null) {<br \/>\n        var commacount=thisris.toLowerCase().replace(\/\\&lt;\\\/td\\&gt;\/g,'  ,  ').indexOf(',');<br \/>\n        if (thisris.toLowerCase().replace('https:','http:').indexOf('http:') == 0) {<br \/>\n             fti=true;<br \/>\n             allowed=true;<br \/>\n             datac=thisris;<br \/>\n        } else if (commacount &gt;= 0) {<br \/>\n             var thatris=thisris.replace(\/\\ \\\"\/g,String.fromCharCode(10) + '\"').replace(\/\\&lt;tr\\&gt;\/g,'').replace(\/\\&lt;\\\/td\\&gt;\\&lt;td\\&gt;\/g,',').replace(\/\\&lt;\\\/tr\\&gt;\/g,String.fromCharCode(10)).replace(\/\\&lt;\\\/td\\&gt;\/g,',').replace(\/\\,\\,\/g,',').replace(\/\\,\\,\/g,',').replace(',' + String.fromCharCode(10),String.fromCharCode(10));<br \/>\n             var zisok=true, fldq=thatris.split(',');<br \/>\n             var pielines=thatris.split(String.fromCharCode(10));<br \/>\n             if ((fldq[0].replace('\"','').trim() + ' ').substring(0,1) &lt; '0' || (fldq[0].replace('\"','').trim() + ' ').substring(0,1) &gt; '9') {<br \/>\n              if ((fldq[eval(-1 + fldq.length)].replace('\"','').trim() + ' ').substring(0,1) &lt; '0' || (fldq[eval(-1 + fldq.length)].replace('\"','').trim() + ' ').substring(0,1) &gt; '9') {<br \/>\n               zisok=false;<br \/>\n              }<br \/>\n             }<br \/>\n             if (!zisok && pielines.length &gt; 1) {<br \/>\n             fldq=pielines[1].split(',');<br \/>\n             zisok=true;<br \/>\n             if ((fldq[0].replace('\"','').trim() + ' ').substring(0,1) &lt; '0' || (fldq[0].replace('\"','').trim() + ' ').substring(0,1) &gt; '9') {<br \/>\n              if ((fldq[eval(-1 + fldq.length)].replace('\"','').trim() + ' ').substring(0,1) &lt; '0' || (fldq[eval(-1 + fldq.length)].replace('\"','').trim() + ' ').substring(0,1) &gt; '9') {<br \/>\n               zisok=false;<br \/>\n              }<br \/>\n             }<br \/>\n             }<br \/>\n             if (zisok) {<br \/>\n             while (thatris.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n              var inpies, pied='';<br \/>\n              thatris='';<br \/>\n              var sthatris='';<br \/>\n              for (var ipie=0; ipie&lt;pielines.length; ipie++) {<br \/>\n               inpies=pielines[ipie].split(',');<br \/>\n               if (inpies.length &gt; 1) {<br \/>\n                if ((inpies[0].trim() + \" \").substring(0,1) == '\"' && (inpies[1].trim() + \" \").substring(0,1) == '\"') {<br \/>\n                sthatris=pied + inpies[0].trim().substring(1).split('\"')[0].trim().replace('%','').replace(',','').replace(',','') + ',' + inpies[1].trim().substring(1).split('\"')[0].trim().replace('%','').replace(',','').replace(',','');<br \/>\n                } else if ((inpies[0].trim() + \" \").substring(0,1) == '\"') {<br \/>\n                sthatris=pied + inpies[0].trim().substring(1).split('\"')[0].trim().replace('%','').replace(',','').replace(',','') + ',' + inpies[1].trim().replace('%','').replace('\"','');<br \/>\n                } else if ((inpies[1].trim() + \" \").substring(0,1) == '\"') {<br \/>\n                sthatris=pied + inpies[0].trim().replace('%','') + ',' + inpies[1].trim().substring(1).split('\"')[0].trim().replace('%','').replace(',','').replace(',','');<br \/>\n                } else {<br \/>\n                sthatris=pied + inpies[0].trim().replace('%','') + ',' + inpies[1].trim().replace('%','').replace('\"','');<br \/>\n                }<br \/>\n                inpies=sthatris.replace(pied,'').split(',');<br \/>\n                if (((inpies[0].trim() + \" \").substring(0,1) &gt;= '0' && (inpies[0].trim() + \" \").substring(0,1) &lt;= '9') || ((inpies[1].trim() + \" \").substring(0,1) &gt;= '0' && (inpies[1].trim() + \" \").substring(0,1) &lt;= '9')) {<br \/>\n                thatris+=sthatris;<br \/>\n                pied=',';<br \/>\n                }<br \/>\n               }<br \/>\n              }<br \/>\n             }<br \/>\n             thatris=thatris.replace(\/\\,\\,\/g,',');<br \/>\n             fti=true;<br \/>\n             allowed=true;<br \/>\n             datac='http;' + thatris;<br \/>\n             thisris='http;' + thatris;<br \/>\n             }<br \/>\n        }<br \/>\n      }<br \/>\n      return thisris;<br \/>\n }<br \/>\n<\/code><\/p>\n<p>Our PHP Google Chart Pie Chart interface is <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php-----------GETME\">pie_chart.php<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php-----------GETME\">this way<\/a> for today&#8217;s work, that you can try yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>Our PHP helper <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/csv.php----------GETME\">csv.php<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/csv.php----------GETME\">this way<\/a> for today&#8217;s work.<\/p>\n<p>If you want to recreate the conditions as shown in today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart_clipboard.jpg\" title='Tutorial picture'>tutorial picture<\/a> &#8230;<\/p>\n<ol>\n<li>copy the contents below &#8230;<br \/>\n<iframe style='width:100%;height:330px;' src='http:\/\/www.rjmprogramming.com.au\/PHP\/ChartEditor\/intensity_chart.csv_GETME' title='Copy this'><\/iframe><br \/>\n &#8230; <\/li>\n<li>and paste into the 4th prompt (window&#8217;s text) box of the Google Charts Pie Chart interfacing <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php\" title=\"Click picture\">live run<\/a> link<\/li>\n<li>click OK button &#8230; P.S.  On first prompt, appending <i>&amp;onclick=y<\/i> to what you want as a Pie Chart title will work the Pie Chart&#8217;s select event logic we harness with this interfacing<\/li>\n<li>&#8230; or, if you are feeling lazy &#8230;<br \/>\n<a target=_blank title=\"https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php?title=Country%20Populations&#038;onclick=y&#038;task=Country&#038;desc=Populations&#038;data=,%20[~https;China,1347000000,India,1241000000,United%20States,312000000,Indonesia,238000000,Brazil,197000000,Pakistan,177000000,Nigeria,162000000,Bangladesh,151000000,Russia,143000000,Japan,128000000,Mexico,115000000,Philippines,96000000,Vietnam,88000000,Ethiopia,87000000,Germany,81800000,Egypt,82600000,Iran,78000000,Turkey,74000000,Thailand,69500000,Congo,67800000,France,63300000,United%20Kingdom,62700000,Italy,60800000~,100]\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php?title=Country%20Populations&#038;onclick=y&#038;task=Country&#038;desc=Population&#038;data=,%20[~https;China,1347000000,India,1241000000,United%20States,312000000,Indonesia,238000000,Brazil,197000000,Pakistan,177000000,Nigeria,162000000,Bangladesh,151000000,Russia,143000000,Japan,128000000,Mexico,115000000,Philippines,96000000,Vietnam,88000000,Ethiopia,87000000,Germany,81800000,Egypt,82600000,Iran,78000000,Turkey,74000000,Thailand,69500000,Congo,67800000,France,63300000,United%20Kingdom,62700000,Italy,60800000~,100]\">https:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php?title=Country%20Populations&#038;onclick=y&#038;task=Country&#038;desc=Populations&#038;data=,%20[~https;China,1347000000,India,1241000000,United%20States,312000000,Indonesia,238000000,Brazil,197000000,Pakistan,177000000,Nigeria,162000000,Bangladesh,151000000,Russia,143000000,Japan,128000000,Mexico,115000000,Philippines,96000000,Vietnam,88000000,Ethiopia,87000000,Germany,81800000,Egypt,82600000,Iran,78000000,Turkey,74000000,Thailand,69500000,Congo,67800000,France,63300000,United%20Kingdom,62700000,Italy,60800000~,100]<\/a><\/li>\n<\/ol>\n<hr>\n<p id='gmccc-t'>Previous relevant <a target=_blank title='Google Map Chart via Clipboard Co-ordinates Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-map-chart-via-clipboard-co-ordinates-tutorial\/'>Google Map Chart via Clipboard Co-ordinates Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Map Chart via Clipboard Co-ordinates Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/mapclipboard.jpg\" title=\"Google Map Chart via Clipboard Co-ordinates Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Map Chart via Clipboard Co-ordinates Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Google Map Chart via URL Co-ordinates Tutorial' href='#gmcurlc-t'>Google Map Chart via URL Co-ordinates Tutorial<\/a> added functionality directed towards a &#8230;<\/p>\n<ul>\n<li>secondary data source, that you access &#8230; but today we are going to extend that functionality to support a &#8230;<\/li>\n<li>primary data source that you enter a comma separated values list for the [place,lat,long] data sets (yourself, via the computer keyboard) &#8230; as well as a &#8230;<\/li>\n<li>&#8220;subset&#8221; of a secondary data source, that you access, more than likely, using you computer device&#8217;s <i>clipboard<\/i><\/li>\n<\/ul>\n<p>The invention of the <a target=_blank title='Clipboard information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Clipboard_%28computing%29'><i>clipboard<\/i><\/a> was a brilliant step.  Before it, we were so beholden to programmers to get tailored work done, and though it&#8217;s sad that so many of you get on without us (cough, cough) &#8230; well &#8230; we were being overworked anyway &#8230; and there was that project to &#8220;make the morning breakfast coffee before you even know you wanted it&#8221; to get onto &#8230; finally.<\/p>\n<p>Perhaps we all forget now what the <i>clipboard<\/i> has meant, for so many of us.  It is the freedom of &#8220;copy and paste&#8221;, the individualism tool of content creation.<\/p>\n<p>Yesterday&#8217;s functionality idea is a case in point.  &#8220;Secondary data sources&#8221; are, by definition, out of your control, as to what the content of a web page is.  Notice how, yesterday, we made some content that was (s)ftp transferred over to the rjmprogramming.com.au domain via &#8230; yes, you guessed it &#8230; <\/p>\n<ol>\n<li>me copying (off the <a target=_blank title='Co-ordinates, thanks' href='https:\/\/www.mapbox.com\/help\/troubleshoot-csv\/#example'>mapbox.com<\/a> website, thanks, as <b>part<\/b> of the contents of a webpage) &#8230; then &#8230;<\/li>\n<li>pasting that content into a csv text file on the MacBook Pro computer we&#8217;re using (locally) &#8230; and then &#8230;<\/li>\n<li>(s)ftp transferred over to rjmprogramming.com.au domain to represent a &#8230;<\/li>\n<li>URL usable within the functionality of our <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map'>Map Chart<\/a> interface we host here as the PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php-------------------------GETME\">map.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" title=\"Click picture\">live run<\/a> link<\/li>\n<\/ol>\n<p>But there you are, an intelligent human, able to determine for yourself the data you are interested in (quite often not the entire contents of a webpage, as yesterday&#8217;s work is ideally asking for), so that being the case, the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php-------------------------GETME\" title=\"map.php\">map.php<\/a> modifications to PHP code<\/a> we&#8217;ve made today, make it possible for (the much simpler) &#8230;<\/p>\n<ol>\n<li>me copying (off the <a target=_blank title='Co-ordinates, thanks' href='https:\/\/www.mapbox.com\/help\/troubleshoot-csv\/#example'>mapbox.com<\/a> website, thanks, as <b>part<\/b> of the contents of a webpage) &#8230; then &#8230;<\/li>\n<li>pasting that content within the functionality of our <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map'>Map Chart<\/a> interface we host here as the PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php-------------------------GETME\">map.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" title=\"Click picture\">live run<\/a> link<\/li>\n<\/ol>\n<p>If you have the <i>clipboard<\/i> as your friend, your time around computers becomes so much more enjoyable, and flexible, and within <i>your<\/i> control.  We, as programmers, need to think, on occasions, or encourage, on occasions, how the user is likely to use the clipboard, in conjunction with our applications.  As you might surmise, that can be a pretty unpredictable &#8220;artform&#8221;.<\/p>\n<p>Our PHP helper <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/csv.php---------GETME\">csv.php<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/csv.php---------GETME\">this way<\/a> for today&#8217;s work.<\/p>\n<hr>\n<p id='gmcurlc-t'>Previous relevant <a target=_blank title='Google Map Chart via URL Co-ordinates Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-map-chart-via-url-co-ordinates-tutorial\/'>Google Map Chart via URL Co-ordinates Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Map Chart via URL Co-ordinates Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/mapmore.jpg\" title=\"Google Map Chart via URL Co-ordinates Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Map Chart via URL Co-ordinates Tutorial<\/p><\/div>\n<p>The last blog posting referring to the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map'>Map Chart<\/a> interface we host here was with <a title='Emoji Name Search Map Chart Weather Tutorial' href='#ensmcwt'>Emoji Name Search Map Chart Weather Tutorial<\/a>, but today we are presenting a major functionality addition with implications for other Google Chart interfacing PHP codesets here.  We are allowing the user at the second prompt to take the data from a URL data source containing CSV (comma separated values) place,latitude,longitude data or those three fields in an HTML table element contents perhaps.<\/p>\n<p>We&#8217;ve added the ability to &#8220;map&#8221; (tee hee) &#8230;<\/p>\n<p><code><br \/>\nHTTP:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php?title=Where%20We%20Are&onclick=y&label=['Lat',&value='Lon',%20'Name']&data=<b>,%20[-33.90743410270099,151.17646964910696,~Parent1~]%20,%20[-33.907440603083124,151.1764659419197,~Parent2~]<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; from a CSV data URL look with contents &#8230;<\/p>\n<p><code><br \/>\n-33.907434102700991,151.17646964910696,Parent1<br \/>\n-33.907440603083124,151.17646594191973,Parent2<br \/>\n<\/code><\/p>\n<p> &#8230; that if placed at rjmprogramming.com.au&#8217;s Document Root and called parent.csv then a URL of &#8230;<\/p>\n<p><code><br \/>\nHTTP:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php?title=Where%20We%20Are&onclick=y&label=['Lat',&value='Lon',%20'Name']&data=<b>,%20[0.00000001,0.0000000,~HTTP:\/\/rjmprogramming.com.au\/parent.csv~]<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; could be a shortcut to that first URL same look.  You can see another example using data from <a target=_blank title='Co-ordinates, thanks' href='https:\/\/www.mapbox.com\/help\/troubleshoot-csv\/#example'>mapbox.com<\/a>, thanks, show the scenario our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/mapmore.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> illustrates.<\/p>\n<p>The way this &#8220;mapping&#8221; (tee hee, tee hee) of URLs can happen is that the PHP supervisor <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php------------------------GETME\">map.php<\/a> (changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php------------------------GETME\">this way<\/a> and which you can try with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\" title=\"Click picture\">live run<\/a> link) &#8220;includes&#8221; (ie. calls) &#8230;<\/p>\n<p><code><br \/>\n    include \"..\/csv.php\";<br \/>\n<\/code><\/p>\n<p> &#8230; a (now bigger, and more functional) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/csv.php--------GETME\">csv.php<\/a> (changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/csv.php--------GETME\">this way<\/a>) does its best to handle a few looks to the CSV or tabular data, with code to allow for &#8230;<\/p>\n<ul>\n<li>CSV data ordered place,latitude(decimal),longitude(decimal) or latitude(decimal),longitude(decimal),place or place,longitude(decimal),latitude(decimal) or longitude(decimal),latitude(decimal),place<\/li>\n<li>CSV data ordered place,latitude(W\/S\/E\/N_deg_min_secs),longitude(W\/S\/E\/N_deg_min_secs) or latitude(W\/S\/E\/N_deg_min_secs),longitude(W\/S\/E\/N_deg_min_secs),place or place,longitude(W\/S\/E\/N_deg_min_secs),latitude(W\/S\/E\/N_deg_min_secs) or longitude(W\/S\/E\/N_deg_min_secs),latitude(W\/S\/E\/N_deg_min_secs),place<\/li>\n<li>HTML tabular data ordered place,latitude(decimal),longitude(decimal) or latitude(decimal),longitude(decimal),place or place,longitude(decimal),latitude(decimal) or longitude(decimal),latitude(decimal),place<\/li>\n<li>HTML tabular data ordered place,latitude(W\/S\/E\/N_deg_min_secs),longitude(W\/S\/E\/N_deg_min_secs) or latitude(W\/S\/E\/N_deg_min_secs),longitude(W\/S\/E\/N_deg_min_secs),place or place,longitude(W\/S\/E\/N_deg_min_secs),latitude(W\/S\/E\/N_deg_min_secs) or longitude(W\/S\/E\/N_deg_min_secs),latitude(W\/S\/E\/N_deg_min_secs),place<\/li>\n<\/ul>\n<hr>\n<p id='ensmcwt'>Previous relevant <a target=_blank title='Emoji Name Search Map Chart Weather Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-name-search-map-chart-weather-tutorial\/'>Emoji Name Search Map Chart Weather 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\/world_flags.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Name Search Map Chart Weather Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/worldflagw.jpg\" title=\"Emoji Name Search Map Chart Weather Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Name Search Map Chart Weather Tutorial<\/p><\/div>\n<p>If you&#8217;ve been studying the code of our hierarchy for our Emoji Flags of the World web application &#8230;<\/p>\n<ul>\n<li>grandparent <a target=_blank title='World Flags live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_flags.html'>Emoji Flags of the World live run<\/a>, with this HTML and Javascript <a target=_blank title='world_flags.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_flags.html-GETME'>world_flags.html<\/a> HTML and Javascript, unchanged from yesterday&#8217;s <a title='Emoji Name Search Timezone Tutorial' href='#enstt'>Emoji Name Search Timezone Tutorial<\/a> &#8230; supervising &#8230;<\/li>\n<li>parent <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php----GETME\" title=\"emoticon_keyboard_shortcuts.php\">emoticon_keyboard_shortcuts.php<\/a> PHP partner, also unchanged from yesterday, because, today, our focus is on what this supervises &#8230;<\/li>\n<li><b>child <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php---------------------GETME\" title=\"map.php\">map.php<\/a> PHP that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php---------------------GETME\" title=\"map.php\">this way<\/a> (and which is an independent <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\">Google Chart Map Chart interfacing live run<\/a> in its own right)<\/b><\/li>\n<\/ul>\n<p> &#8230; am sure you&#8217;ll have noticed how bottom heavy it is on the &#8220;child&#8221; as far as functionality goes.  What we like to call &#8220;the hard working duck syndrome&#8221;.  Partly, that is because we see the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> interface we have as being a very useful &#8220;meeting point&#8221; with interfacing web applications tending towards the &#8220;where&#8221; of life.<\/p>\n<p>Today&#8217;s job, extending yesterday&#8217;s <a title='Emoji Name Search Map Chart Tutorial' href='#ensmct'>Emoji Name Search Map Chart Tutorial<\/a> is to add Map Chart interfacing to the great <a target=_blank title='Weather Underground' href='http:\/\/www.wunderground.com'>Weather Underground<\/a> and its great API service for autocomplete name searches for weather (and hurricane) information &#8230; thanks.<\/p>\n<p>The changes are again just to that &#8220;hard working duck&#8221; Map Chart interface &#8220;child&#8221; web application, as for yesterday&#8217;s work.  We were very keen to do this, especially because &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Weather Underground' href='http:\/\/www.wunderground.com'>Weather Underground<\/a> database works most succinctly with <i>Placename, Country<\/i> identification pairs, better than for the &#8230;<\/li>\n<li><i>Continent\/Placename<\/i> setup of (PHP) Timezones<\/li>\n<\/ul>\n<p> &#8230; and so, while we are going to so much trouble scouring Timezone places for their associated Countries, it is a really good opportunity to slot in some Weather API interfacing to our Emoji World Flags web application, which is starting to be looking better and better as a trip planning aid.<\/p>\n<hr>\n<p id='ensmct'>Previous relevant <a target=_blank title='Emoji Name Search Map Chart Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-name-search-map-chart-tutorial\/'>Emoji Name Search Map Chart 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\/world_flags.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Name Search Map Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/worldflagtz.jpg\" title=\"Emoji Name Search Map Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Name Search Map Chart Tutorial<\/p><\/div>\n<p>We now have a three tier functionality hierarchy for our Emoji Flags of the World web application &#8230;<\/p>\n<ul>\n<li>grandparent <a target=_blank title='World Flags live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_flags.html'>Emoji Flags of the World live run<\/a>, with this HTML and Javascript <a target=_blank title='world_flags.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_flags.html-GETME'>world_flags.html<\/a> HTML and Javascript, unchanged from yesterday&#8217;s <a title='Emoji Name Search Timezone Tutorial' href='#enstt'>Emoji Name Search Timezone Tutorial<\/a> &#8230; supervising &#8230;<\/li>\n<li>parent <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php----GETME\" title=\"emoticon_keyboard_shortcuts.php\">emoticon_keyboard_shortcuts.php<\/a> PHP partner, also unchanged from yesterday, because, today, our focus is on what this supervises &#8230;<\/li>\n<li><b>child <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php--------------------GETME\" title=\"map.php\">map.php<\/a> PHP that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php--------------------GETME\" title=\"map.php\">this way<\/a> (and which is an independent <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\">Google Chart Map Chart interfacing live run<\/a> in its own right)<\/b><\/li>\n<\/ul>\n<p> &#8230; all made so very possible when web applications sit in the same domain and you utilize the HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element.<\/p>\n<p>We wanted to enhance its integration by &#8230;<\/p>\n<ul>\n<li>adding in &#8220;locality pins&#8221; for all PHP Timezone places in the country of interest<\/li>\n<li>involving Emoji flags in the Map Chart title (rather than as a pin) because Emojis, after all, are like textual data, not HTML (but can use HTML Entity representations in both)<\/li>\n<\/ul>\n<p>To work the latter of these we called on recent experience with the &#8220;Fifth Beatle&#8221; discussion in <a target=_blank title='Emoji Name Search Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-name-search-primer-tutorial\/'>Emoji Name Search Primer Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-name-search-primer-tutorial\/'><p>\nWe got quite excited recently with <a title='Rainbow Games PHP Emoji Tutorial' href='#rgphpet'>Rainbow Games PHP Emoji Tutorial<\/a> when we added a (fourth Beatle) <i>emoji helper<\/i>, called <a target=_blank title='Emoji Terra' href='http:\/\/www.emojiterra.com'>Emoji Terra<\/a>, into the mix of tools to gather emoji information.  Today, we&#8217;ve got a new Emoji Search web application that introduces a new (<a target=_blank title='Pete Best information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Fifth_Beatle'>fifth Beatle(?)<\/a>) <b>emoji helper tool<\/b> to add into the &#8220;how we see it&#8221; mix &#8230;\n<\/p><\/blockquote>\n<p>We found that <a target=_blank title='Emoji Terra' href='http:\/\/www.emojiterra.com'>Emoji Terra<\/a> could be used in our map Chart interfacing PHP to look up the HTML Decimal Entity for a flag of a country via the URL pattern &#8230;<\/p>\n<p><code><br \/>\nHTTP:\/\/www.emojiterra.com\/flag-for-[CountryNameSpacesMakeMinusSignsLowerCase]<br \/>\n<\/code><\/p>\n<p>So even though Google Chart Map Charts do not allow HTML in their titles there is nothing stopping you putting in an HTML Entity Emoji coding.<\/p>\n<p>As far as the former goes, we again called on the PHP <a target=_blank title='DateTimeZone class' href='http:\/\/php.net\/manual\/en\/class.datetimezone.php'>DateTimeZone<\/a> class to scrutinize the first Timezone in the Map Chart title, derive its ISO 2 letter Country Code, and look through the array list of (PHP) Timezones to garner latitude and longitude, time now, and GMT offset information necessary to improve the &#8220;where&#8221; and &#8220;when&#8221; aspects of our Google Chart Map Chart interfacing.<\/p>\n<hr>\n<p id='enstt'>Previous relevant <a target=_blank title='Emoji Name Search Timezone Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-name-search-timezone-tutorial\/'>Emoji Name Search Timezone 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\/world_flags.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Name Search Timezone Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/worldflag.jpg\" title=\"Emoji Name Search Timezone Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Name Search Timezone Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Emoji Name Search Map Tutorial' href='#ensmt'>Emoji Name Search Map Tutorial<\/a> was a step in the direction of &#8220;where&#8221; functionality, but because PHP teams up with the supervisory HTML &#8220;Emoji World Flags&#8221; web application, to make all this happen, there is the opportunity to add interest by adding a &#8220;when&#8221; aspect to how it works.<\/p>\n<p>As we&#8217;ve said many times now, should you have access to PHP, you also have access to its <a target=_blank title='DateTimeZone class' href='http:\/\/php.net\/manual\/en\/class.datetimezone.php'>DateTimeZone<\/a> class where Timezones can be linked to ISO 2 letter Country Codes, useful as an integration point as of recent times when we introduced ISO 2 letter Country Codes to today&#8217;s (supervisory) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_flags.html\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_flags.html-GETME\" title=\"world_flags.html\">world_flags.html<\/a> HTML and Javascript code.<\/p>\n<p>But it is not HTML code that changes today.  It is its PHP partner <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php----GETME\" title=\"emoticon_keyboard_shortcuts.php\">emoticon_keyboard_shortcuts.php<\/a> changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php----GETME\" title=\"emoticon_keyboard_shortcuts.php\">this way<\/a>, that arranges that its call of <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> passes across a new URL &#8230;<\/p>\n<p><code><br \/>\n&amp;ccode=[ISO 2 letter Country Code]<br \/>\n<\/code><\/p>\n<p> &#8230; argument that uses a new PHP function as below (arrays shortened for practicality purposes) &#8230;<\/p>\n<p><code><br \/>\n&lt;?php<br \/>\n function inctycodecheck($incd, $sofar) {<br \/>\n    $nearname=[\"Africa\/Abidjan\",\"Africa\/Accra\", ... ]; \/\/ array of Timezone names<br \/>\n    $retv=\"\";<br \/>\n    $retd=\"\";<br \/>\n    $otz = new DateTimeZone(\"UTC\");<br \/>\n    $jj=0;<br \/>\n    $origin_dt = new DateTime(\"now\", $otz);<br \/>\n    for ($best1=0; $best1&lt;sizeof($nearname); $best1++) {<br \/>\n        try {<br \/>\n        $tz = new DateTimeZone($nearname[$best1]);<br \/>\n        $cloc = $tz-&gt;getLocation();<br \/>\n        $ctrycode = $cloc['country_code'];<br \/>\n        if (strtoupper($incd) == strtoupper($ctrycode)) {<br \/>\n         $remote_dt = new DateTime(\"now\", $tz);<br \/>\n         $offset = ($tz-&gt;getOffset($remote_dt) - $otz-&gt;getOffset($origin_dt)) \/ 3600;<br \/>\n         $newp=$retd . $nearname[$best1] . \"\/\" . $remote_dt-&gt;format('Y-m-d_H:i:s') . \" (GMT\" . $offset . \")\";<br \/>\n         $huhs=explode(\" (GMT\" . $offset . \")\", $retv);<br \/>\n         if (sizeof($huhs) == 2) {<br \/>\n           if (explode(\"\/\", $newp)[0] != explode(\"\/\", explode(\",\", $huhs[0])[-1 + sizeof(explode(\",\", $huhs[0]))])[0]) {<br \/>\n             $huhs=explode(\"youwillneverfindthis\", $retv);<br \/>\n           }<br \/>\n         }<br \/>\n         if (($sofar + strlen(urlencode(($retv . $newp)))) &lt; 950 && $jj &lt; 10 && sizeof($huhs) == 1) {<br \/>\n          $retv.=$newp;<br \/>\n          $retd=\",\";<br \/>\n          $jj++;<br \/>\n         }<br \/>\n        }<br \/>\n        } catch (Exception $exc) { }<br \/>\n    }<br \/>\n    return $retv;<br \/>\n }<br \/>\n?&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; called later in the code with the <b>new block of code<\/b> as per &#8230;<\/p>\n<p><code><br \/>\n&lt;?php<br \/>\n       $urlis=urldecode($_GET['gmc']); \/\/ URL to point at template Google Chart Map Chart call for Country of interest<br \/>\n       if (strpos($urlis, ',,') !== false) {<br \/>\n       $urlis=str_replace(\",,\", urlencode($latis . \",\" . $longis . \",\"), $urlis);<br \/>\n       } else {<br \/>\n       $urlis=str_replace(urlencode(\",,\"), urlencode($latis . \",\" . $longis . \",\"), $urlis);<br \/>\n       }<br \/>\n       <b>if (isset($_GET['ccode'])) {<br \/>\n        $urlis=str_replace(\"&onclick=\", \"%20\" . urlencode(inctycodecheck(urldecode($_GET['ccode']), (strlen($urlis) + 3))) . \"&onclick=\", $urlis);  \/\/ appends to the title argument<br \/>\n       }<\/b><br \/>\nif (isset($_SERVER['HTTPS'])) {<br \/>\n    if ($_SERVER['HTTPS'] == \"on\") {<br \/>\n       header(\"Location: https:\" . $urlis);<br \/>\n    } else {<br \/>\n       header(\"Location: http:\" . $urlis);<br \/>\n    }<br \/>\n} else {<br \/>\n       header(\"Location: http:\" . $urlis);<br \/>\n}<br \/>\n       exit;<br \/>\n?&gt;<br \/>\n<\/code><\/p>\n<hr>\n<p id='ensmt'>Previous relevant <a target=_blank title='Emoji Name Search Map Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-name-search-map-tutorial\/'>Emoji Name Search Map 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\/world_flags.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Name Search Map Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/worldflags.jpg\" title=\"Emoji Name Search Map Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Name Search Map Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s posted data <a title='Emoji Name Search Posting Tutorial' href='#enspt'>Emoji Name Search Posting Tutorial<\/a> functionality opened the door to &#8220;where&#8221; web application (software) integration, because the wonderful <a target=_blank title='Wikipedia' href='http:\/\/www.wikipedia.org'>Wikipedia<\/a> has compiled Latitude,Longitude co-ordinate pairs for those countries, and that is our foot in the door to place an HTML <i>a<\/i> link under the Emoji flags, that points to our favourite &#8220;where&#8221; interfacing tool, the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a>.<\/p>\n<p>Because the Map Chart and Emoji Flag web application share the same domain we can keep this functionality on this same Emoji Flag webpage in an &#8230;<\/p>\n<ul>\n<li>HTML iframe element <i>name=gcmi<\/i> <i>id=gcmi<\/i> initially invisible &#8230; &#8220;populated by&#8221; &#8230;<\/li>\n<li>HTML <i>a<\/i> element <i>target=gcmi<\/i> <i>href=[URL to Map Chart for Country of Interest]<\/i> <i>onclick=aoc();<\/i> &#8230;<br \/>\n<code><br \/>\nfunction aoc() {<br \/>\n   document.getElementById('gmci').style.width='450px';<br \/>\n   document.getElementById('gmci').style.height='450px';<br \/>\n   document.getElementById('gmci').style.display='inline-block';<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Another way to zoom around the world online!<\/p>\n<p>You can try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_flags.html\">Emoji Flags live run<\/a> (with underlying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_flags.html-GETME\">world_flags.html<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_flags.html-GETME\">this way<\/a>) or the other Emoji functionalities that have this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php\" title=\"Click picture\">live run<\/a> and\/or its PHP source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php---GETME\" title=\"emoticon_keyboard_shortcuts.php\">emoticon_keyboard_shortcuts.php<\/a> changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php---GETME\" title=\"emoticon_keyboard_shortcuts.php\">this way<\/a> to extend its software integration capabilities.<\/p>\n<hr>\n<p id='enspt'>Previous relevant <a target=_blank title='Emoji Name Search Posting Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-name-search-posting-tutorial\/'>Emoji Name Search Posting Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Name Search Posting Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_flags.jpg\" title=\"Emoji Name Search Posting Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Name Search Posting Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Emoji Name Search Tailoring Tutorial' href='#enstt'>Emoji Name Search Tailoring Tutorial<\/a> was suitable for data sets of that smaller size able to be handled by the web server limit of URL length.  But what if there are too many data items in your data set to be handled by PHP&#8217;s $_GET[] array URL ? and &#038; delimited URLs?  We, having PHP serverside code at our disposal, can turn to $_POST[] (HTML) method=POST form action=[here&#8217;sLookingAtYouKid] scenarios, to get around this issue.  The unfortunate side effect of this is that the HTML <a target=_blank title='mailto information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto'><i>mailto:<\/i><\/a> <i>a<\/i> link (email client) method of sharing your Emoji web application relies on that $_GET[] approach, that is, unless you wrote a whole &#8220;bespoke&#8221; web application to help out, like we do today for our new Emoji &#8220;World Flags&#8221; web application with this <a target=_blank title='World Flags live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_flags.html'>live run<\/a>, with this HTML and Javascript <a target=_blank title='World Flags live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_flags.html_GETME'>world_flags.html<\/a> source code.<\/p>\n<p>That new &#8220;supervisor&#8221; being a guinea pig idea into the $_POST[] thinking, we add some HTML form element input type=text <i>additions<\/i> to allow for, out of &#8230;<\/p>\n<ul>\n<li>Emoji look class &#8230; and &#8230;<\/li>\n<li><i>Wording next to Emoji<\/i> &#8230; and &#8230;<\/li>\n<li><i>URL of Wording&#8217;s link, be that substituted or appended<\/i><\/li>\n<\/ul>\n<p> &#8230; <i>mapped values<\/i>, optionally, off a newly offered HTML form element input type=text for this mapped comma or blank separated word list.<\/p>\n<p>Perhaps, now, you &#8220;long data set thinkers&#8221; want to try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php\" title=\"Click picture\">live run<\/a> and\/or its PHP source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php--GETME\" title=\"emoticon_keyboard_shortcuts.php\">emoticon_keyboard_shortcuts.php<\/a> changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php--GETME\" title=\"emoticon_keyboard_shortcuts.php\">this way<\/a> to extend its data set size capabilities.<\/p>\n<hr>\n<p id='enstt'>Previous relevant <a target=_blank title='Emoji Name Search Tailoring Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-name-search-tailoring-tutorial\/'>Emoji Name Search Tailoring Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Name Search Tailoring Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts_more.jpg\" title=\"Emoji Name Search Tailoring Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Name Search Tailoring Tutorial<\/p><\/div>\n<p>Information Technology is full of &#8220;buzz words&#8221;, and am sure you wince at some to all of them yourselves.  That&#8217;s a bit why am using &#8220;Tailoring&#8221; rather than &#8230;<\/p>\n<p><strike><\/p>\n<ul>\n<li>sharing<\/i>\n<li>personalization<\/li>\n<\/ul>\n<p><\/strike><\/p>\n<p> &#8230; to give you a <strike>slumber<\/strike>rest from having to look under <strike>struck through<\/strike>deleted wording to look for hidden <strike>&#8220;buzz words&#8221;<\/strike>terminology that makes your <strike>hare<\/strike>hair <strike>sit up<\/strike>stand <strike>watching<\/strike>on <strike>Bugs Bunny<\/strike>end.<\/p>\n<p>We think, perhaps, that emojis can be important for young &#8220;would be&#8221; programmers to launch into.  Personally wonder how many &#8220;would be&#8221; programmers give the game up far too soon just because they don&#8217;t have those graphics skills, well, with emojis, a lot of that hard work, in miniature, has been done for you by some pretty creative people, so why not enjoy the fruits (chortle, in context, chortle) of their labour and start developing your own web applications to use them.  Daily, their use is increasing, as are the sharing of access methods.<\/p>\n<p>In today&#8217;s extension to the functionality started with yesterday&#8217;s <a title='Emoji Name Search Primer Tutorial' href='#enspt'>Emoji Name Search Primer Tutorial<\/a> we separate the <a target=_blank title='Emoji Terra' href='http:\/\/www.emojiterra.com'>Emoji Terra<\/a> aspects to how it works and allow the user to &#8230;<\/p>\n<ul>\n<li>supply an Emoji Word List of interest<\/li>\n<li>perhaps supply a heading and subheading to describe the &#8220;concept&#8221; of that list<\/li>\n<li>supply either a &#8230;\n<ol>\n<li>URL prefix &#8230; or &#8230;<\/li>\n<li>URL with the ~ (tilde) character where you want, substituted, your emoji name<\/li>\n<\/ol>\n<p> &#8230; to be a navigation destination in that similar new window navigation we used to access <a target=_blank title='Emoji Terra' href='http:\/\/www.emojiterra.com'>Emoji Terra<\/a> &#8230;\n<\/li>\n<li>presenting all this in an HTML form action=[here&#8217;sLookingAtYouKid] method=GET &#8230; <\/li>\n<li>that method=GET opening the door to be able to offer an email client engine method to <strike>&#8220;share&#8221;<\/strike>email somebody the link to a screen that looks like the one you&#8217;re seeing<\/li>\n<\/ul>\n<p>Of course, we&#8217;d like you to find some of your own such Emoji Display Dynamically Created Web Applications yourself, but to encourage, we, in the web application, today, identified two ideas, namely &#8230;<\/p>\n<ul>\n<li>Fruit and Vegetables via Wikipedia at <a target=_blank title='Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/'>https:\/\/en.wikipedia.org\/wiki\/<\/a> as a prefix &#8230; and &#8230;<\/li>\n<li>Astrology via Cafe Astrology at <u>https:\/\/cafeastrology.com\/~dailyhoroscope.html<\/u> via ~ (tilde) character substitution<\/li>\n<\/ul>\n<p> &#8230; each of which (and any you make will also) feature a link to the HTML <a target=_blank title='mailto information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto'><i>mailto:<\/i><\/a> <i>a<\/i> link out through the email client and to your recipient who can click the email link to <strike>&#8220;share&#8221;<\/strike><a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=civzfZ_3uVc'>compare notes<\/a>.<\/p>\n<p>Perhaps, now, you want to try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php\" title=\"Click picture\">live run<\/a> and\/or its PHP source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php-GETME\" title=\"emoticon_keyboard_shortcuts.php\">emoticon_keyboard_shortcuts.php<\/a> changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php-GETME\" title=\"emoticon_keyboard_shortcuts.php\">this way<\/a> to extend its functionality, involving a <a target=_blank title='Reveal blog postings at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>reveal<\/a> favourite of ours, the use of HTML(5)&#8217;s <a target=_blank title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>details<\/a> (and summary) element.<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-name-search-tailoring-tutorial\/'>Emoji Name Search Tailoring Tutorial<\/a>.<\/p>\n<hr>\n<p id='enspt'>Previous relevant <a target=_blank title='Emoji Name Search Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-name-search-primer-tutorial\/'>Emoji Name Search 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\/PHP\/emoticon_keyboard_shortcuts.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Name Search Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.jpg\" title=\"Emoji Name Search Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Name Search Primer Tutorial<\/p><\/div>\n<p>We got quite excited recently with <a title='Rainbow Games PHP Emoji Tutorial' href='#rgphpet'>Rainbow Games PHP Emoji Tutorial<\/a> when we added a (fourth Beatle) <i>emoji helper<\/i>, called <a target=_blank title='Emoji Terra' href='http:\/\/www.emojiterra.com'>Emoji Terra<\/a>, into the mix of tools to gather emoji information.  Today, we&#8217;ve got a new Emoji Search web application that introduces a new (<a target=_blank title='Pete Best information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Fifth_Beatle'>fifth Beatle(?)<\/a>) <b>emoji helper tool<\/b> to add into the &#8220;how we see it&#8221; mix below &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Emojipedia' href='http:\/\/www.emojipedia.org'>Emojipedia<\/a> is good for looking up Emoji names or concepts in words<\/li>\n<li><a target=_blank title='FileFormation Information website' href='http:\/\/www.fileformat.info'>FileFormat Information<\/a> is great for HTML Entity determinations for your less complex Emojis<\/li>\n<li><a target=_blank title='Iemoji website' href='http:\/\/www.iemoji.com'>Iemoji<\/a> is great for HTML Entity determinations for Emojis of all complexities<\/li>\n<li><i><a target=_blank title='Emoji Terra' href='http:\/\/www.emojiterra.com'>Emoji Terra<\/a> performs similar functionality as Iemoji but has a permalink organization more friendly to an &#8220;emoji search via emoji title&#8221; query, and that has suited our purposes today, and before, so, thanks a lot<\/i><\/li>\n<li><b><a target=_blank title='Iemoji website' href='https:\/\/afeld.github.io\/emoji-css\/'>Emoji CSS<\/a> performs similar functionality to Emojipedia, but has a pictorial view of Emoji names as well, right from the word go, thanks<\/b><\/li>\n<\/ul>\n<p>With these emoji tools in mind we wrote a new PHP web application combining those last two to show Emojis pictorially (with their short name) initially and allow the user to search for an Emoji (match) list via their HTML input type=text (textbox) entry, which results in &#8230;<\/p>\n<ul>\n<li>the Emoji (match) list look (as an Emoji &#8220;display&#8221;) &#8230; and &#8230;<\/li>\n<li>an HTML <i>a<\/i> link which is that Emoji&#8217;s short name &#8230; linking to &#8230;<\/li>\n<li>an <a target=_blank title='Emoji Terra' href='http:\/\/www.emojiterra.com'>Emoji Terra<\/a> webpage with more detail, including HTML Entity information if &#8220;short name&#8221; is unique, or one extra click away, if not<\/li>\n<\/ul>\n<p>Maybe you need to try the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php\" title=\"Click picture\">live run<\/a> and\/or its PHP source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoticon_keyboard_shortcuts.php_GETME\" title=\"emoticon_keyboard_shortcuts.php\">emoticon_keyboard_shortcuts.php<\/a> to download, perhaps?<\/p>\n<hr>\n<p id='rgphpet'>Previous relevant <a target=_blank title='Rainbow Games PHP Emoji Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/rainbow-games-php-emoji-tutorial\/'>Rainbow Games PHP Emoji 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\/emoji_walk_animation.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Rainbow Games PHP Emoji Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation_php.jpg\" title=\"Rainbow Games PHP Emoji Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Rainbow Games PHP Emoji Tutorial<\/p><\/div>\n<p>In order to take that further genericization step onto the achievements of yesterday&#8217;s <a title='Rainbow Games Genericization Tutorial' href='#rggt'>Rainbow Games Genericization Tutorial<\/a> to <b>get onto<\/b> (the mathematics Induction principle inspired) &#8230;<\/p>\n<ul>\n<li>prove for the first case<\/li>\n<li>prove for the second case<\/li>\n<li><b>prove for the n<sup>th<\/sup> case<\/b><\/li>\n<\/ul>\n<p> &#8230; we had a choice of &#8230;<\/p>\n<ul>\n<li>continue on (with) the HTML code creation of new &#8220;hardcoded&#8221; arrays (managed by Javascript eval abstractional approach) &#8230; or &#8220;bite the bullet&#8221; and &#8230;<\/li>\n<li>try to work out a generic &#8220;emoji look<font size=1>erer<\/font> up<font size=1>perer<\/font>&#8221; arrangement<\/li>\n<\/ul>\n<p>Guess you can tell we opted for the latter, huh?!  We started the investigation of this by examining our three favourite emoji informational websites, namely &#8230;<\/p>\n<ol>\n<li><a target=_blank title='Emojipedia' href='http:\/\/www.emojipedia.org'>Emojipedia<\/a><\/li>\n<li><a target=_blank title='FileFormation Information website' href='http:\/\/www.fileformat.info'>FileFormat Information<\/a><\/li>\n<li><a target=_blank title='Iemoji website' href='http:\/\/www.iemoji.com'>Iemoji<\/a><\/li>\n<\/ol>\n<p> &#8230; and were a bit surprised that we could not quite swing a generic method to glean the information, so don&#8217;t know whether our new &#8220;player&#8221; is &#8220;Ringo Starr&#8221; or not, but can tell you this, &#8220;its beat is much better than its bite&#8221; &#8230; <font size=1>chortle, chortle<\/font> &#8230;<\/p>\n<p><a target=_blank title='Emoji Terra' href='http:\/\/www.emojiterra.com'>Emoji Terra<\/a> performs similar functionality as Iemoji but has a permalink organization more friendly to an &#8220;emoji search via emoji title&#8221; query, and that suits our purposes today, so, thanks a lot.  Without this query by &#8220;emoji title&#8221; possibility we&#8217;d have been forced to adopt more of those &#8220;hardcoded&#8221; arrays, which would have been alright, but this second approach opens the door to &#8220;sport&#8221; events in &#8220;The Rainbow Games&#8221; web application using emojis of the future (ie. they haven&#8217;t been invented yet).<\/p>\n<p>How to work the interfacing to <a target=_blank title='Emoji Terra' href='http:\/\/www.emojiterra.com'>Emoji Terra<\/a>?<\/p>\n<ul>\n<li>good ol&#8217; PHP serverside language<\/li>\n<li>good ol&#8217; PHP&#8217;s <a target=_blank title='file_get_contents' href='http:\/\/us1.php.net\/file_get_contents'>file_get_contents<\/a> (supplemented by)<\/li>\n<li>good newish &#8220;PHP Source File as the Database Source&#8221; we&#8217;ve talked about in the past with <a target=_blank title='PHP Require Database Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-require-database-primer-tutorial\/'>PHP Require Database Primer Tutorial<\/a> and <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/signature-signature-php-tutorial\/' title='Signature Signature PHP Tutorial'>Signature Signature PHP Tutorial<\/a> whereby the PHP Source File updates itself with web application data<\/li>\n<\/ul>\n<p>This new PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_lookup.php_GETME\" title=\"emoji_lookup.php\">emoji_lookup.php<\/a> treats the &#8220;<b>prove for the n<sup>th<\/sup> case<\/b>&#8221; sports as ones to &#8230;<\/p>\n<ul>\n<li>look up the emoji information for (in the order &#8220;PHP Source File as the Database Source&#8221; then try <a target=_blank title='file_get_contents' href='http:\/\/us1.php.net\/file_get_contents'>file_get_contents<\/a> of Emoji Terra lookup), and &#8230;<\/li>\n<li>read the HTML partner source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation.htm\" title=\"Click picture\">live run<\/a>&#8216;s underlying HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation.html---GETME\" title=\"emoji_walk_animation.htm\">emoji_walk_animation.htm<\/a> (which changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation.html---GETME\" title=\"emoji_walk_animation.html\">this way<\/a>)<\/li>\n<li>amend that HTML source to supplant the &#8220;Sprint&#8221; default sport for this new nominated sport <font size=1>&#8230; trying not to fall over laughing at some of the new sports we present (inspired by a visit to <a target=_blank title='Emoji Terra' href='http:\/\/www.emojiterra.com\/search\/woman'>Emoji Terra search<\/a>)<\/font><\/li>\n<li>write out that amended HTML code as the web page (the beauty of a serverside language like PHP)<\/li>\n<\/ul>\n<p>The more detailed specifics of the <i><a target=_blank title='file_get_contents' href='http:\/\/us1.php.net\/file_get_contents'>file_get_contents<\/a> of Emoji Terra lookup<\/i> above are &#8230;<\/p>\n<ul>\n<li>build up a URL starting with <i>HTTP:\/\/emojiterra.com\/<\/i> &#8230; then &#8230;<\/li>\n<li>in emoji<i>land<\/i> arrangements there are two genders (as our prefixes if you will) &#8230; <i>woman-<\/i> and <i>man-<\/i><\/li>\n<li>then add on a &#8220;middle&#8221; sport descriptor (eg. <i>biking<\/i>)<\/li>\n<li>in emoji<i>land<\/i> emoticon<i>land<\/i> arrangements there are five descriptors (as our suffixes if you will) &#8230; <i>-dark-skin-tone<\/i>, <i>-medium-dark-skin-tone<\/i>, <i>-medium-skin-tone<\/i>, <i>-medium-light-skin-tone<\/i>, <i>-light-skin-tone<\/i><\/li>\n<li>for that set of 2x1x5=10 URLs glean what &#8220;HTML dec&#8221; (HTML Entity) information you can glean via the <a target=_blank title='file_get_contents' href='http:\/\/us1.php.net\/file_get_contents'>file_get_contents<\/a> call of the Emoji Terra URLs described above (eg. <a target=_blank title='' href='http:\/\/emojiterra.com\/woman-biking-dark-skin-tone'>Emoji: Woman Biking: Dark Skin Tone<\/a>) &#8230; built into a <i>Javascript array<\/i> string to &#8220;plug into&#8221; the previously read HTML partner source code, and amended to output as the web page the user sees<\/li>\n<\/ul>\n<p>Sports of the future in emoji<i>land<\/i>?  Just ask for the equivalent of <i>biking<\/i> (above) off the user via a Javascript prompt window (on the proviso you read <a target=_blank title='Conditional Alternative to Javascript Popup Windows in iOS Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/conditional-alternative-to-javascript-popup-windows-in-ios-tutorial\/'>Conditional Alternative to Javascript Popup Windows in iOS Tutorial<\/a> first please).<\/p>\n<hr>\n<p id='rggt'>Previous relevant <a target=_blank title='Rainbow Games Genericization Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/rainbow-games-genericization-tutorial\/'>Rainbow Games Genericization 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\/emoji_walk_animation.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Rainbow Games Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation_row.jpg\" title=\"Rainbow Games Genericization Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Rainbow Games Genericization Tutorial<\/p><\/div>\n<p>What would help genericize the recent <a title='Rainbow Games Double Transformation Tutorial' href='#rgdtt'>Rainbow Games Double Transformation Tutorial<\/a> &#8220;Rainbow Games&#8221; web application?   How about introducing another sport?<\/p>\n<p>Again, in honour of &#8220;onions of the 4th dimension&#8221; approaches, we mainly, turn to the power of Javascript&#8217;s <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp' title='Javascript eval'>eval<\/a> methodology to achieve this <a target=_blank title='Abstraction information from Wikipedia, thanks.' href='https:\/\/en.wikipedia.org\/wiki\/Abstraction'>abstracted<\/a> feeling to our web application.  Today, with this, we go <b>two thirds<\/b> of the way along the &#8220;Mathematical Induction&#8221; approach &#8230;<\/p>\n<ul>\n<li><b>prove for the first case<\/b><\/li>\n<li><b>prove for the second case<\/b><\/li>\n<li>prove for the n<sup>th<\/sup> case<\/li>\n<\/ul>\n<p>How does this use of Javascript eval manifest itself in this way?<\/p>\n<ul>\n<li>there are two arrays that work with the &#8220;content&#8221; of our &#8220;Rainbow Games&#8221; sport(s) (<font size=1>well, at least, the first &#8220;sprint running&#8221; sport<\/font>) called <i>emoticons[]<\/i> and <i>choices[]<\/i><\/li>\n<li>wherever we find references in the code to either of these two arrays we start to <b>involve<\/b> the global var<font size=1>iable<\/font> <b>verbsuffix<\/b> &#8230;<br \/>\n<code><br \/>\nvar verb='Sprint';<br \/>\nvar verbs=['Sprint','Row'];<br \/>\nvar anotherverb='run';<br \/>\n<b>var verbsuffix='';<\/b><br \/>\n<\/code><br \/>\n &#8230; in <b>altered<\/b> ways like &#8230;<br \/>\n<code><br \/>\nfunction plus(ih,ihep) {<br \/>\n  var outihep=ihep;<br \/>\n  if (<b>eval(\"<\/b>emoticons<b>\" + verbsuffix + \"<\/b>[<b>\" + <\/b>ih<b> + \"<\/b>]<b>\")<\/b>.indexOf('&lt;p&gt;') != -1) {<br \/>\n    outihep += ' (' + <b>eval(\"<\/b>emoticons<b>\" + verbsuffix + \"<\/b>[<b>\" + <\/b>ih<b> + \"<\/b>]<b>\")<\/b>.split('&lt;p&gt;')[1].split('&lt;')[0] + ')';<br \/>\n  }<br \/>\n  return outihep;<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; in that <i>abstracted<\/i> way &#8230; noting that sometimes you don&#8217;t need the &#8220;eval()&#8221; encasings &#8230;\n<\/li>\n<li>and so, working through the code this way it just falls to the coder to define new members for all the arrays for all the new sports (ours is &#8220;rowing&#8221; today), some of those new arrays (like for rowing are <i>emoticonsrowing[]<\/i> and <i>choicesrowing[]<\/i>) to involve &#8230;<\/li>\n<li>looking up emoji definitions from &#8230;\n<ol>\n<li><a target=_blank title='Emojipedia' href='http:\/\/www.emojipedia.org'>Emojipedia<\/a><\/li>\n<li><a target=_blank title='FileFormation Information website' href='http:\/\/www.fileformat.info'>FileFormat Information<\/a><\/li>\n<li><a target=_blank title='Iemoji website' href='http:\/\/www.iemoji.com'>Iemoji<\/a><\/li>\n<\/ol>\n<p>&#8230; not forgetting to &#8230;\n<\/li>\n<li>make sure the event logics work for multiple sport scenarios &#8230; but mostly they do by sticking to the principles above &#8230; especially for the &#8230;<\/li>\n<li>new HTML select (dropdown) element allows the user to pick a sport<\/li>\n<\/ul>\n<p>Remaining a work in progress, you can try out our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation.htm\" title=\"Click picture\">live run<\/a> link that has underlying HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation.html--GETME\" title=\"emoji_walk_animation.htm\">emoji_walk_animation.htm<\/a>, and which changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation.html--GETME\" title=\"emoji_walk_animation.html\">this way<\/a> regarding today&#8217;s genericization work.  We hope it gives you food for thought.<\/p>\n<hr>\n<p id='rgdtt'>Previous relevant <a target=_blank title='Rainbow Games Double Transformation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/rainbow-games-double-transformation-tutorial\/'>Rainbow Games Double Transformation 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\/emoji_walk_animation.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Rainbow Games Double Transformation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation_dt.jpg\" title=\"Rainbow Games Double Transformation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Rainbow Games Double Transformation Tutorial<\/p><\/div>\n<p>We were on the &#8220;road to personalization&#8221; for the web application game we started with yesterday&#8217;s <a title='Rainbow Games Primer Tutorial' href='#rgpt'>Rainbow Games Primer Tutorial<\/a> when &#8220;an old chestnut&#8221; came up again.  It&#8217;s happened before, the desire to &#8220;double transform&#8221; in CSS came about from our emoji &#8230; <\/p>\n<table>\n<tr>\n<td style='font-size:36px;'>&#127939;&#127998;&#8205;&#9792;&#65039;<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; table cell <i>mirroring<\/i> styling as per &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n* { overflow-x: visible; }<br \/>\n<br \/>\nselect { font-size: 36px; }<br \/>\n<br \/>\ntd.runner { width: 50px; word-wrap: break-word; font-size: 36px;<br \/>\n     <i>transform: scale(-1, 1); -o-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform:  scale(-1, 1);<\/i><br \/>\n        }   \/\/ <\/p>\n<table>\n<tr>\n<td style='font-size:36px;transform: scale(-1, 1); -o-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform:  scale(-1, 1);'>&#127939;&#127998;&#8205;&#9792;&#65039;<\/td>\n<\/tr>\n<\/table>\n<p>tr { max-height: 40px; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; necessary to make our running emojis run from left to right (that, alas, also transformed any accompanying &#8230; <\/p>\n<table>\n<tr>\n<td style='font-size:36px;transform: scale(-1, 1); -o-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform:  scale(-1, 1);'>&#127939;&#127998;&#8205;&#9792;&#65039; <\/p>\n<p style=\"display: block; font-size: 12px;-\">Florence<\/p>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; name), was added to in <b>this double transformational clause<\/b> to prove what this <a target=_blank title='Great link, thanks' href='https:\/\/stackoverflow.com\/questions\/5406368\/can-you-use-css-to-mirror-flip-text'>wonderful web page<\/a> advice had to say.  In other words, a &#8220;double transform&#8221; CSS styling scenario like the one below &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n* { overflow-x: visible; }<br \/>\n<br \/>\nselect { font-size: 36px; }<br \/>\n<br \/>\ntd.runner { width: 50px; word-wrap: break-word; font-size: 36px;<br \/>\n     <i>transform: scale(-1, 1); -o-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform:  scale(-1, 1);<\/i><br \/>\n        }<br \/>\ntr { max-height: 40px; }<br \/>\n<br \/>\n<b>p {<br \/>\n    display: block;<br \/>\n    font-size: 12px;<br \/>\n    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);<br \/>\n    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);<br \/>\n    -o-transform: matrix(-1, 0, 0, 1, 0, 0);<br \/>\n    transform: matrix(-1, 0, 0, 1, 0, 0);<br \/>\n}  <\/b>  \/\/ <\/p>\n<table style='width:50px;'>\n<tr style='width:50px;'>\n<td style='width:50px;font-size:36px;transform: scale(-1, 1); -o-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform:  scale(-1, 1);'>&#127939;&#127998;&#8205;&#9792;&#65039; <\/p>\n<p style=\"display: block; font-size: 12px;-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);-moz-transform: matrix(-1, 0, 0, 1, 0, 0);-o-transform: matrix(-1, 0, 0, 1, 0, 0);transform: matrix(-1, 0, 0, 1, 0, 0);\">Florence<\/p>\n<\/td>\n<\/tr>\n<\/table>\n<p>&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; works as a &#8220;double transform&#8221; to first &#8230;<\/p>\n<ul>\n<li>mirror (image) flip the table cell (td) emoji data &#8230; but us appending some &#8220;Runner Name&#8221; textual data underneath also, annoyingly, got flipped  until &#8230;<\/li>\n<li>within that (same) table cell (td) element and after the emoji data we append an HTML <a target=_blank title='HTML p tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_p.asp'>p<\/a>(aragraph) element to both &#8230;\n<ol>\n<li>introduce a new HTML element type into the (CSS styling) mix &#8230; and to &#8230;<\/li>\n<li>introduce a new CSS transformation type, the matrix &#8230; perhaps either or both new parts to the problem critical to its success when, believe me, lots of other approaches don&#8217;t work<\/li>\n<\/ol>\n<\/ul>\n<p> &#8230; to personalize the &#8220;runners&#8221; and &#8220;users&#8221;, optionally, &#8220;into the game&#8221;, by allowing the &#8220;user&#8221; to name their &#8220;runners&#8221; and allow for a &#8220;runner energy&#8221; setting be a bit randomized, to add for some other interest &#8220;variety&#8221; to the game&#8217;s workings.  So, still a work in progress that you can try out at our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation.html\" title=\"Click picture\">live run<\/a> link that has underlying HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation.html-GETME\" title=\"emoji_walk_animation.html\">emoji_walk_animation.html<\/a>, and which changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation.html-GETME\" title=\"emoji_walk_animation.html\">this way<\/a> regarding today&#8217;s work.<\/p>\n<hr>\n<p id='rgpt'>Previous relevant <a target=_blank title='Rainbow Games Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/rainbow-games-primer-tutorial\/'>Rainbow Games 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\/emoji_walk_animation.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Interesting Places Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation.jpg\" title=\"Rainbow Games Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Rainbow Games Primer Tutorial<\/p><\/div>\n<p>It&#8217;s been a while since we&#8217;ve written any conventional HTML and Javascript and CSS game.  Today&#8217;s game uses the &#8220;emoticon&#8221; section of the Emoji character set, defaulting so far, to the &#8220;running woman&#8221; emoji featuring in <a target=_blank title='Compound Emoji WordPress Usage Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/compound-emoji-wordpress-usage-tutorial\/'>Compound Emoji WordPress Usage Tutorial<\/a>.<\/p>\n<p>It&#8217;s the early days of our &#8220;Rainbow Games&#8221; web application, and we&#8217;re starting with the animation featuring horizontal hashtag navigation techniques for a running race start to our game.  Where it finishes?  Hard to say! Today, we&#8217;ve looked at &#8220;splits&#8221; and a finish line.<\/p>\n<p>You can try out our burgeoning <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation.html\" title=\"Click picture\">live run game concept<\/a> link that has underlying HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_walk_animation.html_GETME\" title=\"emoji_walk_animation.html\">emoji_walk_animation.html<\/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='#d35745' onclick='var dv=document.getElementById(\"d35745\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35745' 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='#d35768' onclick='var dv=document.getElementById(\"d35768\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/transformation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35768' 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='#d35879' onclick='var dv=document.getElementById(\"d35879\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/eval\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35879' 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='#d35937' onclick='var dv=document.getElementById(\"d35937\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/file_get_contents\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35937' 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='#d36261' onclick='var dv=document.getElementById(\"d36261\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36261' 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='#d36272' onclick='var dv=document.getElementById(\"d36272\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36272' 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='#d36311' onclick='var dv=document.getElementById(\"d36311\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/post\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36311' 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='#d36342' onclick='var dv=document.getElementById(\"d36342\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36342' 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='#d36381' onclick='var dv=document.getElementById(\"d36381\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/timezone\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36381' 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='#d36392' onclick='var dv=document.getElementById(\"d36392\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/software\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36392' 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='#d36404' onclick='var dv=document.getElementById(\"d36404\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/weather\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36404' 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='#d37462' onclick='var dv=document.getElementById(\"d37462\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geographicals\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37462' 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='#d37486' onclick='var dv=document.getElementById(\"d37486\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/clipboard\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37486' 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='#d37507' onclick='var dv=document.getElementById(\"d37507\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/csv\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37507' 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='#d37557' onclick='var dv=document.getElementById(\"d37557\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37557' 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='#d39032' onclick='var dv=document.getElementById(\"d39032\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/plot\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d39032' 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='#d39053' onclick='var dv=document.getElementById(\"d39053\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d39053' 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='#d39076' onclick='var dv=document.getElementById(\"d39076\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d39076' 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='#d39099' onclick='var dv=document.getElementById(\"d39099\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/trip\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d39099' 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='#d39141' onclick='var dv=document.getElementById(\"d39141\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wikipedia\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d39141' 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='#d50360' onclick='var dv=document.getElementById(\"d50360\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50360' 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='#d50369' onclick='var dv=document.getElementById(\"d50369\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50369' 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='#d50374' onclick='var dv=document.getElementById(\"d50374\"); dv.innerHTML = \"<iframe width=670 height=600 src=\" + \"\/\/www.rjmprogramming.com.au\/ITblog\/tag\/formdata\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50374' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We come at progress for yesterday&#8217;s Personalizing Interesting Places Collaboration Tutorial &#8220;Interesting Places&#8221; web application from &#8230; Ajax\/FormData email collaboration Placename (only) entries (looking up Latitude,Longitude where possible) We like Ajax\/FormData techniques a lot because they are so &#8220;midair&#8221;, a &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/personalizing-interesting-places-ajax-formdata-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":[69,88,1707,222,1604,2105,259,2276,2597,385,452,2730,1619,481,1533,513,518,524,527,590,1548,3423,684,2598,719,2126,748,2414,2413,932,2134,949,954,970,997,1761,3424,1917,1107,1133,1137,1226,1311,1694,1319,1431],"class_list":["post-50374","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-api","tag-co-ordinates","tag-collaborate","tag-collaboration","tag-context","tag-contextual","tag-delimitation","tag-digitise","tag-emoji","tag-form","tag-formdata","tag-geo-chart","tag-geographicals","tag-get","tag-google","tag-google-chart","tag-google-earth","tag-google-maps","tag-image","tag-javscript","tag-joyflight","tag-latitude","tag-line","tag-longitude","tag-map-chart","tag-mapping","tag-pen-down","tag-pen-up","tag-php","tag-place","tag-placenames","tag-plot","tag-post","tag-programming","tag-prompt","tag-qantas","tag-scroll","tag-scrolling","tag-share","tag-sharing","tag-svg","tag-trip","tag-trip-planner","tag-tutorial","tag-wikipedia"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50374"}],"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=50374"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50374\/revisions"}],"predecessor-version":[{"id":50378,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50374\/revisions\/50378"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=50374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=50374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=50374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}