Interesting Places Sorting Tutorial
We’re all different regarding our levels of tolerance for “disorder”. One person’s view of “disorder” is not likely to match, exactly, anybody else within “cooooooeeeeee”. Personally, don’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’s Interesting Places Primer Tutorial‘s version of our new “Interesting Place” (HTML/Javascript/CSS) web application we’ve been working on lately. The reason for the “disorder” inherent in that web application’s HTML select (dropdown) element’s workings is because the source of the data (thanks to The Earth from the Air by Yann Arthus-Bertrand (ISBN: 9780500544846)) took a hard copy form. Barring “scanning” processes into character data (yoo hoo Textarea Pointing Local Font Canvas Overlay Deletes Tutorial “top” of blog posting thread … with relevant “bottom” “primer” initial premise) it’s most likely going to be a two step process of …
- 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 … and transfer this information into (the inherent order of) the HTML select (dropdown) element’s option tags … and then, as a separate exercise, because this is not a very orderly way to organize the data …
- allow the software to sort this data into various “views” of that same basic (still “disordered”) data
You’ll see this “view” way of looking at things permeates the database world too. The underlying data in a database can be collected in quite a “disorderly” way, but define a database “view” of it sorted (or indexed) via the use of database key columns, and that same “disorderly” pig’s ear (no sows were harmed making this blog posting) can look like a “silk purse” (no silks were harmed making this blog posting).
Our web application is not using anything serverside, so we choose to do this job using, respectively …
- one Javascript Array containing (comma separated) latitude,longitude,placename … and here, today, to introduce some order …
- six new Javascript Arrays still containing (comma separated) latitude,longitude,placename in orders reflecting the “view” requirements for …
- a to z placename sort
- z to a placename sort
- north to south latitude sort
- south to north latitude sort
- west to east longitude sort
- east to west longitude sort
… as per …
myarrayplace.sort(function(a, b){return ((a.split(',')[2] == b.split(',')[2]) ? 0 : ((a.split(',')[2] > b.split(',')[2]) ? 1 : -1))});
myarrayplacer.sort(function(a, b){return ((b.split(',')[2] == a.split(',')[2]) ? 0 : ((b.split(',')[2] > a.split(',')[2]) ? 1 : -1))});
myarraylat.sort(function(a, b){return eval(b.split(',')[0]) - eval(a.split(',')[0])});
myarraylatr.sort(function(a, b){return eval(a.split(',')[0]) - eval(b.split(',')[0])});
myarraylong.sort(function(a, b){return eval(a.split(',')[1]) - eval(b.split(',')[1])});
myarraylongr.sort(function(a, b){return eval(b.split(',')[1]) - eval(a.split(',')[1])});
It’s common, this “ugly” data collection, “cute” data presentation “view” UX (user experience) issue, and in our “onions of the 4th dimension” take on things, we often find the talents of Javascript’s eval to abstract the “view” out of the underlying “data” pretty cute, and we manage the Javascript Array “switching” above just by storing the global variable name of the relevant “view” Array of relevance in the global variable …
var basis="myarray";
… and this global variable is changed in the “onclick” logic of six new HTML input type=button elements as per the HTML …
<input id=myarrayplace type=button onclick=" basis='myarrayplace'; loadarray(); " value="Place Sort"></input> <input id=myarrayplacer type=button onclick=" basis='myarrayplacer'; loadarray(); " value="Place Reverse Sort"></input> <input id=myarraylat type=button onclick=" basis='myarraylat'; loadarray(); " value="North to South Sort"></input> <input id=myarraylatr type=button onclick=" basis='myarraylatr'; loadarray(); " value="South to North Sort"></input> <input id=myarraylong type=button onclick=" basis='myarraylong'; loadarray(); " value="West to East Sort"></input> <input id=myarraylongr type=button onclick=" basis='myarraylongr'; loadarray(); " value="East to West Sort"></input> <input id=myarray style='background-color:pink;' type=button onclick=" basis='myarray'; loadarray(); " value="Original Order"></input>
… which, as you can see, also recalls what used to be a once off called (document.body) “onload” loadarray() Javascript function now redesigned to use “eval” more, to “abstract” views from that one original “disordered” Array, to reshape the order “presented” in our user controlled HTML select (dropdown) element.
You can now “zoom” around, in the proper flight paths, yourself, with this live run link that has underlying HTML and Javascript and CSS as per interesting_earth_air_based_map_places.html that is downloadable as per usual, and which changed this way to help with today’s order (… do I hear … is that “ham on rye”?!).
Previous relevant Interesting Places Primer Tutorial is shown below.
Interesting Places Primer Tutorial
We had the good fortune to come across the great (coffee table) book The Earth from the Air by Yann Arthus-Bertrand (ISBN: 9780500544846) recently, showing really interesting airborne views of the Earth, the world over. Simply stunning photography!
Also great with this book was its supply of geographical positions for these interesting Earth places.
So we decided to base a new web application, today, harnessing ….
… and in particular with the latter the use of its …
var options = {
zoomLevel: 19
}
… zooming capabilities, that “19” being the maximal zoom required for really accurate Google Maps place scenarios, as distinct from our use of a zoomLevel:11 for your more general zooming in requirements matching the geographical values supplied by The Earth from the Air.
Why not “zoom” around yourself with this live run link with underlying HTML and Javascript and CSS as per interesting_earth_air_based_map_places.html that is downloadable as per usual.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
