TimeZone Offset Places Google Geo Chart Wikipedia Double Click Tutorial

TimeZone Offset Places Google Geo Chart Wikipedia Double Click Tutorial

TimeZone Offset Places Google Geo Chart Wikipedia Double Click Tutorial

Onto yesterday’s TimeZone Offset Places Google Geo Chart Wikipedia Tutorial work, which, behind the scenes concerns SVG elements, we wanted to explore …

  • a “double click” augmenting set of functionalities … onto the default …
  • “click” functionalities opening Wikipedia webpages

… that “double click” logic not channelling any “ondblclick” event but, rather, two “click”s quickly in a row, in which case, as a first draft idea, a simple Javascript alert window with text such as …

Magadan, Russian Federation (timezone Asia/Magadan has current datetime of 08/07/2021, 21:53:19) and has Latitude of 59.56666 and Longitude of 150.8

… precedes the Wikipedia webpage display.

The PHP’s Javascript’s “wodelay” can receive a non-zero value to time the functionalities as above …

<?php echo ”

function window_open() {
wop=window.open(xwourl, xwotarget, xwoother);
return wop;
}


function windowopen(wourl, wotarget, woother) {
if (isquiz != '' && (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i))) {
// //document.getElementById('dwoalt').innerHTML='<form target=wcontin style=display:none; id=woform name=woform method=POST action=../fgc/index.php><input type=hidden name=inurl value=' + wourl + '></input></form><br><iframe style=width:100%;height:600px; name=wcontin src=../fgc/index.php></iframe>';
//top.document.getElementById('dwoalt').innerHTML='<iframe style=width:100%;height:6px; name=wcontin src=../fgc/?tdinto=dwoalttwo&inurl=' + encodeURIComponent(wourl) + '></iframe><br><a id=btta href=#myh title=Top>Back to top</a>';
//top.location.href='#btta';
// //top.document.getElementById('woform').submit();
ajit(wourl);
return null;
}
if (wodelay != 0) {
xwourl=wourl;
xwotarget=wotarget;
xwoother=woother;
setTimeout(window_open, wodelay);
wodelay=0;
return null;
} else {
var newWin=window.open(wourl, wotarget, woother);
if ((isquiz != '' && document.URL.indexOf('" . $isMobileY . "') != -1) || !newWin || newWin.closed || typeof newWin.closed == 'undefined') { // thanks to https://stackoverflow.com/questions/2914/how-can-i-detect-if-a-browser-is-blocking-a-popup
tlforce=true;
ajit(wourl);
newWin=null;
}
return newWin;
}
}

“; ?>

You could (re-)try our changed standalone tz_places.php‘s “TimeZone Places” web application is helped out by a changed geo_chart.php Google Geo Chart interfacing helper.


Previous relevant TimeZone Offset Places Google Geo Chart Tutorial is shown below.

TimeZone Offset Places Google Geo Chart Tutorial

TimeZone Offset Places Google Geo Chart Tutorial

In its latitude and longitude pairing mode of use (as distinct from the Country shading mode of use), the Google Chart Geo Chart can match it, and more, with the Google Chart Map Chart to help embellish yesterday’s TimeZone Offset Places Tutorial.

So, though we offer the transference of the default Map Chart display of a TimeZone Offset (from GMT) Offset in Hours map to a Geo Chart, in that functionality we are not making use of two talents the Geo Chart has that the Map Chart does not, those being …

  • width and height (of Geo Chart) user control
  • percentage of width and height, representing margin-left and margin-top respectively initial scrolling control

… and today we introduce into that more complex “Time” hardcoding, new links for …

  • “T” … default Map Chart
  • “i” … default transference of the default Map Chart display of a TimeZone Offset (from GMT) Offset in Hours map to a Geo Chart has width=556 and height=347
  • “m” … transference of the default Map Chart display of a TimeZone Offset (from GMT) Offset in Hours map to a Geo Chart has width=1668 and height=1141 and allowing for initial scolling
  • “e” … transference of the default Map Chart display of a TimeZone Offset (from GMT) Offset in Hours map to a Geo Chart has width=5560 and height=3470 and allowing for initial scolling

… the last, in particular, good to flesh out TimeZone places too close together to normally separate out clearly with respect to country boundaries.

This “initial scrolling control” is possible in this scenario because …

  • as far as longitude goes, we know the range of longitude of places … that is the definition of a 15 degrees of longitude TimeZone (for a suitable [width].[initialLongitudeScrollingPositionIn3AsPercentageOfWidthToMakeMarginLeft]) … and …
  • as far as latitude goes, we can scour the TimeZone places list to choose a suitable [height].[initialLatitudeScrollingPositionIn3AsPercentageOfHeightToMakeMarginTop]

… as another example we make of adding functionality via the mantissa part of a real number (in the data structure arrangements we organize).

Below is amended Javascript code (via PHP) arranging some of this logic …

<?php echo ”


function hdef(defhis, looklong) {
var ourhdef=defhis;
var defhs=looklong.split('[');
var maxlatis=-90.0;
for (var idh=1; idh<defhs.length; idh++) {
if (eval(defhs[idh].split(',')[0]) > maxlatis) {
maxlatis=eval(defhs[idh].split(',')[0]);
ourhdef='.' + ('000' + ('' + eval(10.0 + Math.abs(eval(100.0 - eval(eval(eval('' + maxlatis) - eval('-90')) / 180.0) * 100.0))))).split('.')[0].slice(-3);
}
}
return ourhdef;
}


function falsedom() {
var woff='', hoff='';
var fois='xffmfmap', thingoprefix=',', thingosuffix=']', usuffix='';

document.getElementById('xwidth').value='' + Math.abs(eval('' + defw));
document.getElementById('xheight').value='' + Math.abs(eval('' + defh));
if (eval('' + defw) < 0) {
document.getElementById(fois).action='//www.rjmprogramming.com.au/PHP/Map/map.php';
} else {
if (defw == 5560) {
woff='.' + ('000' + ('' + eval(100 * Math.abs(eval('-12') - eval('" . str_replace("+","",str_replace("GMT","0",$ugb)) . "'))) / 29.0).split('.')[0]).slice(-3);
hoff=hdef('.015',document.getElementById('xtopdata').value);
} else if (defw != 556) {
woff='.' + ('000' + ('' + eval(100 * Math.abs(eval('-12') - eval('" . str_replace("+","",str_replace("GMT","0",$ugb)) . "'))) / 29.0).split('.')[0]).slice(-3);
hoff=hdef('.015',document.getElementById('xtopdata').value);
}
document.getElementById(fois).action='//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php';
document.getElementById('xtopdata').value=document.getElementById('xtopdata').value.substring(1).replace(/\]/g,',2]');
thingoprefix='';
thingosuffix=',2]';
usuffix='&country=Country&popularity=Popularity&aregeographicals=y&areplaces=y&width=' + document.getElementById('xwidth').value + woff + '&height=' + document.getElementById('xheight').value + hoff;
}


var wourl=document.getElementById('xffmfmap').action + '?onclick=y' + usuffix;
wourl+='&title=' + encodeURIComponent('TimeZone Offset " . $ugb . " Hours');
wourl+='&label=' + encodeURIComponent(\"['Lat',\");
wourl+='&value=' + encodeURIComponent(\"'Lon','Name']\");
if (document.getElementById('xtopdata').value.trim() == '') {
wourl+='&data=' + encodeURIComponent((thingoprefix + '[-90.000,' + eval(('0" . str_replace('GMT','0',urldecode($_GET['bigtz'])) . " * 15.0').replace('(0 ','(').replace('0-','-').replace('(+','(')) + ',~Antarctica/South_Pole~' + thingosuffix).replace('(0 ','(').replace('0-','-').replace('(+','('));
} else {
wourl+='&data=' + encodeURIComponent(decodeURIComponent(document.getElementById('xtopdata').value));
}
window.open(wourl, '_blank', 'top=100,left=100,width=' + eval(Math.abs(eval('' + defw)) + 200) + ',height=' + eval(Math.abs(eval('' + defh)) + 200));
return false;
}

“; ?>

You should (re-)try our changed standalone tz_places.php‘s “TimeZone Places” web application to try out this improved Google Geo Chart integration.


Previous relevant TimeZone Offset Places Tutorial is shown below.

TimeZone Offset Places Tutorial

TimeZone Offset Places Tutorial

The recent Dropdown Meaning in TimeZone Places Tutorial let us get away with …

timezone (hour) offset (from GMT) … comma separated country iso 2 character code list (only the first of which will be used should the user click the “Display as Below” button)

… and nobody complained?! But it nagged away for us, and so, today, we want that to read …

timezone (hour) offset (from GMT) … comma separated country iso 2 character code list (only the first of which will be used should the user click the “Display as Below” button) (and we offer maps for all Countries in that ISO 2 character code list, as well as a map for all the TimeZone Places within the user selected TimeZone Offset (from GMT) Offset in Hours)

Believe it or not this was a bit of work, primarily because …

  • some of these comma separated ISO 2 character Country code lists were larger than 9 in length, and so required a new layer of parent/(window.open)child logic … as well as, as you might guess …
  • some of these TimeZone Offset (from GMT) Offset in Hours maps would involve data of such a length as not to be supported by (GET) ? and & argument URLs, and so the easier to manage HTML form method=GET had to get a form method=POST makeover … as well as …
  • the way this dropdown means of making all this happen could occur in child iframes, as well as in parent windows, and see we had a fair bit of top.document logic work going on making the hardcoded “Time” wording up the top left of the webpage sometimes be transformed into an “a” link capable of opening these new TimeZone Offset (from GMT) Offset in Hours maps for our curious users out there

HTML form “onsubmit” event logics became useful places to branch logic into different non-default directions, which is what we are talking about with all this new functionality. As such, the static HTML changed as per …

<?php

echo "<!--br><br-->
<form onsubmit='return csellong(this);' action=./tz_places.php" . str_replace("~","",str_replace("?~","",("?" . $_SERVER['QUERY_STRING'] . "~"))) . " style=width:100%; method=GET><input id=isubmit type=submit value='Display as Below...' style=background-color:orange;></input>" . $fromto . "<br><br>" . $sellong . ourtimezonelist($ideais) . "
<input type=hidden name=iam id=iam value=" . $iam . "></input></form><br>" . $formstuff . $finalmapform . $hsuffix . $otherform . "<div id=bigtzrepos style=display:none;></div><div id=bigoverlay style=display:none;></div></body>
</html>
";

?>

… and then called on a new Javascript function as per (featuring our favourite bit, that being in apt scenarios we attempt to change the web browser tab icon of multiple window.open windows to flag to the user the web browser tab backaways that has the “a” link available to click to display one of those TimeZone Offset (from GMT) Offset in Hours maps) …



function csellong(ofis) {
var worryyes=false;
if (document.getElementById('isellong')) {
if (document.getElementById('isellong').value.indexOf(',') != -1 || (ctzd && (document.getElementById('stzs').value + ' ').substring(0,1).replace('+','-').replace('0','-').replace('1','-').replace('2','-').replace('3','-').replace('4','-').replace('5','-').replace('6','-').replace('7','-').replace('8','-').replace('9','-') == '-')) {
//alert(document.getElementById('stzs').value + 'why ' + document.getElementById('isellong').value);
worryyes=true;
if (document.getElementById('isellong') && document.getElementById('isellong') && document.getElementById('stzs') && document.getElementById('iam')) {
var newhref=document.URL.split('?')[0].split('#')[0];
var nineoff=0;
var dlim='?bigtz=' + document.getElementById('stzs').value.replace('GMT','+0&isgmt=y') + '&';
var dsuff='';
var isotwos=document.getElementById('isellong').value.split(',');
for (var ibvc=0; ibvc<isotwos.length; ibvc++) {
newhref+=dlim;
dlim='&';
newhref+='iso' + dsuff + '=' + isotwos[ibvc].toUpperCase();
newhref+=dlim + 'tzname' + dsuff + '=' + document.getElementById('stzs').value.replace('GMT','+0');
newhref+=dlim + 'iam' + dsuff + '=' + eval(1 + ibvc - nineoff);
dsuff='' + eval(2 + ibvc - nineoff);
if (eval(1 + ibvc - nineoff) == 9 && eval(1 + ibvc) < eval('' + isotwos.length)) {
top.winops.push(top.window.open(newhref, '_blank'));
newhref=document.URL.split('?')[0].split('#')[0];
dlim='?bigtz=' + document.getElementById('stzs').value.replace('GMT','+0&isgmt=y') + '&';
dsuff='';
nineoff+=9;
}
}
if (winops.length > 0) {
top.winops.push(top.window.open(newhref, '_blank'));
top.document.getElementById('bigoverlay').style.display='block';
top.document.getElementById('bigoverlay').style.position='absolute';
top.document.getElementById('bigoverlay').style.top='0px';
top.document.getElementById('bigoverlay').style.left='0px';
top.document.getElementById('bigoverlay').style.width='100%';
top.document.getElementById('bigoverlay').style.height='100%';
top.document.getElementById('bigoverlay').style.zIndex='10';
top.document.getElementById('bigoverlay').innerHTML=\"<iframe onload='andtwo(this);' style='width:100%;height:100%;' src='\" + newhref + \"'></iframe>\";
var fi=top.document.createElement('link');
fi.rel='icon';
fi.href='//www.rjmprogramming.com.au/images/back01.gif';

top.document.head.appendChild(fi);

} else {
if (!worryyes) {
return true;
} else {
var subi=false;
if (window.parent) {
if (parent.document != document) { subi=true; top.location.href=newhref.replace('?','?ontop=y&'); }
}
if (!subi) { top.location.href=newhref; }
}
}
return false;
} else {
document.getElementById('isellong').value=document.getElementById('isellong').value.split(',')[0];
}
}
}
return true;
}

So, yet again, feel free to (re-)try our changed standalone tz_places.php‘s “TimeZone Places” web application to try out this improved integration.


Previous relevant Dropdown Meaning in TimeZone Places Tutorial is shown below.

Dropdown Meaning in TimeZone Places Tutorial

Dropdown Meaning in TimeZone Places Tutorial

Onto yesterday’s When Meets Where in TimeZone Places Tutorial we give meaning to a “Local Time Zone” dropdown with two categories of options …

  1. timezone (hour) offset (from GMT)
  2. timezone name

… which we must have forgotten to code for given the additional codelines needed in that dropdown’s “onchange” event logic …


function changetz(intz) {
if (intz.indexOf('/') != -1) {
for (var ikn=0; ikn<anearname.length; ikn++) {
if (intz == anearname[ikn]) { document.getElementById('isellong').value=anearcc[ikn]; }
}
} else if ((intz + ' ').substring(0,1) == '-' || (intz + ' ').substring(0,1) == '+' || ((intz + ' ').substring(0,1) >= '0' && (intz + ' ').substring(0,1) <= '9')) {
var secsare, startdate, enddate, pdstis = null, prepdstis = null, noff=0, ctyl='', ctyld='';
document.getElementById('isellong').style.cursor='progress';
for (var jkn=0; jkn<anearname.length; jkn++) {
prepdstis='' + new Date().toLocaleString('en-US', {timeZone: 'GMT'});
pdstis='' + new Date().toLocaleString('en-US', {timeZone: anearname[jkn]});
enddate=new Date(prepdstis);
startdate=new Date(pdstis);
noff = eval((startdate.getTime() - enddate.getTime()) / 3600000);
noff-=eval('' + intz.replace('+',''));
if (anearname[jkn].indexOf('/Athens') != -1 || anearname[jkn].indexOf('/Sydney') != -1) {
console.log(anearname[jkn] + ' ' + anearcc[jkn]);
console.log(pdstis);
}
//noff=pdstis.getTimezoneOffset();
//if (Math.abs(eval(eval(eval('' + noff) / 1) - eval('' + intz.replace('+','')))) < eval('0.01')) {
if (Math.abs(eval('' + noff)) < eval('0.01')) {
if (ctyl.indexOf(anearcc[jkn]) == -1) {
ctyl+=ctyld + anearcc[jkn];
ctyld=',';
console.log(anearname[jkn] + ' ' + anearcc[jkn] + ' name.cc=' + anearname.length + '.' + anearcc.length);
console.log(pdstis);
}
}
if (anearname[jkn].indexOf('/Athens') != -1 || anearname[jkn].indexOf('/Sydney') != -1) {
console.log(noff + ' ... ' + Math.abs(eval(eval(eval('' + noff) / 1) - eval('' + intz.replace('+','')))) + ' ctyl=' + ctyl);
}
}
if (ctyl != '') { document.getElementById('isellong').value=ctyl; }
document.getElementById('isellong').style.cursor='pointer';
}

}

… where we now populate the country iso 2 character code textbox with

  1. timezone (hour) offset (from GMT) … comma separated country iso 2 character code list (only the first of which will be used should the user click the “Display as Below” button)
  2. timezone name … single country iso 2 character code value

… and because this is a client side piece of functionality we add another array (the $nearcc below) whereby PHP TimeZone functionality country codes get transferred into Javascript ones …

<?php

$cnarr="\n var cnearname='" . '"' . $nearname[0] . '"';
for ($narr=1; $narr<sizeof($nearname); $narr++) {
if (trim($nearname[$narr]) != '') { $cnarr.=',"' . $nearname[$narr] . '"'; }
}
$cnarr.="'; \n var cnearcc='" . '"' . $nearcc[0] . '"';
for ($narr=1; $narr<sizeof($nearcc); $narr++) {
if (trim($nearcc[$narr]) != '') { $cnarr.=',"' . $nearcc[$narr] . '"'; }
}
$cnarr.="'; \n";

?>

Again, feel free to (re-)try our changed standalone tz_places.php‘s “TimeZone Places” web application to try out this improved integration.


Previous relevant When Meets Where in TimeZone Places Tutorial is shown below.

When Meets Where in TimeZone Places Tutorial

When Meets Where in TimeZone Places Tutorial

The last time we changed our “TimeZone Places” (PHP) web application was when we presented Earth Bearing Distance Missing Two Trip Tutorial and today, we revisit this …

  • when … meets …
  • where

… (web application that works) both (in) …

… (mode as a) lynchpin connecting those two biggest adverbiology themes of Information Technology software, in order, those being …

  1. where
  2. when

Link the two biggest with a single concept, timezones, and we figure PHP’s brilliant TimeZone functionality can be very useful.

The revisit to the standalone “TimeZone Places” (PHP) web application yesterday made us realize we could go from …

  • a “when” emoji clock div element “button” looking element … to a …
  • new onmouseover (ie. hover (but sorry, mobile users)) event display of “Day of the Week” better contectualization … and onto …
  • new onclick event sends user to a Javascript confirm popup (mentioning “Day of the Week and detailed time) chance to move onto a “where and when” daylight saving time “Colour Wheel” web application featuring TimeZone time and place links to Wikipedia visuals

… needing code snippets like

<?php

$otz = new DateTimeZone("UTC"); // "Europe/London"
$tz = new DateTimeZone($nearname[$best1]);
$origin_dt = new DateTime("now", $otz);
$remote_dt = new DateTime("now", $tz);
$dayofweek = $remote_dt->format('N') . " onclick=\"if (confirm('" . $remote_dt->format('D Y-m-d H:i:s') . "')) { window.open('//www.rjmprogramming.com.au/HTMLCSS/colour_wheel.html?mode=~/~', '_blank', 'top=100,left=100,width=800,height=800'); };\"";

function toeng($indow,$zn) {
return str_replace("7", "Sunday", str_replace("1", "Monday", str_replace("2", "Tuesday", str_replace("3", "Wednesday", str_replace("4", "Thursday", str_replace("5", "Friday", str_replace("6", "Saturday", ("" . substr($indow,0,1))))))))) . str_replace("~/~", $zn, substr($indow,1));
}


$selstuff.=$prefix . " <a title='" . $lastTime . "' id=maof_" . explode(",",$zbits[-1 + sizeof($zbits)])[0] . "></a><a class=abut target=_blank id=aof_" . explode(",",$zbits[-1 + sizeof($zbits)])[0] . " title='" . $zoneName . ',' . $loc[latitude] . ',' . $loc[longitude] . ',' . $tzo['offset'] / 3600 . "' style=text-decoration:underline;cursor:pointer; onclick='moreaddtolist(this.title,\"" . $zoneName . "\");'>" . $zoneName . "</a><div style=display:inline; id=daof_" . explode(",",$zbits[-1 + sizeof($zbits)])[0] . " class=emoji onclick=emojistuff(this);>📹</div>" . $extrad . " = " . $loc['comments'] . " ... " . $coffset . "<div style=display:inline; title=" . toeng($dayofweek,$zoneName) . " id=oaof_" . str_replace('+','',('' . $coffset)) . " class='emoji" . $thisemojiclass . "' onclick=emojistuff(this);>" . str_replace("&#;","","&#" . $thisemojicodepoint . ";") . "</div>" . $suffix . "<br>";

?>

These PHP code changes means you can (re-)try our changed standalone tz_places.php‘s “TimeZone Places” web application to try out this improved integration.


Previous relevant Earth Bearing Distance Missing Two Trip Tutorial is shown below.

Earth Bearing Distance Missing Two Trip Tutorial

Earth Bearing Distance Missing Two Trip Tutorial

If we were to nominate an “onions of the 4th dimension” improvement on top of the work of Earth Bearing Distance Missing Two Context Tutorial we’d nominate … anyone, anyone … yes, tenticle 5 of The Kraken … we’d want to allow our “Missing Two Geographical places via Bearing and Distance” web application be turned into a trip planner by allowing for multiple legs, perhaps of a trip, to be “represented” by our new incarnation of the web application. As per usual, with extensions of functionality, here, it is optional, and manifested by … anyone, anyone … yes, tenticle 9 3/4 of The Kraken … turning a hardcoded piece of (webpage) text into an HTML element with action logic behind it … our TAHPOWTIAHEWALBI moment, you could say?!

Seriously though, it is rare that a sizeable trip happens as a one leg with the one bearing and distance component, so we turn our old web application into a …

… type of web application, in order to do that other thing we like to do, and that is to have the one (in this case just HTML/Javascript/CSS) codeset handle both simple and (optional) complex usage functionalities.

How do we differentiate a “top.document” parent from an (HTML) iframe (element) child? We use …

  • address bar URL ? and & argument (?latf=[previousToLatitude]&longf=[previousToLongitude]) usage (and analysis) via … checked for via
  • <body onload=’moremaybe();’>

  • function moremaybe() {
    var latto=location.search.split('latf=')[1] ? decodeURIComponent(location.search.split('latf=')[1].split('&')[0]) : '';
    var longto=location.search.split('longf=')[1] ? decodeURIComponent(location.search.split('longf=')[1].split('&')[0]) : '';
    if (latto != '' && longto != '') {
    nextplease();
    top.document.getElementById('goagain').style.display='block';
    document.getElementById('latf').value=latto;
    document.getElementById('latf').style.backgroundColor="pink";
    cwhat[0]=false;
    cwhat[1]=false;
    if (!decided) {
    if (!cwhat[5]) {
    cwhat[5]=true;
    }
    if (!cwhat[4]) {
    cwhat[4]=true;
    }
    decided=true;
    }
    top.document.getElementById("ltf").value=latto;
    document.getElementById('longf').value=longto;
    document.getElementById('longf').style.backgroundColor="pink";
    cwhat[0]=false;
    cwhat[1]=false;
    if (!decided) {
    if (!cwhat[5]) {
    cwhat[5]=true;
    }
    if (!cwhat[4]) {
    cwhat[4]=true;
    }
    decided=true;
    }
    top.document.getElementById("lgf").value=longto;
    document.getElementById('dtop').style.display='none';
    document.getElementById('trhead').style.display='none';
    document.getElementById('trfoot').style.display='none';
    document.getElementById('myt').border=0;
    var recti=parent.document.getElementById('niframe').getBoundingClientRect();
    parent.document.getElementById('niframe').height=eval(200 + eval(('' + recti.height).replace('px',''))) + 'px';
    if (parent.document.getElementById('niframe') != top.document.getElementById('niframe')) {
    var trecti=top.document.getElementById('niframe').getBoundingClientRect();
    top.document.getElementById('niframe').height=eval(200 + eval(('' + trecti.height).replace('px',''))) + 'px';
    }
    setTimeout(checkfill, 500);
    parent.document.getElementById("slong").innerHTML=":";
    parent.document.getElementById("slong").title="";
    parent.document.getElementById("slong").style.textDecoration="none";
    //top.document.title+=' started ';
    }
    }

… where you can see that “top.document” (top) parent is just that … top.document … and that a parent of an (HTML) iframe (element) trip leg is referred to via … parent.document … and what is being done in the here and now of a simple scenario (just in the (top) parent) or a complex (non (top) parent leg) … document … references come into play. That parent.document.getElementById(“slong”) refers to the dynamically changed method of adding legs, by turning the …

  • hardcoded “:” (text) of the To longitude textbox labelling … into a clickable and onclick event working …

  • document.getElementById('slong').style.cursor='pointer';
    document.getElementById('slong').style.textDecoration='underline';
    document.getElementById('slong').title='Click for another leg of a trip, perhaps?';
    document.getElementById('slong').innerHTML='+';

    … optionally used, and dynamic extension to functionality … our “onions of the 4th dimension” moment … who said we don’t care about your health here?!

… so that top.document.getElementById(‘niframe’) is the representation of that “top.document” parent’s first (HTML) iframe (element) child.

Why ask that previous question? To have the one codebase service all the scenarios, we need (the code) to know “where it is at”, so to speak.

The changed missing_two.html‘s live run link can have you planning your own “where of life” trip itinerary of interest yourself.


Previous relevant Earth Bearing Distance Missing Two Context Tutorial is shown below.

Earth Bearing Distance Missing Two Context Tutorial

Earth Bearing Distance Missing Two Context Tutorial

Mapping and navigational apps wouldn’t be as popular as they are without …

  • satellite based geodata available to our mobile and laptop (and cars etcetera) devices and their software … and …
  • the human urge to want to know where they are

… and so to leave yesterday’s Earth Bearing Distance Missing Two Primer Tutorial “proof of concept” web application the way it was, not showing much context to the latitude and longitude form “asks” would be a missed opportunity.

In this sense, we’ve decided to interface this web application to …

… to give the changed missing_two.html‘s live run link that optional map (or visual) extra context. This is accessible off links applied to the previously hardcoded “From” and “To” table headers. Please feel free to give it a go to see what we mean.


Previous relevant Earth Bearing Distance Missing Two Primer Tutorial is shown below.

Earth Bearing Distance Missing Two Primer Tutorial

Earth Bearing Distance Missing Two Primer Tutorial

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 ‘s live run link, or down below …


Previous relevant PHP Google Map Chart Bearing Distance Tutorial is shown below.

PHP Google Map Chart Bearing Distance Tutorial

PHP Google Map Chart Bearing Distance Tutorial

There have been three recent things going on, for us, involving software integration of our interface to the great Google Chart Map Chart

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 …

Here are some “live runs” …

… and here’s the changed PHP map.php changed in this way.


Previous relevant PHP Wikipedia Australian List Integration Tutorial is shown below.

PHP Wikipedia Australian List Integration Tutorial

PHP Wikipedia Australian List Integration Tutorial

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_world.htm‘s live run, changed in this way 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

… 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.

PHP Wikipedia Australian List Makeover Tutorial

PHP Wikipedia Australian List Makeover Tutorial

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 …

Great for research and “surfing the Australian world”! Lose yourself!

What happened Javascript (australian_lighthouses.js changed this way) and PHP wise?


Previous relevant PHP Modularization for Lighthouses in Australia Tutorial is shown below.

PHP Modularization for Lighthouses in Australia Tutorial

PHP Modularization for Lighthouses in Australia Tutorial

Today we want to try two more things …

  1. continuing on with our PHP code (you could call australian_lighthouses.php) for our Australian Lighthouses project
  2. 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 …

… 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.

PHP/Javascript Asynchronous Lighthouses in Australia Tutorial

PHP/Javascript Asynchronous Lighthouses in Australia Tutorial

Today we want to try two things …

  1. continuing on with our PHP code (you could call australian_lighthouses.php) for our Australian Lighthouses project
  2. 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_lighthouses.js
  • 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 this link

… 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 live run to see what we mean.


Previous relevant PHP Lighthouses in Australia Primer Tutorial is shown below.

PHP Lighthouses in Australia Primer Tutorial

PHP Lighthouses in Australia Primer Tutorial

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 map.php 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 live run behind which is the PHP programming source code you could call australian_lighthouses.php for your perusal.


Previous relevant PHP/Javascript/HTML Google Chart Map Onclick Tutorial is shown below.

PHP/Javascript/HTML Google Chart Map Onclick Tutorial

PHP/Javascript/HTML Google Chart Map Onclick Tutorial

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 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 Google Chart tooltips information … via Google.

Link to some downloadable PHP programming code … rename to map.php which changed from yesterday as per this link.


Previous relevant PHP/Javascript/HTML Google Chart Map Tooltips Tutorial is shown below.

PHP/Javascript/HTML Google Chart Map Tooltips Tutorial

PHP/Javascript/HTML Google Chart Map Tooltips Tutorial

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 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 Google Chart tooltips information … via Google.

Link to some downloadable PHP programming code … rename to map.php which changed from the days of Google Charts Emailing Primer Tutorial as per this link.


Previous relevant PHP/Javascript/HTML Google Chart Map Tutorial is shown below.

PHP/Javascript/HTML Google Chart Map Tutorial

PHP/Javascript/HTML Google Chart Map Tutorial

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 map.php.

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.


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.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>