Get in a conversation with a Land Surveyor, and drop in your sentence, close to each other, the words โbearingโ and โdistanceโ and in all likelihood youโll get a smile. Is it a curved smile? Maybe, they are interested in the geodesic aspects to these two terms. You see, the rules of Euclidean geometry are all fine and good and used by Land Surveyors for small distances involving local mapping or small area mapping, where the curvature of the Earth is not really a factor. In fact, in the early days of Land Surveying, the plotting of an area might have been done using a table resting on a tripod, which hopefully made that table level (all good terrestrial surveying wants you to be perpendicular to the imaginary plumb bob hanging from your instrument, and hanging down in accordance with gravityโs laws). Geodesic interest for Land Surveyors tries to take into account the curvature of the Earth, which weโll assume for today, is a sphere, though in reality it takes on a spheroidal shape that is not quite a sphere.
Polar co-ordinate designations are an alternative โviewโ to placing yourself, as distinct from grid co-ordinates, or geographical latitude and longitude.
We talked about some of what we have written a proof of concept web application for today with the PHP Google Map Chart Bearing Distance Tutorial some time back, and revisited its excellent โฆ
very useful link that talks about the Haversine distance formula, as well
โฆ and rereading this excellent webpage, realized that two sets of formulae there (plus the great circle distance calculations before) could help us piece together a useful navigational web application that, out of โฆ
From Latitude, Longitude | Bearing, Distance | To Latitude, Longitude |
---|
โฆ we could get the user to fill out 2 of 3 columns of information above, and calculate the missing one for them.
How is this useful? Well, sometimes you want to know โฆ
- We are at X. We are crow flying to Y. In which direction do we set out? How far is it?
- We are at X. That looks like a nice direction to head, so what compass reading is that? If I go however far, where do I end up?
Second one for those dreamers and adventurers (or perhaps, orienteerers) methinks. Anyway, feel free to try the HTML and Javascript missing_twohtmlโs liverun link, or down below โฆ
Previous relevant PHP Google Map Chart Bearing Distance Tutorial is shown below.
There have been three recent things going on, for us, involving software integration of our interface to the great Google Chart Map Chart โฆ
- the work of PHP Wikipedia Australian List Integration Tutorial adding select (ie. Google Charts โonclickโ) event Nearest TimeZone=Z and YouTube=Y functionalities โฆ and also โฆ
- ongoing changes readying web applications that can work in an iOS WKWebView we started talking about at Conditional Alternative to Javascript Popup Windows in iOS Tutorial and which we shall return to โฆ and then todayโs new functionality to โฆ
- add new select (ie. Google Charts โonclickโ) event functionality to show a Bearing (degrees) and Distance (kilometres) and To table of information relative to a clicked From place
As a worker with a background in Land Surveying, of course, the words โbearingโ and โdistanceโ were part of the โbread and butterโ of this job. The modern day equipment can, at the observerโs tripod, and given the chainpersonโs placement of equipment, deal with both of these โmeasuresโ at once, but you can still use the old theodolites and distance measuring chains if you like. You take your measurements and use calculations like those underlying the workings of the web application of HTML and Javascript and CSS Survey Traverse Tutorial which are all fine and dandy if the distances are relatively small, because we can think โplanar geometryโ as we mostly learn at school. But if the measurements involve long enough distances, you need to take into account that Earth is, basically, round โฆ meanwhile, on the phone โฆ.
You donโt say. You donโt say. You donโt say.
โฆ
โWhatโd they say?โ โฆ
They didnโt say.
When distances are this large we need to turn towards โgeodesic calculationsโ and today โฆ
- with our calculation of โbearingsโ between two sets of latitude and longitude we turned to this very useful link that talks about the Haversine distance formula, as well, thanks โฆ and to help make the table of information more approachable we called on โฆ
- half hour time of day clock emojis we used for TimeZone Country Places Emoji Tutorial โฆ and โฆ
- used the cursor techniques we talked about at HTML/Javascript Guided Snake Game Primer Tutorial
Here are some โlive runsโ โฆ
- make your own Google Chart Map Chart
- left hand side of tutorial picture here
-
By The Time I Get To โฆ can be seen below โฆ
โฆ and hereโs the changed PHP mapphp changed in thisway.
Previous relevant PHP Wikipedia Australian List Integration Tutorial is shown below.
Yesterdayโs PHP Wikipedia Australian List Makeover Tutorial got us thinking more about โwhere of lifeโ functionality integration possibilities.
For us, with many โwhere of lifeโ web applications, the Google Charts Map Chart is a core part of the functionality, as the receptacle, and more and more often as time goes on, also a launching pad out to other concepts, such as โฆ
- TimeZone โฆ and โฆ
- Weather
โฆ two of the concepts hovering about our โOther Side of the Worldโ web application we last talked about with Other Side of the World Google Chart Tutorial, whose supervisory HTML other_side_of_the_worldhtmโs liverun, changed in thisway to tweak the the linking of โฆ
- latitude and longitude and (anywhere) placename โฆ to โฆ
- TimeZone place(s) โฆ and then (with great help from Weather Underground (thanks)) onto โฆ
- direct or nearby weather predictions
โฆ coming off a new Map Chart Google Chart and its select event menu option โฆ
- Nearest TimeZone=Z (and onto Other Side of the World and Weather)
- YouTube=Y (looking for placename)
โฆ the latter integrating us with YouTube API for Iframe embedded videos interface HTML/Javascript โparentโ web application called karaoke_youtube_api.htm HTML iframe elements in another direction additional to yesterdayโs usage. Along the way, we tweak the Google Map=G menu option, adding more map type options and zooming in a little less by default, and with the Nearby Airports=A option making the default be a search for 3 (rather than 4) nearby airports. A lot of this all happens because of the changes to โฆ
- mapphpโs Google Charts Map Chart interfaceโs liverun (changed thisway)
- AustralianLighthouses australian_lighthousesphp (changed thisway)
- AustralianWaterfalls australian_waterfallsphp (changed thisway)
- AustralianDams australian_damsphp (changed thisway)
- AustralianPorts australian_portsphp (changed thisway)
- AustralianNational Parks australian_parksphp (changed thisway)
โฆ which all got changed to allow for an โAnimateโ feature, allowing for an automated right to left โanimationโ (via hashtagging) of the Wikipedia based slides near the top of this suite of web applicationโs webpages. We hope you get to try all this out for yourself.
Previous relevant PHP Wikipedia Australian List Makeover Tutorial is shown below.
Some time back we linked a Wikipedia โlistโ webpage to the Google Charts Map Chart functionality with PHP Modularization for Lighthouses in Australia Tutorial.
Weโre revisiting, and finding some โpeerโ web applications, linked by a dropdown, that all โฆ
- access a relevant Wikipedia โlistโ webpage for Australian โthingsโ and mentioning latitude and longitude โฆ which link to โฆ
- Google Charts Map Chart
โฆ for all of โฆ
We were inspired to take on this โmakeoverโ of โwhere of lifeโ functionalities because earlier on today we discovered a stupendous online resource for Australian geography enthusiasts, the Bonzle Digital Atlas of Australia, with incredibly detailed and flexible search mechanisms, thanks heaps!
Weโve decided to include extra buttons (to those already linking to Google Maps links and to the relevant Wikipedia webpage) for that suite of web applications above for โฆ
- Bonzle Digital Atlas of Australia
- Australian government website (sometimes)
- YouTube API for Iframe embedded videos interface HTML/Javascript โparentโ web application called karaoke_youtube_api.htm HTML iframe elements
Great for research and โsurfing the Australian worldโ! Lose yourself!
What happened Javascript (australian_lighthousesjs changed thisway) and PHP wise?
- australian_lighthousesphp (changed thisway)
- australian-waterfallsphp
- australian_damsphp
- australian_portsphp
- australian_parksphp
Previous relevant PHP Modularization for Lighthouses in Australia Tutorial is shown below.
Today we want to try two more things โฆ
- continuing on with our PHP code (you could call australian_lighthousesphp) for our Australian Lighthouses project
- talk about PHP glob and its modularization sensibilities
โฆ so letโs talk about the second one first โฆ itโs south of north โฆ chortle, chortle.
What does PHPโs glob do? It is doing functionality like the โunderworkingsโ of any browse button you would see would do when you have a hard disk (in your life) โฆ unfortunately, this is no longer a given (with mobile technology and the โcloudโ challenging this thinking, sometimes). Give glob a file specification and a directory to start with, and it will happily (if you were both โglobularโ and โmodularโ you would be, too) provide you with a list of filenames, so that we use it to construct this PHP function for use with our lighthouses web application โฆ
function selcreate($def) {
$ret=$def;
$selstr='<select onchange=" window.location=this.value; "><option value="' . str_replace(" ", "_", strtolower($def)) . '_lighthouses.php">' . $def . '</option>';
$cnt=0;
foreach (glob("*_lighthouses.php") as $filename) {
if (strpos(($filename . "*"), (str_replace(" ", "_", strtolower($def)) . '_lighthouses.php*')) === false) {
$cnt++;
$newidea=str_replace("_", " ", str_replace("_lighthouses.php", "", strtolower($filename)));
$newideas=explode(" ", $newidea);
$ideas=strtoupper(substr($newideas[0],0,1)) . strtolower(substr($newideas[0],1));
for ($ii=1; $ii<sizeof($newideas); $ii++) {
$ideas.=(" " . strtoupper(substr($newideas[$ii],0,1)) . strtolower(substr($newideas[$ii],1)));
}
$selstr.='<option value="' . $filename . '">' . $ideas . '</option>';
}
}
if ($cnt > 0) return $selstr . "</select>";
return $ret;
}
โฆ and hope you can see that glob could be used for PHP code to self-detect sibling variation programs, so that, for instance, if we โplonkedโ (ie. eg. (s)ftp it) an egypt_lighthouses.php (probably with an egypt_lighthouses.js accompanying Javascript file) into the same directory as our โฆ
- australian_lighthousesphp (changed from yesterday as per thislink) (uses australian_lighthousesjs) to arrive at a liverun
- new_zealand_lighthousesphp (uses new_zealand_lighthousesjs) to arrive at a liverun
- ireland_lighthousesphp (uses ireland_lighthousesjs) to arrive at a liverun
โฆ it would automatically be added into the functionality of its siblings without you having to change any code of those siblings โฆ and that egypt_lighthouses.php is free to be a web application with a totally different method of functionality โฆ cute, huh?!
As a matter of fact ireland_lighthouses.php is quite different, and if you examine the code, you will see that the Javascript putElement(s)By via PHP Relative URLs Tutorial is more apt to a discussion of its workings.
You see, there are so many many different ways to โskin a catโ in Information Technology, quite often โฆ not always โฆ but โquite oftenโ โฆ and why be cornered into thinking there is only one way to do things?
The other thing youโll find is that even though ireland_lighthouses.php differs a lot to its nearest matching sibling (in terms of methodology), new_zealand_lighthouses.php the Javascript corresponding codesets called ireland_lighthouses.js and new_zealand_lighthouses.js are only superficially different โฆ in other words our PHP coalesces concepts into a similar โclientโ look โฆ a โmodularizationโ of sorts โฆ not everybodyโs sort, but a sort none the less โฆ and this begs a question?
Why is โmodularizationโ a good thing? Well, to me, you donโt have to have any โmodularizationโ going on at all, and this is fine by me, but you must deal with issues that allow you to modify many many codesets efficiently and accurately in vastly different ways to be efficient, or be โmodularโ and be able to, perhaps, even, automate your changes, because of these โmodularโ patterns youโve created โฆ many people find โmodularizationโ blissful โฆ and often it suits the work patterns for teams of programmers. Perhaps you want to read about MVC (and its like) as a coding modularization idea for PHP (or many other programming languages, for that matter).
Previous releveant PHP/Javascript Asynchronous Lighthouses in Australia Tutorial is shown below.
Today we want to try two things โฆ
- continuing on with our PHP code (you could call australian_lighthousesphp) for our Australian Lighthouses project
- talk about Javascript asynchronous script tag option
โฆ so letโs talk about the second one first โฆ itโs south โฆ chortle, chortle.
Why should you be interested in the HTMLโs script tag attributes โฆ
- asynch=โasynchโ
- defer=โdeferโ
? Well, we want our web pages to load as fast as possible. Yaaaaaa?! So if there was the mechanism to do more than one bit of ((client) Javascript) thinking at a time would you avail yourself of the opportunity โฆ or would you pick whatโs behind door 3?
Do you want to hear more on this theory wise? It seems to me, there are web application mission critical parts, and there are embellishments, quite often โฆ โnice to havesโ but not โmission criticalโ โฆ well, if those โnice to havesโ could be arranged not to hog all the web application designated CPU that would be good, wouldnโt it?! Yaaaaaaaaaaa?!
So, that, in theory, is y why.
Now back to the project at hand โฆ Australian Lighthouses โฆ donโt you think some geographical sorting options and place name sorting options might be useful? Yaaaaaaaaaaaaaaaaa?! But for us it doesnโt feel mission critical โฆ so we โฆ
- place the logic in some external Javascript called australian_lighthousesjs
- we load it from the PHP via
<script type=โtext/javascriptโ src=โaustralian_lighthouses.jsโ async=โasyncโ></script>
โฆ and this amounts to the only change to todayโs PHP code from yesterday as per thislink
โฆ and this becomes a way to modularize your thinking regarding a project โฆ please donโt think there are not a myriad of other ways โฆ this is just one idea here.
With regard to how we approached our external Javascript we did not demand anything (much) of our parent PHP and this may not be the fastest way to approach this. What we mean by that is that, perhaps, as a general rule, external Javascript can perform faster with the parent PHP or HTML leaving it with a lot more HTML element id=โ[elementId]โ to hang its hats on, so to speak โฆ instead, here, we acted innocently with our Javascript and used lots of calls to the Javascript DOM method getElementsByTagName() (which results in an array return value). Perhaps calls to getElementById() via (parent) arranged id=โ[elementId]โ would be faster?! Today, as with the previous Static HTML Javascript Primer Tutorial we concentrated on the โmodularโ feel to additional external Javascript code ideas.
So try a liverun to see what we mean.
Previous relevant PHP Lighthouses in Australia Primer Tutorial is shown below.
Today we examine some of the methodology behind a project idea.
Projects need โฆ
- an idea โฆ ours came from listening to the radio and hearing about Lighthouses, and how the technologies had changed what they look like and how they function these days โฆ to quote Wikipedia with respect to Australian Lighthouses (thanks) โฆ
The first lighthouse was Macquarie Lighthouse, which was lit in 1793 as a tripod mounted wood and coal fired beacon. The last manned lighthouse was Maatsuyker Island Lighthouse, off the south coast of Tasmania, which was automated in 1996.
- a means to access information โฆ much easier these days with the search engines โฆ we went with a Google Search as per list of lighthouse positions โฆ which led to โฆ
- the information source(s) โฆ we settled, and were not surprised about the source, for Wikipediaโs List of lighthouses and lightvessels in Australia โ Wikipedia โฆ then, once happy about the quality of the source information, analyzed โฆ
- the source data format โฆ initially, at least, via View->Page Source, relative to the webpage โฆ to get ideas for how to parse the data โฆ so that we can determine a โฆ
- programming language of choice โฆ which is PHP โฆ no surprise here โฆ will need a server-side language โฆ and a method like PHPโs file_get_contents() โฆ from there โฆ
- PHP coding to parse the data and put it into another format that value adds โฆ otherwise why do it, as the Wikipedia information is fine as is โฆ that is where we determine that we should โฆ
- include an iframe that uses the Google Chart Map Chart to add that extra overall positional view of Lighthouses โฆ a definite asset to the readerโs understanding of the subject โฆ definitely a โwhereโ web application โฆ and in doing this we notice that โฆ
- Google Chart Map Chart mapphp web application needed to be able to handle much larger input data streams than it could in its previous incarnation of only allowing PHP $_GET[] parameters โฆ so we change it to allow $_POST[] parameters โฆ maybe you noticed this with yesterdayโs PHP/Javascript/HTML Google Chart Map Onclick Tutorial as shown below โฆ as this meant that โฆ
- we need an HTML form that POSTs to the iframe with the Google Chart Map Chart map.php web application allowable because we are on the same domain with this thinking โฆ and using an HTML textarea element to store the huge string of Lighthouse data that will be passed across via urldecode($_POST[โdataโ]) at map.php โฆ using PHPโs urldecode() and urlencode() methods and Javascriptโs decodeURIComponent() method โฆ as well as utilizing โฆ
- Google Chart Map Chart map.php web application onclick and tooltip functionality weโve been working on lately โฆ hence the talk about this below โฆ working out what (component) tools could do with a โmakeoverโ is an extremely important part of any project and can be a useful compartmentalizing of the project
โฆ and so we end up with our liverun behind which is the PHP programming source code you could call australian_lighthousesphp for your perusal.
Previous relevant PHP/Javascript/HTML Google Chart Map Onclick Tutorial is shown below.
They say โthe knee boneโs connected to the thigh boneโ then they say โthe thigh boneโs connected to the โฆ hip boneโ then they say โletโs call the whole thing offโ โฆ sometimes.
Today we say โthe onmouseover event is connected to the onclick eventโ then we say โthe onclick event is connected to the online woooooorldโ โฆ โdo โฆ the hokey pokeyโ x3 โฆ โthatโs what the onclick event preceeded by the onmouseover event within the environs you are encountering โฆ is all aboutโ.
That news is pretty good actually, because it means mobile users are not missing out on much not having easy access to any onmouseover (ie. hover) functionality โฆ theyโll still reach any onclick logic you present them, in the default case of events where onclick is a valid โtouchโ event as well.
So the data structure of arrangements to allow for this onclick functionality is intrinsically the same as allowed for yesterday with the PHP/Javascript/HTML Google Chart Map Tooltips Tutorial as shown below, but we just check for some more delimitation issue matters, and our updated prompting window logic gets quite โblurbyโ as per the Javascript (via PHP) โฆ
echo " datalinesuffix = prompt('Enter decimal Latitude,Longitude ' + thisline + extra + ' (for no more hit Cancel button and append with ' + '\\n\\n' + ',\"A tooltip and clicking link for Google Map of <a target=_blank href=https://www.google.com.au/maps/place/' + encodeURIComponent(dlp2) + '>' + dlp2 + '</a>\" ' + '\\n\\n' + ' or maybe perhaps ' + '\\n\\n' + ',\"A tooltip and clicking link for Google Map based on latitude and longitude of <a target=_blank href=https://maps.google.com.au/maps?' + encodeURIComponent('z=15&t=m&q=loc:') + '{latitude}{longitude}>' + dlp2 + '</a>\"' + '\\n\\n' + ' optionally (as (just) two examples of what is possible with HTML included (activates with onclick bit not onmouseover))', thisdef); " . "\n";
echo ' if (datalinesuffix != null) { if (datalinesuffix.indexOf("{latitude}") != -1) { dlsa=datalinesuffix.split(","); if (dlsa[0].indexOf("-") == -1) { datalinesuffix=datalinesuffix.replace("{latitude}",encodeURIComponent("+" + dlsa[0])); } else { datalinesuffix=datalinesuffix.replace("{latitude}",encodeURIComponent(dlsa[0])); } } if (datalinesuffix.indexOf("{longitude}") != -1) { dlsa=datalinesuffix.split(","); if (dlsa.length > 1) { if (dlsa[1].indexOf("-") == -1) { datalinesuffix=datalinesuffix.replace("{longitude}",encodeURIComponent("+" + dlsa[1])); } else { datalinesuffix=datalinesuffix.replace("{longitude}",encodeURIComponent(dlsa[1])); } } } } ' . "\n";
โฆ as again we are making use of $_GET[] parameters coming into the PHP at the server side.
The bigger picture plan for how this helps something else we are trying will become apparent over time โฆ in the fullness of time โฆ at the appropriate juncture of juxtapositions.
Letโs see some PHP code in liveaction for this tutorial where you define your map characteristics and data.
Link to Google Chart Tools โspiritual homeโ โฆ via Google.
Link to Google Chart Tools Map information โฆ via Google.
Link to Google Chart tooltips information โฆ via Google.
Link to some downloadable PHP programming code โฆ rename to mapphp which changed from yesterday as per thislink.
Previous relevant PHP/Javascript/HTML Google Chart Map Tooltips Tutorial is shown below.
Here is a tutorial that is revisiting Google Graphs API, or Google Chart Tools, and its Map functionality, which we first talked about with PHP/Javascript/HTML Google Chart Map Tutorial as shown below. Please read โฆ
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.
Why are we revisiting? Well, we are interested in the interactive side to this wonderful product. We are going to start with a look into โtooltipsโ. Tooltips are those optional informational features of some webpages that happen when hovering over an HTML element, principally through the filling out of an HTML elementโs title global attribute.. Google Charts functionality amounts to the use of Javascript, and, these days, SVG HTML elements, so โtooltipsโ are very relevant to the โuser experienceโ when using Google Charts. With the Map Chart, the latitude, laongitude set is combined with a title, which can be the default โtooltipโ shown, as this is all fine for many usages, but we want to extend it so that that title doesnโt have to be the tooltip.
The integration of this added functionality into the Google Chart Map Chart involves adding an extra โstringโ column to the data table as per the bold bits of the new Javascript (via PHP) snippet โฆ
if (isset($_GET['value']) && (isset($_GET['tooltip']) || strpos($GETdata, "'") !== false)) {
echo " var data = new google.visualization.DataTable(); /" . "/" . $GETlabel . $GETvalue . " \n";
echo " data.addColumn('number', '" . str_replace("'","",str_replace(",","",str_replace("['","",$GETlabel))) . "'); \n";
echo " data.addColumn('number', " . str_replace(",", "); data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); data.addColumn('string', ", str_replace("]","",$GETvalue)) . "); \n";
echo " data.addRows([ \n";
echo str_replace("''" . "''", "''", str_replace("~", "'", substr($GETdata,1)));
echo " ]); \n";
} else {
echo ' var data = google.visualization.arrayToDataTable([ ' . "\n";
echo " " . $GETlabel . $GETvalue . " \n";
echo str_replace("''" . "''", "''", str_replace("~", "'", $GETdata));
echo " ]);\n";
}
โฆ making use of $_GET[] parameters coming into the PHP at the server side โฆ youโll find that Javascript loves to work with PHP as one of those Fred and Ginger relationships of the programming world โฆ youโll be happier writing Javascript from your PHP too โฆ try it and youโll see the advantages time and again and again and again โฆ did we leave out one? โฆ and again.
The bigger picture plan for how this helps something else we are trying will hopefully become apparent over time.
Letโs see some PHP code in liveaction for this tutorial where you define your map characteristics and data.
Link to Google Chart Tools โspiritual homeโ โฆ via Google.
Link to Google Chart Tools Map information โฆ via Google.
Link to Google Chart tooltips information โฆ via Google.
Link to some downloadable PHP programming code โฆ rename to mapphp which changed from the days of Google Charts Emailing Primer Tutorial as per thislink.
Previous relevant PHP/Javascript/HTML Google Chart Map Tutorial is shown below.
Here is a tutorial that introduces you to Google Graphs API, or Google Chart Tools, and its Map functionality.
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.
Letโs see some PHP code in live action for this tutorial where you define your map characteristics and data.
Link to Google Chart Tools โspiritual homeโ โฆ via Google.
Link to Google Chart Tools Map information โฆ via Google.
Link to some downloadable PHP programming code โฆ rename to mapphp.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.