{"id":70986,"date":"2025-12-12T03:01:00","date_gmt":"2025-12-11T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=70986"},"modified":"2025-12-11T18:36:39","modified_gmt":"2025-12-11T08:36:39","slug":"australian-indigenous-language-google-earth-integration-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-google-earth-integration-tutorial\/","title":{"rendered":"Australian Indigenous Language Google Earth Integration Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Indigenous Language Google Earth Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/ablangdanddzz.gif\" title=\"Australian Indigenous Language Google Earth Integration Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Australian Indigenous Language Google Earth Integration Tutorial<\/p><\/div>\n<p>Today, we&#8217;re revisiting the Australian Indigenous Language <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/\" rel=\"noopener\">web application<\/a> mentioned in the recent <a title='Australian Indigenous Language Drag and Drop Tutorial' href='#ailddt'>Australian Indigenous Language Drag and Drop Tutorial<\/a> to add into the SVG overlay related display links to &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"\/\/maps.google.com\" rel=\"noopener\">Google Maps<\/a> &#8230; and &#8230;<\/li>\n<li><a target=\"_blank\" href=\"\/\/earth.google.com\" rel=\"noopener\">Google Earth<\/a><\/li>\n<\/ul>\n<p> &#8230; adding to the functionalities interfacing to two of the large players online, when it comes to maps and terrain (off satellite imagery) displays.<\/p>\n<p>We just needed tweaks to <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/mapsvg.js-GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/mapsvg.js-GETME\" rel=\"noopener\">mapsvg.js<\/a> external Javascript developed for the purposes of enhancing that SVG overlay (via image map click) functionality.<\/p>\n<p>This job&#8217;s intervention research and development definitely benefitted from this modular approach, meaning new Javascript &#8230;<\/p>\n<p><code><br \/>\nvar basisll='', basislltwo='', firstretideas='';<br \/>\n <br \/>\nfunction firstgegm(mnx,mny,mxx,mxy) {<br \/>\n  var retideas='';<br \/>\n  var thatlat=eval(0.5 * (eval(('' + retll(mnx,mny)).split(',')[0]) + eval(('' + retll(mxx,mxy)).split(',')[0]))); \/\/eval(0.5 * (eval('' + mnx) + eval('' + mxx)));<br \/>\n  var thatlong=eval(0.5 * (eval(('' + retll(mnx,mny)).split(',')[1]) + eval(('' + retll(mxx,mxy)).split(',')[1]))); \/\/eval(0.5 * (eval('' + mny) + eval('' + mxy)));<br \/>\n  basisll=('+' + thatlat).replace('+-','-') + ('+' + thatlong).replace('+-','-').replace('-',',-');<br \/>\n  basislltwo=('+' + thatlat).replace('+-','-') + (',+' + thatlong).replace('+-','-'); \/\/.replace('-',',-');<br \/>\n  retideas+=\"&lt;a style=cursor:pointer; data-href=\\\"#\\\" title=\\\"Google Maps\\\" onclick=\\\"window.open('\/\/maps.google.com\/maps?z=7&t=m&q=loc:\" + ('+' + thatlat).replace('+-','-') + ('+' + thatlong).replace('+-','-').replace('-',',-') + \"', '_blank','top=210,left=210,width=600,height=600');\\\"&gt;&amp;#x1F5FA;&amp;#xFE0F;&lt;\/a&gt;&nbsp;\";<br \/>\n  retideas+=\"&lt;a style=cursor:pointer; data-href=\\\"#\\\" title=\\\"Google Earth\\\" onclick=\\\"window.open('\/\/earth.google.com\/web\/@\" + ('+' + thatlat).replace('+-','-') + (',+' + thatlong).replace('+-','-') + \",328.51120179a,63169669.71505167d,1y,0h,0t,0r', '_blank','top=210,left=210,width=600,height=600');\\\"&gt;&amp;#x1F310;&lt;\/a&gt;&nbsp;\";<br \/>\n  firstretideas=retideas;<br \/>\n  return retideas;<br \/>\n}<br \/>\n <br \/>\nfunction gmge(mnx,mny,mxx,mxy) {<br \/>\n  var thisbasisll='';<br \/>\n  var retideas='';<br \/>\n  var thatlat=eval(0.5 * (eval(('' + retll(mnx,mny)).split(',')[0]) + eval(('' + retll(mxx,mxy)).split(',')[0]))); \/\/eval(0.5 * (eval('' + mnx) + eval('' + mxx)));<br \/>\n  var thatlong=eval(0.5 * (eval(('' + retll(mnx,mny)).split(',')[1]) + eval(('' + retll(mxx,mxy)).split(',')[1]))); \/\/eval(0.5 * (eval('' + mny) + eval('' + mxy)));<br \/>\n  thisbasisll=('+' + thatlat).replace('+-','-') + ('+' + thatlong).replace('+-','-').replace('-',',-');<br \/>\n  retideas+=\"&lt;a style=text-decoration:none;cursor:pointer; data-href=\\\"#\\\" title=\\\"Google Maps\\\" onclick=\\\"window.open('\/\/maps.google.com\/maps?z=7&t=m&q=loc:\" + ('+' + thatlat).replace('+-','-') + ('+' + thatlong).replace('+-','-').replace('-',',-') + \"', '_blank','top=210,left=210,width=600,height=600');\\\"&gt;&amp;#x1F5FA;&amp;#xFE0F;&lt;\/a&gt;&nbsp;\";<br \/>\n  return thisbasisll; \/\/firstretideas.replace(basisll,thisbasisll);<br \/>\n}<br \/>\n <br \/>\nfunction gegm(mnx,mny,mxx,mxy) {<br \/>\n  var thisbasisll='';<br \/>\n  var retideas='';<br \/>\n  var thatlat=eval(0.5 * (eval(('' + retll(mnx,mny)).split(',')[0]) + eval(('' + retll(mxx,mxy)).split(',')[0]))); \/\/eval(0.5 * (eval('' + mnx) + eval('' + mxx)));<br \/>\n  var thatlong=eval(0.5 * (eval(('' + retll(mnx,mny)).split(',')[1]) + eval(('' + retll(mxx,mxy)).split(',')[1]))); \/\/eval(0.5 * (eval('' + mny) + eval('' + mxy)));<br \/>\n  thisbasisll=('+' + thatlat).replace('+-','-') + (',+' + thatlong).replace('+-','-'); \/\/.replace('-',',-');<br \/>\n  retideas+=\"&lt;a style=cursor:pointer; data-href=\\\"#\\\" title=\\\"Google Earth\\\" onclick=\\\"window.open('\/\/earth.google.com\/web\/@\" + ('+' + thatlat).replace('+-','-') + (',+' + thatlong).replace('+-','-') + \",328.51120179a,63169669.71505167d,1y,0h,0t,0r', '_blank','top=210,left=210,width=600,height=600');\\\"&gt;&amp;#x1F310;&lt;\/a&gt;&nbsp;\";<br \/>\n  return thisbasisll; \/\/firstretideas.replace(basisll,thisbasisll);<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; could be called <font color=blue>in this way<\/font> &#8230;<\/p>\n<p><code><br \/>\n    if (retll) {<br \/>\n      if (murl == '' && premurl == '') {<br \/>\n       if (appendto) {<br \/>\n         turl='rjmmap';<br \/>\n         premurl='&lt;br&gt;<font color=blue>' + firstgegm(minx,miny,maxx,maxy) + '<\/font>&lt;a onclick=\"document.getElementById(' + \"'rjmmap'\" + ').style.display=' + \"'block'\" + '; ' + showpreiframe + ' \" target=\"' + turl + '\" title=\"Google Map Chart\" href=\"\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php?title=';<br \/>\n         pregurl='&nbsp;<font color=blue>' + firstgegm(minx,miny,maxx,maxy) + '<\/font>&lt;a onclick=\"document.getElementById(' + \"'rjmmap'\" + ').style.display=' + \"'block'\" + '; ' + showpreiframe + ' \" target=\"' + turl + '\" title=\"Google Geo Chart\" href=\"\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?width=556&height=347&country=Places&popularity=&aregeographicals=y&title=';<br \/>\n       } else {<br \/>\n         premurl='&lt;br&gt;<font color=blue>' + firstgegm(minx,miny,maxx,maxy) + '<\/font>&lt;a target=\"' + turl + '\" title=\"Google Map Chart\" href=\"\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php?title=';<br \/>\n         pregurl='&nbsp;<font color=blue>' + firstgegm(minx,miny,maxx,maxy) + '<\/font>&lt;a target=\"' + turl + '\" title=\"Google Geo Chart\" href=\"\/\/www.rjmprogramming.com.au\/GeoChart\/geo_chart.php?width=556&height=347&country=Places&popularity=&aregeographicals=y&title=';<br \/>\n       }<br \/>\n       midmurl='&onclick=y&label=' + \"['Lat',&value='Lon','Name']\" + '&data=';<br \/>\n       midgurl='&onclick=y&label=[%27Lat%27,&value=%27Lon%27|%27Name%27]&data=';<br \/>\n       postmurl='\"&gt;&#128205;&lt;\/a&gt;';<br \/>\n       postgurl='%20|%20[-90.0|0.0|~%20~,999999999]\"&gt;&#128506;&lt;\/a&gt;';<br \/>\n       if (('' + sareas[iareas].title) == '') {<br \/>\n         murl=premurl<font color=blue>.replace(basisll,gmge(minx,miny,maxx,maxy)).replace(basislltwo,gegm(minx,miny,maxx,maxy))<\/font> + encodeURIComponent('Place') + midmurl + ',[' + retll(minx,miny) + ',~MinxMiny~],[' + retll(maxx,miny) + ',~MaxxMiny~],[' + retll(maxx,maxy) + ',~MaxxMaxy~],[' + retll(minx,maxy) + ',~MinxMaxy~]' + postmurl;<br \/>\n         gurl=pregurl<font color=blue>.replace(basisll,gmge(minx,miny,maxx,maxy)).replace(basislltwo,gegm(minx,miny,maxx,maxy))<\/font> + encodeURIComponent('Place') + midmurl + '[' + retll(minx,miny).replace(',','|') + '|~MinxMiny~,1],[' + retll(maxx,miny).replace(',','|') + '|~MaxxMiny~,1],[' + retll(maxx,maxy).replace(',','|') + '|~MaxxMaxy~,1],[' + retll(minx,maxy).replace(',','|') + '|~MinxMaxy~,1]' + postgurl;<br \/>\n       } else {<br \/>\n         murl=premurl<font color=blue>.replace(basisll,gmge(minx,miny,maxx,maxy)).replace(basislltwo,gegm(minx,miny,maxx,maxy))<\/font> + encodeURIComponent('' + sareas[iareas].title) + midmurl + ',[' + retll(minx,miny) + ',~MinxMiny~],[' + retll(maxx,miny) + ',~MaxxMiny~],[' + retll(maxx,maxy) + ',~MaxxMaxy~],[' + retll(minx,maxy) + ',~MinxMaxy~]' + postmurl;<br \/>\n         gurl=pregurl<font color=blue>.replace(basisll,gmge(minx,miny,maxx,maxy)).replace(basislltwo,gegm(minx,miny,maxx,maxy))<\/font> + encodeURIComponent('' + sareas[iareas].title) + midmurl + '[' + retll(minx,miny).replace(',','|') + '|~MinxMiny~,1],[' + retll(maxx,miny).replace(',','|') + '|~MaxxMiny~,1],[' + retll(maxx,maxy).replace(',','|') + '|~MaxxMaxy~,1],[' + retll(minx,maxy).replace(',','|') + '|~MinxMaxy~,1]' + postgurl;<br \/>\n       }<br \/>\n       if (appendto) {<br \/>\n         appendto.innerHTML+=preiframe + '&lt;iframe id=rjmmap name=rjmmap style=\"display:none;width:100%;height:600px;\" src=\"\"&gt;&lt;\/iframe&gt;';<br \/>\n       }<br \/>\n      } else if (murl == '') {<br \/>\n       if (('' + sareas[iareas].title) == '') {<br \/>\n         murl=premurl<font color=blue>.replace(basisll,gmge(minx,miny,maxx,maxy)).replace(basislltwo,gegm(minx,miny,maxx,maxy))<\/font> + encodeURIComponent('Place') + midmurl + ',[' + retll(minx,miny) + ',~MinxMiny~],[' + retll(maxx,miny) + ',~MaxxMiny~],[' + retll(maxx,maxy) + ',~MaxxMaxy~],[' + retll(minx,maxy) + ',~MinxMaxy~]\"' + postmurl;<br \/>\n         gurl=pregurl<font color=blue>.replace(basisll,gmge(minx,miny,maxx,maxy)).replace(basislltwo,gegm(minx,miny,maxx,maxy))<\/font> + encodeURIComponent('Place') + midmurl + '[' + retll(minx,miny).replace(',','|') + '|~MinxMiny~,1],[' + retll(maxx,miny).replace(',','|') + '|~MaxxMiny~,1],[' + retll(maxx,maxy).replace(',','|') + '|~MaxxMaxy~,1],[' + retll(minx,maxy).replace(',','|') + '|~MinxMaxy~,1]' + postgurl;<br \/>\n       } else {<br \/>\n         murl=premurl<font color=blue>.replace(basisll,gmge(minx,miny,maxx,maxy)).replace(basislltwo,gegm(minx,miny,maxx,maxy))<\/font> + encodeURIComponent('' + sareas[iareas].title) + midmurl + ',[' + retll(minx,miny) + ',~MinxMiny~],[' + retll(maxx,miny) + ',~MaxxMiny~],[' + retll(maxx,maxy) + ',~MaxxMaxy~],[' + retll(minx,maxy) + ',~MinxMaxy~]\"' + postmurl;<br \/>\n         gurl=pregurl<font color=blue>.replace(basisll,gmge(minx,miny,maxx,maxy)).replace(basislltwo,gegm(minx,miny,maxx,maxy))<\/font> + encodeURIComponent('' + sareas[iareas].title) + midmurl + '[' + retll(minx,miny).replace(',','|') + '|~MinxMiny~,1],[' + retll(maxx,miny).replace(',','|') + '|~MaxxMiny~,1],[' + retll(maxx,maxy).replace(',','|') + '|~MaxxMaxy~,1],[' + retll(minx,maxy).replace(',','|') + '|~MinxMaxy~,1]' + postgurl;<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; to make this integration happen with the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/\" rel=\"noopener\">Australian Indigenous Language<\/a> web application.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Meanwhile, back at the ranch, we figured &#8220;long hover&#8221; <a target=\"_blank\" href=\"\/\/earth.google.com\" rel=\"noopener\">Google Earth<\/a> integration might be good too, and came up with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/mapsvg.js--GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/mapsvg.js--GETME\" rel=\"noopener\">mapsvg.js<\/a> external Javascript which now &#8230;<\/p>\n<ol>\n<li>overrides a Javascript function &#8230; in order to wrest control into it&#8217;s orbit, if you will &#8230;<br \/>\n<code><br \/>\nvar lastpwinll='', secsthatway=-1;<br \/>\n<br \/>\nfunction pWinIs() { \/\/ is a deliberate override<br \/>\n var retval=\"&lt;div id='pWin' style=' background-color: #FF8000; width: 200px; height: 160px; position: absolute; font: .9em arial, helvetica, sans-serif; padding: 7px; visibility: hidden; top: 55px; left: 25px; border: 2px #CC1000 dashed; clip: auto; overflow: hidden; z-index:8; opacity:0.8;'&gt;&lt;\/div&gt;\";<br \/>\n setInterval(pwinmonitor, 1000);<br \/>\n return retval;<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>and then calls on a new Javascript setInterval timer called &#8230;<br \/>\n<code><br \/>\nvar woki=null;<br \/>\n<br \/>\nfunction pwinmonitor() {<br \/>\n var thatlat=-999.0, thatlong=-999.0;<br \/>\n if (document.getElementById('pWin')) {<br \/>\n   if (('' + document.getElementById('pWin').style.visibility).indexOf('hidden') != -1) {<br \/>\n    if (secsthatway &gt;= 0) {<br \/>\n      secsthatway=-1;<br \/>\n      lastpwinll='';<br \/>\n    }<br \/>\n   } else if (('' + document.getElementById('pWin').style.visibility).indexOf('visible') != -1) {<br \/>\n    if (secsthatway &lt; 0) {<br \/>\n      secsthatway=0;<br \/>\n      lastpwinll=document.getElementById('pWin').innerHTML;<br \/>\n    } else if (lastpwinll != document.getElementById('pWin').innerHTML) {<br \/>\n      secsthatway=0;<br \/>\n      lastpwinll=document.getElementById('pWin').innerHTML;<br \/>\n    } else {<br \/>\n      secsthatway++;<br \/>\n    }<br \/>\n    if (secsthatway == 15) {<br \/>\n      if (lastpwinll.indexOf('Latitude:') != -1 && lastpwinll.indexOf('Longitude:') != -1) {<br \/>\n        thatlat=eval('' + lastpwinll.split('Latitude:')[1].substring(0,7).trim());<br \/>\n        thatlong=eval('' + lastpwinll.split('Longitude:')[1].substring(0,7).trim());<br \/>\n        \/\/document.title='' + thatlong + ',' + thatlat;<br \/>\n        if (woki) {<br \/>\n          if (!woki.closed) {<br \/>\n            woki.close();<br \/>\n          }<br \/>\n        }<br \/>\n        woki=window.open('\/\/earth.google.com\/web\/@' + ('+' + thatlat).replace('+-','-') + (',+' + thatlong).replace('+-','-') + ',328.51120179a,63169669.71505167d,1y,0h,0t,0r', '_blank','top=210,left=210,width=600,height=600');<br \/>\n        try {<br \/>\n        woki.document.title=lastpwinll.split('Latitude:')[0].replace('&lt;br&gt;', '');<br \/>\n        } catch(hgd) {  }<br \/>\n      }<br \/>\n      \/\/secsthatway=-1;<br \/>\n      \/\/lastpwinll='';<br \/>\n    }<br \/>\n   }<br \/>\n }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p><img decoding=\"async\" alt=\"Australian Indigenous Language Google Earth Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/ablangdanddzz.jpg\"><\/img><\/p>\n<p> &#8230; to allow for this &#8220;long hover&#8221; Google Earth integration idea with the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/\" rel=\"noopener\">Australian Indigenous Language<\/a> web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-google-earth-integration-tutorial\/' rel=\"noopener\">Australian Indigenous Language Google Earth Integration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ailddt'>Previous relevant <a target=\"_blank\" title='Australian Indigenous Language Drag and Drop Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-drag-and-drop-tutorial\/' rel=\"noopener\">Australian Indigenous Language Drag and Drop 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\/ImageMap\/Languages\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Indigenous Language Drag and Drop Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/ablangdandd.jpg\" title=\"Australian Indigenous Language Drag and Drop Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Australian Indigenous Language Drag and Drop Tutorial<\/p><\/div>\n<p>Further to <a title='Australian Indigenous Language HTML Map Trove Tutorial' href='#ailhtmlmtt'>Australian Indigenous Language HTML Map Trove Tutorial<\/a>, today, we wanted to see whether the Indigenous Language webpage could be improved by the application of drag and drop functionality.  The thing is, &#8220;drag and drop&#8221; can supplement good &#8220;click&#8221; logic in this web application, rather than any thoughts regarding replacing it.  In that sense we were on the lookout for a new resource regarding Indigenous Languages here in Australia, and found <a target=\"_blank\" title='Aboriginal Languages of Australia' href='\/\/www.dnathan.com\/VL\/index.php' rel=\"noopener\">Aboriginal Languages of Australia<\/a> had interesting audio links that we&#8217;ve long been interested in finding, thanks.<\/p>\n<p>Nonetheless, we are not yet at a stage where we&#8217;ve seen every &#8220;parent&#8221; type caller of <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js------GETME\" rel=\"noopener\">our <font size=1>still needing to be<\/font> changed<\/a> external Javascript <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.js------GETME\" rel=\"noopener\">countries.js<\/a> &#8220;Drag and Drop specialist&#8221; called by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.js-------GETME\" title='aboriginal_language_regions.js' rel=\"noopener\">the changed external Javascript<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.js-------GETME\" title='aboriginal_language_regions.js' rel=\"noopener\">aboriginal_language_regions.js<\/a> further called by the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html----------GETME\" title='aboriginal_language_regions.html' rel=\"noopener\">changed HTML\/Javascript parent<\/a> called <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html----------GETME\" title='aboriginal_language_regions.html' rel=\"noopener\">aboriginal_language_regions.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link.<\/p>\n<p>In these scenarios where a &#8220;child&#8221; external Javascript serves a wide range of &#8220;parent&#8221; needs, you can use global Javascript var<font size=1>iables<\/font> &#8230;<\/p>\n<p><code><br \/>\nvar amdragging=false, havedropped=false, dropthing='';<br \/>\n<\/code><\/p>\n<p> &#8230; in the &#8220;parent&#8221; HTML webpage, and the &#8220;child&#8221; <font size=1>external<\/font> Javascript <a target=\"_blank\" title='Javascript typeof information from W3schools' href='https:\/\/www.w3schools.com\/js\/js_typeof.asp' rel=\"noopener\">typeof<\/a> methodologies can be used for code like &#8230;<\/p>\n<p><code><br \/>\n  console.log(\"dragStart\");<br \/>\n    if (typeof(parent.amdragging) !== 'undefined') { parent.amdragging=true; }<br \/>\n    if (typeof(parent.havedropped) !== 'undefined') { parent.havedropped=false; }<br \/>\n\/\/ ...<br \/>\n  console.log(\"Drop ... \" + ev.target.id + ' --- ' + ev.target.outerHTML);<br \/>\n  dropdt=(new Date());<br \/>\n    if (('' + ev.target.id) != '') {<br \/>\n    if (typeof(parent.amdragging) !== 'undefined') { parent.amdragging=false; }<br \/>\n    if (typeof(parent.havedropped) !== 'undefined') { parent.havedropped=true; }<br \/>\n    } else if (('' + ev.target.outerHTML).indexOf(' alt=\"') != -1 && typeof(parent.amdragging) !== 'undefined' && typeof(parent.havedropped) !== 'undefined' && typeof(parent.dropthing) !== 'undefined') {<br \/>\n    parent.dropthing=('' + ev.target.outerHTML).split(' alt=\"')[1].split('\"')[0];<br \/>\n    parent.langwo();<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; in the country.js external Javascript &#8220;Drag and Drop specialist&#8221;, helping us associate &#8220;drop&#8221; logic with an HTML <a target=\"_blank\" title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp' rel=\"noopener\">image map<\/a>&#8216;s <a target=\"_blank\" title='HTML area element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_area.asp' rel=\"noopener\">area<\/a> subelement of relevance, and then onto a window.open &#8230;<\/p>\n<p><code><br \/>\nfunction langwo() {<br \/>\n    if (typeof(amdragging) !== 'undefined' && typeof(havedropped) !== 'undefined' && typeof(dropthing) !== 'undefined') {<br \/>\n      if (amdragging && !havedropped) { if (dropthing != '') { window.open('\/\/www.dnathan.com\/VL\/index.php?searchstring=' + encodeURIComponent(dropthing) + '&searchtype=all', '_blank','top=10,left=10,height=' + eval(screen.height \/ 1.5) + ',width=' + eval(screen.width \/ 1.4)); } amdragging=false; havedropped=false; dropthing='';  }<br \/>\n    }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; featuring in a new Javascript function, above, in the web application&#8217;s <i>specific<\/i> aboriginal_language_regions.js external Javascript.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-drag-and-drop-tutorial\/' rel=\"noopener\">Australian Indigenous Language Drag and Drop Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ailhtmlmtt'>Previous relevant <a target=\"_blank\" title='Australian Indigenous Language HTML Map Trove Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-html-map-trove-tutorial\/' rel=\"noopener\">Australian Indigenous Language HTML Map Trove 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\/ImageMap\/Languages\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Indigenous Language HTML Map Trove Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/trove_emoji_links.jpg\" title=\"Australian Indigenous Language HTML Map Trove Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Australian Indigenous Language HTML Map Trove Tutorial<\/p><\/div>\n<p>Revisiting the web application of <a title='Australian Indigenous Language HTML Map jQuery YQL Tutorial' href='#ailhtmlmqyqlt'>Australian Indigenous Language HTML Map jQuery YQL Tutorial<\/a> we &#8230;<\/p>\n<ul>\n<li>take a step back, dismantling, at least as far as the user experience goes, the YQL functionality (it being a no-go these days <font size=1>&#8230; boo hoo<\/font>) &#8230; and &#8230;<\/li>\n<li>take a step forward augmenting Google Search links with incredible research content from the wonderful <a target=\"_blank\" title='Trove' href='https:\/\/trove.nla.gov.au\/' rel=\"noopener\">Trove<\/a> &#8230;<br \/>\n<blockquote cite='https:\/\/trove.nla.gov.au\/'><p>\nTrove is a collaboration between the National Library of Australia and hundreds of Partner organisations around Australia.\n<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<p> &#8230; a feature we wish we&#8217;d got together earlier on, even back to the time of <a target=\"_blank\" title='Australian Historical Research Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-historical-research-primer-tutorial\/' rel=\"noopener\">Australian Historical Research Primer Tutorial<\/a> back in a 2014 look at Trove.  Since then it&#8217;s had a great and useful makeover!<\/p>\n<p>The <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.js------GETME\" title='aboriginal_language_regions.js' rel=\"noopener\">changed external Javascript<\/a> called <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.js------GETME\" title='aboriginal_language_regions.js' rel=\"noopener\">aboriginal_language_regions.js<\/a> is called by the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html---------GETME\" title='aboriginal_language_regions.html' rel=\"noopener\">changed HTML\/Javascript parent<\/a> called <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html---------GETME\" title='aboriginal_language_regions.html' rel=\"noopener\">aboriginal_language_regions.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/\" title=\"Click picture\" rel=\"noopener\">live run<\/a> link is a place for you to research <a target=\"_blank\" title='the oldest surviving culture in the world' href='https:\/\/www.google.com\/search?q=the+oldest+surviving+culture+in+the+world&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=the+oldest+surviving+culture+in+the+world&#038;aqs=chrome..69i57j0l2j69i64l2.2122j0j4&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">&#8220;the oldest surviving culture in the world&#8221;<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-html-map-trove-tutorial\/' rel=\"noopener\">Australian Indigenous Language HTML Map Trove Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ailhtmlmqyqlt'>Previous relevant <a target=\"_blank\" title='Australian Indigenous Language HTML Map jQuery YQL Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-html-map-jquery-yql-tutorial\/' rel=\"noopener\">Australian Indigenous Language HTML Map jQuery YQL 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\/ImageMap\/Languages\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Indigenous Language HTML Map jQuery YQL Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/indigenouslanguagesyql.jpg\" title=\"Australian Indigenous Language HTML Map jQuery YQL Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Australian Indigenous Language HTML Map jQuery YQL Tutorial<\/p><\/div>\n<p>Our image <a target=\"_blank\" title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp' rel=\"noopener\">map<\/a> web application exploring Indigenous Australian Language, History and Culture quest continues, this time adding some jQuery and YQL and Ajax functionality best suited to non-mobile platform usage, but still appearing in the mobile &#8220;world&#8221; during a touch operation, as distinct from the &#8220;onhover&#8221; event scenario for non-mobile platforms.<\/p>\n<p><a target=\"_blank\" title='Ajax information from Wikipedoa ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29' rel=\"noopener\">Ajax<\/a> is, for non-mobile platforms, a way to add functionality without moving off the webpage you are on, by gleaning information from other sources of data such as &#8230;<\/p>\n<ul>\n<li>local HTML (or PHP) webpages<\/li>\n<li>local data files<\/li>\n<li>local database information<\/li>\n<li>same domain HTML (or PHP) webpages<\/li>\n<li>same domain data files<\/li>\n<\/ul>\n<p> &#8230; but if you involve <a target=\"_blank\" title='jQuery home page' href='https:\/\/jquery.com\/' rel=\"noopener\">jQuery<\/a> (Javascript library) as well (and we still hold off involving any server-side PHP, you&#8217;ll notice, and thanks here go to this very <a target=\"_blank\" href='https:\/\/www.liketly.com\/forum\/thread\/24096\/yql-and-javascript-failed\/' title='useful link ... thanks' rel=\"noopener\">useful link<\/a>) you can add &#8230;<\/p>\n<ul>\n<li>remote database information (via YQL &#8230; see also <a target=\"_blank\" title='Yahoo YQL Web Service JSON Google Books Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/yahoo-yql-web-service-json-google-books-tutorial\/' rel=\"noopener\">Yahoo YQL Web Service JSON Google Books Tutorial<\/a>) &#8230;<\/li>\n<ul>\n<li><a target=\"_blank\" href='http:\/\/developer.yahoo.com\/yql\/guide\/two-minute-tutorial.html' title='YQL Two Minute Tutorial' rel=\"noopener\">YQL Two Minute Tutorial<\/a> from Yahoo<\/li>\n<li><a target=\"_blank\" href='http:\/\/en.wikipedia.org\/wiki\/Yahoo!_Query_Language' title='Yahoo! Query Language' rel=\"noopener\">Yahoo! Query Language<\/a> from Wikipedia, as per quote above<\/li>\n<li><a target=\"_blank\" href='http:\/\/developer.yahoo.com\/yql\/' title='YQL Home Page' rel=\"noopener\">YQL Home Page<\/a> from Yahoo<\/li>\n<li><a target=\"_blank\" href='https:\/\/developer.yahoo.com\/yql\/console\/?q=select%20*%20from%20flickr.photos.interestingness%2820%29&#038;env=store:\/\/datatables.org\/alltableswithkeys#h=SELECT+*+FROM+google.books+WHERE+q%3D%22fire+ants%22+AND+maxResults%3D3+' title='YQL google.books help' rel=\"noopener\">YQL google.books help<\/a> from Yahoo<\/li>\n<li><a target=\"_blank\" title='YQL JSON Parsing Help' href='http:\/\/developer.yahoo.com\/forum\/YQL\/yql-query-intermittently-returns-no-results\/1374521623593-fa4a3519-10ae-4a17-8fd4-6de45a159d6f' rel=\"noopener\">YQL JSON Parsing Help<\/a> from YQL forum<\/li>\n<\/ul>\n<\/ul>\n<p> &#8230; and so we do this today by adding the functionality to optionally find books of specific interest to your subject of interest as you roam (or &#8220;hover&#8221;) across the image map.<\/p>\n<p>We facilitate this functionality for the user, again, via the use of a checkbox.<\/p>\n<p>The changes to Javascript code as per <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.js---GETME\" title='aboriginal_language_regions.js' rel=\"noopener\">aboriginal_language_regions.js<\/a> are reflected by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.js---GETME\" title='aboriginal_language_regions.js' rel=\"noopener\">this link<\/a> from yesterday.<\/p>\n<p>The supervising HTML code as per <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html---GETME\" title='aboriginal_language_regions.html' rel=\"noopener\">aboriginal_language_regions.html<\/a> needed to change to load the jQuery as reflected by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html---GETME\" title='aboriginal_language_regions.html' rel=\"noopener\">this link<\/a> from yesterday.<\/p>\n<p>The minor changes to CSS as per <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.css-GETME\" title='aboriginal_language_regions.css' rel=\"noopener\">aboriginal_language_regions.css<\/a> are reflected by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.css-GETME\" title='aboriginal_language_regions.css' rel=\"noopener\">this link<\/a> from yesterday.<\/p>\n<p>To see this in action take a look at today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/\" title='Click picture' rel=\"noopener\">live run<\/a>.<\/p>\n<hr>\n<p id='ailimat'>Previous relevant <a target=\"_blank\" title='Australian Indigenous Language Image Map Ajax Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-image-map-ajax-tutorial\/' rel=\"noopener\">Australian Indigenous Language Image Map Ajax 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\/ImageMap\/Languages\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Indigenous Language Image Map Ajax Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/indigenouslanguagesajax.jpg\" title=\"Australian Indigenous Language Image Map Ajax Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Australian Indigenous Language Image Map Ajax Tutorial<\/p><\/div>\n<p>Today, again, we mix geography and history in an image <a target=\"_blank\" title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp' rel=\"noopener\">map<\/a> web application exploring Indigenous Australian Language, History and Culture, this time adding some Ajax functionality best suited to non-mobile platform usage.<\/p>\n<p><a target=\"_blank\" title='Ajax information from Wikipedoa ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29' rel=\"noopener\">Ajax<\/a> is, for non-mobile platforms, a way to add functionality without moving off the webpage you are on, by gleaning information from other sources of data such as &#8230;<\/p>\n<ul>\n<li>local HTML (or PHP) webpages<\/li>\n<li>local data files<\/li>\n<li>local database information<\/li>\n<li>same domain HTML (or PHP) webpages<\/li>\n<li>same domain data files<\/li>\n<\/ul>\n<p>Again, here, we are talking about Javascript functionality, still not having to resort to any server-side language such as PHP, and though you can use jQuery calls to do this also, we do not call on any of this, as we just use Javascript code.<\/p>\n<p>And the background context to all this &#8230; we established a &#8220;MobileFish&#8221; inspired HTML map element scenario with the following components &#8230;<\/p>\n<ul>\n<li>a brilliant piece of research from the University of Western Sydney and ending up on the <a target=\"_blank\" href='http:\/\/treatyrepublic.net' rel=\"noopener\">TreatyRepublic.net<\/a> website as a map image &#8230; thanks<\/li>\n<li>using the wonderful <a target=\"_blank\" title='MobileFish imape map creator helper ... thanks' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php' rel=\"noopener\">MobileFish<\/a> image map (HTML element) creator helper &#8230; thanks<\/li>\n<\/ul>\n<p>Today sees the introduction of an external CSS file, for styling, for the first time.  This introduction of CSS causes the only change to our parent HTML code <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html--GETME\" title='aboriginal_language_regions.html' rel=\"noopener\">aboriginal_language_regions.html<\/a> changed as per <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html--GETME\" title='aboriginal_language_regions.html' rel=\"noopener\">this link<\/a> from yesterday.<\/p>\n<p>The changes to Javascript code as per <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.js--GETME\" title='aboriginal_language_regions.js' rel=\"noopener\">aboriginal_language_regions.js<\/a> are reflected by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.js--GETME\" title='aboriginal_language_regions.js' rel=\"noopener\">this link<\/a> from yesterday.<\/p>\n<p>The fairly simple external CSS code file could be called <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.css_GETME\" title='aboriginal_language_regions.css' rel=\"noopener\">aboriginal_language_regions.css<\/a><\/p>\n<p>Yesterday we presented <a target=\"_blank\" title='Australian Indigenous Language Image Map Checkbox Tutorial' href='#ailimct' rel=\"noopener\">Australian Indigenous Language Image Map Checkbox Tutorial<\/a> as shown below.  The checkboxes are added to become &#8230;<\/p>\n<ol>\n<li>Images (will result in Google Image Search)<\/li>\n<li>Videos (will result in Google Video Search (if no Image Searching is happening))<\/li>\n<li>Map (onclick) (will additionally result in popup window of Google Map Chart (see also <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=4832' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Tutorial<\/a>) of the tribal area)<\/li>\n<li>Map (onhover) (will additionally, via Ajax functionality, result in popup window of Google Map Chart (see also <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=4832' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Tutorial<\/a>) of the tribal area)<\/li>\n<\/ol>\n<p>It is this last functionality that will not work on mobile platforms, most likely, because the <i>onmouseover<\/i> event they use doesn&#8217;t happen with touch platforms.<\/p>\n<p>You can try the web application as it stands now with our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/\" title='Click picture' rel=\"noopener\">line run<\/a> link.<\/p>\n<hr>\n<p id='ailimct'>Previous relevant <a target=\"_blank\" title='Australian Indigenous Language Image Map Checkbox Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-image-map-checkbox-tutorial\/' rel=\"noopener\">Australian Indigenous Language Image Map Checkbox 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\/ImageMap\/Languages\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Indigenous Language Image Map Checkbox Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/indigenouslanguagescb.jpg\" title=\"Australian Indigenous Language Image Map Checkbox Tutorial\"  style=\"float:left;\" id='icb' onmouseover=\" this.src=this.src.replace('.jpg', '.xgif').replace('.gif', '.xjpg').replace('.x', '.');  \"  \/><\/a><p class=\"wp-caption-text\">Australian Indigenous Language Image Map Checkbox Tutorial<\/p><\/div>\n<p>Like yesterday, today we mix geography and history in an image <a target=\"_blank\" title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp' rel=\"noopener\">map<\/a> web application exploring Indigenous Australian Language, History and Culture, <a target=\"_blank\" title='the oldest surviving culture in the world' href='http:\/\/www.aboriginalculture.com.au\/' rel=\"noopener\">&#8220;the oldest surviving culture in the world&#8221;<\/a>.  Today&#8217;s tutorial, extending on yesterday&#8217;s <a href='#ailimdt' title='Australian Indigenous Language Image Map Dropdown Tutorial'>Australian Indigenous Language Image Map Dropdown Tutorial<\/a> continues the Javascript DOM methodology, and shows the use of checkboxes.<\/p>\n<p>The HTML input tag&#8217;s <a target=\"_blank\" title='HTML input tag type checkbox information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/dom_obj_checkbox.asp' rel=\"noopener\">checkbox<\/a> type is a &#8220;binary&#8221; decision maker, boiling down to a yes\/no (or true\/false) decision on something.  A related HTML input tag type is called the radio button, which allows two or more choices, only one of which can be yes (or true).  Checkboxes are more independent than <a target=\"_blank\" title='HTML input tag type radio button information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/dom_obj_radio.asp' rel=\"noopener\">radio buttons<\/a>, and perhaps more generically useful in that respect.  However, if stringency and transparency of purpose is what you are after, a radio button leaves no doubt as to interpretation for the user, usually, because the element can only highlight at most one option.<\/p>\n<p>Our checkboxes today are for &#8230;<\/p>\n<ol>\n<li>Images (will result in Google Image Search)<\/li>\n<li>Videos (will result in Google Video Search (if no Image Searching is happening))<\/li>\n<li>Map (will additionally result in popup window of Google Map Chart (see also <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Map Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=4832' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Map Tutorial<\/a>) of the tribal area)<\/li>\n<\/ol>\n<p>As you can see, there is more complication here that a radio button, on its own, cannot resolve.<\/p>\n<p>Just reviewing how we got here &#8230; we established a &#8220;MobileFish&#8221; inspired HTML map element scenario with the following components &#8230;<\/p>\n<ul>\n<li>a brilliant piece of research from the University of Western Sydney and ending up on the <a target=\"_blank\" href='http:\/\/treatyrepublic.net' rel=\"noopener\">TreatyRepublic.net<\/a> website as a map image &#8230; thanks<\/li>\n<li>using the wonderful <a target=\"_blank\" title='MobileFish imape map creator helper ... thanks' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php' rel=\"noopener\">MobileFish<\/a> image map (HTML element) creator helper &#8230; thanks<\/li>\n<\/ul>\n<p>From there we&#8217;ve been developing external Javascript to allow a dropdown and checkboxes, with minimal change to that originally written HTML, and without resorting to PHP usage.<\/p>\n<p>So please take a look at today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/\" title='Click picture' rel=\"noopener\">live run<\/a> (HTML source code (you could call) <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html-GETME\" title='aboriginal_language_regions.html' rel=\"noopener\">aboriginal_language_regions.html<\/a> unchanged from yesterday, and calling on the external Javascript <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.js-GETME\" title='aboriginal_language_regions.js' rel=\"noopener\">aboriginal_language_regions.js<\/a> changed as per <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.js-GETME\" title='aboriginal_language_regions.js' rel=\"noopener\">this link<\/a> from yesterday) where we add those three new checkbox elements to refine our Google Search information, and add &#8220;map&#8221; functionality via Google Map Chart.<\/p>\n<hr>\n<p id='ailimdt'>Previous relevant <a target=\"_blank\" title='Australian Indigenous Language Image Map Dropdown Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-image-map-dropdown-tutorial\/' rel=\"noopener\">Australian Indigenous Language Image Map Dropdown 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\/ImageMap\/Languages\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Indigenous Language Image Map Dropdown Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/indigenouslanguagesmore.jpg\" title=\"Australian Indigenous Language Image Map Dropdown Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Australian Indigenous Language Image Map Dropdown Tutorial<\/p><\/div>\n<p>Today we mix geography and history in an image <a target=\"_blank\" title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp' rel=\"noopener\">map<\/a> web application exploring Indigenous Australian Language, History and Culture.  We&#8217;ll be devoting a blog posting to the subject in the future, but today&#8217;s tutorial, extending on yesterday&#8217;s <a href='#ailimpt' title='Australian Indigenous Language Image Map Primer Tutorial'>Australian Indigenous Language Image Map Primer Tutorial<\/a> and its promise of more Javascript DOM functionality to follow, uses a Javascript DOM technique we term here, the &#8220;Javascript DOM Big Changes&#8221; technique, which is the idea of manipulating &#8220;document.body.innerHTML&#8221; as a whole.<\/p>\n<p>This technique of manipulating &#8220;document.body.innerHTML&#8221; as a whole is all fine to do, but you should remember with it that values the user has set, since, with dropdown selection, for instance, need to be taken into account, as a separate stage afterwards, with this method &#8230; you&#8217;ll see what we mean &#8230;<\/p>\n<p><a target=\"_blank\" title=\"Introduction to Australia's Aboriginal Culture\" href='http:\/\/www.aboriginalculture.com.au\/' rel=\"noopener\">Introduction to Australia&#8217;s Aboriginal Culture<\/a> by David M. Welch. &#8230; Aboriginal culture probably represents the oldest surviving culture in the world<\/p>\n<p><code><br \/>\nfunction selchange(osel) {<br \/>\n  var ov=osel.value;<br \/>\n  var oi=osel.id;<br \/>\n  document.body.innerHTML = document.body.innerHTML.replace(\/\" target=\"_blank\"\/g, \"+'\" + ov.replace(\/ \/g, \"%20\") + \"'\" + '\" target=\"_blank\"');<br \/>\n  document.getElementById(oi).value = ov;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; in code above, for the dropdown&#8217;s &#8220;onchange&#8221; event logic &#8230; or by trying your own scenarios &#8230; which am 100% certain you&#8217;ll be beavering away at within minutes of reading today&#8217;s offering?!<\/p>\n<p>Is the &#8220;document.body.innerHTML&#8221; a refresh?  It sort of acts like one, but it is more as well, because you have your own logic controls over what gets &#8220;refreshed into&#8221; &#8230; something a little more comfortable, perhaps?!<\/p>\n<p>Now, back to the real world purpose of this technique.  Yesterday we established a &#8220;MobileFish&#8221; inspired HTML map element scenario with the following components &#8230;<\/p>\n<ul>\n<li>a brilliant piece of research from the University of Western Sydney and ending up on the <a target=\"_blank\" href='http:\/\/treatyrepublic.net' rel=\"noopener\">TreatyRepublic.net<\/a> website as a map image &#8230; thanks<\/li>\n<li>using the wonderful <a target=\"_blank\" title='MobileFish imape map creator helper ... thanks' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php' rel=\"noopener\">MobileFish<\/a> image map (HTML element) creator helper &#8230; thanks<\/li>\n<\/ul>\n<p> &#8230; so now we virtually leave that HTML intact and only mildly changed, and do not use PHP, no matter how tempting that is for me to do, and use Javascript on that existant HTML (which, by the way, will eventually be fleshed out to avoid &#8216;Under construction&#8217; messages, eventually) to perform significant functional improvements.  This Javascript is external Javascript, hence the minimalist approach to changes to the HTML.<\/p>\n<p>So take a look at today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/\" title='Click picture' rel=\"noopener\">live run<\/a> (HTML source code (you could call) <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html-GETME\" title='aboriginal_language_regions.html' rel=\"noopener\">aboriginal_language_regions.html<\/a> changed as per <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html-GETME\" title='aboriginal_language_regions.html' rel=\"noopener\">this link<\/a> from yesterday, and calling on the external Javascript <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.js_GETME\" title='aboriginal_language_regions.js' rel=\"noopener\">aboriginal_language_regions.js<\/a>) where we add the dropdown HTML select element at the top to refine our Google Search information.<\/p>\n<hr>\n<p id='ailimpt'>Previous relevant <a target=\"_blank\" title='Australian Indigenous Language Image Map Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-image-map-primer-tutorial\/' rel=\"noopener\">Australian Indigenous Language Image Map 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\/ImageMap\/Languages\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Indigenous Language Image Map Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/indigenouslanguagemap.jpg\" title=\"Australian Indigenous Language Image Map Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Australian Indigenous Language Image Map Primer Tutorial<\/p><\/div>\n<p>We want to show more ideas with Javascript DOM and the HTML <a target=\"_blank\" title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp' rel=\"noopener\">map<\/a> element over coming days.<\/p>\n<p>The HTML map element is a very useful way to combine a graphical image with web functionality, by turning that image into a clickable, by region, entity.<\/p>\n<p>For the theme of work over the next few days we combine history and geography.  Remember at school that history and geography were choices at a certain stage of schooling, but today, we try to use geography to foster an interest in history &#8230; after all, where we live is really important to how history pans out for society.<\/p>\n<p>Was inspired by a story of a several meter high atlas that is currently on display in our New South Wales library &#8230; and it takes two people to turn a page, else the weight of the page will tear it with only one person turning.<\/p>\n<p>This thought of maps combined with me with a story about how diverse and interesting our Australian Indigenous Languages are here in Australia.  There are hundreds of languages involved in Australia&#8217;s history, though we often only think of English &#8230; so take a look at today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/\" title='Click picture' rel=\"noopener\">live run<\/a> (HTML source code (you could call) <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html_GETME\" title='aboriginal_language_regions.html' rel=\"noopener\">aboriginal_language_regions.html<\/a>) where we show &#8230;<\/p>\n<ul>\n<li>a brilliant piece of research from the University of Western Sydney and ending up on the <a target=\"_blank\" href='http:\/\/treatyrepublic.net' rel=\"noopener\">TreatyRepublic.net<\/a> website as a map image &#8230; thanks<\/li>\n<li>using the wonderful <a target=\"_blank\" title='MobileFish imape map creator helper ... thanks' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php' rel=\"noopener\">MobileFish<\/a> image map (HTML element) creator helper &#8230; thanks<\/li>\n<\/ul>\n<p> &#8230; to set up that initial additional &#8220;onclick&#8221; intelligence that takes you to some Google search engine opportunities to link a region of Australia with an indigenous tribe (and its language), as a first step in the functionality we develop over time.<\/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='#d15539' onclick='var dv=document.getElementById(\"d15539\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=HTML\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15539' 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='#d15564' onclick='var dv=document.getElementById(\"d15564\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=DOM\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15564' 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='#d15572' onclick='var dv=document.getElementById(\"d15572\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15572' 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='#d15596' onclick='var dv=document.getElementById(\"d15596\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15596' 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='#d15616' onclick='var dv=document.getElementById(\"d15616\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=jquery\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15616' 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='#d50768' onclick='var dv=document.getElementById(\"d50768\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/trove\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50768' 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='#d60339' onclick='var dv=document.getElementById(\"d60339\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/drag-and-drop\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60339' 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='#d70986' onclick='var dv=document.getElementById(\"d70986\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-earth\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d70986' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today, we&#8217;re revisiting the Australian Indigenous Language web application mentioned in the recent Australian Indigenous Language Drag and Drop Tutorial to add into the SVG overlay related display links to &#8230; Google Maps &#8230; and &#8230; Google Earth &#8230; adding &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-google-earth-integration-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,30,37],"tags":[5361,114,409,481,524,527,576,592,5360,614,2882,652,1560,684,719,745,1616,1836,997,1125,1168,1200,1226,5362,1282,1319],"class_list":["post-70986","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-photography","category-tutorials","tag-aborigines","tag-australia","tag-external-javascript","tag-geographicals","tag-google-earth","tag-google-maps","tag-html","tag-image-map","tag-indegenous","tag-integration","tag-intervention","tag-javascript","tag-language","tag-latitude","tag-longitude","tag-map","tag-modularization","tag-override","tag-programming","tag-setinterval","tag-software-integration","tag-stop-press","tag-svg","tag-terrain","tag-timer","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/70986"}],"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=70986"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/70986\/revisions"}],"predecessor-version":[{"id":71007,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/70986\/revisions\/71007"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=70986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=70986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=70986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}