{"id":50566,"date":"2020-10-15T03:01:12","date_gmt":"2020-10-14T17:01:12","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=50566"},"modified":"2020-10-15T08:37:07","modified_gmt":"2020-10-14T22:37:07","slug":"html-and-javascript-and-css-survey-traverse-csv-geo-chart-context-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-csv-geo-chart-context-tutorial\/","title":{"rendered":"HTML and Javascript and CSS Survey Traverse CSV Geo Chart Context Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Traverse CSV Geo Chart Context Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/geo_chart_emoji_modifiers.jpg\" title=\"HTML and Javascript and CSS Survey Traverse CSV Placename Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS Survey Traverse CSV Geo Chart Context Tutorial<\/p><\/div>\n<p>We thought to improve on yesterday&#8217;s <a title='HTML and Javascript and CSS Survey Traverse CSV Geo Chart Tutorial' href='#htmljcssstcsvgct'>HTML and Javascript and CSS Survey Traverse CSV Geo Chart Tutorial<\/a> conjoining of &#8230;<\/p>\n<ul>\n<li>Survey Traverse<\/li>\n<li><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 Geo Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a><\/li>\n<\/ul>\n<p> &#8230; it&#8217;s good to be able to use &#8230;<\/p>\n<ul>\n<li>Emojis<\/li>\n<li>Link Lines<\/li>\n<\/ul>\n<p> &#8230; but the Link Lines, then, had limited &#8220;context&#8221;.  But what if the Survey Traverse had a &#8230;<\/p>\n<ul>\n<li>xx-large start point Emoji<\/li>\n<li>x-large end point Emoji<\/li>\n<\/ul>\n<p>?  Yes, as you can read at <a target=_blank title='Useful link' href='https:\/\/www.w3schools.com\/cssref\/playit.asp?filename=playcss_font-size&#038;preval=50%25'>this useful link<\/a> the CSS for <i>font-size<\/i> has some useful and interesting settings we&#8217;d like to link into 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 Geo Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> SVG text newly added &#8220;class&#8221;, as required &#8230;<\/p>\n<p><code><br \/>\nfunction emojimaybe(jnentity, jnentwo, endtag) {<br \/>\n  var jjj;<br \/>\n  var xclass='';<br \/>\n  var allnum=true, iu;<br \/>\n  var inentity=jnentity;<br \/>\n  var inentwo=jnentwo;<br \/>\n  var classesare=['border','bcoly','cglow','glow','xxsmall','xsmall','xx-small','x-small','smaller','small','xxlarge','xlarge','xx-large','x-large','larger','large','tenp','twentyp','onefiftyp','fiftyp','twohundredp','threehundredp','fourhundredp','fivehundredp','sixhundredp'];<br \/>\n<br \/>\n  if (inentwo != '') {<br \/>\n   if (inentwo.replace(\/\\_\/g,' ').substring(0,1) != ' ') {<br \/>\n   for (jjj=0; jjj&lt;classesare.length; jjj++) {<br \/>\n    if (inentwo.replace(\/\\_\/g,' ').split(' ')[0].indexOf(classesare[jjj]) != -1) {<br \/>\n      if (xclass != '') {<br \/>\n      xclass=xclass.replace('\\\"' + \\\"'\\\", '' + classesare[jjj].replace('-','') + '\\\"' + \\\"'\\\");<br \/>\n      } else {<br \/>\n      xclass=' class=\\\"' + classesare[jjj].replace('-','') + '\\\"';<br \/>\n      }<br \/>\n      inentwo=inentwo.replace(inentwo.replace(\/\\_\/g,' ').split(' ')[0], inentwo.replace(\/\\_\/g,' ').split(' ')[0].replace(classesare[jjj],''));<br \/>\n    }<br \/>\n    }<br \/>\n    \/\/alert('Xclass=' + xclass);<br \/>\n    for (iu=0; iu&lt;inentwo.replace(\/\\_\/g,' ').split(' ')[0].length; iu++) {<br \/>\n      if (inentwo.replace(\/\\_\/g,' ').split(' ')[0].substring(iu,eval(1 + iu)) != '.' && (inentwo.replace(\/\\_\/g,' ').split(' ')[0].substring(iu,eval(1 + iu)) &lt; '0' || inentwo.replace(\/\\_\/g,' ').split(' ')[0].substring(iu,eval(1 + iu)) &gt; '9')) {<br \/>\n        allnum=false;<br \/>\n      }<br \/>\n    }<br \/>\n    if (allnum && inentwo.indexOf('_') != -1) return xclass + '&gt;&#' + inentwo.replace(\/\\_\/g,' ').split(' ')[0].replace(\/\\.\/g,';&#') + ';&lt;\/text&gt;';<br \/>\n    if (allnum) return xclass + '&gt;&#' + inentwo.replace(\/\\_\/g,' ').split(' ')[0].replace(\/\\.\/g,';&#') + ';&lt;\/text&gt;';<br \/>\n   }<br \/>\n  }<br \/>\n  allnum=true;<br \/>\n  xclass='';<br \/>\n  if (inentity != '') {<br \/>\n   if (inentity.replace(\/\\_\/g,' ').substring(0,1) != ' ') {<br \/>\n   for (jjj=0; jjj&lt;classesare.length; jjj++) {<br \/>\n    if (inentity.replace(\/\\_\/g,' ').split(' ')[0].indexOf(classesare[jjj]) != -1) {<br \/>\n      if (xclass != '') {<br \/>\n      xclass=xclass.replace('\\\"' + \\\"'\\\", '' + classesare[jjj].replace('-','') + '\\\"' + \\\"'\\\");<br \/>\n      } else {<br \/>\n      xclass=' class=\\\"' + classesare[jjj].replace('-','') + '\\\"';<br \/>\n      }<br \/>\n      inentity=inentity.replace(inentity.replace(\/\\_\/g,' ').split(' ')[0], inentity.replace(\/\\_\/g,' ').split(' ')[0].replace(classesare[jjj],''));<br \/>\n    }<br \/>\n    }<br \/>\n    \/\/alert('xclass=' + xclass);<br \/>\n    for (iu=0; iu&lt;inentity.replace(\/\\_\/g,' ').split(' ')[0].length; iu++) {<br \/>\n      if (inentity.replace(\/\\_\/g,' ').split(' ')[0].substring(iu,eval(1 + iu)) != '.' && (inentity.replace(\/\\_\/g,' ').split(' ')[0].substring(iu,eval(1 + iu)) &lt; '0' || inentity.replace(\/\\_\/g,' ').split(' ')[0].substring(iu,eval(1 + iu)) &gt; '9')) {<br \/>\n        allnum=false;<br \/>\n      }<br \/>\n    }<br \/>\n    if (allnum && inentity.indexOf('_') != -1) return xclass + '&gt;&#' + inentity.replace(\/\\_\/g,' ').split(' ')[0].replace(\/\\.\/g,';&#') + ';&lt;\/text&gt;';<br \/>\n    if (allnum) return xclass + '&gt;&#' + inentity.replace(\/\\_\/g,' ').split(' ')[0].replace(\/\\.\/g,';&#') + ';&lt;\/text&gt;';<br \/>\n   }<br \/>\n  }<br \/>\n  return endtag;<br \/>\n}<br \/>\n<\/code><\/p>\n<p><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\">A retweaked<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php----------------------------------------GETME\" title=\"geo_chart.php\">geo_chart.php<\/a> Geo Chart interfacer called by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html--------GETME\" title=\"SurveyTraverse.htm\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html--------GETME\" title=\"SurveyTraverse.htm\">SurveyTraverse.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/?numlegs=egg1.csv\">Geo Chart calling live run<\/a> link with an improved context, is worth a look.<\/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\/html-and-javascript-and-css-survey-traverse-csv-geo-chart-context-tutorial\/'>HTML and Javascript and CSS Survey Traverse CSV Geo Chart Context Tutorial<\/a>.<\/p-->\n<hr>\n<p id='htmljcssstcsvgct'>Previous relevant <a target=_blank title='HTML and Javascript and CSS Survey Traverse CSV Geo Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-csv-geo-chart-tutorial\/'>HTML and Javascript and CSS Survey Traverse CSV Geo 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\/SurveyTraverse\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Traverse CSV Geo Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/google_chart_geo_chart_emoji_linework_fix.gif\" title=\"HTML and Javascript and CSS Survey Traverse CSV  Geo Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS Survey Traverse CSV Geo Chart Tutorial<\/p><\/div>\n<p>The recent <a title='HTML and Javascript and CSS Survey Traverse CSV Placename Tutorial' href='#htmljcssstcsvpt'>HTML and Javascript and CSS Survey Traverse CSV Placename Tutorial<\/a> had us catering for decimal latitude and longitude input data.  Within the logic for this we could be using &#8230;<\/p>\n<ul>\n<li> <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' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map'>Map Chart<\/a><\/li>\n<li> <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 Geo Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a><\/li>\n<\/ul>\n<p> &#8230; the latter choice made when the distances involved in the Survey Traverse are large.  That Geo Chart is both capable of being worked to show &#8230;<\/p>\n<ul>\n<li>Emojis<\/li>\n<li>Link Lines<\/li>\n<\/ul>\n<p> &#8230; an offer too good to refuse, and you can read about at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-geo-chart-co-ordinate-emojis-tutorial\/' title='Google Geo Chart Co-ordinate Emojis Tutorial'>Google Geo Chart Co-ordinate Emojis Tutorial<\/a>.   Except, that is, if in the meantime, our inhouse Geo Chart interfacing PHP logic does not keep up with Google changes to the Geo Chart itself.  And that sad scenario was our discovery then, and today we fix it up.<\/p>\n<p>With any data scraping feeling third-party feeling logic that we need to do here, it is &#8220;the data&#8221; that is everything, and you&#8217;re first troubleshooting question should be &#8230;<\/p>\n<blockquote><p>\nSome thing that used to work no longer works.  What has changed with the underlying data?\n<\/p><\/blockquote>\n<p>Our strategy here was to capture the outerHTML (ie. element contents) of geo_chart.php&#8217;s &#8220;chart_div&#8221; (div) element of a scenario that should involve emojis and\/or link lines for a &#8230;<\/p>\n<ul>\n<li>now scenario (which is easy via a Web Inspector -&gt; Console -&gt; point at &#8220;chart_div&#8221; -&gt; two finger gesture Copy OuterHTML) &#8230; versus &#8230;<\/li>\n<li>then scenario (which we scraped together scouring snippets of data from the past existing on this MacBook Pro) of a similar scenario<\/li>\n<\/ul>\n<p> &#8230; and a few prudent carriage returns revealed to us the issue.  We had assumed a first HTML <i>defs<\/i> element with ID &#8220;defs&#8221; but that was no longer the case, that change cutting off a whole lot of (PHP written out) Javascript logic making Emojis and Link Lines work with Geo Charts (given savvy user usage).<\/p>\n<p><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\">A tweaked<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php---------------------------------------GETME\" title=\"geo_chart.php\">geo_chart.php<\/a> Geo Chart interfacer called by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html-------GETME\" title=\"SurveyTraverse.htm\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html-------GETME\" title=\"SurveyTraverse.htm\">SurveyTraverse.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/?numlegs=egg1.csv\">Geo Chart calling live run<\/a> link, the work leading to this more obvious after viewing <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/google_chart_geo_chart_emoji_linework_fix.gif\" title=\"Tutorial picture\">today&#8217;s animated GIF presentation<\/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\/html-and-javascript-and-css-survey-traverse-csv-geo-chart-tutorial\/'>HTML and Javascript and CSS Survey Traverse CSV Geo Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='htmljcssstcsvpt'>Previous relevant <a target=_blank title='HTML and Javascript and CSS Survey Traverse CSV Placename Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-csv-placename-tutorial\/'>HTML and Javascript and CSS Survey Traverse CSV Placename 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\/SurveyTraverse\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Traverse CSV Placename Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse_csv_places.jpg\" title=\"HTML and Javascript and CSS Survey Traverse CSV Placename Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS Survey Traverse CSV Placename Tutorial<\/p><\/div>\n<p>You might say the progress made in yesterday&#8217;s <a title='HTML and Javascript and CSS Survey Traverse CSV Co-ordinates Tutorial' href='#htmljcssstcsvc-t'>HTML and Javascript and CSS Survey Traverse CSV Co-ordinates Tutorial<\/a> was &#8230;<\/p>\n<ul>\n<li>inordinately complex &#8230; for &#8230;<\/li>\n<li>not enough &#8220;gain&#8221;<\/li>\n<\/ul>\n<p> &#8230; two criticisms we can live with, and today, we &#8220;eat into&#8221; the credibility of, on two fronts &#8230;<\/p>\n<ol>\n<li>we extend functionality, to include &#8220;placename&#8221; data &#8230; and &#8230;<\/p>\n<li>that very complexity is not all bad news, as the involvement of PHP and HTML data format is also &#8220;an opportunity&#8221; to arrange data (and delimitation) to our own programming arrangements<\/li>\n<\/ol>\n<p>It is &#8220;an opportunity&#8221; to come out of the PHP with two numeric fields and up to one (ie. optional placename) string field for each &lt;br&gt; delimited HTML record (that &lt;br&gt; allowing for a one Javascript codeline achieving this (though this aspect is not new to today&#8217;s work)).<\/p>\n<p>It is &#8220;an opportunity&#8221; to not involve string delimitation coming out of the PHP on its way to the parent HTML iframe via its &#8220;srcdoc&#8221; attribute.  How can we arrange this?  Well, helped out by the usefulness of <a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/10739016\/how-to-remove-commas-between-double-quotes-in-php'>this great link<\/a> we constructed the PHP function &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nfunction clean_csv_commas($csv, $indelimis) {  \/\/ thanks to https:\/\/stackoverflow.com\/questions\/10739016\/how-to-remove-commas-between-double-quotes-in-php<br \/>\n    $until=true;<br \/>\n    $qdelim = '\"';<br \/>\n    $bqdelim = \"'\";<br \/>\n    $altbqdelim = \"&amp;apos;\";<br \/>\n    $comma = ',';<br \/>\n    $altcomma = '&amp;comma;';<br \/>\n    $altqdelim = '&amp;quot;';<br \/>\n    $prevcomma=FALSE;<br \/>\n    $aftcomma=FALSE;<br \/>\n    if ($indelimis == \"'\") {<br \/>\n      $qdelim=$indelimis;<br \/>\n      $bqdelim='\"';<br \/>\n      $altqdelim = '&amp;apos;';<br \/>\n      $altbqdelim = '&amp;quot;';<br \/>\n    }<br \/>\n    $len = strlen($csv);<br \/>\n    $inside_block = FALSE;<br \/>\n    $out='';<br \/>\n    $rep='';<br \/>\n    for ($i=0; $i&lt;$len; $i++) {<br \/>\n        if (ord($csv[$i]) &lt; 32) {<br \/>\n                $inside_block=FALSE;<br \/>\n                $until=false;<br \/>\n        } else if ($csv[$i] == $qdelim) {<br \/>\n            if ($i == 0) {<br \/>\n                $prevcomma=FALSE;<br \/>\n                $inside_block=TRUE;<br \/>\n            } else if (($i + 1) == $len) {<br \/>\n                $aftcomma=FALSE;<br \/>\n                $inside_block=FALSE;<br \/>\n            } else {<br \/>\n             if ($csv[-1 + $i] == ',' || ord($csv[-1 + $i]) &lt; 32) { $prevcomma=TRUE; } else { $prevcomma=FALSE;   }<br \/>\n             if ($csv[1 + $i] == ',' || ord($csv[1 + $i]) &lt; 32) { $aftcomma=TRUE; } else { $aftcomma=FALSE;   }<br \/>\n             if ($inside_block) {<br \/>\n                 if ($aftcomma) { $inside_block=FALSE; }<br \/>\n             } else {<br \/>\n                if ($prevcomma) { $inside_block=TRUE; }<br \/>\n             }<br \/>\n            }<br \/>\n        }<br \/>\n<br \/>\n        \/\/if ($until) {<br \/>\n        \/\/    $rep.=\"\\n\" . $csv[$i] . \" \\$inside_block=\" . $inside_block . \" \\$prevcomma=\" . $prevcomma . \" \\$aftcomma=\" . $aftcomma;<br \/>\n        \/\/}<br \/>\n        if ($csv[$i] == $comma && $inside_block) {<br \/>\n        if ($until) {<br \/>\n            $rep.=\"\\n\" . $csv[$i] . \" \\$inside-block=\" . $inside_block . \" \\$prevcomma=\" . $prevcomma . \" \\$aftcomma=\" . $aftcomma;<br \/>\n        }<br \/>\n            $out.=$altcomma;<br \/>\n        } else if ($csv[$i] == $qdelim && $inside_block && !$aftcomma && !$prevcomma) {<br \/>\n            $out.=$altqdelim;<br \/>\n        } else if ($csv[$i] == $bqdelim && $inside_block) {<br \/>\n            $out.=$altbqdelim;<br \/>\n        } else {<br \/>\n            $out.=$csv[$i];<br \/>\n        }<br \/>\n<br \/>\n    }<br \/>\n    if ($indelimis == \"\") {<br \/>\n      \/\/file_put_contents(\"zerocsv.xxx\", $csv);<br \/>\n      \/\/file_put_contents(\"one_csv.xxx\", $rep);<br \/>\n      \/\/file_put_contents(\"onecsv.xxx\", $out);<br \/>\n      $out=str_replace(\"'\",\"\",str_replace('\"','',clean_csv_commas($out, \"'\")));<br \/>\n      \/\/file_put_contents(\"twocsv.xxx\", $out);<br \/>\n    }<br \/>\n    return $out;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; called in <font color=blue>this way<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  if (isset($_GET['csvfile'])) {<br \/>\n    $fname=str_replace(\"+\",\" \",urldecode($_GET['csvfile']));<br \/>\n    $csvcont='';<br \/>\n    if (strpos(strtolower($fname),\"http\") !== false) {<br \/>\n     $csvcont=file_get_contents($fname);<br \/>\n    } else if (file_exists($fname)) {<br \/>\n     $csvcont=file_get_contents($fname);<br \/>\n    }<br \/>\n    \/\/file_put_contents(\"threecsv.xxx\", '&lt;html&gt;&lt;body onload=\"parent.document.getElementById(' . \"'\" . ifcsv . \"'\" . ').srcdoc=' . \"'&lt;pre&gt;\" . str_replace(\"\\r\",\"&lt;br&gt;\",str_replace(\"\\n\",\"&lt;br&gt;\",str_replace(\"\\r\\n\",\"&lt;br&gt;\",str_replace(\"'\",\"\",clean_csv_commas($csvcont,\"\"))))) . \"&lt;\/pre&gt;'\" . ';\"&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n    echo '&lt;html&gt;&lt;body onload=\"parent.document.getElementById(' . \"'\" . ifcsv . \"'\" . ').srcdoc=' . \"'&lt;pre&gt;\" . str_replace(\"\\r\",\"&lt;br&gt;\",str_replace(\"\\n\",\"&lt;br&gt;\",str_replace(\"\\r\\n\",\"&lt;br&gt;\",str_replace(\"'\",\"\",<font color=blue>clean_csv_commas($csvcont,\"\")<\/font>)))) . \"&lt;\/pre&gt;'\" . ';\"&gt;&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n    exit;<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; to replace any need for string delimitation (via &#8216; or &#8221; characters encasing any commas mapped to &amp;comma; or fellow string delimiters to &amp;quot; or &amp;apos; respectively) with HTML Entity use &#8230;<\/p>\n<p><code><br \/>\nvar eoff=0.0;<br \/>\nvar noff=0.0;<br \/>\nvar envials=[];<br \/>\nvar pvials=[];<br \/>\nif (window.localStorage) {<br \/>\n  \/\/ 34,56,78,45 ... ,<br \/>\n  \/\/ 34,56,\"One\",78,45,\"Two\" ... ,\"<br \/>\n  \/\/ \"One\",34,56,\"Two\",78,45 ... \",<br \/>\n  var acontt=decodeURIComponent(('' + localStorage.getItem('en_st')).replace(\/^null$\/g,'')).replace(\/\\+\/g,' ');<br \/>\n  if (acontt != '') {   localStorage.removeItem('en_st'); }<br \/>\n  \/\/alert(acontt);<br \/>\n  var minicom=[];<br \/>\n  var endelim=',';<br \/>\n  if (acontt.indexOf(',\"') != -1 && acontt.indexOf('\",') != -1) {<br \/>\n    if (eval('' + acontt.indexOf('\",')) &lt; eval('' + acontt.indexOf(',\"'))) {<br \/>\n    endelim='\",';<br \/>\n    } else {<br \/>\n    endelim=',\"';<br \/>\n    }<br \/>\n  } else if (acontt.indexOf(',\"') != -1) {<br \/>\n    endelim=',\"';<br \/>\n  } else if (acontt.indexOf('\",') != -1) {<br \/>\n    endelim='\",';<br \/>\n  }<br \/>\n  var pfirst=true;<br \/>\n  var pyoullneverfindthis='';<br \/>\n  var jxv=0;<br \/>\n  var xenvials=acontt.split(endelim);<br \/>\n  xenvials.push('');<br \/>\n  for (var ixv=0; ixv&lt;xenvials.length; ixv++) {<br \/>\n    if (xenvials[ixv] != '') {<br \/>\n    if (endelim == ',\"') {<br \/>\n      pvials.push(xenvials[eval(1 + ixv)].split('\"')[0]);<br \/>\n      if (xenvials[ixv].indexOf('\",') != -1) { xenvials[ixv]=xenvials[ixv].replace(xenvials[ixv].split('\",')[0] + '\",',''); }<br \/>\n      minicom=xenvials[ixv].split(',');<br \/>\n      for (jxv=0; jxv&lt;minicom.length; jxv++) {<br \/>\n      envials.push(minicom[jxv]);<br \/>\n      }<br \/>\n    } else if (endelim == '\",') {<br \/>\n      pvials.push(xenvials[ixv].split('\"')[0]);<br \/>\n      if (xenvials[eval(1 + ixv)].indexOf(',\"') != -1) { xenvials[eval(1 + ixv)]=xenvials[eval(1 + ixv)].replace(',\"' + xenvials[eval(1 + ixv)].split(',\"')[0],''); }<br \/>\n      minicom=xenvials[eval(1 + ixv)].split(',');<br \/>\n      for (jxv=0; jxv&lt;minicom.length; jxv++) {<br \/>\n      envials.push(minicom[jxv]);<br \/>\n      }<br \/>\n    } else if (('' + xenvials[ixv]).trim() != '' && ('' + xenvials[ixv]).replace(\/\\ \/g,'').replace(\/\\-\/g,'').replace(\/\\.\/g,'').replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n\/\/alert('envials.push(' + xenvials[ixv] + ');');<br \/>\n      envials.push(xenvials[ixv]);<br \/>\n    } else if (('' + xenvials[ixv]).replace(\/\\ \/g,'').replace(\/\\-\/g,'').replace(\/\\.\/g,'').replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') != pyoullneverfindthis) {<br \/>\n\/\/alert('pvials.push(' + xenvials[ixv].replace(\/\\&amp\\;\/g,\"&\").replace(\/\\&apos\\;\/g,\"'\").replace(\/\\&quot\\;\/g,'\"') + ')');<br \/>\n      pvials.push(xenvials[ixv].replace(\/\\&amp\\;\/g,\"&\").replace(\/\\&apos\\;\/g,\"'\").replace(\/\\&quot\\;\/g,'\"'));<br \/>\n      if (pfirst) {<br \/>\n        pfirst=false;<br \/>\n        pyoullneverfindthis='youllnever_find_this';<br \/>\n      }<br \/>\n    } else {<br \/>\n\/\/alert('envials.push(' + xenvials[ixv] + ')');<br \/>\n      envials.push(xenvials[ixv]);<br \/>\n    }<br \/>\n    pfirst=false;<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; as exemplified by &#8230;<\/p>\n<table>\n<tr>\n<th>Originally<\/th>\n<td>327500,672500,&#8221;Arthur&#8217;s Seat, (Fort)&#8221;<\/td>\n<\/tr>\n<tr>\n<th>Out of the PHP<\/th>\n<td>\n&lt;html&gt;&lt;body onload=&#8221;parent.document.getElementById(&#8216;ifcsv&#8217;).srcdoc = &#8216;&lt;pre&gt;327500,672500,Arthur&amp;amp;apos;s Seat&amp;amp;comma; (Fort)&lt;br&gt;&lt;\/pre&gt;&#8217;;&#8221;&gt;&lt;\/body&gt;&lt;\/html&gt;\n<\/td>\n<\/tr>\n<tr>\n<th>Via Parent Iframe body innerHTML<\/th>\n<td>327500,672500,Arthur&amp;amp;apos;s Seat&amp;amp;comma; (Fort)<\/td>\n<\/tr>\n<tr>\n<th>window.localStorage<\/th>\n<td>327500,672500,Arthur&#8217;s Seat&amp;comma; (Fort)<\/td>\n<\/tr>\n<tr>\n<th>Finally<\/th>\n<td>\n<table>\n<tr>\n<th>E<\/th>\n<th>N<\/th>\n<th>Placename<\/th>\n<\/tr>\n<tr>\n<td>327500<\/td>\n<td>672500<\/td>\n<td>Arthur&#8217;s Seat, (Fort)<\/td>\n<\/tr>\n<\/table>\n<\/td>\n<\/tr>\n<\/table>\n<p>And we&#8217;d like to thank <a target=_blank title='Useful link' href='https:\/\/digimapforschools.edina.ac.uk\/old-help\/add-points\/'>this great link<\/a> for today&#8217;s tutorial&#8217;s testing CSV data as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/egp.csv\">egp.csv<\/a> &#8230;<\/p>\n<p><code><br \/>\n327500,672500,\"Arthur's Seat, (Fort)\"<br \/>\n316500,662500,\"Bavelaw Castle\"<br \/>\n322500,677500,\"Caroline Park\"<br \/>\n316500,672500,\"Castle Gogar\"<br \/>\n314500,674500,\"Cat Stane\"<br \/>\n323500,670500,\"Craig Ho\"<br \/>\n321500,674500,\"Craigcrook Castle\"<br \/>\n328500,670500,\"Craigmillar Castle\"<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php--GETME' title='Download me'>our changed &#8220;sister&#8221; PHP<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php--GETME' title='Download me'>SurveyTraverse.php<\/a> code called by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html-----GETME\" title=\"SurveyTraverse.htm\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html-----GETME\" title=\"SurveyTraverse.htm\">SurveyTraverse.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/\">live run<\/a> link.<\/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-html-and-javascript-and-css-survey-traverse-csv-co-ordinates-tutorial\/'>New HTML and Javascript and CSS Survey Traverse CSV Co-ordinates Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='htmljcssstcsvc-t'>Previous relevant <a target=_blank title='HTML and Javascript and CSS Survey Traverse CSV Co-ordinates Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-csv-co-ordinates-tutorial\/'>HTML and Javascript and CSS Survey Traverse CSV Co-ordinates Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"HTML and Javascript and CSS Survey Traverse CSV Co-ordinates Tutorial\"]<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Traverse CSV Co-ordinates Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse_csv.jpg\" title=\"HTML and Javascript and CSS Survey Traverse CSV Co-ordinates Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>To help out the Survey Traverse functionality of the recent <a title='HTML and Javascript and CSS Survey Traverse Canvas Tutorial' href='#htmljcssstct'>HTML and Javascript and CSS Survey Traverse Canvas Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>it is no surprise that the improvement relates to getting lots of data in quickly and easily ... that being ...<\/li>\n\n\n\n\n<li>co-ordinate data ... letting the web application ...<\/li>\n\n\n\n\n<li>derive for us bearings and distances ... implied by that ...<\/li>\n\n\n\n\n<li>\"comma separated values\" file format means of importing<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p>There is a small issue trying to get into the HTML\/Javascript client web application the CSV data just using \"client pre-emptive iframe\" methodologies, because most platforms will, instead, shape to download this data.  So cue the help we (<font color=blue>and you<\/font> ...<\/p>\n\n\n\n<code>\nfunction checkAtStart() {    \/\/ check query string\n if (numlegs != 0) {\n  \/\/alert(params['traverse']);\n  processTraverse(params['traverse']);\n } else {\n  numlegs = prompt(\"Please tell me how many Traverse legs you have.  If you have a set of co-ordinates number of Traverse legs is one less than this number of co-ordinate sets.<font color=blue>  If you are specifying a CSV filename to use for a set of co-ordinate that is allowed too.<\/font>\", \"0\");\n  <font color=blue>if (('' + numlegs + '~').toLowerCase().indexOf('.csv~') != -1) {\n   document.getElementById('preifcsv').src='.\/SurveyTraverse.php?csvfile=' + encodeURIComponent(numlegs);\n  } else <\/font>if (numlegs != \"0\" && numlegs != null) {\n   window.location = window.location + \"?traverse=\" + numlegs + \",0\";\n  }\n }\n}\n<\/code>\n\n\n\n<p>) ... can get from, into a first HTML iframe (as referenced above) ...<\/p>\n\n\n\n<code>\n&lt;iframe src='\/\/www.rjmprogramming.com.au\/About_Us.html' style=display:none; id=preifcsv&gt;&lt;\/iframe&gt;\n<\/code>\n\n\n\n<p> ... <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php-GETME' title='Download me'>our changed \"sister\" PHP<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php-GETME' title='Download me'>SurveyTraverse.php<\/a> code ...<\/p>\n\n\n\n&lt;?php\n<code>\n  if (isset($_GET['csvfile'])) {\n    $fname=str_replace(\"+\",\" \",urldecode($_GET['csvfile']));\n    $csvcont='';\n    if (strpos(strtolower($fname),\"http\") !== false) {\n     $csvcont=file_get_contents($fname);\n    } else if (file_exists($fname)) {\n     $csvcont=file_get_contents($fname);\n    }\n    if (strpos($csvcont,',') !== false) {\n      echo '&lt;html&gt;&lt;body onload=\"parent.document.getElementById(' . \"'\" . ifcsv . \"'\" . ').srcdoc=' . \"'&lt;pre&gt;\" . str_replace(\"\\r\",\"&lt;br&gt;\",str_replace(\"\\n\",\"&lt;br&gt;\",str_replace(\"\\r\\n\",\"&lt;br&gt;\",str_replace(\"'\",\"\",$csvcont)))) . \"&lt;\/pre&gt;'\" . ';\"&gt;&lt;\/body&gt;&lt;\/html&gt;';\n    }\n    exit;\n  }\n  $prehtml = \"\";\n  $midhtml = \"\";\n  $posthtml = \"\";\n  function retval($inv) {\n    if (strpos($inv, \"E-\") !== false) return \"0\";\n    return $inv;\n  }\n<\/code> \n?&gt;\n\n\n\n<p> ... populating the second HTML iframe with the CSV data (modified into text\/html) via that iframe's \"srcdoc\" attribute ...<\/p>\n\n\n\n<code>\n&lt;iframe srcdoc='' style=display:none; onload='getthis(this);' id=ifcsv&gt;&lt;\/iframe&gt;\n<\/code> \n\n\n\n<p> ... and then back to ...<\/p>\n\n\n\n<code>\nfunction isNumeric(str) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/175739\/built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number\n  if (typeof str != \"string\") return false \/\/ we only process strings!  \n  return !isNaN(str) && \/\/ use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...\n         !isNaN(parseFloat(str)) \/\/ ...and ensure strings of whitespace fail\n}\n<br \/>\nfunction getthis(iois) {\n  var totco=0;\n  var legcnt=-1;\n  var lsst='', lsstd='';\n  var miniarr=[], minirec='', ethere=false, nthere=false;\n  if (iois != null) {\n    var aconto = (iois.contentWindow || iois.contentDocument);\n    if (aconto != null) {\n     if (aconto.document) { aconto = aconto.document; }\n     if (aconto.body != null) {\n       if (aconto.body.innerHTML.indexOf('&lt;pre&gt;') == 0 && aconto.body.innerHTML.indexOf(',') != -1) {\n         var reclines=aconto.body.innerHTML.replace('&lt;pre&gt;','').replace('&lt;\/pre&gt;','').split('&lt;br&gt;');\n         for (var irecs=0; irecs&lt;reclines.length; irecs++) {\n           miniarr=reclines[irecs].split(',');\n           minirec='';\n           ethere=false;\n           nthere=false;\n           if (miniarr.length &gt;= 2) {\n             if (isNumeric('' + miniarr[0].replace(\/\\\"\/g,'').replace(\/\\'\/g,''))) { minirec+= '' + miniarr[0].replace(\/\\\"\/g,'').replace(\/\\'\/g,''); ethere=true; } \n             if (isNumeric('' + miniarr[1].replace(\/\\\"\/g,'').replace(\/\\'\/g,''))) { \n              if (ethere) {\n               minirec+= ',' + miniarr[1].replace(\/\\\"\/g,'').replace(\/\\'\/g,''); nthere=true; \n              } else { \n               minirec+= '' + miniarr[1].replace(\/\\\"\/g,'').replace(\/\\'\/g,''); ethere=true; \n              }\n             } \n             if (miniarr.length &gt; 2 && ethere && !nthere) {\n             if (isNumeric('' + miniarr[2].replace(\/\\\"\/g,'').replace(\/\\'\/g,''))) { \n               minirec+= ',' + miniarr[2].replace(\/\\\"\/g,'').replace(\/\\'\/g,''); nthere=true; \n             }\n             }\n             if (nthere) { legcnt++;  lsst+=lsstd + minirec; lsstd=',';  }\n           } \n         }\n         if (lsst != '' && legcnt &gt; 0) {\n           alert(lsst.slice(-100));\n           localStorage.setItem('en_st', encodeURIComponent(lsst));\n           location.href=document.URL.split('#')[0].split('?')[0] + '?traverse=' + legcnt + ',0';\n         }\n         \/\/alert(aconto.body.innerHTML); \n       }\n     }\n    }\n  }\n}\n<\/code>\n\n\n\n<p> ... the HTML\/Javascript via window.<a target=_blank title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> ...<\/p>\n\n\n\n<code>\nvar envials=[];\nvar pvials=[];\nif (window.localStorage) {\n  \/\/ 34,56,78,45 ... ,\n  \/\/ 34,56,\"One\",78,45,\"Two\" ... ,\"\n  \/\/ \"One\",34,56,\"Two\",78,45 ... \",\n  var acontt=decodeURIComponent(('' + localStorage.getItem('en_st')).replace(\/^null$\/g,'')).replace(\/\\+\/g,' ');\n  if (acontt != '') {   localStorage.removeItem('en_st'); }\n  var minicom=[];\n  var endelim=',';\n  if (acontt.indexOf(',\"') != -1 && acontt.indexOf('\",') != -1) {\n    if (eval('' + acontt.indexOf('\",')) &lt; eval('' + acontt.indexOf(',\"'))) {\n    endelim='\",';\n    } else {\n    endelim=',\"';\n    }\n  } else if (acontt.indexOf(',\"') != -1) {\n    endelim=',\"';\n  } else if (acontt.indexOf('\",') != -1) {\n    endelim='\",';\n  }\n  var jxv=0;\n  var xenvials=acontt.split(endelim);\n  xenvials.push('');\n  for (var ixv=0; ixv&lt;xenvials.length; ixv++) {\n    if (xenvials[ixv] != '') {\n    if (endelim == ',\"') {\n      pvials.push(xenvials[eval(1 + ixv)].split('\"')[0]);\n      if (xenvials[ixv].indexOf('\",') != -1) { xenvials[ixv]=xenvials[ixv].replace(xenvials[ixv].split('\",')[0] + '\",',''); }\n      minicom=xenvials[ixv].split(',');\n      for (jxv=0; jxv&lt;minicom.length; jxv++) {\n      envials.push(minicom[jxv]);\n      }\n    } else if (endelim == '\",') {\n      pvials.push(xenvials[ixv].split('\"')[0]);\n      if (xenvials[eval(1 + ixv)].indexOf(',\"') != -1) { xenvials[eval(1 + ixv)]=xenvials[eval(1 + ixv)].replace(',\"' + xenvials[eval(1 + ixv)].split(',\"')[0],''); }\n      minicom=xenvials[eval(1 + ixv)].split(',');\n      for (jxv=0; jxv&lt;minicom.length; jxv++) {\n      envials.push(minicom[jxv]);\n      }\n    } else {\n      envials.push(xenvials[ixv]);\n    }\n    }\n  }\n}\n<\/code>\n\n\n\n<p> ... means (in that curious way by which we can dispose of it as soon as it gets into a Javascript global var<font size=1>iable<\/font> (feels a bit like PHP GET claytons or POST claytons) via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html----GETME\" title=\"SurveyTraverse.htm\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html----GETME\" title=\"SurveyTraverse.htm\">SurveyTraverse.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/\">live run<\/a> link.<\/p>\n\n\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\/html-and-javascript-and-css-survey-traverse-csv-co-ordinates-tutorial\/'>HTML and Javascript and CSS Survey Traverse CSV Co-ordinates Tutorial<\/a>.<\/p-->\n<hr>\n<p id='htmljcssstct'>Previous relevant <a target=_blank title='HTML and Javascript and CSS Survey Traverse Canvas Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-canvas-tutorial\/'>HTML and Javascript and CSS Survey Traverse Canvas 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\/SurveyTraverse\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Traverse Canvas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse_yetmore.jpg\" title=\"HTML and Javascript and CSS Survey Traverse Canvas Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS Survey Traverse Canvas Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='HTML and Javascript and CSS NSW State Survey Traverse Tutorial' href='#htmljcssnswsstt'>HTML and Javascript and CSS NSW State Survey Traverse Tutorial<\/a> progress with our Survey Traverse web application functionality we wanted to augment &#8230;<\/p>\n<ul>\n<li>the existent tabular data &#8230; with &#8230;<\/li>\n<li>new <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> graphics to show the (Easting,Northing) co-ordinate sets of the Survey Traverse<\/li>\n<\/ul>\n<p> &#8230; involving the <font color=blue>collection of minimums and maximums<\/font> Javascript &#8220;ifzeromakezero&#8221; function code changes &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>var edone=false, ndone=false;<br \/>\nvar maxe=-1.0, mine=-1.0, maxn=-1.0, minn=-1.0;<\/font><br \/>\n<br \/>\nfunction ifzeromakezero(innum<font color=blue>,e_or_n<\/font>) {<br \/>\n var cinnum = innum.toString();<br \/>\n if (cinnum.indexOf(\"e-\") != (0 - 1)) {<br \/>\n   <font color=blue>if (e_or_n == 1) {<br \/>\n     if (!edone) {<br \/>\n       mine=0.0;<br \/>\n       maxe=0.0;<br \/>\n     } else {<br \/>\n       if (mine > 0.0) { mine=0.0; }<br \/>\n       if (maxe < 0.0) { maxe=0.0; }\n     } \n     edone=true;\n   } else if (e_or_n == 2) {\n     if (!ndone) {\n       minn=0.0;\n       maxn=0.0;\n     } else {\n       if (minn > 0.0) { minn=0.0; }<br \/>\n       if (maxn < 0.0) { maxn=0.0; }\n     } \n     ndone=true;\n   }<\/font><br \/>\n   return 0.000;<br \/>\n }<br \/>\n <font color=blue>if (e_or_n == 1) {<br \/>\n     if (!edone) {<br \/>\n       mine=innum;<br \/>\n       maxe=innum;<br \/>\n     } else {<br \/>\n       if (mine > innum) { mine=innum; }<br \/>\n       if (maxe < innum) { maxe=innum; }\n     } \n     edone=true;\n } else if (e_or_n == 2) {\n     if (!ndone) {\n       minn=innum;\n       maxn=innum;\n     } else {\n       if (minn > innum) { minn=innum; }<br \/>\n       if (maxn < innum) { maxn=innum; }\n     } \n     ndone=true;\n }<\/font><br \/>\n return innum;<br \/>\n}<\/code><\/p>\n<p> &#8230; and the canvas creation and line plotting, featuring (thanks to (linear gradients on canvas) ideas from <a target=_blank title='Excellent link' href='http:\/\/jsfiddle.net\/51toapv2\/'>this excellent link<\/a>) canvas Javascript code &#8230;<\/p>\n<p><code><br \/>\n    document.getElementById('overlays').innerHTML+='&lt;br&gt;&lt;br&gt;&lt;canvas style=\"background-color:#f0f0f0;border:2px dashed red;\" height=' + eval(40 + eval('' + maxn) - eval('' + minn)) + ' width=' + eval(40 + eval('' + maxe) - eval('' + mine)) + ' id=mycanvas&gt;&lt;\/canvas&gt;';<br \/>\n    setTimeout(postspanscheck, 5000);<br \/>\n    var ele=document.getElementById('mycanvas');<br \/>\n    var context=document.getElementById('mycanvas').getContext('2d');<br \/>\n    var iz=0, mto=true, grad;<br \/>\n<br \/>\n    \/\/ var pts = [[0, 0, \"red\"], [0, 0, \"green\"], [0, 0, \"blue\"], [0, 0, \"purple\"], [0, 0, \"olive\"], [0, 0, \"magenta\"], [0, 0, \"cyan\"], [0, 0, \"brown\"], [0, 0, \"black\"], [0, 0, \"pink\"], [0, 0, \"darkgreen\"], [0, 0, \"darkblue\"], [0, 0, \"darkorange\"]];<br \/>\n    var pts = [[0, 0, \"red\"], [0, 0, \"orange\"], [0, 0, \"yellow\"], [0, 0, \"green\"], [0, 0, \"cyan\"], [0, 0, \"blue\"], [0, 0, \"violet\"]];<br \/>\n    var begin = pts[0];<br \/>\n    var end = pts[1];<br \/>\n<br \/>\n    while (document.getElementById('E' + iz)) {<br \/>\n      if (document.getElementById('E' + iz).value != '') {<br \/>\n        if (mto) {<br \/>\n          context.lineWidth = 6;<br \/>\n          context.lineJoin = \"round\";<br \/>\n          context.lineCap = \"round\";<br \/>\n          \/\/context.strokeStyle = \"black\";<br \/>\n          context.beginPath();<br \/>\n          begin=pts[eval(iz % pts.length)];<br \/>\n          begin[0] = eval(20 + eval('' + document.getElementById('E' + iz).value) - eval('' + mine));<br \/>\n          begin[1] = eval(eval('' + maxn) + 20 - eval('' + document.getElementById('N' + iz).value) + 0 * eval('' + minn));<br \/>\n          context.moveTo(eval(20 + eval('' + document.getElementById('E' + iz).value) - eval('' + mine)), eval(eval('' + maxn) + 20 - eval('' + document.getElementById('N' + iz).value) + 0 * eval('' + minn)));<br \/>\n        } else {<br \/>\n          end=pts[eval(1 + eval(iz % 5))];<br \/>\n          end[0] = eval(20 + eval('' + document.getElementById('E' + iz).value) - eval('' + mine));<br \/>\n          end[1] = eval(eval('' + maxn) + 20 - eval('' + document.getElementById('N' + iz).value) + 0 * eval('' + minn));<br \/>\n          grad = context.createLinearGradient(begin[0], begin[1], end[0], end[1]);<br \/>\n          grad.addColorStop(0, begin[2]);<br \/>\n          grad.addColorStop(1, end[2]);<br \/>\n          context.strokeStyle = grad;<br \/>\n          context.lineTo(eval(20 + eval('' + document.getElementById('E' + iz).value) - eval('' + mine)), eval(eval('' + maxn) + 20 - eval('' + document.getElementById('N' + iz).value) + 0 * eval('' + minn)));<br \/>\n          context.stroke();<br \/>\n          \/\/context.strokeStyle = \"black\";<br \/>\n          context.beginPath();<br \/>\n          context.moveTo(eval(20 + eval('' + document.getElementById('E' + iz).value) - eval('' + mine)), eval(eval('' + maxn) + 20 - eval('' + document.getElementById('N' + iz).value) + 0 * eval('' + minn)));<br \/>\n          begin=pts[eval(iz % pts.length)];<br \/>\n          begin[0] = eval(20 + eval('' + document.getElementById('E' + iz).value) - eval('' + mine));<br \/>\n          begin[1] = eval(eval('' + maxn) + 20 - eval('' + document.getElementById('N' + iz).value) + 0 * eval('' + minn));<br \/>\n        }<br \/>\n        mto=false;<br \/>\n      }<br \/>\n      iz++;<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html---GETME\" title=\"SurveyTraverse.htm\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html---GETME\" title=\"SurveyTraverse.htm\">SurveyTraverse.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/\">live run<\/a> link.<\/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\/html-and-javascript-and-css-survey-traverse-canvas-tutorial\/'>HTML and Javascript and CSS Survey Traverse Canvas Tutorial<\/a>.<\/p-->\n<hr>\n<p id='htmljcssnswsstt'>Previous relevant <a target=_blank title='HTML and Javascript and CSS NSW State Survey Traverse Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-nsw-state-survey-traverse-tutorial\/'>HTML and Javascript and CSS NSW State Survey Traverse 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\/SurveyTraverse\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS NSW State Survey Traverse Co-ordinates Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/survey_traverse_real.jpg\" title=\"HTML and Javascript and CSS NSW State Survey Traverse Co-ordinates Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS NSW State Survey Traverse Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='HTML and Javascript and CSS Survey Traverse Co-ordinates Tutorial' href='#htmljcssstc-t'>HTML and Javascript and CSS Survey Traverse Co-ordinates Tutorial<\/a> was kind of &#8220;mathematical&#8221; by nature.  Today we add some realism.<\/p>\n<p>This realism stems from the discovery of a NSW State Survey mark in the local area (to the right of today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/survey_traverse_real.jpg\">tutorial picture<\/a>).  Having a Land Surveying background, an indestructible looking survey mark is a joy to behold.  The thing is though, when I was doing a Bachelor Of Surveying in the late 1970&#8217;s and early 1980&#8217;s, this survey mark was much more an object of awe than perhaps such a mark is to people, even me, today.  Mystery surrounded it, it taking a visit to a government agency (NSW Titles Office), and no doubt some paperwork to match, would be required to find out anything about it, Land Surveyors at the very least curious about &#8230;<\/p>\n<ul>\n<li>(Easting, Northing) co-ordinates in AMG (Australian Map Grid) (in whatever ellipsoid of relevance)<\/li>\n<li>Reduced Level (at whatever datum of relevance)<\/li>\n<\/ul>\n<p>We decided on our iPhone to feed that SS46391 survey mark name into <a target=_blank title='Google' href='https:\/\/www.google.com\/search?sxsrf=ALeKk03k0t4onyTvNcOPeTf5OwWWx1CEAw%3A1597806776493&#038;ei=uJg8X_3YHcLw9QPHspuADA&#038;q=state+survey+mark+46391+amg&#038;oq=state+survey+mark+46391+amg&#038;gs_lcp=CgZwc3ktYWIQAzIFCAAQzQIyBQgAEM0CMgUIABDNAjIFCAAQzQI6BwgAEEcQsAM6BwghEAoQoAE6BQghEKABULWUAljd7wJgwvICaAFwAHgBgAHZBIgB9UOSAQ0wLjEwLjEzLjYuMS4ymAEAoAEBqgEHZ3dzLXdpesABAQ&#038;sclient=psy-ab&#038;ved=0ahUKEwj9lNSKpqbrAhVCeH0KHUfZBsAQ4dUDCAw&#038;uact=5'>Google<\/a>, thanks, and see what comes up, and discovered the <a target=_blank title='NSW Survey Marks app' href='https:\/\/six.nsw.gov.au\/content\/mobile#:~:text=The%20NSW%20Survey%20Mark%20app,please%20visit%20the%20iTunes%20Store.'>&#8220;NSW Survey Marks&#8221;<\/a> iOS app that we downloaded and spent a happy half hour &#8220;in a wooooorrrrrllllllddd of discovery and interest&#8221; <font size=1>(well, you had to be there)<\/font>.<\/p>\n<p>You see, this app is just great!  The information above is augmented by location Sketch Maps (that a Land Surveyor from the past would have created in the NSW Titles Office).<\/p>\n<p>This way, in that half hour we looked for 3 survey marks in that local area, and gleaned their co-ordinates to come up with the &#8230;<\/p>\n<ul>\n<li>(Easting, Northing) co-ordinates in AMG (Australian Map Grid) (from the NSW Survey Marks app)<\/li>\n<li>Bearings and Distances and theodolite Angles derived<\/li>\n<\/ul>\n<p> &#8230; also shown in today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/survey_traverse_real.jpg\">tutorial picture<\/a> &#8230; via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html--GETME\" title=\"SurveyTraverse.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html--GETME\" title=\"SurveyTraverse.html\">SurveyTraverse.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/\">live run<\/a> link, the changes concerning allowing both &#8230;<\/p>\n<ul>\n<li>decimal degrees &#8230; as well as &#8230;<\/li>\n<li>degrees, minutes and seconds (useful for setting an angle with a theodolite)<\/li>\n<\/ul>\n<p> &#8230; for those aforesaid mentioned Angles and Bearings (with your compass or iPhone compass app).<\/p>\n<p>Some of this &#8220;NSW Survey Marks&#8221; app&#8217;s workings can be viewed with today&#8217;s accompanying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/pdf_jpg_ss.pdf\">PDF presentation<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-html-and-javascript-and-css-survey-traverse-co-ordinates-tutorial\/'>New HTML and Javascript and CSS Survey Traverse Co-ordinates Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='htmljcssstc-t'>Previous relevant <a target=_blank title='HTML and Javascript and CSS Survey Traverse Co-ordinates Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-co-ordinates-tutorial\/'>HTML and Javascript and CSS Survey Traverse Co-ordinates Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"HTML and Javascript and CSS Survey Traverse Co-ordinates Tutorial\"]<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Traverse Co-ordinates Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse_more.jpg\" title=\"HTML and Javascript and CSS Survey Traverse Co-ordinates Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>Today we revisit our <a title='HTML and Javascript and CSS Survey Traverse Tutorial' href='#htmljcssstt'>HTML and Javascript and CSS Survey Traverse Tutorial<\/a> web application because we want to allow it to be able to ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>do its usual entering of theodolite measured angles and distance measurements to glean Easting,Northing co-ordinates and Bearings ... as well as, as of today ...<\/li>\n\n\n\n\n<li>enter Easting,Northing co-ordinates to derive Bearings and Distances and theodolite measured Angles (you guessed it, no adjustments)<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p>Tomorrow we\u2019ll go more into the inspiration for this adaptation of functionality, but rest assured, there are probably more scenarios whereby we know co-ordinates rather than the polar co-ordinates implied by how Survey Traverses are traditionally done using a theodolite and a distance measuring technique.  These days all happen within the one Total Station piece of equipment that Land Surveyors would be keen to get their hands on.<\/p>\n\n\n\n\n\n<p>Feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html-GETME\" title=\"SurveyTraverse.html\">this changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html-GETME\" title=\"SurveyTraverse.html\">SurveyTraverse.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/\">live run<\/a> link.<\/p>\n\n\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\/html-and-javascript-and-css-survey-traverse-co-ordinates-tutorial\/'>HTML and Javascript and CSS Survey Traverse Co-ordinates Tutorial<\/a>.<\/p-->\n<hr>\n<p id='htmljcssstt'>Previous relevant <a target=_blank title='HTML and Javascript and CSS Survey Traverse Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-tutorial\/'>HTML and Javascript and CSS Survey Traverse 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\/SurveyTraverse\/\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML and Javascript and CSS Survey Traverse Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.jpg\" title=\"HTML and Javascript and CSS Survey Traverse Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML and Javascript and CSS Survey Traverse Tutorial<\/p><\/div>\n<p>Here is a tutorial showing some client-side basics in HTML and Javascript and CSS all in the one HTML file, to simplify concepts.   The tutorial subject matter is a webpage to perform Survey Traverse calculations.   A Survey Traverse is:<\/p>\n<blockquote><p>Traverse is a method in the field of surveying to establish control networks.[1] It is also used in geodesy. Traverse networks involve placing survey stations along a line or path of travel, and then using the previously surveyed points as a base for observing the next point. Traverse networks have many advantages, including:<\/p>\n<p>    Less reconnaissance and organization needed;<br \/>\n    While in other systems, which may require the survey to be performed along a rigid polygon shape, the traverse can change to any shape and thus can accommodate a great deal of different terrains;<br \/>\n    Only a few observations need to be taken at each station, whereas in other survey networks a great deal of angular and linear observations need to be made and considered;<br \/>\n    Traverse networks are free of the strength of figure considerations that happen in triangular systems;<br \/>\n    Scale error does not add up as the traverse is performed. Azimuth swing errors can also be reduced by increasing the distance between stations.<\/p>\n<p>The traverse is more accurate than triangulateration[2] (a combined function of the triangulation and trilateration practice).[3]<\/p><\/blockquote>\n<p>Let&#8217;s see some simple <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/'>HTML<\/a> in action in a tutorial &#8230;<\/p>\n<p>Link to HTML &#8220;spiritual home&#8221; &#8230; <a target=_blank title='W3Schools' href='http:\/\/www.w3schools.com\/html\/'>at W3Schools<\/a> has many tutorials.<br \/>\nLink to Survey Traverse live run &#8230; <a target=_blank title='Survey Traverse live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html'>here<\/a>.<br \/>\nLink to Survey Traverse live run (additional Google Line Chart functionality)  <a target=_blank title='Survey Traverse live run with Google Line Chart' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php'>here<\/a>.<br \/>\nLink to Survey Traverse information &#8230; <a target=_blank title='Survey Traverse information' href='http:\/\/en.wikipedia.org\/wiki\/Traverse_(surveying)'>from Wikipedia from which quote above comes<\/a>.<br \/>\nLink to some downloadable HTML code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.html_GETME' title='Download me'>SurveyTraverse.html<\/a> which packages up a lot of Javascript and a little bit of CSS &#8230; or JaCvasScriptS &#8230; not sure whether this would ever catch on.<br \/>\nLink to some downloadable PHP programming code (additional Google Line Chart functionality) &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SurveyTraverse\/SurveyTraverse.php_GETME' title='Download me'>SurveyTraverse.php<\/a>\n<\/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='#d1271' onclick='var dv=document.getElementById(\"d1271\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=59\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d1271' 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='#d50010' onclick='var dv=document.getElementById(\"d50010\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/bearing\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50010' 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='#d50016' onclick='var dv=document.getElementById(\"d50016\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/app\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50016' 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='#d50024' onclick='var dv=document.getElementById(\"d50024\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50024' 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='#d50524' onclick='var dv=document.getElementById(\"d50524\"); 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='d50524' 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='#d50528' onclick='var dv=document.getElementById(\"d50528\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/delimitation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50528' 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='#d50559' onclick='var dv=document.getElementById(\"d50559\"); 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='d50559' 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='#d50566' onclick='var dv=document.getElementById(\"d50566\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/context\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50566' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We thought to improve on yesterday&#8217;s HTML and Javascript and CSS Survey Traverse CSV Geo Chart Tutorial conjoining of &#8230; Survey Traverse Google Chart Geo Chart &#8230; it&#8217;s good to be able to use &#8230; Emojis Link Lines &#8230; but &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-and-javascript-and-css-survey-traverse-csv-geo-chart-context-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[3349,1707,2531,2105,281,283,290,2276,2147,385,429,451,3453,1619,3208,518,576,2658,587,3446,652,679,3452,2408,2415,2126,932,2134,2918,1094,2902,1226,1254],"class_list":["post-50566","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-client-pre-emptive-iframe","tag-co-ordinates","tag-comma-separated-values","tag-context","tag-css","tag-csv","tag-data","tag-delimitation","tag-delimiter","tag-emoji","tag-file_get_contents","tag-font","tag-font-size","tag-geo-chart","tag-geochart","tag-google-chart","tag-html","tag-html-entity","tag-iframe","tag-import-traverse","tag-javascript","tag-land-surveying","tag-linked-lines","tag-local-storage","tag-localstorage","tag-map-chart","tag-php","tag-place","tag-placename","tag-scale","tag-srcdoc","tag-svg","tag-text"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50566"}],"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=50566"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50566\/revisions"}],"predecessor-version":[{"id":50572,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50566\/revisions\/50572"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=50566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=50566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=50566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}