{"id":35647,"date":"2018-01-24T03:01:38","date_gmt":"2018-01-23T17:01:38","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=35647"},"modified":"2018-01-24T20:27:15","modified_gmt":"2018-01-24T10:27:15","slug":"interesting-places-sorting-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/interesting-places-sorting-tutorial\/","title":{"rendered":"Interesting Places Sorting Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Interesting Places Sorting Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places_sorting.jpg\" title=\"Interesting Places Sorting Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Interesting Places Sorting Tutorial<\/p><\/div>\n<p>We&#8217;re all different regarding our levels of tolerance for &#8220;disorder&#8221;.  One person&#8217;s view of &#8220;disorder&#8221; is not likely to match, exactly, anybody else within &#8220;cooooooeeeeee&#8221;.  Personally, don&#8217;t mind mess, but can disappoint on those occasions where it takes that little bit longer to find something, as was definitely the case leaving yesterday&#8217;s <a title='Interesting Places Primer Tutorial' href='#ippt'>Interesting Places Primer Tutorial<\/a>&#8216;s version of our new &#8220;Interesting Place&#8221; (HTML\/Javascript\/CSS) web application we&#8217;ve been working on lately.  The reason for the &#8220;disorder&#8221; inherent in that web application&#8217;s HTML select (dropdown) element&#8217;s workings is because the source of the data (thanks to <i>The Earth from the Air<\/i> by Yann Arthus-Bertrand (ISBN: 9780500544846)) took a hard copy form.  Barring &#8220;scanning&#8221; processes into character data (yoo hoo <a target=_blank title='Textarea Pointing Local Font Canvas Overlay Deletes Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/textarea-pointing-local-font-canvas-overlay-deletes-tutorial\/'>Textarea Pointing Local Font Canvas Overlay Deletes Tutorial<\/a> &#8220;top&#8221; of blog posting thread &#8230; with relevant &#8220;bottom&#8221; &#8220;primer&#8221; initial premise) it&#8217;s most likely going to be a two step process of &#8230;<\/p>\n<ol>\n<li>collect the geographical latitude and longitude from hard copy (in whatever order it appears in book) onto more hard copy, or to soft copy file perhaps &#8230; and transfer this information into (the inherent order of) the HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> (dropdown) element&#8217;s option tags &#8230; and then, as a separate exercise, because this is not a very orderly way to organize the data &#8230;<\/li>\n<li>allow the software to sort this data into various &#8220;views&#8221; of that same basic (still &#8220;disordered&#8221;) data<\/li>\n<\/ol>\n<p>You&#8217;ll see this &#8220;view&#8221; way of looking at things permeates the database world too.  The underlying data in a database can be collected in quite a &#8220;disorderly&#8221; way, but define a database &#8220;view&#8221; of it sorted (or indexed) via the use of database key columns, and that same &#8220;disorderly&#8221; pig&#8217;s ear (<font size=1>no sows were harmed making this blog posting<\/font>) can look like a &#8220;silk purse&#8221; (<font size=1>no silks were harmed making this blog posting<\/font>).<\/p>\n<p>Our web application is not using anything serverside, so we choose to do this job using, respectively &#8230;<\/p>\n<ol>\n<li>one Javascript <a target=_blank title='Javascript Array information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_arrays.asp'>Array<\/a> containing (comma separated) <i>latitude,longitude,placename<\/i> &#8230; and here, today, to introduce some order &#8230;<\/li>\n<li>six new Javascript <a target=_blank title='Javascript Array information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_arrays.asp'>Array<\/a>s still containing (comma separated) <i>latitude,longitude,placename<\/i> in orders reflecting the &#8220;view&#8221; requirements for &#8230;\n<ul>\n<li>a to z placename <a target=_blank title='Javascript Array sort method information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_array_sort.asp'>sort<\/a><\/li>\n<li>z to a placename <a target=_blank title='Javascript Array sort method information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_array_sort.asp'>sort<\/a><\/li>\n<li>north to south latitude <a target=_blank title='Javascript Array sort method information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_array_sort.asp'>sort<\/a><\/li>\n<li>south to north latitude <a target=_blank title='Javascript Array sort method information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_array_sort.asp'>sort<\/a><\/li>\n<li>west to east longitude <a target=_blank title='Javascript Array sort method information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_array_sort.asp'>sort<\/a><\/li>\n<li>east to west longitude <a target=_blank title='Javascript Array sort method information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_array_sort.asp'>sort<\/a><\/li>\n<\/ul>\n<p>&#8230; as per &#8230;<br \/>\n<code><br \/>\n    myarrayplace.sort(function(a, b){return ((a.split(',')[2] == b.split(',')[2]) ? 0 : ((a.split(',')[2] &gt; b.split(',')[2]) ? 1 : -1))});<br \/>\n    myarrayplacer.sort(function(a, b){return ((b.split(',')[2] == a.split(',')[2]) ? 0 : ((b.split(',')[2] &gt; a.split(',')[2]) ? 1 : -1))});<br \/>\n    myarraylat.sort(function(a, b){return eval(b.split(',')[0]) - eval(a.split(',')[0])});<br \/>\n    myarraylatr.sort(function(a, b){return eval(a.split(',')[0]) - eval(b.split(',')[0])});<br \/>\n    myarraylong.sort(function(a, b){return eval(a.split(',')[1]) - eval(b.split(',')[1])});<br \/>\n    myarraylongr.sort(function(a, b){return eval(b.split(',')[1]) - eval(a.split(',')[1])});<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p>It&#8217;s common, this &#8220;ugly&#8221; data collection, &#8220;cute&#8221; data presentation &#8220;view&#8221; UX (<a target=_blank title='User experience information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/User_experience'>user experience<\/a>) issue, and in our &#8220;onions of the 4th dimension&#8221; take on things, we often find the talents of Javascript&#8217;s <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp' title='Javascript eval'>eval<\/a> to abstract the &#8220;view&#8221; out of the underlying &#8220;data&#8221; pretty cute, and we manage the Javascript Array &#8220;switching&#8221; above just by storing the global var<font size=1>iable<\/font> name of the relevant &#8220;view&#8221; Array of relevance in the global var<font size=1>iable<\/font> &#8230;<\/p>\n<p><code><br \/>\nvar basis=\"myarray\";<br \/>\n<\/code><\/p>\n<p> &#8230; and this global variable is changed in the &#8220;onclick&#8221; logic of six new HTML <a target=_blank title='HTML5 input type=range' href='https:\/\/www.w3schools.com\/html\/html_form_input_types.asp'>input<\/a> type=button elements as per the HTML &#8230;<\/p>\n<p><code><br \/>\n&lt;input id=myarrayplace type=button onclick=\" basis='myarrayplace'; loadarray(); \" value=\"Place Sort\"&gt;&lt;\/input&gt;&amp;nbsp;&lt;input id=myarrayplacer type=button onclick=\" basis='myarrayplacer'; loadarray(); \" value=\"Place Reverse Sort\"&gt;&lt;\/input&gt;&amp;nbsp;&lt;input id=myarraylat type=button onclick=\" basis='myarraylat'; loadarray(); \" value=\"North to South Sort\"&gt;&lt;\/input&gt;&amp;nbsp;&lt;input id=myarraylatr type=button onclick=\" basis='myarraylatr'; loadarray(); \" value=\"South to North Sort\"&gt;&lt;\/input&gt;&amp;nbsp;&lt;input id=myarraylong type=button onclick=\" basis='myarraylong'; loadarray(); \" value=\"West to East Sort\"&gt;&lt;\/input&gt;&amp;nbsp;&lt;input id=myarraylongr type=button onclick=\" basis='myarraylongr'; loadarray(); \" value=\"East to West Sort\"&gt;&lt;\/input&gt;&amp;nbsp;&lt;input id=myarray style='background-color:pink;' type=button onclick=\" basis='myarray'; loadarray(); \" value=\"Original Order\"&gt;&lt;\/input&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; which, as you can see, also recalls what used to be a once off called (document.body) &#8220;onload&#8221; <i>loadarray()<\/i> Javascript function now redesigned to use &#8220;eval&#8221; more, to &#8220;abstract&#8221; views from that one original &#8220;disordered&#8221; Array, to reshape the order &#8220;presented&#8221; in our user controlled HTML select (dropdown) element.<\/p>\n<p>You can now &#8220;zoom&#8221; around, in the proper flight paths, yourself, with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html\" title=\"Click picture\">live run<\/a> link that has underlying HTML and Javascript and CSS as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html-GETME\">interesting_earth_air_based_map_places.html<\/a> that is downloadable as per usual, and which changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html-GETME\">this way<\/a> to help with today&#8217;s order (<font size=1>&#8230; do I hear &#8230; is that &#8220;ham on rye&#8221;?!<\/font>).<\/p>\n<hr>\n<p id='ippt'>Previous relevant <a target=_blank title='Interesting Places Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/interesting-places-primer-tutorial\/'>Interesting Places Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Interesting Places Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.jpg\" title=\"Interesting Places Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Interesting Places Primer Tutorial<\/p><\/div>\n<p>We had the good fortune to come across the great (coffee table) book <i>The Earth from the Air<\/i> by Yann Arthus-Bertrand (ISBN: 9780500544846) recently, showing really interesting airborne views of the Earth, the world over.  Simply stunning photography!<\/p>\n<p>Also great with this book was its supply of geographical positions for these interesting Earth places.<\/p>\n<p>So we decided to base a new web application, today, harnessing &#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 Charts<\/a><\/li>\n<li><a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a><\/li>\n<\/ul>\n<p> &#8230; and in particular with the latter the use of its &#8230;<\/p>\n<p><code><br \/>\nvar options = {<br \/>\n        zoomLevel: 19<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; zooming capabilities, that &#8220;19&#8221; being the maximal zoom required for really accurate <a target=_blank title='Google Maps' href='http:\/\/maps.google.com'>Google Maps<\/a> place scenarios, as distinct from our use of a zoomLevel:11 for your more general zooming in requirements matching the geographical values supplied by <i>The Earth from the Air<\/i>.<\/p>\n<p>Why not &#8220;zoom&#8221; around yourself with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html\" title=\"Click picture\">live run<\/a> link with underlying HTML and Javascript and CSS as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/interesting_earth_air_based_map_places.html_GETME\">interesting_earth_air_based_map_places.html<\/a> that is downloadable as per usual.<\/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='#d35639' onclick='var dv=document.getElementById(\"d35639\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-charts\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35639' 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='#d35647' onclick='var dv=document.getElementById(\"d35647\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sort\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35647' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re all different regarding our levels of tolerance for &#8220;disorder&#8221;. One person&#8217;s view of &#8220;disorder&#8221; is not likely to match, exactly, anybody else within &#8220;cooooooeeeeee&#8221;. Personally, don&#8217;t mind mess, but can disappoint on those occasions where it takes that little &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/interesting-places-sorting-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":[2448,103,174,230,283,290,299,2276,367,2447,481,513,519,527,554,576,604,609,652,672,745,2126,861,1968,870,2076,931,997,1075,1866,1173,2449,1319,2450,1498],"class_list":["post-35647","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-air","tag-array","tag-button","tag-column","tag-csv","tag-data","tag-database-2","tag-delimitation","tag-dropdown","tag-earth","tag-geographicals","tag-google","tag-google-charts","tag-google-maps","tag-hardcopy","tag-html","tag-index","tag-input","tag-javascript","tag-key","tag-map","tag-map-chart","tag-onclick","tag-onions","tag-onload","tag-order","tag-photography","tag-programming","tag-row","tag-select","tag-sort","tag-sorting","tag-tutorial","tag-view","tag-zoom"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35647"}],"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=35647"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35647\/revisions"}],"predecessor-version":[{"id":35684,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35647\/revisions\/35684"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=35647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=35647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=35647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}