{"id":68533,"date":"2025-06-01T03:01:00","date_gmt":"2025-05-31T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=68533"},"modified":"2025-06-01T09:53:12","modified_gmt":"2025-05-31T23:53:12","slug":"audio-stream-of-youtube-video-play-safari-error-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/audio-stream-of-youtube-video-play-safari-error-tutorial\/","title":{"rendered":"Audio Stream of YouTube Video Play Safari Error Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/Mac\/iPhone\/sus_safari_iphone.gif\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Audio Stream of YouTube Video Play Safari Error Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPhone\/sus_safari_iphone.gif\" title=\"Audio Stream of YouTube Video Play Safari Error Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Audio Stream of YouTube Video Play Safari Error Tutorial<\/p><\/div>\n<p>Like with <a title='GeoJson World Countries SVG Overlay Safari Error Tutorial' href='#gjwcsvgoset'>GeoJson World Countries SVG Overlay Safari Error Tutorial<\/a> we have another incarnation of the &#8230;<\/p>\n<blockquote><p>\nA problem repeatedly occurred with &#8230;\n<\/p><\/blockquote>\n<p> &#8230; style of erroneous webpage scenario hosting an iframe using that Audio Stream of YouTube Video Play web application logic within some of this WordPress blog&#8217;s postings, but very specifically only using &#8230;<\/p>\n<ul>\n<li>Safari <font size=1>web browser<\/font> &#8230; on &#8230;<\/li>\n<li>iPhone <font size=1>but not iPad, gobsmackingly (of devices that we know of)<\/font><\/li>\n<\/ul>\n<p> &#8230; as we tested <font size=1>(and you should do as many tests as you can over browsers and platforms when you get <i>this<\/i> error <i>in particular<\/i>)<\/font>.<\/p>\n<p>We think, this way, as with the situation below, you can get these errors to do with memory issues when using the browser\/platform combination where it happens.<\/p>\n<p>However, as a programmer you should be curious enough to test and debug for memory leaks, at the very least, in your own code, and any setInterval or setTimeout related abnormalities that may be causing the error.  Luckily, if you have access to &#8230;<\/p>\n<ul>\n<li>iPhone Safari web browser &#8230;<\/li>\n<li>macOS Safari web browser with Developer debugging capabilities &#8230;<\/li>\n<li>Apple white lead that connect these two<\/li>\n<\/ul>\n<p> &#8230; then you can &#8230;<\/p>\n<ul>\n<li>be in Safari web browser at new tabs in both iPhone and macOS (eg. MacAir) &#8230;<\/li>\n<li>connect the two devices with Apple White Lead<\/li>\n<li>on iPhone Safari type in and go to URL where problem is known<\/li>\n<li>on macOS Safari click Developer menu to reach and select the session with offending URL<\/li>\n<li>debug via the Console and Network and Errors and whatever else helps to try to track down issues with the web application, in this environment<\/li>\n<\/ul>\n<p>We think <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ytaudioonly.js-------GETME\" rel=\"noopener\">us changing<\/a> external Javascript <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/ytaudioonly.js-------GETME\" rel=\"noopener\">ytaudioonly.js<\/a> <font color=blue>this way<\/font> &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>var oktocheck=true;<\/font><br \/>\n<br \/>\n  function audioytlook() {<br \/>\n    <font color=blue>var isSafari = \/Safari\/.test(navigator.userAgent) && \/Apple Computer\/.test(navigator.vendor);<br \/>\n    if (navigator.userAgent.match(\/iPhone\/i) && oktocheck && isSafari) {<br \/>\n     if (('' + top.document.URL).indexOf('\/external-javascript-') != -1 && ('' + top.document.URL).indexOf('andabit=') != -1) {<br \/>\n     if (document.URL.indexOf('\/karaoke_') == -1) {<br \/>\n      oktocheck=false;<br \/>\n      setTimeout(audioytlook, 180000);<br \/>\n      return '';<br \/>\n     }<br \/>\n     } else if (('' + top.document.URL).indexOf('\/external-javascript-') != -1) {<br \/>\n     if (document.URL.indexOf('\/karaoke_') == -1) {<br \/>\n      oktocheck=false;<br \/>\n      setTimeout(audioytlook, 180000);<br \/>\n      return '';<br \/>\n     }<br \/>\n     }<br \/>\n    }<br \/>\n    oktocheck=false;<\/font><br \/>\n    \/* Rest of function audioytlook is as is, below ... *\/<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; having helped here shows, again, that <i>timing<\/i> can be the issue with this error.  But to know where to time things better will probably be the result of doing this Safari iPhone debugging via macOS Safari web browser Developer menu.<\/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\/audio-stream-of-youtube-video-play-safari-error-tutorial\/' rel=\"noopener\">Audio Stream of YouTube Video Play Safari Error Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcsvgoset'>Previous relevant <a target=\"_blank\" title='GeoJson World Countries SVG Overlay Safari Error Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-safari-error-tutorial\/' rel=\"noopener\">GeoJson World Countries SVG Overlay Safari Error Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries SVG Overlay Safari Error Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_lime.jpg\" title=\"GeoJson World Countries SVG Overlay Safari Error Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries SVG Overlay Safari Error Tutorial<\/p><\/div>\n<p>Mostly on smaller devices (such as an iPhone), but elsewhere as well, but less drastically, this morning, using <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" rel=\"noopener\">our current Display GeoJson Countries web application<\/a> we would get the Safari web browser error &#8230;<\/p>\n<blockquote><p>\nA problem repeatedly occurred with https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\n<\/p><\/blockquote>\n<p> &#8230; with web application work up to yesterday&#8217;s <a title='GeoJson World Countries SVG Overlay Colour Infill Tutorial' href='#gjwcsvgocit'>GeoJson World Countries SVG Overlay Colour Infill Tutorial<\/a>.<\/p>\n<p>On discovering our first solution theory of turning yesterday&#8217;s mapsvg.js external Javascript work into an <a target=\"_blank\" title='Javascript async information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/async_function' rel=\"noopener\"><i>async<\/i><\/a> piece of work made no difference to this situation, we surmised that the huge amount of content held in the Javascript (ie. client side) global variable <i>appendtoinnerHTML<\/i> was causing memory issues.  We couldn&#8217;t shift much to do with the overall amount of &#8220;data&#8221; needing to be handled, in order to implement country SVG colour infilling, but we could shift the data from being &#8230;<\/p>\n<ul>\n<li>client side (external) Javascript held &#8230; to, instead, (have that data) be (determined on the) &#8230;<\/li>\n<li>server side PHP filling in the contents of our (relevant) HTML div id=svgd ahead of the document.body onload event timing &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n$icnt=0;<br \/>\n<br \/>\nfunction apptohtmstuff($coordsare, $origc) {<br \/>\n  global $icnt;<br \/>\n  $minl=-1;<br \/>\n  $mint=-1;<br \/>\n  $maxl=-1;<br \/>\n  $maxt=-1;<br \/>\n  $zysare=explode(',', $coordsare);<br \/>\n  $svgcis='';<br \/>\n  for ($ij=0; $ij&lt;sizeof($zysare); $ij+=2) {<br \/>\n    if ($minl &lt; 0) {<br \/>\n      $minl=$zysare[$ij];<br \/>\n      $maxl=$zysare[$ij];<br \/>\n      $mint=$zysare[1 + $ij];<br \/>\n      $maxt=$zysare[1 + $ij];<br \/>\n    } else {<br \/>\n      if ($zysare[$ij] &lt; $minl) { $minl=$zysare[$ij];  }<br \/>\n      if ($zysare[$ij] &gt; $maxl) { $maxl=$zysare[$ij];  }<br \/>\n      if ($zysare[1 + $ij] &lt; $mint) { $mint=$zysare[1 + $ij];  }<br \/>\n      if ($zysare[1 + $ij] &gt; $maxt) { $maxt=$zysare[1 + $ij];  }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  for ($ij=0; $ij&lt;sizeof($zysare); $ij+=2) {<br \/>\n    if ($svgcis == '') {<br \/>\n      $svgcis='' . ($zysare[$ij] - $minl) . ',' . ($zysare[1 + $ij] - $mint);<br \/>\n    } else {<br \/>\n      $svgcis.=' ' . ($zysare[$ij] - $minl) . ',' . ($zysare[1 + $ij] - $mint);<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  $icnt++;<br \/>\n  return '&lt;div title=\"' . $coordsare . '\" id=\"dsa' . (-1 + $icnt) . '\" style=\"position:absolute;left:' . $minl . 'px;top:' . $mint . 'px;width:' . ($maxl - $minl) . 'px;height:' . ($maxt - $mint) . ';display:BLOCK;z-index:24;\"&gt;&lt;svg height=\"100%\" width=\"100%\"&gt;&lt;polygon points=\"' . $svgcis . '\" style=\"fill:lime;stroke:purple;stroke-width:1\"&gt;&lt;\/polygon&gt;&lt;\/svg&gt;&lt;\/div&gt;';<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; meaning the web application&#8217;s underlying HTML size increased at the expense of no need for external Javascript involvement any more<\/li>\n<\/ul>\n<p> &#8230;  in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php----GETME\" title=\"countries.php\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php----GETME\" title=\"countries.php\" rel=\"noopener\">countries.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\" rel=\"noopener\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>.<\/p>\n<p>We&#8217;re not exactly sure why, but &#8230;<\/p>\n<ul>\n<li>this improved web application stability &#8230;<br \/>\n<img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_iphone.jpg'><\/img><br \/>\n &#8230;everywhere &#8230; and an idea we&#8217;d ditched yesterday of &#8230;<\/li>\n<li>idea to pre-colour &#8220;land&#8221; parts of the world GeoJson map green (ahead of the document.body onload event) also came good (after causing problems yesterday)<\/li>\n<\/ul>\n<p> &#8230; meaning now, &#8220;overlay&#8221; wise, <font color=blue>we could say<\/font> &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-colour-infill-tutorial\/'>\n<ul>\n<li>document.body lowest level &#8230;<\/li>\n<li>overlayed by HTML canvas element plotted with world country linework &#8230;<\/li>\n<li>overlayed by HTML img (transparent image) element and its associated image map area elements &#8230; and today we add into the mix &#8230;<\/li>\n<li>HTML div hosting <a target=\"_blank\" title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp' rel=\"noopener\">SVG<\/a> elements overlay<font color=blue><strike>ing<\/strike> initialized with &#8220;land&#8221; parts green infilled SVG at a mid range z-index<\/font> (<font color=blue><strike>only<\/strike> as well as<\/font> when called upon) individual GeoJson entities overlay<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; and we (reckon we&#8217;ve) improved the colour coding user experience at the same time.<\/p>\n<p>We noticed that tweaks in the changed &#8230;<\/p>\n<p><code><br \/>\nvar lastflagged='', appendtoinnerHTML='', waitplease=false; \/\/ used to make sure \"area\" element onclick code precedes any document.body onmousedown or ontouchdown code<br \/>\n<br \/>\nfunction checkdsa(ath) {<br \/>\n  waitplease=true;<br \/>\n  var wasih='';<br \/>\n  var athcoords=('' + ath.coords); \/\/.substring(0, Math.floor(eval(0.1 * ('' + ath.coords).length)));<br \/>\n  if (document.getElementById('svgd').innerHTML.indexOf(('' + athcoords)) != -1) {<br \/>\n    wasih='&lt;div title=' + String.fromCharCode(34) + '' + ath.coords + document.getElementById('svgd').innerHTML.split(ath.coords)[1].split('&lt;div ')[0];<br \/>\n    if (lastflagged == '') {<br \/>\n    if (wasih.indexOf(' id=' + String.fromCharCode(34)) != -1) { lastflagged=wasih.split(' id=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0]; } else { lastflagged=''; }<br \/>\n    } else {<br \/>\n    document.getElementById(lastflagged).innerHTML=document.getElementById(lastflagged).innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');<br \/>\n    if (wasih.indexOf(' id=' + String.fromCharCode(34)) != -1) { lastflagged=wasih.split(' id=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0]; } else { lastflagged=''; }<br \/>\n    }<br \/>\n    if (lastflagged != '') {<br \/>\n    document.getElementById(lastflagged).innerHTML=document.getElementById(lastflagged).innerHTML.replace('z-index:24;', 'z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);');<br \/>\n    document.getElementById(lastflagged).title=ath.title;<br \/>\n    } else {<br \/>\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(wasih, '&lt;div title=' + String.fromCharCode(34) + '' + ath.title + wasih.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);'));<br \/>\n    }<br \/>\n  } else if (('' + appendtoinnerHTML).indexOf(('' + athcoords)) != -1) {<br \/>\n    if (document.getElementById('svgd').innerHTML.indexOf(' title=' + String.fromCharCode(34) + '' + ath.title + '' + String.fromCharCode(34) + '') != -1) {<br \/>\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');<br \/>\n    document.getElementById('svgd').innerHTML+='&lt;div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace(\/\\ id\\=\/g, ' data-id=').replace('lime;', 'rgba(255,87,51,0.5);');<br \/>\n    } else {<br \/>\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');<br \/>\n    document.getElementById('svgd').innerHTML+='&lt;div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);');<br \/>\n    }<br \/>\n  }<br \/>\n  waitplease=false;<br \/>\n  return '';<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; also lessened the burden on the client side by only asking any Javascript DOM command operations act on single HTML element at a time, not a whole swathe of hosted ones, in any operation.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/new-geojson-world-countries-svg-overlay-colour-infill-tutorial\/' rel=\"noopener\">New GeoJson World Countries SVG Overlay Colour Infill Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='gjwcsvgocit'>Previous relevant <a target=\"_blank\" title='GeoJson World Countries SVG Overlay Colour Infill Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-colour-infill-tutorial\/' rel=\"noopener\">GeoJson World Countries SVG Overlay Colour Infill Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"GeoJson World Countries SVG Overlay Colour Infill Tutorial\"]<a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries SVG Overlay Colour Infill Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countriessvg.jpg\" title=\"GeoJson World Countries SVG Overlay Colour Infill Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>The \"overlay\" situation as of yesterday's <a title='GeoJson World Countries Geo Chart Tutorial' href='#gjwcgct'>GeoJson World Countries Geo Chart Tutorial<\/a> was ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>document.body lowest level ...<\/li>\n\n\n\n\n<li>overlayed by HTML canvas element plotted with world country linework ...<\/li>\n\n\n\n\n<li>overlayed by HTML img (transparent image) element and its associated image map area elements ... and today we add into the mix ...<\/li>\n\n\n\n\n<li>HTML div hosting <a target=\"_blank\" title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp' rel=\"noopener\">SVG<\/a> elements overlaying (only when called upon) individual GeoJson entities overlay<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p>What can this achieve?  The GeoJson can become more user friendly via colour coding ...<\/li>\n\n\n\n\n\n<ul>\n\n\n<li>country linework is black and background colour is white to start with ... and ...<\/li>\n\n\n\n\n<li>as a user clicks an individual GeoJson entity the canvas element has a plotting circle created at a <a target=\"_blank\" title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' rel=\"noopener\">z-index<\/a> below that of ...<\/li>\n\n\n\n\n<li>overlayed new div and SVG element initialized to <span style='color:rgba(255,87,51,0.5);'>infill colour<\/span> rgba(255,87,51,0.5) while any other previous infills become <span style='color:rgba(200,200,200,0.3);'>dimmer infill colour<\/span> rgba(200,200,200,0.3) ... the transparency of which allows the canvas plotting circle to show through<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... helping contextualize in other \"drilled into\" maps presented, in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php---GETME\" title=\"countries.php\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php---GETME\" title=\"countries.php\" rel=\"noopener\">countries.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\" rel=\"noopener\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>, now helped out by <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mapsvg.js--GETME\" title=\"mapsvg.js\" rel=\"noopener\">the tweaked<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mapsvg.js--GETME\" title=\"mapsvg.js\" rel=\"noopener\">mapsvg.js<\/a> external Javascript helper last talked about at <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-map-element-svg-context-google-search-tutorial\/' title='HTML Map Element SVG Context Google Search Tutorial' rel=\"noopener\">HTML Map Element SVG Context Google Search Tutorial<\/a>.  Its analysis of existent HTML webpage image map area subelements is called via a new Javascript function ...<\/p>\n\n\n\n<code>\nfunction checkdsa(ath) {\n  if (('' + appendtoinnerHTML).indexOf(('' + ath.coords)) != -1) {\n    if (document.getElementById('svgd').innerHTML.indexOf(' title=' + String.fromCharCode(34) + '' + ath.title + '' + String.fromCharCode(34) + '') != -1) {\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');\n    document.getElementById('svgd').innerHTML+='&lt;div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace(\/\\ id\\=\/g, ' data-id=').replace('lime;', 'rgba(255,87,51,0.5);');\n    } else {\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');\n    document.getElementById('svgd').innerHTML+='&lt;div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);');\n    }\n  }\n}\n<\/code>  \n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-colour-infill-tutorial\/' rel=\"noopener\">GeoJson World Countries SVG Overlay Colour Infill Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcgct'>Previous relevant <a target=\"_blank\" title='GeoJson World Countries Geo Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-geo-chart-tutorial\/' rel=\"noopener\">GeoJson World Countries Geo Chart Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries Geo Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_geo_chartmore.jpg\" title=\"GeoJson World Countries Geo Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries Geo Chart Tutorial<\/p><\/div>\n<p>There are many advantages regarding today&#8217;s task to &#8230;<\/p>\n<blockquote><p>\nIntegrate <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a title=\"Google Chart Geo Chart information from Google\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart\" target=\"_blank\" rel=\"noopener\">Geo Chart<\/a>\n<\/p><\/blockquote>\n<p> &#8230; as an additional &#8220;drill down&#8221; map option, functionality adding onto the work of yesterday&#8217;s <a title='GeoJson World Countries Tutorial' href='#gjwct'>GeoJson World Countries Tutorial<\/a>.<\/p>\n<p>What deducible data item needs to be determined for these Geo Charts to work?  We need a way to deduce ISO-2 character country codes from the ISO-3 character codes existing in the GeoJson &#8220;countries.geojson&#8221; data from yesterday&#8217;s work.  We happened upon the <a target=\"_blank\" title='Useful link' href='http:\/\/gist.github.com\/tadast\/8827699' rel=\"noopener\">extremely generous mapping data webpage<\/a> <font color=blue>to help with these ISO-2 character deductions<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$geojsonis=file_get_contents('countries.geojson');<br \/>\n$parts=explode(\"]]\", $geojsonis);<br \/>\n$globalattr=\"\";<br \/>\n<font color=blue>$mappings=file_get_contents('ht<\/font><font color=blue>tp:\/\/gist.github.com\/tadast\/8827699');  \/\/ thanks<br \/>\nif (strpos($mappings, '&gt;IN&lt;\/td&gt;') !== false) {<br \/>\n  $mappings.='&lt;td&gt;IN&lt;\/td&gt;&lt;td&gt;KAS&lt;\/td&gt;&lt;td&gt;EH&lt;\/td&gt;&lt;td&gt;SAH&lt;\/td&gt;&lt;td&gt;SO&lt;\/td&gt;&lt;td&gt;SOL&lt;\/td&gt;&lt;td&gt;SS&lt;\/td&gt;&lt;td&gt;SDS&lt;\/td&gt;&lt;td&gt;XK&lt;\/td&gt;&lt;td&gt;KOS&lt;\/td&gt;&lt;td&gt;CY&lt;\/td&gt;&lt;td&gt;CYN&lt;\/td&gt;&lt;\/body&gt;';<br \/>\n}<\/font><br \/>\n<br \/>\nfor ($i=0; $i&lt;(-1 + sizeof($parts)); $i++) {<br \/>\n  if (strpos($parts[$i], '\"sr_sov_a3\":\"') !== false) {<br \/>\n    $globalattr=' data-iso3=\"' . explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0] . '\"';<br \/>\n    if (strpos($mappings, '&gt;' . explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0] . '&lt;\/td&gt;') !== false) {<br \/>\n      $iparts=explode('&gt;' . explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0] . '&lt;\/td&gt;', $mappings);<br \/>\n      $globalattr.=' data-iso2=\"' . explode('&gt;', explode('&lt;\/td&gt;', $iparts[0])[-2 + sizeof(explode('&lt;\/td&gt;', $iparts[0]))])[-1 + sizeof(explode('&gt;', explode('&lt;\/td&gt;', $iparts[0])[-2 + sizeof(explode('&lt;\/td&gt;', $iparts[0]))]))] . '\"';<br \/>\n    } else if (substr(explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0],-1,1) &gt;= '0' && substr(explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0],-1,1) &lt;= '9') {<br \/>\n      $globalattr.=' data-iso2=\"' . substr(explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0],0,2) . '\"';<br \/>\n    }<br \/>\n  }<br \/>\n  if (strpos($parts[$i], '\"sr_subunit\":\"') !== false) {<br \/>\n    $globalattr.=' data-cname=\"' . explode('\"', explode('\"sr_subunit\":\"', $parts[$i])[1])[0] . '\"';<br \/>\n  }<br \/>\n  $coords=str_replace('[','',str_replace(']','',explode('[[' , $parts[$i])[-1 + sizeof(explode('[[' , $parts[$i]))]));<br \/>\n  $newcoords=$coords;<br \/>\n  if (!$dolatlong || 1 == 1) {<br \/>\n  $lls=explode(\",\", $coords);<br \/>\n  $newcoords=\"\";<br \/>\n  for ($j=0; $j&lt;sizeof($lls); $j+=2) {<br \/>\n  $lls[$j]=($lls[$j] + $longoff) * $factor;<br \/>\n  $lls[$j + 1]=($lls[$j + 1] + $latoff) * $factor;<br \/>\n  if ($newcoords != \"\") { $newcoords.=\",\";  $htmlis=str_replace(\"}\", \" context.lineTo(\" . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]) . \"); \\n}\", $htmlis);  } else { $htmlis=str_replace(\"}\", \" context.stroke(); \\n context.beginPath(); \\n context.moveTo(\" . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]) . \"); \\n}\", $htmlis); }<br \/>\n  $newcoords.='' . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]);<br \/>\n  }<br \/>\n  }<br \/>\n  $abit.=\"&lt;area\" . $globalattr . \" onclick=\\\"ouralert(this.getAttribute('data-cname'),this.getAttribute('data-iso3'),this.getAttribute('data-iso2'),'Longitude,Latitude coordinates are \" . $coords . \"');\\\" shape='poly' coords='\" . $newcoords . \"'&gt;&lt;\/area&gt;\\n\";<br \/>\n  \/\/echo \"&lt;area type='poly' coords='\" . $newcoords . \"'&gt;&lt;\/area&gt;\\n\";<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; in our image map area elements PHP creation code above.  As you can see, extra &#8220;intelligence&#8221;, moving forward, is contained in area element <a target=\"_blank\" href='https:\/\/www.w3schools.com\/tags\/att_global_data.asp' title='Global data attributes information from W3schools' rel=\"noopener\">global data attributes<\/a>.<\/p>\n<p>Which leaves us with why any of this helps functionality within <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php--GETME\" title=\"countries.php\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php--GETME\" title=\"countries.php\" rel=\"noopener\">countries.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\" rel=\"noopener\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>?<\/p>\n<ul>\n<li>Geo Chart can zoom into a country view &#8230;<\/li>\n<li>Geo Chart can involve emoji (&#127968; &amp;127968;) or image (SVG) circle based symbology for the &#8220;User Clicked Place&#8221; and nearby TimeZone places respectively &#8230;<\/li>\n<li>all these symbols can be clicked to open popup windows containing TimeZone Place <a target=\"_blank\" title='Wikipedia ... thanks' href='http:\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a> webpages of relevance &#8230;<\/li>\n<li>an emoji national flag (eg. Zambia &#8220;ZA&#8221; could be used to derive &amp;#127487;&amp;#127462; &#127487;&#127462; flag emoji) derived from those ISO-2 character codes can supplement the GeoJson (more ISO-3 character based) names presented in the underlying data, in the Geo Chart title &#8230;<\/li>\n<li>contextualizing the accompanying Map Chart &#8230; and &#8230;<\/li>\n<li>vice versa regarding hovering over symbology (which works on Map Chart, but not Geo Chart) &#8230;<\/li>\n<li>within the Map Chart iframe a &#8220;Geo&#8221; link can glean a &#8220;zoomed out&#8221; world Geo Chart view of your TimeZone places<\/li>\n<\/ul>\n<p>And feel free to (re-)try <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php---GETME\" title=\"regions.php\" rel=\"noopener\">our tweaked &#8220;to make thinner the coastline linework&#8221;<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php---GETME\" title=\"regions.php\" rel=\"noopener\">regions.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\" rel=\"noopener\">GeoJson PHP web application<\/a> in a new window, or you can <a href='#regionsif'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-geo_chart-tutorial\/' rel=\"noopener\">GeoJson World Countries Geo Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwct'>Previous relevant <a target=\"_blank\" title='GeoJson World Countries Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-tutorial\/' rel=\"noopener\">GeoJson World Countries Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_ontop.jpg\" title=\"GeoJson World Countries Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries Tutorial<\/p><\/div>\n<p>Know your GeoJson!  Yes, pretty obviously, any two GeoJson datasets might display the same in that &#8220;map plotting&#8221; sense, but one might have different and\/or more &#8220;intelligence&#8221; than the other.  Often, an XML has more &#8220;intelligence&#8221; than equivalent HTML (barring the use of global data attributes, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a>), as today&#8217;s <strike>Corolla<\/strike>corollary.<\/p>\n<p>And so, moving on from yesterday&#8217;s <a title='GeoJson World Coastline TimeZone Tutorial' href='#gjwctzt'>GeoJson World Coastline TimeZone Tutorial<\/a>, today, we present a new GeoJson <a target=\"_blank\" href='https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_50m_admin_0_scale_rank.geojson' rel=\"noopener\">admin 0 countries we download, and upload as &#8220;countries.geojson&#8221;<\/a> data set, again via the excellent <a target=\"_blank\" title='http:\/\/geojson.xyz\/' href='http:\/\/geojson.xyz\/' rel=\"noopener\">HTTP:\/\/geojson.xyz\/<\/a> repository, thanks.<\/p>\n<p>From it, we do get a <font color=blue>different JSON additional &#8220;intelligence&#8221;<\/font> &#8230;<\/p>\n<p><code><br \/>\n{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\"<font color=blue>,\"properties\":{\"scalerank\":1,\"labelrank\":1,\"sr_sov_a3\":\"ZWE\",\"sr_adm0_a3\":\"ZWE\",\"sr_gu_a3\":\"ZWE\",\"sr_su_a3\":\"ZWE\",\"sr_subunit\":\"Zimbabwe\",\"featureclass\":\"Admin-0 scale ranks\"}<\/font>,\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[31.287890625000017,-22.40205078125001],[31.197265625,-22.34492187500001],[31.07343750000001,-22.30781250000001],[30.916113281250006,-22.29072265625001],[30.71162109375001,-22.2978515625],[30.46015625000001,-22.32900390625001],[30.1904296875,-22.291113281250006],[29.90234375,-22.184179687500006],[29.6630859375,-22.146289062500003],[29.37744140625,-22.19277343750001],[29.36484375,-22.193945312500006],[29.315234375000017,-22.15771484375],[29.237207031250023,-22.07949218750001],[29.106835937500023,-22.065722656250003],[29.07148437500001,-22.047460937500006],[29.042382812500023,-22.018359375],[29.023339843750023,-21.98125],[29.01582031250001,-21.93994140625],[29.03730468750001,-21.811328125],[29.02558593750001,-21.796875],[28.99072265625,-21.78144531250001],[28.919335937500023,-21.766015625],[28.74775390625001,-21.707617187500006],[28.532031250000017,-21.65126953125001],[28.181640625,-21.58935546875],[28.04560546875001,-21.573046875],[28.014062500000023,-21.55419921875],[27.974609375,-21.50673828125001],[27.90742187500001,-21.35908203125001],[27.844140625000023,-21.261523437500003],[27.693457031250006,-21.11103515625001],[27.66943359375,-21.064257812500003],[27.67695312500001,-20.94482421875],[27.688085937500006,-20.84833984375001],[27.70429687500001,-20.76640625],[27.69697265625001,-20.689746093750003],[27.69482421875,-20.59453125],[27.699609375000023,-20.53066406250001],[27.679296875,-20.503027343750006],[27.624609375,-20.48359375000001],[27.46894531250001,-20.47480468750001],[27.28076171875,-20.47871093750001],[27.27460937500001,-20.3818359375],[27.256738281250023,-20.23203125],[27.221484375000017,-20.145800781250003],[27.17822265625,-20.10097656250001],[27.091796875,-20.05419921875],[26.91669921875001,-19.99013671875001],[26.67822265625,-19.89277343750001],[26.474609375,-19.748632812500006],[26.241015625000017,-19.5693359375],[26.168066406250006,-19.53828125000001],[26.081933593750023,-19.369921875],[25.95068359375,-19.08173828125001],[25.95917968750001,-18.985644531250003],[25.939355468750023,-18.93867187500001],[25.811914062500023,-18.79707031250001],[25.78369140625,-18.72353515625001],[25.76123046875,-18.64921875],[25.55830078125001,-18.441796875],[25.4892578125,-18.35126953125001],[25.43671875000001,-18.234960937500006],[25.384375,-18.14199218750001],[25.340234375000023,-18.1044921875],[25.28242187500001,-18.04121093750001],[25.242285156250006,-17.969042968750003],[25.224023437500023,-17.91523437500001],[25.239062500000017,-17.843066406250003],[25.2587890625,-17.793554687500006],[25.451757812500006,-17.84511718750001],[25.55712890625,-17.84951171875001],[25.6396484375,-17.82412109375001],[25.741601562500023,-17.858203125],[25.86328125,-17.951953125],[25.995898437500017,-17.969824218750006],[26.139550781250023,-17.91171875],[26.333398437500023,-17.929296875],[26.577539062500023,-18.022558593750006],[26.779882812500006,-18.04150390625],[27.020800781250017,-17.95839843750001],[27.235742187500023,-17.728320312500003],[27.437890625000023,-17.51191406250001],[27.63671875,-17.262109375],[27.75654296875001,-17.060351562500003],[27.932226562500006,-16.89619140625001],[28.16376953125001,-16.76972656250001],[28.399804687500023,-16.66279296875001],[28.760644531250023,-16.53193359375001],[28.760546875000017,-16.53212890625001],[28.83271484375001,-16.424121093750003],[28.856738281250017,-16.30615234375],[28.856738281250017,-16.14228515625001],[28.875585937500006,-16.0361328125],[28.9130859375,-15.98779296875],[28.973046875000023,-15.950097656250009],[29.050585937500017,-15.901171875],[29.287890625000017,-15.776464843750006],[29.4873046875,-15.69677734375],[29.729589843750006,-15.644628906250006],[29.994921875000017,-15.64404296875],[30.25068359375001,-15.643457031250009],[30.39609375,-15.64306640625],[30.39814453125001,-15.80078125],[30.409375,-15.978222656250011],[30.437792968750017,-15.995312500000011],[30.630175781250017,-15.999218750000011],[30.938769531250017,-16.01171875],[31.236230468750023,-16.02363281250001],[31.426171875000023,-16.15234375],[31.48984375,-16.1796875],[31.687597656250006,-16.214160156250003],[31.939843750000023,-16.428808593750006],[32.243261718750006,-16.44873046875],[32.45195312500002,-16.515722656250006],[32.635839843750006,-16.589453125],[32.741796875,-16.67763671875001],[32.81025390625001,-16.69765625],[32.902929687500006,-16.704199218750006],[32.94804687500002,-16.71230468750001],[32.93789062500002,-16.775976562500006],[32.87626953125002,-16.88359375],[32.884375,-17.03779296875001],[32.969335937500006,-17.2515625],[32.98076171875002,-17.4375],[32.9546875,-17.765429687500003],[32.95556640625,-18.08291015625001],[32.96464843750002,-18.1962890625],[32.978515625,-18.271484375],[32.99638671875002,-18.312597656250006],[32.99306640625002,-18.35957031250001],[32.942480468750006,-18.49267578125],[32.90166015625002,-18.632910156250006],[32.90029296875002,-18.6890625],[32.88457031250002,-18.728515625],[32.8544921875,-18.763671875],[32.72197265625002,-18.828417968750003],[32.69921875,-18.868457031250003],[32.69970703125,-18.94091796875],[32.71650390625001,-19.00185546875001],[32.766210937500006,-19.02431640625001],[32.826171875,-19.05878906250001],[32.84980468750001,-19.10439453125001],[32.85,-19.152441406250006],[32.83095703125002,-19.24140625000001],[32.77763671875002,-19.388769531250006],[32.83076171875001,-19.558203125],[32.89042968750002,-19.668066406250006],[32.97265625,-19.79541015625],[33.00673828125002,-19.873828125],[33.0048828125,-19.93017578125],[32.992773437500006,-19.98486328125],[32.86962890625,-20.2171875],[32.780859375,-20.36152343750001],[32.67255859375001,-20.51611328125],[32.529296875,-20.613085937500003],[32.49238281250001,-20.659765625],[32.477636718750006,-20.712988281250006],[32.48281250000002,-20.82890625],[32.476171875,-20.95009765625001],[32.353613281250006,-21.136523437500003],[32.429785156250006,-21.29707031250001],[32.41240234375002,-21.311816406250003],[32.37109375,-21.33486328125001],[32.19472656250002,-21.515429687500003],[32.01630859375001,-21.698046875],[31.88593750000001,-21.83154296875],[31.737695312500023,-21.9833984375],[31.57148437500001,-22.15351562500001],[31.429492187500017,-22.298828125],[31.287890625000017,-22.40205078125001]]]}}<br \/>\n<\/code><\/p>\n<p> &#8230; and &#8220;mapping look&#8221; because country borders are added in, and some JSON attributes we can call on to allow for &#8230;<\/p>\n<ul>\n<li>the similar  <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a title=\"Google Chart Map Chart information from Google\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map\" target=\"_blank\" rel=\"noopener\">Map Chart<\/a> maps introduced yesterday into the user interaction mix &#8230; as well as &#8230;<\/li>\n<li><a target=\"_blank\" title='Wikipedia ... thanks' href='http:\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a>, thanks, webpage lookup possibilities calling on those new GeoJson property attributes presented within the dataset above<\/li>\n<\/ul>\n<p>We enable this, as we just add in some Javascript popup window type equals &#8220;prompt&#8221; to the existant &#8220;confirm&#8221; and &#8220;alert&#8221; logic of yesterday.<\/p>\n<p>Feel free to try <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php-GETME\" title=\"countries.php\" rel=\"noopener\">the how we got there<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php-GETME\" title=\"countries.php\" rel=\"noopener\">regions.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"GeoJson PHP web application\" rel=\"noopener\">GeoJson PHP World Countries web application<\/a> in a new window, or below &#8230;<\/p>\n<p><iframe id=countriesif style='width:100%;height:600px;' src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-tutorial\/' rel=\"noopener\">GeoJson World Countries Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwctzt'>Previous relevant <a target=\"_blank\" title='GeoJson World Coastline TimeZone Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-timezone-tutorial\/' rel=\"noopener\">GeoJson World Coastline TimeZone Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Coastline TimeZone Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_tz.jpg\" title=\"GeoJson World Coastline TimeZone Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Coastline TimeZone Tutorial<\/p><\/div>\n<p>Luckily for programmers all over, the organization of TimeZones has had an International flavour in its development and maintenance.  As such, given the &#8220;purely coastline&#8221; GeoJson data involved in our fledgling PHP web application of yesterday&#8217;s <a title='GeoJson World Coastline Primer Tutorial' href='#gjwcpt'>GeoJson World Coastline Primer Tutorial<\/a> a useful arrangement for improvement involves &#8230;<\/p>\n<ul>\n<li>document.body onclick event co-ordinates &#8230; able to be converted to &#8230;<\/li>\n<li>longitude, latitude <font size=1>(easily, only because of our simplistic map projection, of course)<\/font> &#8230; onfed to &#8230;<\/li>\n<li>our inhouse <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\" rel=\"noopener\">&#8220;TimeZone Places&#8221; web application<\/a> PHP helper<\/li>\n<\/ul>\n<p> &#8230; can have us helping out your curious web &#8220;clicking&#8221; user with the 3 nearest TimeZone places, as a reference as to where they are &#8220;clicking&#8221; in the world.<\/p>\n<p>Feel free to try <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php-GETME\" title=\"regions.php\" rel=\"noopener\">our improved<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php-GETME\" title=\"regions.php\" rel=\"noopener\">regions.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\" rel=\"noopener\">GeoJson PHP web application<\/a> in a new window, or below &#8230;<\/p>\n<p><iframe id=regionsif style='width:100%;height:600px;' src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\"><\/iframe><\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Our efforts in making <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php--GETME\" title=\"regions.php\" rel=\"noopener\">our new tweaked<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php--GETME\" title=\"regions.php\" rel=\"noopener\">regions.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\" rel=\"noopener\">GeoJson PHP web application<\/a> more mobile platform user friendly reminds us about a salutary issue regarding touch gestures &#8230;<\/a><\/p>\n<ul>\n<li>in a discrete click methodology of interest, you could adopt a non-mobile &#8220;onmousedown&#8221; logic set that does not get interfered with by a mobile &#8220;ontouchdown&#8221; logic set (perhaps leaving &#8220;onclick&#8221; event, which both non-mobile and mobile both recognise, for another event logic role) &#8230; and &#8230;<\/li>\n<li>neither will interrupt the mobile gestures associated with swiping and pinching, which refer to the events &#8220;ontouchstart&#8221; and &#8220;ontouchend&#8221; at either end of their lifespan<\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/new-geojson-world-coastline-primer-tutorial\/' rel=\"noopener\">New GeoJson World Coastline Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcpt'>Previous relevant <a target=\"_blank\" title='GeoJson World Coastline Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-primer-tutorial\/' rel=\"noopener\">GeoJson World Coastline Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Coastline Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geojson_coastline.jpg\" title=\"GeoJson World Coastline Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Coastline Primer Tutorial<\/p><\/div>\n<p>We&#8217;re keen to further explore the possibilities of <a target=\"_blank\" title='GeoJson information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/GeoJSON' rel=\"noopener\">GeoJson<\/a> public data sets, further to yesterday&#8217;s <a target=\"_blank\" title='Swift Playgrounds on macOS Map Emoji Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/swift-playgrounds-on-macos-map-emoji-tutorial' rel=\"noopener\">Swift Playgrounds on macOS Map Emoji Tutorial<\/a>.<\/p>\n<p>And then we remembered some of the methodologies we used with <a target=\"_blank\" title='Responsive Web Design Landing Page Image Map Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-image-map-tutorial\/' rel=\"noopener\">Responsive Web Design Landing Page Image Map Tutorial<\/a>, talking about <a target=\"_blank\" title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp' rel=\"noopener\">image maps<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-image-map-tutorial\/'><p>\nAnd so, we arrive at a long planned for tilt at Image Map functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation to help us out \u2026 but not today?! Why not?  We have a funny set of needs, they being \u2026<br \/>\n<\/p>\n<ul>\n<li>our Image Map\u2019s image will have a variable set of width x height dimensions \u2026<\/li>\n<li>our Image Map\u2019s image will be transparent<\/li>\n<li>our Image Map needs to have a hole left aside inside it where the functionality that originally existed (and pointed to WordPress Blog content like you are reading), is still working<\/li>\n<\/blockquote>\n<p> &#8230; the first two ideas of which, along with &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp' rel=\"noopener\">canvas<\/a> element where the &#8230;<\/li>\n<li>GeoJson coordinates &#8230; thanks to <a target=\"_blank\" title=\"https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_110m_coastline.geojson\" href='https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_110m_coastline.geojson' rel=\"noopener\">https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_110m_coastline.geojson<\/a> via <a target=\"_blank\" title='http:\/\/geojson.xyz\/' href='http:\/\/geojson.xyz\/' rel=\"noopener\">HTTP:\/\/geojson.xyz\/<\/a> &#8230;<\/li>\n<li>will be plotted &#8230; but the canvas element &#8230;<\/li>\n<li>has a <a target=\"_blank\" title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' rel=\"noopener\">z-index<\/a> set below the image and image map above &#8230; meaning &#8230;<\/li>\n<li>we can add some region specific coding into the &#8230;<\/li>\n<li>image map <a target=\"_blank\" title='HTML area element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_area.asp' rel=\"noopener\">area<\/a> element (shape=poly) onclick logics<\/li>\n<\/ul>\n<p> &#8230; in our &#8220;early days&#8221; &#8220;proof of concept&#8221; <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php_GETME\" title=\"regions.php\" rel=\"noopener\">regions.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\" rel=\"noopener\">GeoJson PHP web application<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57945' onclick='var dv=document.getElementById(\"d57945\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geojson\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57945' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57962' onclick='var dv=document.getElementById(\"d57962\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/integration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57962' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57970' onclick='var dv=document.getElementById(\"d57970\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/countries\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57970' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57985' onclick='var dv=document.getElementById(\"d57985\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geo-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57985' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58002' onclick='var dv=document.getElementById(\"d58002\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58002' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58015' onclick='var dv=document.getElementById(\"d58015\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58015' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d68533' onclick='var dv=document.getElementById(\"d68533\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/safari\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68533' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Like with GeoJson World Countries SVG Overlay Safari Error Tutorial we have another incarnation of the &#8230; A problem repeatedly occurred with &#8230; &#8230; style of erroneous webpage scenario hosting an iframe using that Audio Stream of YouTube Video Play &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/audio-stream-of-youtube-video-play-safari-error-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,18,20,29,37],"tags":[91,4964,305,2982,5207,1929,409,626,631,652,1795,2178,767,997,1083,1125,1126,1283,1319,1404,2649],"class_list":["post-68533","post","type-post","status-publish","format-standard","hentry","category-elearning","category-hardware","category-ios","category-operating-system","category-tutorials","tag-apple","tag-apple-white-lead","tag-debug","tag-developer","tag-developer-menu","tag-error","tag-external-javascript","tag-ios","tag-iphone","tag-javascript","tag-lead","tag-macos","tag-memory","tag-programming","tag-safari","tag-setinterval","tag-settimeout","tag-timing","tag-tutorial","tag-web-browser","tag-white-lead"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68533"}],"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=68533"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68533\/revisions"}],"predecessor-version":[{"id":68555,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68533\/revisions\/68555"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=68533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=68533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=68533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}