Region Picker Double Click Tutorial

Region Picker Double Click Tutorial

Region Picker Double Click Tutorial

You might have gleaned from recent blog posts in the thread leading up to yesterday’s Region Picker Hashtag Navigation Tutorial that, regarding web applications/webpages, even though a few years back we’d have been horrified to say it …

  • we like to use the ondblclick event (especially in a multi-purpose button press way) … and in this context …
  • we don’t mind having to use event.stopPropagation() anymore (ie. we used to not get sleep for days worrying about it) (when you want to stop the event bubbling down to a parent element) …
  • we like to use colour coding … and …
  • we don’t mind window.open (with a third argument and so, on non-mobile is a) popup window usage

But that’s just us. We’ll leave it to you to look into all these more, as far as favour, or not, goes with the search engines.

We see the ondblclick event as being in the same line of thinking as the onclick event is (doh!) in the sense that mobile and non-mobile platforms understand it, as distinct from the divide between the touch “gesture” events and the mouse events. And it may be just me, but web browsers seem better with it these days. Maybe just wishful thinking on that last point, for me, though?!

Today, we’ve got another “multipurpose scenario” for an ondblclick event logic coding …


if (sofar != '') {
if (window.self == window.parent && eval('' + screen.width) > 1000) {
document.getElementById('rmore').innerHTML=prebut + '<button id=mychart ondblclick="event.stopPropagation(); dcdomc();" onclick=domc(); style=background-color:' + iccol + ';>Image Chart Map Chart <br><font size=1>(double click uses new window)</font><br> ... showing ...</button><br><br><p id=myp title="' + sofardetail + '">' + sofar.replace(/\|/g, '<br>');
} else {
document.getElementById('subrmore').innerHTML=prebut + '<button id=mychart ondblclick="event.stopPropagation(); dcdomc();" onclick=domc(); style=background-color:' + iccol + ';>Image Chart Map Chart <br><font size=1>(double click uses new window)</font><br> ... showing ...</button><br><br><p id=myp title="' + sofardetail + '">' + sofar.replace(/\|/g, '<br>');
}
}

… calling new


function dcdomc() {
// <img data-onload="canvit(this);" onclick="if (atstart) { normalcall=false; ask(null); normalcall=true; atstart=false; } else { ask(event); }" title="Google Chart Image Chart " +="" cname="" '="" image="" ...="" to="" modify,="" please="" click'="" id="myvenn" width="455" height="350" data-style="display:block;width:455px;height:743px;background:url(//www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&ufr=_4179574);background-size:cover;" src="//www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&ufr=_4179574" usemap="#mymap">
//var x=prompt('www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274', 'www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274');
if (document.getElementById('mychart')) {
document.getElementById('mychart').style.backgroundColor='orange';
iccol='orange';
}
if (document.getElementById('mychchart')) {
document.getElementById('mychchart').style.backgroundColor='orange';
jccol='orange';
}
var theurlis='//www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=' + enough('B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274',sofar);
dbwo=window.open(theurlis,'_blank','top=50,left=50,width=600,height=600');

document.getElementById('tdleft').style.backgroundImage='URL("' + theurlis + '")';
document.getElementById('tdleft').style.backgroundRepeat='no-repeat';
if (window.self == window.parent && eval('' + screen.width) > 1000 || document.URL.indexOf('?right=') != -1) {
document.getElementById('tdleft').style.backgroundPosition='right top';
} else {
document.getElementById('tdleft').style.backgroundPosition='center top';
}
document.getElementById('tdleft').title='Double click for new window version of ...' + String.fromCharCode(10) + String.fromCharCode(10) + sofardetail.replace(/\|/g, String.fromCharCode(10));
document.getElementById('tdleft').style.backgroundRepeat='no-repeat';
opacitytoggling(1.0, 0.1);
setTimeout(function(){ opacitytoggling(1.0, -0.1); }, 2100);
if (!dbdone) {
dbdone=true;
//document.getElementById('tdleft').ondblclick=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL("')[1].split('"')[0],'_blank','top=50,left=50,width=700,height=600'); };
//document.getElementById('tdleft').oncontextmenu=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL("')[1].split('"')[0],'_blank','top=50,left=50,width=700,height=600'); };
//document.body.oncontextmenu=function(){ window.open(document.getElementById('tdleft').style.background.split('URL("')[1].split('"')[0],'_blank','top=50,left=50,width=700,height=600'); };
}
window.scrollTo(0,0);
}

… in the changed “fourth draft” Region Picker, where we are building up a menu system tailored to region/country lookups.

Am sure some of you are onto tomorrow’s plan, given today’s work?! We’ll see what tomorrow brings!


Previous relevant Region Picker Geo Chart Integration Tutorial is shown below.

Region Picker Geo Chart Integration Tutorial

Region Picker Geo Chart Integration Tutorial

We’re tickled pink with our integration of yesterday’s Region Picker Primer Tutorial

  • Region Picker web application … into …
  • Geo Chart interfacer

… in that we’ve done better than the natural Geo Chart navigation without the Region Picker, which navigates to a new URL slapped onto the same web browser tab. With our integration we have …

  • Geo Chart interfacer parent “base layer” (with as little as one prompt window required) … and if called upon “above this” …
  • Region Picker web application nested in an “overlay iframe” (with large CSS z-index value covering the whole screen) … asks (for as little as) one more verifying prompt window question … and that same tab window content becomes the final …
  • Geo Chart interfacer result web page

And seeing the country regional codes in play, the possibilities mount up here! The user just includes …

&regionpicker

… in a prompt window answer to start using Region Pickers in their user inputs.

Codewise we needed …

  • to change “second draft” Region Picker … might ask that one verifying prompt window in …

    function gcdomc() {
    var clauses='', popularity='Popularity', extras='';
    // <img data-onload="canvit(this);" onclick="if (atstart) { normalcall=false; ask(null); normalcall=true; atstart=false; } else { ask(event); }" title="Google Chart Image Chart " +="" cname="" '="" image="" ...="" to="" modify,="" please="" click'="" id="myvenn" width="455" height="350" data-style="display:block;width:455px;height:743px;background:url(//www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&ufr=_4179574);background-size:cover;" src="//www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&ufr=_4179574" usemap="#mymap">
    //var x=prompt('www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274', 'www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274');
    if (document.getElementById('mychchart')) {
    document.getElementById('mychchart').style.backgroundColor='orange';
    jccol='orange';
    }
    if (gwl == '' && document.URL.indexOf('?') != -1) {
    gwl='//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?' + document.URL.split('?')[1].split('#')[0].replace(/\&data\=$/g, '');
    if (document.URL.indexOf('popularity=') != -1) {
    popularity=decodeURIComponent(document.URL.split('popularity=')[1].split('&')[0].split('#')[0]);
    }
    }
    var agwl=gwl.split('&');
    for (var iig=1; iig<agwl.length; iig++) {
    if (iig == 1) { clauses=String.fromCharCode(10); }
    if (agwl[iig] != 'data=' && agwl[iig].indexOf('regionpicker') == -1) {
    clauses+='&' + agwl[iig] + String.fromCharCode(10);
    }
    }
    //if (clauses != '') { clauses+=String.fromCharCode(10); }
    gwocont=sofar;
    if (gwocont != '') {
    var xgwocont=null;
    if (1 == 1) {
    var setstuff='';
    if (gwl.indexOf('&data=') == -1) { setstuff='&data='; } else { extras=' (if &data= change prefix that in below appropriately)'; }
    var plis=('' + gwocont).split('|');
    for (var iplis=0; iplis<plis.length; iplis++) {
    if (setstuff == '') {
    setstuff='%20[~' + plis[iplis] + '~,2]';
    } else {
    setstuff+='%20,%20[~' + plis[iplis] + '~,2]';
    }
    }
    try {
    xgwocont=prompt('Please amend as necessary where each of those 2 values are what we have so far assigned for the ' + popularity + ' value for each region/country. As necessary add in any amended ' + clauses + ' ideas too' + extras + '.', setstuff);
    } catch(hjgdf) { xgwocont=null; }
    }
    if (xgwocont == null) { lastgwcont=gwocont; xgwocont=''; }
    gwocont=xgwocont;
    if (xgwocont != '') {
    //alert('gwl=' + gwl);
    var lateragwl=xgwocont.replace(/\ /g, '%20').split('&');
    for (var jig=1; jig<lateragwl.length; jig++) {
    if (gwl.indexOf('&' + lateragwl[jig].split('=')[0] + '=') != -1) {
    gwl=gwl.replace('&' + lateragwl[jig].split('=')[0] + '=' + gwl.split('&' + lateragwl[jig].split('=')[0] + '=')[1].split('&')[0].split('#')[0], '');
    }
    }
    lhref=ourtoolong(gwl + xgwocont.replace(/\ /g, '%20'));
    if (lhref != '') {
    location.href=lhref;
    }
    }
    }
    document.getElementById('tdleft').style.backgroundImage='URL("//www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=' + enough('B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274',sofar) + '")';
    document.getElementById('tdleft').style.backgroundRepeat='no-repeat';
    if (window.self == window.parent && eval('' + screen.width) > 1000 || document.URL.indexOf('?right=') != -1) {
    document.getElementById('tdleft').style.backgroundPosition='right top';
    } else {
    document.getElementById('tdleft').style.backgroundPosition='center top';
    }
    document.getElementById('tdleft').title='Double click for new window version of ...' + String.fromCharCode(10) + String.fromCharCode(10) + sofardetail.replace(/\|/g, String.fromCharCode(10));
    document.getElementById('tdleft').style.backgroundRepeat='no-repeat';
    if (!dbdone) {
    dbdone=true;
    //document.getElementById('tdleft').ondblclick=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL("')[1].split('"')[0],'_blank','top=50,left=50,width=700,height=600'); };
    //document.getElementById('tdleft').oncontextmenu=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL("')[1].split('"')[0],'_blank','top=50,left=50,width=700,height=600'); };
    //document.body.oncontextmenu=function(){ window.open(document.getElementById('tdleft').style.background.split('URL("')[1].split('"')[0],'_blank','top=50,left=50,width=700,height=600'); };
    }
    window.scrollTo(0,0);
    }

    … and …
  • to change geo_chart.php Geo Chart interfacer … calls on the Region Picker in this new Javascript function …
    <?php echo ”

    function winopen(oneurl, twotarget, threerest) {
    var hmore='';
    if (gwl != '' && gwl.indexOf('?') != -1 && oneurl.indexOf(gwl) == -1 && oneurl.indexOf('?') != -1) {
    //alert(oneurl + '&' + gwl.split('?')[1]);
    if (decodeURIComponent(('' + location.hash)).indexOf('title=') != -1) {
    hmore='&' + decodeURIComponent(('' + location.hash).replace(/^\#/g, '')).replace(/\ /g,'%20');
    if (hmore.indexOf('&width=') == -1) { hmore+='&width=556'; }
    if (hmore.indexOf('&height=') == -1) { hmore+='&height=347'; }
    if (hmore.indexOf('&country=') == -1) { hmore+='&country=Country'; }
    if (hmore.indexOf('&popularity=') == -1) { hmore+='&popularity=Popularity'; }
    if (hmore.indexOf('&data=') == -1) { hmore+='&data='; }
    }
    document.getElementById(twotarget).src=oneurl + '&' + gwl.split('?')[1] + hmore;
    } else if (decodeURIComponent(('' + location.hash)).indexOf('title=') != -1) {
    hmore='&' + decodeURIComponent(('' + location.hash).replace(/^\#/g, '')).replace(/\ /g,'%20');
    if (hmore.indexOf('&width=') == -1) { hmore+='&width=556'; }
    if (hmore.indexOf('&height=') == -1) { hmore+='&height=347'; }
    if (hmore.indexOf('&country=') == -1) { hmore+='&country=Country'; }
    if (hmore.indexOf('&popularity=') == -1) { hmore+='&popularity=Popularity'; }
    if (hmore.indexOf('&data=') == -1) { hmore+='&data='; }
    document.getElementById(twotarget).src=oneurl + hmore;
    } else {
    document.getElementById(twotarget).src=oneurl;
    }
    return document.getElementById(twotarget);
    }

    “; ?>


Previous relevant Region Picker Primer Tutorial is shown below.

Region Picker Primer Tutorial

Region Picker Primer Tutorial

All the Geo Chart and Image Chart Map Chart work recently, along with Wikipedia ISO-3166 regional and country coding help (thanks), has set us on the road towards a …


Region Picker

… online tool, which we envisage will …

  • initially be a standalone HTML webpage … and later be …
  • integrated into the user input phase of the Geo Chart interfacer

So here we are today with the “first draft” standalone version, where we’ve used Pulldown Menus, you can read more about at HTML/CSS/Javascript Pulldown Menus Javascript Tutorial, to construct a Region/Country ISO code vertical bar delimited list of regions/continents that you can display in an Image Chart Map Chart …

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.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Region Picker Hashtag Navigation Tutorial

Region Picker Hashtag Navigation Tutorial

Region Picker Hashtag Navigation Tutorial

Isn’t yesterday’s Region Picker Geo Chart Integration Tutorial already full of hashtag navigation? Yes, very much so. There are lots of areas where we try to control scrolling positions and background image positions, with varying degrees of success, the narrower the screen width, the harder it is to achieve a happy scenario for every user. Hence, today’s ….

  • new dynamic opacity changes …

    function opacitytoggling(morestartingat, less) {
    var doct='here at opacitytoggling ... ';
    if (Math.abs(eval('' + morestartingat) - 1.0) < 0.015) {
    if (less < 0) {
    if (document.getElementById('more')) {
    document.getElementById('more').style.opacity='0.98';
    doct+='0.98';
    }
    if (document.getElementById('subrmore')) {
    document.getElementById('subrmore').style.opacity='0.98';
    doct+='0.98';
    }
    nextless=less;
    //document.title=doct;
    setTimeout(function(){ opacitytoggling(0.98, nextless); }, 400);
    } else {
    nextless=-0.101;
    if (document.getElementById('more')) {
    document.getElementById('more').style.opacity='1.0';
    doct+='1.0';
    }
    if (document.getElementById('subrmore')) {
    document.getElementById('subrmore').style.opacity='1.0';
    doct+='1.0';
    }
    }
    // document.title=doct;
    } else if (eval(Math.abs(eval('' + nextless)) - 0.1) < 0.0004) {
    nextless=less;
    nextval=eval(less + eval('' + morestartingat));
    if (nextval < 0.0) {
    nextless=0.1;
    nextval=eval(eval('' + morestartingat) + 0.1);
    if (document.getElementById('more')) {
    document.getElementById('more').style.opacity='' + (nextval == 0.08 ? 0.0 : nextval);
    doct+=nextval;
    }
    if (document.getElementById('subrmore')) {
    document.getElementById('subrmore').style.opacity='' + (nextval == 0.08 ? 0.0 : nextval);
    doct+=nextval;
    }
    //document.title=doct;
    if (nextval == 0.18) {
    setTimeout(function(){ opacitytoggling(nextval, nextless); }, 12000);
    } else {
    setTimeout(function(){ opacitytoggling(nextval, nextless); }, 2000);
    }
    } else if (nextval > 1.0) {
    nextless=-0.1;
    nextval=eval(-0.1 + eval('' + morestarting));
    if (document.getElementById('more')) {
    document.getElementById('more').style.opacity='' + (nextval == 0.08 ? 0.0 : nextval);
    }
    if (document.getElementById('subrmore')) {
    document.getElementById('subrmore').style.opacity='' + (nextval == 0.08 ? 0.0 : nextval);
    doct+=nextval;
    }
    //document.title=doct;
    if (nextval == 0.18) {
    setTimeout(function(){ opacitytoggling(nextval, nextless); }, 12000);
    } else {
    setTimeout(function(){ opacitytoggling(nextval, nextless); }, 2000);
    }
    } else {
    if (document.getElementById('more')) {
    document.getElementById('more').style.opacity='' + (nextval == 0.08 ? 0.0 : nextval);
    doct+=nextval;
    }
    if (document.getElementById('subrmore')) {
    document.getElementById('subrmore').style.opacity='' + (nextval == 0.08 ? 0.0 : nextval);
    doct+=nextval;
    }
    //document.title=doct;
    if (nextval == 0.18) {
    setTimeout(function(){ opacitytoggling(nextval, nextless); }, 12000);
    } else {
    setTimeout(function(){ opacitytoggling(nextval, nextless); }, 2000);
    }
    }
    } //else {
    //document.title=doct;
    //}

    }

    … to help see through to any backgrounded image charts … and adding to hashtag based functionality …
  • a new letter based set of “a” hashtag navigation links to be able to navigate down to the first country with a letter start

    for(var xi=0; xi<xelms.length; xi++){
    if (eval(('' + xelms[xi].id).length) == 3) {
    if (('' + xelms[xi].innerHTML).substring(0).substring(0,1) >= nexttodo) {
    ournext=('' + xelms[xi].innerHTML).substring(0).substring(0,1)
    //alert('nexttodo=' + nexttodo + ' andpleasedonotbeequalveryoften ournext=' + ournext + ' and ' + xelms[xi].id);
    while (nexttodo < ournext) {
    nextih+=' <a style=color:blue;z-index:786; href="#' + xelms[xi].id + '">' + nexttodo + '</a>';
    nexttodo=String.fromCharCode(1 + nexttodo.charCodeAt(0));
    //alert('Nexttodo=' + nexttodo + ' and ournext=' + ournext + ' and ' + xelms[xi].id);
    }
    if (nexttodo <= 'Z') {
    nextih+=' <a style=color:blue;z-index:786; href="#' + xelms[xi].id + '">' + nexttodo + '</a>';
    nexttodo=String.fromCharCode(1 + nexttodo.charCodeAt(0));
    }
    } //else {
    //alert('no for nexttodo=' + nexttodo + ' and ournext=' + ournext + ' and ' + xelms[xi].id);
    //}
    }

    // rest of usual code in the for loop follows
    }

    … and, a nuance, sure, but …
  • now “and that same tab window content becomes the final” is still the case but if the URL is small enough we now go

    top.location.href=lhref;

    … so that a user might have a chance for their own retweaks back at the web browser’s address bar

Small changes, but fixes to some of the annoyances in the changed “third draft” Region Picker.


Previous relevant Region Picker Geo Chart Integration Tutorial is shown below.

Region Picker Geo Chart Integration Tutorial

Region Picker Geo Chart Integration Tutorial

We’re tickled pink with our integration of yesterday’s Region Picker Primer Tutorial

  • Region Picker web application … into …
  • Geo Chart interfacer

… in that we’ve done better than the natural Geo Chart navigation without the Region Picker, which navigates to a new URL slapped onto the same web browser tab. With our integration we have …

  • Geo Chart interfacer parent “base layer” (with as little as one prompt window required) … and if called upon “above this” …
  • Region Picker web application nested in an “overlay iframe” (with large CSS z-index value covering the whole screen) … asks (for as little as) one more verifying prompt window question … and that same tab window content becomes the final …
  • Geo Chart interfacer result web page

And seeing the country regional codes in play, the possibilities mount up here! The user just includes …

&regionpicker

… in a prompt window answer to start using Region Pickers in their user inputs.

Codewise we needed …

  • to change “second draft” Region Picker … might ask that one verifying prompt window in …

    function gcdomc() {
    var clauses='', popularity='Popularity', extras='';
    // <img data-onload="canvit(this);" onclick="if (atstart) { normalcall=false; ask(null); normalcall=true; atstart=false; } else { ask(event); }" title="Google Chart Image Chart " +="" cname="" '="" image="" ...="" to="" modify,="" please="" click'="" id="myvenn" width="455" height="350" data-style="display:block;width:455px;height:743px;background:url(//www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&ufr=_4179574);background-size:cover;" src="//www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&ufr=_4179574" usemap="#mymap">
    //var x=prompt('www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274', 'www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274');
    if (document.getElementById('mychchart')) {
    document.getElementById('mychchart').style.backgroundColor='orange';
    jccol='orange';
    }
    if (gwl == '' && document.URL.indexOf('?') != -1) {
    gwl='//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?' + document.URL.split('?')[1].split('#')[0].replace(/\&data\=$/g, '');
    if (document.URL.indexOf('popularity=') != -1) {
    popularity=decodeURIComponent(document.URL.split('popularity=')[1].split('&')[0].split('#')[0]);
    }
    }
    var agwl=gwl.split('&');
    for (var iig=1; iig<agwl.length; iig++) {
    if (iig == 1) { clauses=String.fromCharCode(10); }
    if (agwl[iig] != 'data=' && agwl[iig].indexOf('regionpicker') == -1) {
    clauses+='&' + agwl[iig] + String.fromCharCode(10);
    }
    }
    //if (clauses != '') { clauses+=String.fromCharCode(10); }
    gwocont=sofar;
    if (gwocont != '') {
    var xgwocont=null;
    if (1 == 1) {
    var setstuff='';
    if (gwl.indexOf('&data=') == -1) { setstuff='&data='; } else { extras=' (if &data= change prefix that in below appropriately)'; }
    var plis=('' + gwocont).split('|');
    for (var iplis=0; iplis<plis.length; iplis++) {
    if (setstuff == '') {
    setstuff='%20[~' + plis[iplis] + '~,2]';
    } else {
    setstuff+='%20,%20[~' + plis[iplis] + '~,2]';
    }
    }
    try {
    xgwocont=prompt('Please amend as necessary where each of those 2 values are what we have so far assigned for the ' + popularity + ' value for each region/country. As necessary add in any amended ' + clauses + ' ideas too' + extras + '.', setstuff);
    } catch(hjgdf) { xgwocont=null; }
    }
    if (xgwocont == null) { lastgwcont=gwocont; xgwocont=''; }
    gwocont=xgwocont;
    if (xgwocont != '') {
    //alert('gwl=' + gwl);
    var lateragwl=xgwocont.replace(/\ /g, '%20').split('&');
    for (var jig=1; jig<lateragwl.length; jig++) {
    if (gwl.indexOf('&' + lateragwl[jig].split('=')[0] + '=') != -1) {
    gwl=gwl.replace('&' + lateragwl[jig].split('=')[0] + '=' + gwl.split('&' + lateragwl[jig].split('=')[0] + '=')[1].split('&')[0].split('#')[0], '');
    }
    }
    lhref=ourtoolong(gwl + xgwocont.replace(/\ /g, '%20'));
    if (lhref != '') {
    location.href=lhref;
    }
    }
    }
    document.getElementById('tdleft').style.backgroundImage='URL("//www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=' + enough('B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274',sofar) + '")';
    document.getElementById('tdleft').style.backgroundRepeat='no-repeat';
    if (window.self == window.parent && eval('' + screen.width) > 1000 || document.URL.indexOf('?right=') != -1) {
    document.getElementById('tdleft').style.backgroundPosition='right top';
    } else {
    document.getElementById('tdleft').style.backgroundPosition='center top';
    }
    document.getElementById('tdleft').title='Double click for new window version of ...' + String.fromCharCode(10) + String.fromCharCode(10) + sofardetail.replace(/\|/g, String.fromCharCode(10));
    document.getElementById('tdleft').style.backgroundRepeat='no-repeat';
    if (!dbdone) {
    dbdone=true;
    //document.getElementById('tdleft').ondblclick=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL("')[1].split('"')[0],'_blank','top=50,left=50,width=700,height=600'); };
    //document.getElementById('tdleft').oncontextmenu=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL("')[1].split('"')[0],'_blank','top=50,left=50,width=700,height=600'); };
    //document.body.oncontextmenu=function(){ window.open(document.getElementById('tdleft').style.background.split('URL("')[1].split('"')[0],'_blank','top=50,left=50,width=700,height=600'); };
    }
    window.scrollTo(0,0);
    }

    … and …
  • to change geo_chart.php Geo Chart interfacer … calls on the Region Picker in this new Javascript function …
    <?php echo ”

    function winopen(oneurl, twotarget, threerest) {
    var hmore='';
    if (gwl != '' && gwl.indexOf('?') != -1 && oneurl.indexOf(gwl) == -1 && oneurl.indexOf('?') != -1) {
    //alert(oneurl + '&' + gwl.split('?')[1]);
    if (decodeURIComponent(('' + location.hash)).indexOf('title=') != -1) {
    hmore='&' + decodeURIComponent(('' + location.hash).replace(/^\#/g, '')).replace(/\ /g,'%20');
    if (hmore.indexOf('&width=') == -1) { hmore+='&width=556'; }
    if (hmore.indexOf('&height=') == -1) { hmore+='&height=347'; }
    if (hmore.indexOf('&country=') == -1) { hmore+='&country=Country'; }
    if (hmore.indexOf('&popularity=') == -1) { hmore+='&popularity=Popularity'; }
    if (hmore.indexOf('&data=') == -1) { hmore+='&data='; }
    }
    document.getElementById(twotarget).src=oneurl + '&' + gwl.split('?')[1] + hmore;
    } else if (decodeURIComponent(('' + location.hash)).indexOf('title=') != -1) {
    hmore='&' + decodeURIComponent(('' + location.hash).replace(/^\#/g, '')).replace(/\ /g,'%20');
    if (hmore.indexOf('&width=') == -1) { hmore+='&width=556'; }
    if (hmore.indexOf('&height=') == -1) { hmore+='&height=347'; }
    if (hmore.indexOf('&country=') == -1) { hmore+='&country=Country'; }
    if (hmore.indexOf('&popularity=') == -1) { hmore+='&popularity=Popularity'; }
    if (hmore.indexOf('&data=') == -1) { hmore+='&data='; }
    document.getElementById(twotarget).src=oneurl + hmore;
    } else {
    document.getElementById(twotarget).src=oneurl;
    }
    return document.getElementById(twotarget);
    }

    “; ?>


Previous relevant Region Picker Primer Tutorial is shown below.

Region Picker Primer Tutorial

Region Picker Primer Tutorial

All the Geo Chart and Image Chart Map Chart work recently, along with Wikipedia ISO-3166 regional and country coding help (thanks), has set us on the road towards a …


Region Picker

… online tool, which we envisage will …

  • initially be a standalone HTML webpage … and later be …
  • integrated into the user input phase of the Geo Chart interfacer

So here we are today with the “first draft” standalone version, where we’ve used Pulldown Menus, you can read more about at HTML/CSS/Javascript Pulldown Menus Javascript Tutorial, to construct a Region/Country ISO code vertical bar delimited list of regions/continents that you can display in an Image Chart Map Chart …

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.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Region Picker Geo Chart Integration Tutorial

Region Picker Geo Chart Integration Tutorial

Region Picker Geo Chart Integration Tutorial

We’re tickled pink with our integration of yesterday’s Region Picker Primer Tutorial

  • Region Picker web application … into …
  • Geo Chart interfacer

… in that we’ve done better than the natural Geo Chart navigation without the Region Picker, which navigates to a new URL slapped onto the same web browser tab. With our integration we have …

  • Geo Chart interfacer parent “base layer” (with as little as one prompt window required) … and if called upon “above this” …
  • Region Picker web application nested in an “overlay iframe” (with large CSS z-index value covering the whole screen) … asks (for as little as) one more verifying prompt window question … and that same tab window content becomes the final …
  • Geo Chart interfacer result web page

And seeing the country regional codes in play, the possibilities mount up here! The user just includes …

&regionpicker

… in a prompt window answer to start using Region Pickers in their user inputs.

Codewise we needed …

  • to change “second draft” Region Picker … might ask that one verifying prompt window in …

    function gcdomc() {
    var clauses='', popularity='Popularity', extras='';
    // <img data-onload="canvit(this);" onclick="if (atstart) { normalcall=false; ask(null); normalcall=true; atstart=false; } else { ask(event); }" title="Google Chart Image Chart " +="" cname="" '="" image="" ...="" to="" modify,="" please="" click'="" id="myvenn" width="455" height="350" data-style="display:block;width:455px;height:743px;background:url(//www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&ufr=_4179574);background-size:cover;" src="//www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&ufr=_4179574" usemap="#mymap">
    //var x=prompt('www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274', 'www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274');
    if (document.getElementById('mychchart')) {
    document.getElementById('mychchart').style.backgroundColor='orange';
    jccol='orange';
    }
    if (gwl == '' && document.URL.indexOf('?') != -1) {
    gwl='//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?' + document.URL.split('?')[1].split('#')[0].replace(/\&data\=$/g, '');
    if (document.URL.indexOf('popularity=') != -1) {
    popularity=decodeURIComponent(document.URL.split('popularity=')[1].split('&')[0].split('#')[0]);
    }
    }
    var agwl=gwl.split('&');
    for (var iig=1; iig<agwl.length; iig++) {
    if (iig == 1) { clauses=String.fromCharCode(10); }
    if (agwl[iig] != 'data=' && agwl[iig].indexOf('regionpicker') == -1) {
    clauses+='&' + agwl[iig] + String.fromCharCode(10);
    }
    }
    //if (clauses != '') { clauses+=String.fromCharCode(10); }
    gwocont=sofar;
    if (gwocont != '') {
    var xgwocont=null;
    if (1 == 1) {
    var setstuff='';
    if (gwl.indexOf('&data=') == -1) { setstuff='&data='; } else { extras=' (if &data= change prefix that in below appropriately)'; }
    var plis=('' + gwocont).split('|');
    for (var iplis=0; iplis<plis.length; iplis++) {
    if (setstuff == '') {
    setstuff='%20[~' + plis[iplis] + '~,2]';
    } else {
    setstuff+='%20,%20[~' + plis[iplis] + '~,2]';
    }
    }
    try {
    xgwocont=prompt('Please amend as necessary where each of those 2 values are what we have so far assigned for the ' + popularity + ' value for each region/country. As necessary add in any amended ' + clauses + ' ideas too' + extras + '.', setstuff);
    } catch(hjgdf) { xgwocont=null; }
    }
    if (xgwocont == null) { lastgwcont=gwocont; xgwocont=''; }
    gwocont=xgwocont;
    if (xgwocont != '') {
    //alert('gwl=' + gwl);
    var lateragwl=xgwocont.replace(/\ /g, '%20').split('&');
    for (var jig=1; jig<lateragwl.length; jig++) {
    if (gwl.indexOf('&' + lateragwl[jig].split('=')[0] + '=') != -1) {
    gwl=gwl.replace('&' + lateragwl[jig].split('=')[0] + '=' + gwl.split('&' + lateragwl[jig].split('=')[0] + '=')[1].split('&')[0].split('#')[0], '');
    }
    }
    lhref=ourtoolong(gwl + xgwocont.replace(/\ /g, '%20'));
    if (lhref != '') {
    location.href=lhref;
    }
    }
    }
    document.getElementById('tdleft').style.backgroundImage='URL("//www.rjmprogramming.com.au/ITblog/455/350/?cht=map&chld=' + encodeURIComponent(sofar) + '&chco=' + enough('B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274',sofar) + '")';
    document.getElementById('tdleft').style.backgroundRepeat='no-repeat';
    if (window.self == window.parent && eval('' + screen.width) > 1000 || document.URL.indexOf('?right=') != -1) {
    document.getElementById('tdleft').style.backgroundPosition='right top';
    } else {
    document.getElementById('tdleft').style.backgroundPosition='center top';
    }
    document.getElementById('tdleft').title='Double click for new window version of ...' + String.fromCharCode(10) + String.fromCharCode(10) + sofardetail.replace(/\|/g, String.fromCharCode(10));
    document.getElementById('tdleft').style.backgroundRepeat='no-repeat';
    if (!dbdone) {
    dbdone=true;
    //document.getElementById('tdleft').ondblclick=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL("')[1].split('"')[0],'_blank','top=50,left=50,width=700,height=600'); };
    //document.getElementById('tdleft').oncontextmenu=function(){ window.open(document.getElementById('tdleft').style.backgroundImage.split('URL("')[1].split('"')[0],'_blank','top=50,left=50,width=700,height=600'); };
    //document.body.oncontextmenu=function(){ window.open(document.getElementById('tdleft').style.background.split('URL("')[1].split('"')[0],'_blank','top=50,left=50,width=700,height=600'); };
    }
    window.scrollTo(0,0);
    }

    … and …
  • to change geo_chart.php Geo Chart interfacer … calls on the Region Picker in this new Javascript function …
    <?php echo ”

    function winopen(oneurl, twotarget, threerest) {
    var hmore='';
    if (gwl != '' && gwl.indexOf('?') != -1 && oneurl.indexOf(gwl) == -1 && oneurl.indexOf('?') != -1) {
    //alert(oneurl + '&' + gwl.split('?')[1]);
    if (decodeURIComponent(('' + location.hash)).indexOf('title=') != -1) {
    hmore='&' + decodeURIComponent(('' + location.hash).replace(/^\#/g, '')).replace(/\ /g,'%20');
    if (hmore.indexOf('&width=') == -1) { hmore+='&width=556'; }
    if (hmore.indexOf('&height=') == -1) { hmore+='&height=347'; }
    if (hmore.indexOf('&country=') == -1) { hmore+='&country=Country'; }
    if (hmore.indexOf('&popularity=') == -1) { hmore+='&popularity=Popularity'; }
    if (hmore.indexOf('&data=') == -1) { hmore+='&data='; }
    }
    document.getElementById(twotarget).src=oneurl + '&' + gwl.split('?')[1] + hmore;
    } else if (decodeURIComponent(('' + location.hash)).indexOf('title=') != -1) {
    hmore='&' + decodeURIComponent(('' + location.hash).replace(/^\#/g, '')).replace(/\ /g,'%20');
    if (hmore.indexOf('&width=') == -1) { hmore+='&width=556'; }
    if (hmore.indexOf('&height=') == -1) { hmore+='&height=347'; }
    if (hmore.indexOf('&country=') == -1) { hmore+='&country=Country'; }
    if (hmore.indexOf('&popularity=') == -1) { hmore+='&popularity=Popularity'; }
    if (hmore.indexOf('&data=') == -1) { hmore+='&data='; }
    document.getElementById(twotarget).src=oneurl + hmore;
    } else {
    document.getElementById(twotarget).src=oneurl;
    }
    return document.getElementById(twotarget);
    }

    “; ?>


Previous relevant Region Picker Primer Tutorial is shown below.

Region Picker Primer Tutorial

Region Picker Primer Tutorial

All the Geo Chart and Image Chart Map Chart work recently, along with Wikipedia ISO-3166 regional and country coding help (thanks), has set us on the road towards a …


Region Picker

… online tool, which we envisage will …

  • initially be a standalone HTML webpage … and later be …
  • integrated into the user input phase of the Geo Chart interfacer

So here we are today with the “first draft” standalone version, where we’ve used Pulldown Menus, you can read more about at HTML/CSS/Javascript Pulldown Menus Javascript Tutorial, to construct a Region/Country ISO code vertical bar delimited list of regions/continents that you can display in an Image Chart Map Chart …

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in Ajax, eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , | Leave a comment

Region Picker Primer Tutorial

Region Picker Primer Tutorial

Region Picker Primer Tutorial

All the Geo Chart and Image Chart Map Chart work recently, along with Wikipedia ISO-3166 regional and country coding help (thanks), has set us on the road towards a …


Region Picker

… online tool, which we envisage will …

  • initially be a standalone HTML webpage … and later be …
  • integrated into the user input phase of the Geo Chart interfacer

So here we are today with the “first draft” standalone version, where we’ve used Pulldown Menus, you can read more about at HTML/CSS/Javascript Pulldown Menus Javascript Tutorial, to construct a Region/Country ISO code vertical bar delimited list of regions/continents that you can display in an Image Chart Map Chart …

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , | Leave a comment

SOS Game Keyboard Tutorial

SOS Game Keyboard Tutorial

SOS Game Keyboard Tutorial

We’re not sure why we didn’t think about it in the first round of SOS Game creation sessions, but, further to the recent SOS Game Cursor Tutorial

  • cursor non-mobile improvements … today we have …
  • CSS margin tweaks
    <style>

    #wunderlay {
    font-family: Courier New;
    font-size: 20px;
    opacity: 0.3;
    z-index: 11;
    padding: 0 0 0 0;
    margin: 0 0 0 -12;
    -webkit-animation: glow 1s linear infinite alternate;
    -moz-animation: glow 1s linear infinite alternate;
    animation: glow 1s linear infinite alternate;
    }

    #underlay {
    font-family: Courier New;
    font-size: 20px;
    opacity: 0.3;
    z-index: 1;
    padding: 0 0 0 0;
    margin: 0 0 0 -12;
    color: transparent;
    }

    </style>
    … allowing for a more accurate cell transition calculation … by, on non-mobile, nullifying the left glow … and …
  • keyboard non-mobile functionality extensions

And it is that last “keyboard” strategy we want to hone in on today. Occasionally you come across a game where the “keyboard” use is apt, but fewer and fewer of these HTML5 games (that are not apps) benefit on mobile platforms, in this way. It can mean, though, that “huddling around the one device” with more than one player of the game, becomes more feasible, and this SOS Game “of recent tweaks” is a great candidate, it being …

  • only key characters “S” and “O” need to be coded for

    var lastspan=null;

    function didclick(e, spano, istm) {
    var ourlet='';
    if (istm == 0 && lastspan) {
    if (('' + lastspan.outerHTML).indexOf('<span') == -1) { return true; }
    //document.title='' + e.keyCode;
    var char = e.which || e.keyCode
    if (('' + e.keyCode) == '79' && istm == 0) {
    ourlet='O';
    spano=lastspan;
    } else if (('' + e.keyCode) == '83' && istm == 0) {
    ourlet='S';
    spano=lastspan;
    } else if (('' + e.keyCode) != 'undefined' && istm == 0) {
    return true;
    }
    }

    if (document.getElementById('names')) {
    if (document.getElementById('names').value == '' && document.getElementById('names').placeholder.indexOf(',') != -1) {
    document.getElementById('names').value=document.getElementById('names').placeholder;
    //alert(1);
    document.getElementById('numsel').value='' + document.getElementById('names').value.split(',').length;
    //alert(document.getElementById('numsel').value);
    nparrange(document.getElementById('numsel'));
    //alert(11);
    document.getElementById('smore').innerHTML=notify('Your go ' + anames[curplayer]);
    }
    }
    console.log('1');
    if (spano.innerHTML.toLowerCase() == 's' || spano.innerHTML.toLowerCase() == 'o') { return true; }
    console.log('2');
    var rtis=spano.getBoundingClientRect();
    console.log('3');
    e = e || window.event;
    e.preventDefault();

    if (e.touches) {
    if (e.touches[0].pageX) {
    xx = e.touches[0].pageX;
    yy = e.touches[0].pageY;
    } else {
    xx = e.touches[0].clientX;
    yy = e.touches[0].clientY;
    }
    //console.log('pos3=' + pos3 + ',pos4=' + pos4);
    } else if (e.clientX || e.clientY) {
    xx = e.clientX;
    yy = e.clientY;
    } else {
    xx = e.pageX;
    yy = e.pageY;
    }

    var thislet=' ';
    var locsubscore=0;
    var thisi=eval(spano.id.replace('span',''));
    if (ourlet == 'S' || (eval(yy - rtis.top) <= eval(rtis.bottom - yy) && ourlet != 'O')) { // s
    thislet='S';
    spano.innerHTML=thislet;
    spano.style.color='rgb(128,0,128)'; //'#000000';
    } else {
    thislet='O';
    spano.innerHTML=thislet;
    spano.style.color='#0000ff';
    }
    sbs=[];
    if (eval(thisi % 100) >= 2) { // forwards we are at end
    if ((sb(document.getElementById('span' + eval(-2 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-1 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {
    sbord();
    locsubscore++;
    }
    }
    sbs=[];
    if (eval(thisi % 100) >= 1 && eval(thisi % 100) <= 98) { // forwards we are in the middle
    if ((sb(document.getElementById('span' + eval(-1 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(1 + thisi))).innerHTML) == 'SOS') {
    sbord();
    locsubscore++;
    }
    }
    sbs=[];
    if (eval(thisi % 100) <= 97) { // forwards we are at start
    if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(1 + thisi))).innerHTML + sb(document.getElementById('span' + eval(2 + thisi))).innerHTML) == 'SOS') {
    sbord();
    locsubscore++;
    }
    }

    if (updownallowed) {
    sbs=[];
    if (eval(thisi / 100) >= 2) { // down we are at end
    if ((sb(document.getElementById('span' + eval(-200 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-100 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {
    sbord();
    locsubscore++;
    }
    }
    sbs=[];
    if (eval(thisi / 100) >= 1 && eval(thisi / 100) <= 18) { // down we are in the middle
    if ((sb(document.getElementById('span' + eval(-100 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(100 + thisi))).innerHTML) == 'SOS') {
    sbord();
    locsubscore++;
    }
    }
    sbs=[];
    if (eval(thisi / 100) <= 17) { // down we are at start
    if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(100 + thisi))).innerHTML + sb(document.getElementById('span' + eval(200 + thisi))).innerHTML) == 'SOS') {
    sbord();
    locsubscore++;
    }
    }
    }

    if (diagonalsallowed) {
    sbs=[];
    if (eval(thisi / 100) >= 2 && eval(thisi % 100) >= 2) { // diagonally we are at end
    if ((sb(document.getElementById('span' + eval(-202 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-101 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {
    sbord();
    locsubscore++;
    }
    sbs=[];
    if ((sb(document.getElementById('span' + eval(-198 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-99 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {
    sbord();
    locsubscore++;
    }
    }
    sbs=[];
    if (eval(thisi / 100) >= 1 && eval(thisi / 100) <= 18 && eval(thisi % 100) >= 1 && eval(thisi % 100) <= 98) { // diagonally we are in the middle
    if ((sb(document.getElementById('span' + eval(-101 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(101 + thisi))).innerHTML) == 'SOS') {
    sbord();
    locsubscore++;
    }
    sbs=[];
    if ((sb(document.getElementById('span' + eval(-99 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(99 + thisi))).innerHTML) == 'SOS') {
    sbord();
    locsubscore++;
    }
    }
    sbs=[];
    if (eval(thisi / 100) <= 17 && eval(thisi % 100) <= 97) { // diagonally we are at start
    if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(101 + thisi))).innerHTML + sb(document.getElementById('span' + eval(202 + thisi))).innerHTML) == 'SOS') {
    sbord();
    locsubscore++;
    }
    sbs=[];
    if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(99 + thisi))).innerHTML + sb(document.getElementById('span' + eval(198 + thisi))).innerHTML) == 'SOS') {
    sbord();
    locsubscore++;
    }
    }
    }
    sbs=[];

    if (locsubscore > 0) {
    //alert('locsubscore=' + locsubscore + ' yy=' + yy + ' rtis.top=' + rtis.top + ' rtis.y=' + rtis.y + ' rtis.bottom=' + rtis.bottom);
    changeu=false;
    subscore=locsubscore;
    return cscore('pointer', locsubscore);
    } else {
    subscore=0;
    changeu=true;
    //alert('change');
    return cscore('pointer', 0);
    }


    var newi=eval(spano.id.replace('span',''));
    var documentgetSelectiontoString='', revsis='';
    var wlen=0, ijh=0;
    if (setsoftwo.length == 0) {
    setsoftwo.push(newi);
    document.getElementById('span' + newi).style.backgroundColor='yellow';
    } else {
    console.log('Newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
    if (Math.floor(newi / 100) == Math.floor(setsoftwo[0] / 100)) {
    wlen=eval(1 + Math.abs(eval(setsoftwo[0] - newi)));
    if (wlen == 3) { // >= 4) {
    for (ijh=Math.min(setsoftwo[0], newi); ijh<=Math.max(setsoftwo[0], newi); ijh++) {
    documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;
    revsis=document.getElementById('span' + ijh).innerHTML + revsis;
    document.getElementById('span' + ijh).style.backgroundColor='orange';
    document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;
    document.getElementById('span' + ijh).style.cursor='progress';
    }
    subscore=eval(0 - eval('' + documentgetSelectiontoString.length));
    findingnemo='';
    if (!backwardsallowed) {
    setTimeout(retry, 2000);
    document.getElementById('nameif').title='';
    } else {
    setTimeout(retry, 8000);
    document.getElementById('mytao').style.cursor='progress';
    document.getElementById('nameif').title='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);
    }
    document.getElementById('nameif').src='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());
    setsoftwo=[];
    } else {
    document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';
    setsoftwo=[];
    setsoftwo.push(newi);
    document.getElementById('span' + newi).style.backgroundColor='yellow';
    console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
    notify('Sorry, but too short.');
    }

    } else if (eval(newi % 100) == eval(setsoftwo[0] % 100)) {
    if (updownallowed) {
    console.log('up down');
    wlen=eval(1 + Math.abs(eval(Math.floor(setsoftwo[0] / 100) - Math.floor(newi / 100))));
    console.log('newi=' + newi + ' and wlen=' + wlen + ' via setsoftwo[0]=' + setsoftwo[0]);
    if (wlen == 3) { // >= 4) {
    for (ijh=Math.min(setsoftwo[0], newi); ijh<=Math.max(setsoftwo[0], newi); ijh+=100) {
    documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;
    revsis=document.getElementById('span' + ijh).innerHTML + revsis;
    document.getElementById('span' + ijh).style.backgroundColor='orange';
    document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;
    document.getElementById('span' + ijh).style.cursor='progress';
    }
    subscore=eval(0 - eval('' + documentgetSelectiontoString.length));
    findingnemo='';
    if (!backwardsallowed) {
    setTimeout(retry, 2000);
    document.getElementById('nameif').title='';
    } else {
    setTimeout(retry, 8000);
    document.getElementById('mytao').style.cursor='progress';
    document.getElementById('nameif').title='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);
    }
    document.getElementById('nameif').src='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());
    setsoftwo=[];
    } else {
    document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';
    setsoftwo=[];
    setsoftwo.push(newi);
    document.getElementById('span' + newi).style.backgroundColor='yellow';
    console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
    notify('Sorry, need four or more letters.');
    }

    } else {
    document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';
    setsoftwo=[];
    setsoftwo.push(newi);
    document.getElementById('span' + newi).style.backgroundColor='yellow';
    console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
    notify('Sorry, no up or downs allowed.');
    }

    } else if (Math.abs(Math.floor(eval(newi / 100)) - Math.floor(eval(setsoftwo[0] / 100))) == Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100))) {
    if (diagonalsallowed) {
    console.log('diagonal');

    wlen=eval(1 + Math.abs(eval(Math.floor(setsoftwo[0] / 100) - Math.floor(newi / 100))));
    console.log('newi=' + newi + ' and wlen=' + wlen + ' via setsoftwo[0]=' + setsoftwo[0]);
    if (wlen == 3) { // >= 4) {
    for (ijh=Math.min(setsoftwo[0], newi); ijh<=Math.max(setsoftwo[0], newi); ijh+=eval(eval(Math.max(setsoftwo[0], newi) - Math.min(setsoftwo[0], newi)) / eval(-1 + wlen))) {
    documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;
    revsis=document.getElementById('span' + ijh).innerHTML + revsis;
    document.getElementById('span' + ijh).style.backgroundColor='orange';
    document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;
    document.getElementById('span' + ijh).style.cursor='progress';
    }
    subscore=eval(0 - eval('' + documentgetSelectiontoString.length));
    findingnemo='';
    if (!backwardsallowed) {
    setTimeout(retry, 2000);
    document.getElementById('nameif').title='';
    } else {
    setTimeout(retry, 8000);
    document.getElementById('mytao').style.cursor='progress';
    document.getElementById('nameif').title='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);
    }
    document.getElementById('nameif').src='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());
    setsoftwo=[];
    } else {
    document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';
    setsoftwo=[];
    setsoftwo.push(newi);
    document.getElementById('span' + newi).style.backgroundColor='yellow';
    console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
    notify('Too short, sorry.');
    }

    } else {
    document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';
    setsoftwo=[];
    setsoftwo.push(newi);
    document.getElementById('span' + newi).style.backgroundColor='yellow';
    console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
    notify('Sorry, no diagonals allowed.');
    }

    } else {
    document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';
    setsoftwo=[];
    setsoftwo.push(newi);
    document.getElementById('span' + newi).style.backgroundColor='yellow';
    console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
    }
    }
    //alert('id=' + spano.id + ' ' + spano.innerHTML);
    }

    function dummyspit(ev) {
    lastspan=e.target;
    return true;
    }
  • onkeydown event can serve the purpose in a “hotkey” way, making things a lot easier … and what we have done in the past and reiterate today, having gone down the wrong garden path before the better one, is …
  • the additional “onkeydown” event can belong to the document.body

    <body onkeydown=didclick(event,lastspan,0); data-onclick='bc(event);' title='' onload="sdodit(); setTimeout(mytaow, 2000); if (('' + navigator.platform.toUpperCase()).indexOf('MAC') >= 0) { document.getElementById('names').title+=' Append with spaces to try using MAMP HTTP://localhost:8888/macos_say_record.php supervision of macOS say text to audio commentary.'; }">

    … element rather than an individual event for each game span “cell” … and …
  • though not as cutesy wutesy codewise as we’d hoped, the “onkeydown” logic can co-exist with “onclick” (for each span “cell”) Javascript function, as shown above, the last parameter 1 for real click and 0 for keyboard call

… it being a comfort that the “keyboard” logic merges in with so much of the established “onclick” logic that has been working in the past in the changed sos_game.html SOS Game for interested parties.


Previous relevant SOS Game Cursor Tutorial is shown below.

SOS Game Cursor Tutorial

SOS Game Cursor Tutorial

In the online woooorrrrllllddd, non-mobile platforms have a whole “hover” woooorrrrllllddd forsaken by the mobile platforms. In that woooorrrrllllddd you can “decorate” or personalize your cursor, that “character” (or perhaps more if you involve SVG+XML protocol cursor customized definitions) which follows your mouse position around the screen.

The event “onmouseover” is called that once on a detection of that hovering concerning an HTML element you are interested in. Event “onmouseover” is not called again until a re-entry happens (and an “onmouseout” event happens as the mouse leaves the environs of your element having previously caused an “onmouseover” event to be called).

If the position remains of interest during that time between an “onmouseover” and an “onmouseout” event be of interest, as it is for us, today, retweaking our recent SOS Game (last talked about with SOS Game Primer Tutorial) functionality, we need to start taking an interest in that element’s “onmousemove” event, called by the system every time the mouse moves within the realms of your HTML element of interest.

Our SOS Game differentiates an “S” user play, from a user “O” play via whether the click (and now hover) positioning is at the top and bottom of the relevant table cell element respectively, decorated by a linear gradient helping background image, with the hovering, as well.

Can the event logic be quick enough? We’ll let you judge for yourself. Probably your impatient players will occasionally fall foul of this hovering advice, but for the main part, we found it helped explain how the game works, having these SVG defined “S” and “O” SVG text cursor customizations happen for our non-mobile SOS Game players out there.

Javascript wise, we fleshed out the (previously not fleshed out) function sback as below, in a way that made it compatible to calls from “onmousemove” events as well as the “onmouseover” events it had already been deployed for


function sback(e,spo) {
var moxx=0, moyy=0;
var rstis=spo.getBoundingClientRect();
//spo.style.backgroundImage='url("data:image/svg+xml;utf8,<svg xmlns=' + "'" + 'http://www.w3.org/2000/svg' + "'" + ' width=' + "'" + rstis.width + "'" + ' height=' + "'" + rstis.height + "'" + ' viewport=' + "'" + '0 0 100 100' + "'" + '><text y=' + "'" + '0%' + "'" + '>S</text><text y=' + "'" + '50%' + "'" + '>O</text></svg>");';
//spo.style.backgroundRepeat='no-repeat';
//spo.style.backgroundSize='contain';


//elemLeft = spo.offsetLeft;
//elemTop = spo.offsetTop;

e = e || window.event;
e.preventDefault();

if (e.touches) {
if (e.touches[0].pageX) {
moxx = e.touches[0].pageX + document.body.scrollLeft * 0 - elemLeft;
moyy = e.touches[0].pageY + document.body.scrollTop * 0 - elemTop;
} else {
moxx = e.touches[0].clientX + document.body.scrollLeft * 0 - elemLeft;
moyy = e.touches[0].clientY + document.body.scrollTop * 0 - elemTop;
}
//console.log('pos3=' + pos3 + ',pos4=' + pos4);
} else if (e.clientX || e.clientY) {
moxx = e.clientX + document.body.scrollLeft * 0 - elemLeft;
moyy = e.clientY + document.body.scrollTop * 0 - elemTop;
} else {
moxx = e.pageX + document.body.scrollLeft * 0 - elemLeft;
moyy = e.pageY + document.body.scrollTop * 0 - elemTop;
}

if (Math.abs(eval('' + moyy) - eval('' + rstis.top)) <= Math.abs(eval('' + moyy) - eval('' + rstis.bottom))) {
spo.style.cursor='url("data:image/svg+xml;utf8,<svg xmlns=' + "'" + 'http://www.w3.org/2000/svg' + "'" + ' width=' + "'" + rstis.width + "'" + ' height=' + "'" + rstis.height + "'" + ' viewport=' + "'" + '0 0 100 100' + "'" + '><text y=' + "'" + '50%' + "'" + ' stroke=' + "'" + 'gray' + "'" + '>S</text></svg>") 16 0, progress';
} else {
spo.style.cursor='url("data:image/svg+xml;utf8,<svg xmlns=' + "'" + 'http://www.w3.org/2000/svg' + "'" + ' width=' + "'" + rstis.width + "'" + ' height=' + "'" + rstis.height + "'" + ' viewport=' + "'" + '0 0 100 100' + "'" + '><text y=' + "'" + '50%' + "'" + ' stroke=' + "'" + 'gray' + "'" + '>O</text></svg>") 16 0, progress';
}

}

… to make this “ever so mild” makeover of our SOS Game happen involving a changed sos_game.html for interested parties.


Previous relevant SOS Game Primer Tutorial is shown below.

SOS Game Primer Tutorial

SOS Game Primer Tutorial

Even though it took too long to get to yesterday’s Word Find Game Viewport Tutorial‘s Word Find Game’s level of satisfaction, for us, it was always going to be worth it, because when you overengineer it can mean cloning off that into another useful web application is a “paring down” exercise, more than anything, and this is infinitely easier than “a reinvention of the wheel” scenario, especially where it comes to “cross platform” game usage “user experience” issues.

The fun bit of such an approach, in thinking about what we end up with today is the thought that a …

  • Word Find Game … could be cloned or morphed into a …
  • SOS Game

… we remember from our days at high school, in less than a day. The memory of the SOS Game did not extend to the detail, and so we thank How to Play – SOS for reminders about the status of diagonality, while up versus down and forwards versus backwards concerns were a bit “per se” regarding “SOS”!

It was the confluence of one “onclick” type event to cover, regarding span elements set out in a grid initialized to a non-breaking space ( ie. &nbsp; ) …

  • fill in contents as “S”
  • fill in contents as “O”

… that set us to determining for the span “cell” click, was it positioned …

  • in the top half means “S” … or …
  • in the bottom half means “O”

? This had us converging on changes to the “clicks” mode onclick event Javascript logic …


function didclick(e, spano) {
if (document.getElementById('names')) {
if (document.getElementById('names').value == '' && document.getElementById('names').placeholder.indexOf(',') != -1) {
document.getElementById('names').value=document.getElementById('names').placeholder;
//alert(1);
document.getElementById('numsel').value='' + document.getElementById('names').value.split(',').length;
//alert(document.getElementById('numsel').value);
nparrange(document.getElementById('numsel'));
//alert(11);
document.getElementById('smore').innerHTML=notify('Your go ' + anames[curplayer]);
}
}
console.log('1');
if (spano.innerHTML.toLowerCase() == 's' || spano.innerHTML.toLowerCase() == 'o') { return true; }
console.log('2');
var rtis=spano.getBoundingClientRect();
console.log('3');
e = e || window.event;
e.preventDefault();

if (e.touches) {
if (e.touches[0].pageX) {
xx = e.touches[0].pageX;
yy = e.touches[0].pageY;
} else {
xx = e.touches[0].clientX;
yy = e.touches[0].clientY;
}
//console.log('pos3=' + pos3 + ',pos4=' + pos4);
} else if (e.clientX || e.clientY) {
xx = e.clientX;
yy = e.clientY;
} else {
xx = e.pageX;
yy = e.pageY;
}



var thislet=' ';
var locsubscore=0;
var thisi=eval(spano.id.replace('span',''));
if (eval(yy - rtis.top) <= eval(rtis.bottom - yy)) { // s
thislet='S';
spano.innerHTML=thislet;
spano.style.color='rgb(128,0,128)'; //'#000000';
} else {
thislet='O';
spano.innerHTML=thislet;
spano.style.color='#0000ff';
}
sbs=[];
if (eval(thisi % 100) >= 2) { // forwards we are at end
if ((sb(document.getElementById('span' + eval(-2 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-1 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {
sbord();
locsubscore++;
}
}
sbs=[];
if (eval(thisi % 100) >= 1 && eval(thisi % 100) <= 98) { // forwards we are in the middle
if ((sb(document.getElementById('span' + eval(-1 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(1 + thisi))).innerHTML) == 'SOS') {
sbord();
locsubscore++;
}
}
sbs=[];
if (eval(thisi % 100) <= 97) { // forwards we are at start
if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(1 + thisi))).innerHTML + sb(document.getElementById('span' + eval(2 + thisi))).innerHTML) == 'SOS') {
sbord();
locsubscore++;
}
}


if (updownallowed) {
sbs=[];
if (eval(thisi / 100) >= 2) { // down we are at end
if ((sb(document.getElementById('span' + eval(-200 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-100 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {
sbord();
locsubscore++;
}
}
sbs=[];
if (eval(thisi / 100) >= 1 && eval(thisi / 100) <= 18) { // down we are in the middle
if ((sb(document.getElementById('span' + eval(-100 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(100 + thisi))).innerHTML) == 'SOS') {
sbord();
locsubscore++;
}
}
sbs=[];
if (eval(thisi / 100) <= 17) { // down we are at start
if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(100 + thisi))).innerHTML + sb(document.getElementById('span' + eval(200 + thisi))).innerHTML) == 'SOS') {
sbord();
locsubscore++;
}
}
}

if (diagonalsallowed) {
sbs=[];
if (eval(thisi / 100) >= 2 && eval(thisi % 100) >= 2) { // diagonally we are at end
if ((sb(document.getElementById('span' + eval(-202 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-101 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {
sbord();
locsubscore++;
}
sbs=[];
if ((sb(document.getElementById('span' + eval(-198 + thisi))).innerHTML + sb(document.getElementById('span' + eval(-99 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML) == 'SOS') {
sbord();
locsubscore++;
}
}
sbs=[];
if (eval(thisi / 100) >= 1 && eval(thisi / 100) <= 18 && eval(thisi % 100) >= 1 && eval(thisi % 100) <= 98) { // diagonally we are in the middle
if ((sb(document.getElementById('span' + eval(-101 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(101 + thisi))).innerHTML) == 'SOS') {
sbord();
locsubscore++;
}
sbs=[];
if ((sb(document.getElementById('span' + eval(-99 + thisi))).innerHTML + sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(99 + thisi))).innerHTML) == 'SOS') {
sbord();
locsubscore++;
}
}
sbs=[];
if (eval(thisi / 100) <= 17 && eval(thisi % 100) <= 97) { // diagonally we are at start
if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(101 + thisi))).innerHTML + sb(document.getElementById('span' + eval(202 + thisi))).innerHTML) == 'SOS') {
sbord();
locsubscore++;
}
sbs=[];
if ((sb(document.getElementById('span' + eval(thisi))).innerHTML + sb(document.getElementById('span' + eval(99 + thisi))).innerHTML + sb(document.getElementById('span' + eval(198 + thisi))).innerHTML) == 'SOS') {
sbord();
locsubscore++;
}
}
}
sbs=[];

if (locsubscore > 0) {
//alert('locsubscore=' + locsubscore + ' yy=' + yy + ' rtis.top=' + rtis.top + ' rtis.y=' + rtis.y + ' rtis.bottom=' + rtis.bottom);
changeu=false;
subscore=locsubscore;
return cscore('pointer', locsubscore);
} else {
subscore=0;
changeu=true;
//alert('change');
return cscore('pointer', 0);
}



var newi=eval(spano.id.replace('span',''));
var documentgetSelectiontoString='', revsis='';
var wlen=0, ijh=0;
if (setsoftwo.length == 0) {
setsoftwo.push(newi);
document.getElementById('span' + newi).style.backgroundColor='yellow';
} else {
console.log('Newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
if (Math.floor(newi / 100) == Math.floor(setsoftwo[0] / 100)) {
wlen=eval(1 + Math.abs(eval(setsoftwo[0] - newi)));
if (wlen == 3) { // >= 4) {
for (ijh=Math.min(setsoftwo[0], newi); ijh<=Math.max(setsoftwo[0], newi); ijh++) {
documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;
revsis=document.getElementById('span' + ijh).innerHTML + revsis;
document.getElementById('span' + ijh).style.backgroundColor='orange';
document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;
document.getElementById('span' + ijh).style.cursor='progress';
}
subscore=eval(0 - eval('' + documentgetSelectiontoString.length));
findingnemo='';
if (!backwardsallowed) {
setTimeout(retry, 2000);
document.getElementById('nameif').title='';
} else {
setTimeout(retry, 8000);
document.getElementById('mytao').style.cursor='progress';
document.getElementById('nameif').title='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);
}
document.getElementById('nameif').src='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());
setsoftwo=[];
} else {
document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';
setsoftwo=[];
setsoftwo.push(newi);
document.getElementById('span' + newi).style.backgroundColor='yellow';
console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
notify('Sorry, but too short.');
}

} else if (eval(newi % 100) == eval(setsoftwo[0] % 100)) {
if (updownallowed) {
console.log('up down');
wlen=eval(1 + Math.abs(eval(Math.floor(setsoftwo[0] / 100) - Math.floor(newi / 100))));
console.log('newi=' + newi + ' and wlen=' + wlen + ' via setsoftwo[0]=' + setsoftwo[0]);
if (wlen == 3) { // >= 4) {
for (ijh=Math.min(setsoftwo[0], newi); ijh<=Math.max(setsoftwo[0], newi); ijh+=100) {
documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;
revsis=document.getElementById('span' + ijh).innerHTML + revsis;
document.getElementById('span' + ijh).style.backgroundColor='orange';
document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;
document.getElementById('span' + ijh).style.cursor='progress';
}
subscore=eval(0 - eval('' + documentgetSelectiontoString.length));
findingnemo='';
if (!backwardsallowed) {
setTimeout(retry, 2000);
document.getElementById('nameif').title='';
} else {
setTimeout(retry, 8000);
document.getElementById('mytao').style.cursor='progress';
document.getElementById('nameif').title='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);
}
document.getElementById('nameif').src='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());
setsoftwo=[];
} else {
document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';
setsoftwo=[];
setsoftwo.push(newi);
document.getElementById('span' + newi).style.backgroundColor='yellow';
console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
notify('Sorry, need four or more letters.');
}

} else {
document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';
setsoftwo=[];
setsoftwo.push(newi);
document.getElementById('span' + newi).style.backgroundColor='yellow';
console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
notify('Sorry, no up or downs allowed.');
}

} else if (Math.abs(Math.floor(eval(newi / 100)) - Math.floor(eval(setsoftwo[0] / 100))) == Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100))) {
if (diagonalsallowed) {
console.log('diagonal');

wlen=eval(1 + Math.abs(eval(Math.floor(setsoftwo[0] / 100) - Math.floor(newi / 100))));
console.log('newi=' + newi + ' and wlen=' + wlen + ' via setsoftwo[0]=' + setsoftwo[0]);
if (wlen == 3) { // >= 4) {
for (ijh=Math.min(setsoftwo[0], newi); ijh<=Math.max(setsoftwo[0], newi); ijh+=eval(eval(Math.max(setsoftwo[0], newi) - Math.min(setsoftwo[0], newi)) / eval(-1 + wlen))) {
documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;
revsis=document.getElementById('span' + ijh).innerHTML + revsis;
document.getElementById('span' + ijh).style.backgroundColor='orange';
document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;
document.getElementById('span' + ijh).style.cursor='progress';
}
subscore=eval(0 - eval('' + documentgetSelectiontoString.length));
findingnemo='';
if (!backwardsallowed) {
setTimeout(retry, 2000);
document.getElementById('nameif').title='';
} else {
setTimeout(retry, 8000);
document.getElementById('mytao').style.cursor='progress';
document.getElementById('nameif').title='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);
}
document.getElementById('nameif').src='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());
setsoftwo=[];
} else {
document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';
setsoftwo=[];
setsoftwo.push(newi);
document.getElementById('span' + newi).style.backgroundColor='yellow';
console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
notify('Too short, sorry.');
}

} else {
document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';
setsoftwo=[];
setsoftwo.push(newi);
document.getElementById('span' + newi).style.backgroundColor='yellow';
console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
notify('Sorry, no diagonals allowed.');
}

} else {
document.getElementById('span' + ('' + setsoftwo[0]).replace('span','')).style.backgroundColor='#f0f0f0';
setsoftwo=[];
setsoftwo.push(newi);
document.getElementById('span' + newi).style.backgroundColor='yellow';
console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
}
}
//alert('id=' + spano.id + ' ' + spano.innerHTML);
}

… which on non-mobile platforms compliments the CSS styling …

<style>

span.wunderlay:hover {
background-image: linear-gradient(to bottom, rgba(128,0,128,0.5) , rgba(0,0,255,0.5));
}

</style>

… quite nicely, in a colour coded sense, in the “how we got there” sos_game.html SOS Game you can also try below …


Previous relevant Word Find Game Aesthetics Tutorial is shown below.

Word Find Game Aesthetics Tutorial

Word Find Game Aesthetics Tutorial

CSS styling keeps getting better for webpages, with extended functionality, as proven when CSS3 came to being. Two styling features we find quite impactive are …

  • CSS animation … and …
  • CSS linear gradients

… we use, respectively, regarding …

  • “selection” textarea and “click” div of span elements … helping create a colour coded border “glow” 3D effect …

    <style>

    /* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */

    @-webkit-keyframes glow {
    from {
    box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;
    }

    to {
    box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;
    }
    }

    @-webkit-keyframes wglow {
    from {
    box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #7300e6, 0 0 9px #7300e6, 0 0 11px #7300e6, 0 0 13px #7300e6, 0 0 15px #7300e6;
    }

    to {
    box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #a64dff, 0 0 10px #a64dff, 0 0 12px #a64dff, 0 0 14px #a64dff, 0 0 16px #a64dff;
    }
    }


    textarea {
    font-family: Courier New;
    font-size: 20px;
    opacity: 0.9;
    z-index: 9;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    text-shadow: -1px 1px 1px #952dff;
    -webkit-animation: glow 1s linear infinite alternate;
    -moz-animation: glow 1s linear infinite alternate;
    animation: glow 1s linear infinite alternate;

    }


    #wunderlay {
    font-family: Courier New;
    font-size: 20px;
    opacity: 0.3;
    z-index: 11;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    -webkit-animation: glow 1s linear infinite alternate;
    -moz-animation: glow 1s linear infinite alternate;
    animation: glow 1s linear infinite alternate;

    }
    </style>

    … that is dynamically changed to “wglow” (and font-family Courier) should the user select “click” mode of interactive entry
  • background-image CSS property linear gradient background to dropdown and textbox element effect …

    <style>
    /* Thanks to https://medium.com/thirty-9/3-tips-for-using-subtle-css-gradients-f5691e453602 */

    body {
    background-image: linear-gradient(to right bottom, #ffffff, #fcfafc, #f9f6f8, #f8f1f3, #f6ecec);
    }


    #names {
    background-image: linear-gradient(to right bottom, #eeeeee, #ebe9eb, #e8e5e7, #e7e0e2, #e5dbdb);
    }


    select {
    background-image: linear-gradient(to right bottom, white, yellow, pink, silver, lightgray);
    }
    </style>

And so, improving on yesterday’s Word Find Game Mobile Tutorial we have in our changed word_find_game.html Word Find Game you can also try, yes, yet again, below.


Previous relevant Word Find Game Mobile Tutorial is shown below.

Word Find Game Mobile Tutorial

Word Find Game Mobile Tutorial

Yesterday’s Word Find Game Personalization Tutorial, and the Word Find Game from versions before all had an unwieldy relationship with mobile platforms. The …

  • selection, via Selection API, using HTML textarea, suits non-mobile well … but we think today’s newly coded for …
  • click, via HTML span element onclick logics, work better on mobile platforms

… and so we’ve coded for a new dropdown to offer both modus operandi as options, with new “click” modus operandi Javascript …


function didclick(spano) {
var newi=eval(spano.id.replace('span',''));
var documentgetSelectiontoString='', revsis='';
var wlen=0, ijh=0;
if (setsoftwo.length == 0) {
setsoftwo.push(newi);
document.getElementById('span' + newi).style.backgroundColor='yellow';
} else {
console.log('Newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
if (Math.floor(newi / 100) == Math.floor(setsoftwo[0] / 100)) {
wlen=eval(1 + Math.abs(eval(setsoftwo[0] - newi)));
if (wlen >= 4) {
for (ijh=Math.min(setsoftwo[0], newi); ijh<=Math.max(setsoftwo[0], newi); ijh++) {
documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;
revsis=document.getElementById('span' + ijh).innerHTML + revsis;
document.getElementById('span' + ijh).style.backgroundColor='orange';
document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;
document.getElementById('span' + ijh).style.cursor='progress';
}
subscore=eval(0 - eval('' + documentgetSelectiontoString.length));
findingnemo='';
if (!backwardsallowed) {
setTimeout(retry, 2000);
document.getElementById('nameif').title='';
} else {
setTimeout(retry, 8000);
document.getElementById('mytao').style.cursor='progress';
document.getElementById('nameif').title='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);
}
document.getElementById('nameif').src='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());
setsoftwo=[];
}
} else if (eval(newi % 100) == eval(setsoftwo[0] % 100)) {
if (updownallowed) {
console.log('up down');
wlen=eval(1 + Math.abs(eval(Math.floor(setsoftwo[0] / 100) - Math.floor(newi / 100))));
console.log('newi=' + newi + ' and wlen=' + wlen + ' via setsoftwo[0]=' + setsoftwo[0]);
if (wlen >= 4) {
for (ijh=Math.min(setsoftwo[0], newi); ijh<=Math.max(setsoftwo[0], newi); ijh+=100) {
documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;
revsis=document.getElementById('span' + ijh).innerHTML + revsis;
document.getElementById('span' + ijh).style.backgroundColor='orange';
document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;
document.getElementById('span' + ijh).style.cursor='progress';
}
subscore=eval(0 - eval('' + documentgetSelectiontoString.length));
findingnemo='';
if (!backwardsallowed) {
setTimeout(retry, 2000);
document.getElementById('nameif').title='';
} else {
setTimeout(retry, 8000);
document.getElementById('mytao').style.cursor='progress';
document.getElementById('nameif').title='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);
}
document.getElementById('nameif').src='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());
setsoftwo=[];
}
}
} else if (Math.abs(Math.floor(eval(newi / 100)) - Math.floor(eval(setsoftwo[0] / 100))) == Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100))) {
if (diagonalsallowed) {
console.log('diagonal');

wlen=eval(1 + Math.abs(eval(Math.floor(setsoftwo[0] / 100) - Math.floor(newi / 100))));
console.log('newi=' + newi + ' and wlen=' + wlen + ' via setsoftwo[0]=' + setsoftwo[0]);
if (wlen >= 4) {
for (ijh=Math.min(setsoftwo[0], newi); ijh<=Math.max(setsoftwo[0], newi); ijh+=eval(eval(Math.max(setsoftwo[0], newi) - Math.min(setsoftwo[0], newi)) / eval(-1 + wlen))) {
documentgetSelectiontoString+=document.getElementById('span' + ijh).innerHTML;
revsis=document.getElementById('span' + ijh).innerHTML + revsis;
document.getElementById('span' + ijh).style.backgroundColor='orange';
document.getElementById('span' + ijh).title=document.getElementById('span' + ijh).innerHTML;
document.getElementById('span' + ijh).style.cursor='progress';
}
subscore=eval(0 - eval('' + documentgetSelectiontoString.length));
findingnemo='';
if (!backwardsallowed) {
setTimeout(retry, 2000);
document.getElementById('nameif').title='';
} else {
setTimeout(retry, 8000);
document.getElementById('mytao').style.cursor='progress';
document.getElementById('nameif').title='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);
}
document.getElementById('nameif').src='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());
setsoftwo=[];
}
}
} else {
console.log('newi=' + newi + ' and down=' + Math.abs(eval(newi % 100) - eval(setsoftwo[0] % 100)) + ' and across=' + Math.abs(Math.floor(newi / 100) - Math.floor(setsoftwo[0] / 100)) + ' via setsoftwo[0]=' + setsoftwo[0]);
}
}
//alert('id=' + spano.id + ' ' + spano.innerHTML);
}

… in our changed word_find_game.html Word Find Game you can also try, yes, again, below.


Previous relevant Word Find Game Personalization Tutorial is shown below.

Word Find Game Underlay Tutorial

Word Find Game Personalization Tutorial

Yesterday’s Word Find Game Modes of Use Tutorial gave us the means by which we could have multiple players in our “Finding the Word” game, as a number. But many users prefer “names” to “numbers”. And so …

  • we start asking for an optional (comma separated) user name list … that if used …
  • starts looking for Notifications API functionality to keep the players informed about proceedings … and …
  • if underlying Navigator API navigator.platform points at an underlying macOS operating system, also offer the user the chance to turn notification wording to audio commentary, as well

… as per Javascript …


function notify(what) {
if (what.trim() != '' && anames[0].replace('Player 1','').trim() != '') {
if (what != lastwhat) {
lastwhat=what;
setTimeout(lwn, 8000);
document.getElementById('notif').src='./notifications_ideas.php?scheduledblurb=' + encodeURIComponent(what);
if (trysay) { //alert('HTTP://localhost:8888/macos_say_record.php?andsoonclose=y&docronwork=say%20' + encodeURIComponent(what));
window.open('HTTP://localhost:8888/macos_say_record.php?andsoonclose=y&docronwork=say%20' + encodeURIComponent(what), 'sayif', 'top=50,left=50,width=500,height=500');
}
}
}
return what;
}

… showing two different uses of two different invisible HTML iframe elements …


<iframe id=notif style='display:none;' src=></iframe>
<iframe id=sayif name=sayif style='display:none;' src=></iframe>

… in our changed word_find_game.html Word Find Game you can also try, yet again, below.


Previous relevant Word Find Game Modes of Use Tutorial is shown below.

Word Find Game Underlay Tutorial

Word Find Game Modes of Use Tutorial

Online games often feature …

  • degree of difficulty
  • number of player(s)

… modes of use that the user(s) can control. And so, with this in mind, to improve on yesterday’s Word Find Game Underlay Tutorial we’ve set out providing ways the users can control these two concepts via two new dropdowns …


<h1>Word Find Game <select onchange="restart(this);"><option value="hard">Hard</option><option value="easy">Easy</option><option value="easier">Easier</option><option value="easiest">Easiest</option></select> <span id=curbit>for</span> <select id=numsel onchange='nparrange(this);'><option value=1>1 player</option><option value=2>2 players</option><option value=3>3 players</option><option value=4>4 players</option><option value=5>5 players</option></select></h1>

… along with a span element showing the current player number all within that topmost h1 element, and helped out by two new dropdown (ie. select element) onchange event Javascript logics …


var numplayers=1;
var curplayer=0;
var ascores=[0], agoes=[0];
var backwardsallowed=true;
var updownallowed=true;
var diagonalsallowed=true;

var zdebye='';
var zzdebye='';
var lastzdebye='';
var goutstris='';
var delayis=0;
var sofar=';';
var score=0, goes=0, subscore=0;

function nparrange(sio) {
if (eval('' + sio.value) > eval('' + ascores.length)) {
while (eval('' + sio.value) > eval('' + ascores.length)) {
ascores.push(0);
agoes.push(0);
}
numplayers=eval('' + ascores.length);
document.getElementById('curbit').innerHTML='for <font color=green>' + eval(1 + eval('' + curplayer)) + '</font> of';
if (eval('' + ascores.length) > 1) {
var cscores='';
var cgoes='';
var betw='';
//if (eval(0 + eval('' + curplayer)) == 0) { betw='<font color=red>'; }
if (eval(1 + eval('' + curplayer)) >= eval('' + ascores.length)) { betw='<font color=red>'; }
for (var inp=0; inp<eval('' + ascores.length); inp++) {
if (eval('' + curplayer) == inp) {
cscores+=betw + '<font color=green>' + ascores[inp] + '</font>';
cgoes+=betw + '<font color=green>' + agoes[inp] + '</font>';
betw=':<font color=red>';
} else {
cscores+=betw + ascores[inp] + betw.replace(':','').replace('<font color=red>', '</font>').replace('<font color=green>', '</font>');
cgoes+=betw + agoes[inp] + betw.replace(':','').replace('<font color=red>', '</font>').replace('<font color=green>', '</font>');
//betw=':';
betw=(':' + betw.replace(':','')).replace('<font color=red>','').replace('<font color=green>','<font color=red>');
}
console.log('numplayers=' + numplayers + ' at ' + inp + ' vs curplayer=' + curplayer + ' ' + cscores + '/' + cgoes);
}
document.getElementById('score').innerHTML='' + cscores + '/' + cgoes;
//curplayer++;
//if (curplayer >= eval('' + ascores.length)) { curplayer=0; }
//scores=ascores[curplayer];
//goes=agoes[curplayer];
}
}
}

function restart(sio) {
var myblurb=document.getElementById('blurb').innerHTML; // Forwards, backwards, up, down, diagonal 4 letters or more highlight below
var setn=[8,1,1,3,11,1,2,1,8,0,0,3,1,5,7,1,0,5,3,5,3,1,1,0,1,0];
if (sio.value == 'hard') { location.href=document.URL; }
if (sio.value != 'hard' && eval('' + letters.length) == 26) {
myblurb=myblurb.replace(' letters ', ' more common set of letters ');
// A-9, B-2, C-2, D-4, E-12, F-2, G-3, H-2, I-9, J-1, K-1, L-4, M-2, N-6, O-8, P-2, Q-1, R-6, S-4, T-6, U-4, V-2, W-2, X-1, Y-2, Z-1
var kbye=eval('' + letters.length);
for (ibye=0; ibye<kbye; ibye++) {
for (jbye=1; jbye<=setn[ibye]; jbye++) {
letters.push(letters[ibye]);
}
}
}
if (sio.value == 'easiest') {
myblurb=myblurb.replace(', diagonal', '');
myblurb=myblurb.replace(', up, down', '');
myblurb=myblurb.replace(', backwards', '');
backwardsallowed=false;
updownallowed=false;
diagonalsallowed=false;
}
if (sio.value == 'easier') {
myblurb=myblurb.replace(', diagonal', '');
myblurb=myblurb.replace(', up, down', '');
myblurb=myblurb.replace('Forwards 4', 'Forwards, backwards 4');
backwardsallowed=true;
updownallowed=false;
diagonalsallowed=false;
}
if (sio.value == 'easy') {
myblurb=myblurb.replace('Forwards 4', 'Forwards, backwards, up, down, diagonal 4');
myblurb=myblurb.replace('Forwards, backwards 4', 'Forwards, backwards, up, down, diagonal 4');
backwardsallowed=true;
updownallowed=true;
diagonalsallowed=true;
}
document.getElementById('blurb').innerHTML=myblurb;
ebye='';
ibye=0;
jbye=0;
debye='';
aletter=' ';
for (ibye=0; ibye<20; ibye++) {
for (jbye=0; jbye<100; jbye++) {
aletter=letters[Math.floor(Math.random() * letters.length)];
ebye+=aletter;
debye+=aletter;
}
ebye+=String.fromCharCode(10);
debye+='<br>';
}
zdebye='';
zzdebye='';
lastzdebye='';
goutstris='';
delayis=0;
sofar=';';
document.getElementById('mytao').value=ebye;
var divs=document.getElementsByTagName('div');
for (kdivs=0; kdivs<divs.length; kdivs++) {
divs[kdivs].innerHTML='';
}
document.getElementById('underlay').innerHTML=debye;

}

… to help encourage some optional collaboration aspects to our changed word_find_game.html Word Find Game you can also try, again, below.


Previous relevant Word Find Game Underlay Tutorial is shown below.

Word Find Game Underlay Tutorial

Word Find Game Underlay Tutorial

If you are a regular reader at this blog, you will know we discuss the CSS styling idea of …

… but there is essentially only the difference in the control of “z-index” (and maybe “opacity”) property different about the concepts, and to deploy to improve on for the start we made with yesterday’s Word Find Game Primer Tutorial.

“Underlay” usefulness, to us, goes like this …

  • what you “underlay” … for us within the new CSS styling …

    <style>
    textarea {
    font-family: Courier New;
    font-size: 20px;
    opacity: 0.9;
    z-index: 9;
    padding: 0 0 0 0;
    margin: 0 0 0 0;

    }

    #underlay {
    font-family: Courier New;
    font-size: 20px;
    opacity: 0.3;
    z-index: 1;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    }

    div.underlay {
    font-family: Courier New;
    font-size: 20px;
    opacity: 0.3;
    z-index: 2;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    }

    </style>

    … regimen …
  • has nothing to do with interactive entry, which should be more in your “overlay” thinking, else the user is stumped … but …
  • can help with dynamically enhanced markup jobs that value add to the aesthetics of the webpage

… specifically showing the user “where they’ve been” amongst the “sea of letters” of our changed word_find_game.html Word Find Game you can also try below.


Previous relevant Word Find Game Primer Tutorial is shown below.

Word Find Game Primer Tutorial

Word Find Game Primer Tutorial

Today’s “Word Find Game” gets its inspirations from two sources …

Today we just do the “proof of concept” first draft word_find_game.html, because the Selection API highlighting really suits …

  • horizontal forwards
  • horizontal backwards

… word finding in the game, but we also want to allow for …

  • vertical down
  • vertical up
  • diagonal right down
  • diagonal right up
  • diagonal left down
  • diagonal left up

… which can be handled, but in a pretty kludgy way …


function retry() {
if (('' + document.getElementById('nameif').title).trim() != '') {
document.getElementById('nameif').src=document.getElementById('nameif').title;
document.getElementById('nameif').title='';
} else {
document.getElementById('mytao').style.cursor=cscore('pointer', subscore);
}
}


function cscore(cursortype, ssc) {
if (ssc != 0) { goes++; }
if (ssc > 0) { score+=ssc; }
document.getElementById('score').innerHTML='' + score + '/' + goes;
subscore=0;
return cursortype;
}


function checkname(iois, iserror) {
var ifnd=-1, newname='';
var revsisc='', jrev=0;
console.log('checkname1');
if (iserror) {
if (iois.src.indexOf('second=') == -1 && iois.src.indexOf('iswordthere=') != -1) {
if (('' + iois.title).trim() != '') {
//document.getElementById('mytao').style.cursor='pointer';
document.body.title='';
iois.src=iois.title;
iois.title='';
} else {
//alert(1);
for (jrev=eval(-1 + eval('' + decodeURIComponent(iois.src.split('iswordthere=')[1].split('&')[0].split('#')[0]).length)); jrev>=0; jrev--) {
revsisc+=decodeURIComponent(iois.src.split('iswordthere=')[1].split('&')[0].split('#')[0]).substring(jrev, eval(1 + jrev));
}
//alert('Newname=' + revsisc);
document.body.title='';
iois.title='';
iois.src=iois.src.split('iswordthere=')[0] + 'second=y&iswordthere=' + encodeURIComponent(revsisc);
}
} else {
document.getElementById('mytao').style.cursor=cscore('pointer', subscore);
}
} else {
if (iois != null) {
ifnd=iois.src.indexOf('iswordthere=');
console.log('checkname2 ' + ifnd);
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null && ifnd != -1) {
console.log('checkname3 ' + ifnd);
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
console.log('checkname4 ' + ifnd);
if (aconto.body.innerHTML.indexOf('</p>') != -1 && aconto.body.innerHTML.indexOf('></p>') == -1) {
document.body.title='';
iois.title='';
document.getElementById('mytao').style.cursor=cscore('pointer', Math.abs(subscore));
console.log('Found name ' + aconto.body.innerHTML.split('</p>')[0].split('>')[eval(-1 + aconto.body.innerHTML.indexOf('</p>')[0].split('>').length)]);
} else if (aconto.body.innerHTML.indexOf('<') == -1 && aconto.body.innerHTML.trim() != '') {
document.body.title='';
iois.title='';
document.getElementById('mytao').style.cursor=cscore('pointer', Math.abs(subscore));
console.log('Found name ' + aconto.body.innerHTML);
} else if (iois.src.indexOf('second=') == -1 && iois.src.indexOf('iswordthere=') != -1) {
if (('' + iois.title).trim() != '') {
//document.getElementById('mytao').style.cursor='pointer';
document.body.title='';
iois.src=iois.title;
iois.title='';
} else {
//alert(1);
for (jrev=eval(-1 + eval('' + decodeURIComponent(iois.src.split('iswordthere=')[1].split('&')[0].split('#')[0]).length)); jrev>=0; jrev--) {
revsisc+=decodeURIComponent(iois.src.split('iswordthere=')[1].split('&')[0].split('#')[0]).substring(jrev, eval(1 + jrev));
}
//alert('Newname=' + revsisc);
document.body.title='';
iois.title='';
iois.src=iois.src.split('iswordthere=')[0] + 'second=y&iswordthere=' + encodeURIComponent(revsisc);
}
} else {
document.getElementById('mytao').style.cursor=cscore('pointer', subscore);
}
} else {
console.log('checkname5 ' + ifnd);
//alert('WhY?');
document.getElementById('mytao').style.cursor=cscore('pointer', subscore);
}
} else if (ifnd != -1) {
console.log('checkname6 ' + ifnd);
ifnd=ifnd;
if (iois.src.indexOf('second=') == -1 && iois.src.indexOf('iswordthere=') != -1) {
//alert(11);
for (jrev=eval(-1 + eval('' + decodeURIComponent(iois.src.split('iswordthere=')[1].split('&')[0].split('#')[0]).length)); jrev>=0; jrev--) {
revsisc+=decodeURIComponent(iois.src.split('iswordthere=')[1].split('&')[0].split('#')[0]).substring(jrev, eval(1 + jrev));
}
//alert('newname=' + revsisc);
iois.src=iois.src.split('iswordthere=')[0] + 'second=y&iswordthere=' + encodeURIComponent(revsisc);
} else {
document.getElementById('mytao').style.cursor=cscore('pointer', subscore);
}
}
}
}
}


function getmltrans(instris) {
goutstris='';
outstris=instris;
var ebay=ebye, jb=0, kb=2;
while (outstris.indexOf(String.fromCharCode(10)) != -1) {
outstris=outstris.replace(/\ /g,'').replace(String.fromCharCode(10),'');
}
while (ebay.indexOf(String.fromCharCode(10)) != -1) {
ebay=ebay.replace(/\ /g,'').replace(String.fromCharCode(10),'');
}
var linesare=instris.split(String.fromCharCode(10));
var xlinesare=ebye.split(String.fromCharCode(10));
if (eval('' + linesare.length) == 1) { return outstris; }
if (eval('' + linesare.length) > 3) {
var onepos=ebay.indexOf(outstris);
var startpos=eval(onepos % 100);
var endpos=eval(eval(onepos + eval('' + outstris.length)) % 100);
var izero=Math.floor(onepos / 100);
if (startpos > endpos) {
if (eval(startpos - eval(-2 + eval('' + linesare.length))) == endpos) {
outstris=xlinesare[izero].substring(startpos, eval(1 + startpos));
//alert('first character is ' + outstris + ' is startpos=' + startpos + ' in xlinesare[' + izero + ']=' + xlinesare[izero]);
izero++;
for (jb=izero; jb<xlinesare.length; jb++) {
if (kb <= eval('' + linesare.length)) {
startpos--;
outstris+=xlinesare[jb].substring(startpos, eval(1 + startpos));
}
kb++;
}
goutstris=outstris;
delayis=500;
setTimeout(afterbit, delayis);
//alert('izero=' + izero + ' ' + outstris + ' left diagonal string potentially ' + linesare.length + ' long starting at ' + eval(onepos % 100) + ' and ending at ' + endpos);
} else {
outstris='';
}
} else {
if (eval(endpos - eval(-2 + eval('' + linesare.length))) == startpos) {
outstris=xlinesare[izero].substring(startpos, eval(1 + startpos));
izero++;
for (jb=izero; jb<xlinesare.length; jb++) {
if (kb <= eval('' + linesare.length)) {
startpos++;
outstris+=xlinesare[jb].substring(startpos, eval(1 + startpos));
}
kb++;
}
goutstris=outstris;
delayis=500;
setTimeout(afterbit, delayis);
//alert(outstris + ' right diagonal string potentially ' + linesare.length + ' long starting at ' + eval(onepos % 100) + ' and ending at ' + endpos);
} else if (eval(-1 + endpos) == startpos) {
outstris=xlinesare[izero].substring(startpos, eval(1 + startpos));
izero++;
for (jb=izero; jb<xlinesare.length; jb++) {
if (kb <= eval('' + linesare.length)) {
outstris+=xlinesare[jb].substring(startpos, eval(1 + startpos));
}
kb++;
}
goutstris=outstris;
delayis=500;
setTimeout(afterbit, delayis);
//alert('izero=' + izero + ' ' + outstris + ' up or down');
} else {
outstris='';
}
}
//alert('string potentially ' + linesare.length + ' long starting at ' + eval(onepos % 100) + ' and ending at ' + eval(eval(onepos + eval('' + outstris.length)) % 100));
}


return outstris;
}


function afterbit() {
if (goutstris == '') { return ''; }
var revsis='';
var documentgetSelectiontoString=goutstris;
if (eval('' + documentgetSelectiontoString.length) >= 4) {
goutstris='';
//document.getElementById('emailsms').style.display='table-cell';
document.getElementById('mytao').title=documentgetSelectiontoString;
aemailurl=origemailurl + encodeURIComponent(documentgetSelectiontoString);
document.getElementById('aemail').href=aemailurl;
asmsurl=origsmsurl + encodeURIComponent(String.fromCharCode(10) + documentgetSelectiontoString);
document.getElementById('asms').href=asmsurl;
for (var irev=eval(-1 + eval('' + documentgetSelectiontoString.length)); irev>=0; irev--) {
revsis+=documentgetSelectiontoString.substring(irev, eval(1 + irev));
}
console.log(documentgetSelectiontoString);
subscore=eval(0 - eval('' + documentgetSelectiontoString.length));
console.log('../PHP/surprise.php?min=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&max=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + documentgetSelectiontoString.toLowerCase());
setTimeout(retry, 8000);
document.getElementById('mytao').style.cursor='progress';
document.getElementById('nameif').title='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);
document.getElementById('nameif').src='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());
} else {
document.getElementById('mytao').style.cursor='not-allowed';
document.body.title='Already tried.';
}
return goutstris;
}


// addEventListener version
document.addEventListener('selectionchange', () => {
var revsis='';
var documentgetSelectiontoString=getmltrans(document.getSelection().toString());
if (eval('' + documentgetSelectiontoString.length) >= 4) {
if (sofar.indexOf(';' + documentgetSelectiontoString + ';') == -1) {
sofar+=documentgetSelectiontoString + ';';
if (goutstris == '') {
//document.getElementById('emailsms').style.display='table-cell';
document.getElementById('mytao').title=documentgetSelectiontoString;
aemailurl=origemailurl + encodeURIComponent(documentgetSelectiontoString);
document.getElementById('aemail').href=aemailurl;
asmsurl=origsmsurl + encodeURIComponent(String.fromCharCode(10) + documentgetSelectiontoString);
document.getElementById('asms').href=asmsurl;
for (var irev=eval(-1 + eval('' + documentgetSelectiontoString.length)); irev>=0; irev--) {
revsis+=documentgetSelectiontoString.substring(irev, eval(1 + irev));
}
console.log(documentgetSelectiontoString);
subscore=eval(0 - eval('' + documentgetSelectiontoString.length));
console.log('../PHP/surprise.php?min=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&max=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + documentgetSelectiontoString.toLowerCase());
setTimeout(retry, 8000);
document.getElementById('mytao').style.cursor='progress';
document.getElementById('nameif').title='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&second=y&iswordthere=' + encodeURIComponent(revsis);
document.getElementById('nameif').src='../PHP/surprise.php?miZn=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&maZx=' + eval(1 + eval('' + documentgetSelectiontoString.length)) + '&firstJUNKname=y&youllneverfindthis=y' + '&iswordthere=' + encodeURIComponent(documentgetSelectiontoString.toLowerCase());
}
} else {
goutstris='';
document.getElementById('mytao').style.cursor='not-allowed';
document.body.title='Already tried.';
}
}
});


// addEventListener version
document.addEventListener('selectstart', () => {
document.getElementById('mytao').title='';
aemailurl=origemailurl;
asmsurl=origsmsurl;
document.getElementById('mytao').style.cursor=cscore('pointer', subscore);
document.body.title='';
console.log('Selection started');
});

… just relying on Selection API text highlighting in an HTML textarea element. Other ideas to improve await for follow up versions!


Previous relevant Selection API and Clipboard API Tutorial is shown below.

Selection API and Clipboard API Tutorial

Selection API and Clipboard API Tutorial

There’s the …

  • clipboard, the “cut and copy and paste ideas”, for text, as we showed you with Clipboard API Image Tutorial and Clipboard API Primer Tutorial … but there’s also the bit before you reach the clipboard using the …
  • text selection (ie. the bit of text you highlight using your mouse or touchpad) … accessible, today, via our introduction to the Selection API

… using HTML changed code


<table><tr><td><textarea id=mytao class=editor rows=7 cols=120 onmousedown="mustnot=true; setTimeout(mnoff, 2000);" ontouchstart="mustnot=true; setTimeout(mnoff, 2000);"></textarea></td></TR><TR><td id=emailsms style=display:none;vertical-align:top;> <a target=_blank href='mailto:?subject=My%20Selection%20...&body=' id=aemail title=Email>&#128231;</a> <a target=_blank onmouseover="if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl; } }" ontouchstart="if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl; } }" href='sms:&body=My%20Selection%20...' id=asms title=SMS>&#128223;</a></td></tr></table><br><br>

… supported by new Javascript event interventional code …


var origemailurl='mailto:?subject=My%20Selection%20...&body=';
var origsmsurl='sms:&body=My%20Selection%20...';
var smsee='';

// addEventListener version
document.addEventListener('selectionchange', () => {
document.getElementById('emailsms').style.display='table-cell';
document.getElementById('mytao').title=document.getSelection().toString();
aemailurl=origemailurl + encodeURIComponent(document.getSelection().toString());
document.getElementById('aemail').href=aemailurl;
asmsurl=origsmsurl + encodeURIComponent(String.fromCharCode(10) + document.getSelection().toString());
document.getElementById('asms').href=asmsurl;
console.log(document.getSelection().toString());
});

// addEventListener version
document.addEventListener('selectstart', () => {
document.getElementById('mytao').title='';
aemailurl=origemailurl;
asmsurl=origsmsurl;
console.log('Selection started');
});

… to be able to share your highlighted text snippets via email or SMS in the changed clipboard_api_test.html Selection API usage web application you can also try below.


Previous relevant Clipboard API Image Tutorial is shown below.

Clipboard API Image Tutorial

Clipboard API Image Tutorial

Yes, yesterday’s Clipboard API Primer Tutorial‘s Clipboard API usages just involved …

  • text based data … and today we turn our attention to …
  • image based data

… to extend the functionality and interest of our changed clipboard_api_test.htm proof of concept
text and image clipboard using webpage.

It’s lucky for us that there are so many good resources out there to help, one link of real interest, for us, being this excellent link, thanks, getting us to use this new Javascript function …


async function pasteImage() {
//event.stopPropagation();
try {
const permission = await navigator.permissions.query({ name: 'clipboard-read' });
if (permission.state === 'denied') {
throw new Error('Not allowed to read clipboard.');
}
const clipboardContents = await navigator.clipboard.read();
for (const item of clipboardContents) {
if (!item.types.includes('image/png')) {
throw new Error('Clipboard contains non-image data.');
}
const blob = await item.getType('image/png');
imgz = new Image();
anothercell();
imgz.onload = () => {
destinationImage.style.width='' + imgz.width + 'px';
destinationImage.style.height='' + imgz.height + 'px';
prevw=eval('' + ('' + cnv.style.width).replace('px',''));
prevh=eval('' + ('' + cnv.style.height).replace('px',''));
console.log('canvas width becomes ' + eval('' + cnv.width) + ' + ' + eval('' + imgz.width) + ' = ' + '' + eval(eval('' + cnv.width) + eval('' + imgz.width)) + 'px');
cnv.style.width='' + eval(eval('' + ('' + cnv.style.width).replace('px','')) + eval('' + imgz.width)) + 'px';
cnv.style.height='' + eval(eval('' + ('' + cnv.style.height).replace('px','')) + eval('' + imgz.height)) + 'px';
cnv.width='' + ('' + cnv.style.width).replace('px','') + 'px';
cnv.height='' + ('' + cnv.style.height).replace('px','') + 'px';
if (mmode == 'mbefore' || 1 == 1) {
ctx.drawImage(imgz, prevw, prevh);
if (wo) {
wo.close();
wo=null;
}
cnv.style.display='block';
//wo=window.open('','_blank','top=50,left=50,height=600,width=600');
//wo.document.write(cnv.toDataURL('image/png'));
}
};
imgz.src = URL.createObjectURL(blob);
destinationImage.src = URL.createObjectURL(blob);
//cnv.style.backgroundRepeat=(('' + cnv.style.backgroundRepeat) + ',no-repeat').replace(/^\,/g,'');
//if (('' + cnv.style.background + ' ').trim() != '') { document.getElementById('mysummary').innerHTML='Conglomerated Images below ...'; }
cnv.style.background=(('' + cnv.style.background) + ',url(' + destinationImage.src + ') no-repeat').replace(/^\,/g,'');
//document.querySelector(".editor").style.display='block';
//destinationImage.style.display='none';
setTimeout(anothercellz, 6000);
}
}
catch (error) {
console.error(error.message);
}
}

… to achieve a lot of this image data use of the Clipboard API functionality.


Previous relevant Clipboard API Primer Tutorial is shown below.

Clipboard API Primer Tutorial

Clipboard API Primer Tutorial

Here’s another day of testing a Javascript API today, which has that “desktop feel”, that being the Clipboard API

The Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard.

… our clipboard_api_test.html proof of concept version offering “text clipboard data” functionality from the text based clipboard into an HTML textarea element via …

  • append
  • prepend
  • at cursor

… modes of use, you can also try below (or get a sneak peak at tomorrow’s ideas) …

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.

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Google Chart Geo Chart Image Chart Mixed Mode Tutorial

Google Chart Geo Chart Image Chart Mixed Mode Tutorial

Google Chart Geo Chart Image Chart Mixed Mode Tutorial

Today we’ve been shoring up the scenario where …

  • the user picks some version of &aregeographicals=y mode of user entry at the first prompt … but then …
  • mixes it up between …
    1. latitude/longitude/place … and …
    2. country/region code/name

    … modes of input data entries

The affected PHP now goes …

<?php

// ;Continent;CC1|CC2|:blLAT,blLONG,trLAT,trLONG:width,height:scblX,scblY,sctrX,sctrY
$continfo=';Europe;IS|CY|:35.16666,-27.6,67.0,33.36666:468,450:422,560,890,140'; // 53 523
$continfo.=';Australia;AU|AU|:-44,113.65,-10.26667,161.28333:600,450:422,560,866,140';
$continfo.=';Asia;FI|WS|:-14,37,81,179.9:600,450:422,560,866,140';
$continfo.=';America;GS|US|:-56,-179.9,77,-35:600,450:422,560,866,140';
$continfo.=';Africa;TF||:-35,-17,37,52:600,450:422,560,890,140';

$wrange=':fixed=-90,-180,90,180';
$crange=':fixed=-90,-180,90,180';

$justrand=false;
if (isset($_POST['rand']) || isset($_GET['rand'])) { $justrand=true; }
$gw="556";
if ($justrand) { $gw="660"; }
$gh="347";
if ($justrand) { $gh="440"; }

$prechartdiv="";
$postchartdiv="";
$xiso='iso';
$xxiso='';
$cdefascr='';
if (isset($_POST['title']) || $justrand) {
$ibps=1;
foreach ($_POST as $name => $val) {
if ($name == "data" && !isset($_POST['question']) && !isset($_POST['guess']) && !isset($_POST['titlequiz'])) {
//file_put_contents('zxxxx.zxxxx', $_POST['data']);
if (((strpos(urldecode($_POST[$name]), "undefined") !== false && isset($_POST['aregeographicals'])) || strpos(urldecode($_POST[$name]), "|") === false) && strpos(urldecode($_POST[$name]), "~") !== false && $_POST[$name] != '') {
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;'><tr><td style='vertical-align:top;margin:0 0 0 0;' id=tdleft>";
$mone=2;
$mstart=3;
if ((strpos(urldecode($_POST[$name]), "undefined") !== false && isset($_POST['aregeographicals']))) {
$bps=explode('undefined|~', urldecode($_POST[$name]));
$mone=1;
$mstart=2;
$bps[1]=explode('~', $bps[1])[0];
} else {
$bps=explode('~', urldecode($_POST[$name]));
}
$bandp=explode('~', $bps[1])[0];
// <img onload="document.getElementById('od2').style.width=over('100%');" style="margin:0 0 0 0;width:530px;height:350px;" src="//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=London|GB-SCO&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&tellmecorners=y" id="kmap" usemap="#imap">
$isregional=false;
if (isset($_POST['regional'])) { $isregional=true; }
$theframeoh='';
if (strpos($bps[$ibps], '-') !== false) {
if (strlen(explode('-', $bps[$ibps])[0]) == 2) {
if (strpos($ourtzlist, ',' . strtoupper(explode('-', $bps[$ibps])[0]) . ',') !== false) {
$thiscntis=explode('/', explode('>', explode(',' . strtoupper(explode('-', $bps[$ibps])[0]) . ',', $ourtzlist)[1])[1])[0];
if (strpos($continfo, ';' . $thiscntis . ';') !== false) {
if ($crange == $wrange || $crange == ':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0]) {
$crange=':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0];
} else {
$crange=$wrange;
}
}
}
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_POST['data']);
}
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
if (strlen(explode(urlencode('-'), $bps[$ibps])[0]) == 2) {
$thiscntis=explode('/', explode('>', explode(',' . strtoupper(explode(urlencode('-'), $bps[$ibps])[0]) . ',', $ourtzlist)[1])[1])[0];
if (strpos($continfo, ';' . $thiscntis . ';') !== false) {
if ($crange == $wrange || $crange == ':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0]) {
$crange=':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0];
} else {
$crange=$wrange;
}
}
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_POST['data']);
}
}
for ($ibps=$mstart; $ibps<sizeof($bps); $ibps+=$mone) {
$bps[$ibps]=explode('~', $bps[$ibps])[0];
$bandp.="|" . $bps[$ibps];
if (strpos($bps[$ibps], '-') !== false) {
if (strpos($ourtzlist, ',' . strtoupper(explode('-', $bps[$ibps])[0]) . ',') !== false) {
$thiscntis=explode('/', explode('>', explode(',' . strtoupper(explode('-', $bps[$ibps])[0]) . ',', $ourtzlist)[1])[1])[0];
if (strpos($continfo, ';' . $thiscntis . ';') !== false) {
if ($crange == $wrange || $crange == ':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0]) {
$crange=':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0];
} else {
$crange=$wrange;
}
}
}
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_POST['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$thiscntis=explode('/', explode('>', explode(',' . strtoupper(explode(urlencode('-'), $bps[$ibps])[0]) . ',', $ourtzlist)[1])[1])[0];
if (strpos($continfo, ';' . $thiscntis . ';') !== false) {
if ($crange == $wrange || $crange == ':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0]) {
$crange=':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0];
} else {
$crange=$wrange;
}
}
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_POST['data']);
}
}
if (!isset($_POST['onclick'])) { $_POST['onclick']='y'; }
if ((6 == 6 || strpos(str_replace('+',' ',urldecode($_POST['title'])), ';') !== false) && strpos(str_replace('+',' ',urldecode($_POST['data'])), '|undefined') !== false) {
$isregional=true; // recent
//file_put_contents('zz.zz', $_POST['data']);
$dm='%20';
if (strpos($_POST['data'], '+') !== false) {
$dm='+';
} else if (strpos($_POST['data'], ' ') !== false) {
$dm=' ';
}
$dataparts=explode('' . $dm . ',' . $dm . '', $_POST['data']);
for ($kdata=0; $kdata<sizeof($dataparts); $kdata++) {
if (strpos($dataparts[$kdata], 'undefined') !== false) {
$_POST['data']=str_replace('`','',str_replace(',`','',(str_replace($dm,'%20',str_replace($dataparts[$kdata], '', str_replace('' . $dm . '' . $dataparts[$kdata], '', str_replace('' . $dm . '' . $dataparts[$kdata] . '' . $dm . '', '', str_replace('' . $dm . '' . $dataparts[$kdata] . '' . $dm . ',', '', str_replace(',' . $dm . '' . $dataparts[$kdata] . '' . $dm . '', '', $_POST['data'])))))) . '`')));
//file_put_contents('zx.zx', $_POST['data']);
}
}
if (isset($_POST['iso'])) { $_POST['iso']=''; }
}
if ($isregional) {
if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js')) {
unlink($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js');
}
$cdefascr='<script type="text/javascript" src="/defascr.js?rand=' . rand(0,175647685786) . '" defer></script>';
$theframeoh="<img onload=\"document.getElementById('od2').style.width=over('100%');\" style='margin:0 0 0 0;width:530px;height:350px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&tellmecorners=y' id=kmap usemap=#imap data-oncontextmenu=itoggle(event); data-ondblclick=itoggle(event);></img><map name=imap id=imap><area data-oncontextmenu=itoggle(event); data-ondblclick=itoggle(event); onmouseover=defaover(event); onclick='setTimeout(stdefaclick,3000);' shape='default' nohref></area></map>";
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;' id=tdleft><tr><td style='vertical-align:top;margin:0 0 0 0;' data-oncontextmenu=itoggle(event); data-ondblclick=itoggle(event); onclick=itoggle(event); title='Click outside map to toggle among map Country view and World view and Continent view'>" . $theframeoh . "</td><td style=vertical-align:top; id=tdright>";
$postchartdiv="</td></tr></table>";
} else {
$theframeoh="<iframe onload=\"document.getElementById('od2').style.width='100%';\" style='margin:0 0 0 0;width:600px;height:400px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274'></iframe>";
$postchartdiv="</td><td style=vertical-align:top; id=tdright>" . $theframeoh . "</td></tr></table>";
}
}
}
if ($name != "rand") { $justrand=false; }
if ($name != "iso" && substr(($name . ' '),0,3) == 'iso') {
$xiso=$name;
$xxiso=$name;
} else if ($name == 'iso' && $xxiso == '') {
$xxiso=$name;
}
}
}
if (isset($_GET['title']) || $justrand) {
$ibps=1;
foreach ($_GET as $name => $val) {
if ($name == "data" && !isset($_GET['question']) && !isset($_GET['guess']) && !isset($_GET['titlequiz'])) {
//file_put_contents('xxxxx.xxxxx', $_GET['data'] . ' ... ' . $_GET['title']);
if (((strpos(urldecode($_GET[$name]), "undefined") !== false && isset($_GET['aregeographicals'])) || strpos(urldecode($_GET[$name]), "|") === false) && strpos(urldecode($_GET[$name]), "~") !== false && $_GET[$name] != '') {
//file_put_contents('xxxx.xxxx', $_GET['data']);
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;'><tr><td style='vertical-align:top;margin:0 0 0 0;' id=tdleft>";
$mone=2;
$mstart=3;
if ((strpos(urldecode($_GET[$name]), "undefined") !== false && isset($_GET['aregeographicals']))) {
$bps=explode('undefined|~', urldecode($_GET[$name]));
$mone=1;
$mstart=2;
$bps[1]=explode('~', $bps[1])[0];
} else {
$bps=explode('~', urldecode($_GET[$name]));
}
$bandp=explode('~', $bps[1])[0];
$isregional=false;
if (isset($_GET['regional'])) { $isregional=true; }
$theframeoh='';
if (strpos($bps[$ibps], '-') !== false) {
if (strlen(explode('-', $bps[$ibps])[0]) == 2) {
if (strpos($ourtzlist, ',' . strtoupper(explode('-', $bps[$ibps])[0]) . ',') !== false) {
$thiscntis=explode('/', explode('>', explode(',' . strtoupper(explode('-', $bps[$ibps])[0]) . ',', $ourtzlist)[1])[1])[0];
if (strpos($continfo, ';' . $thiscntis . ';') !== false) {
if ($crange == $wrange || $crange == ':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0]) {
$crange=':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0];
} else {
$crange=$wrange;
}
}
}
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_GET['data']);
}
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
if (strlen(explode(urlencode('-'), $bps[$ibps])[0]) == 2) {
if (strpos($ourtzlist, ',' . strtoupper(explode(urlencode('-'), $bps[$ibps])[0]) . ',') !== false) {
$thiscntis=explode('/', explode('>', explode(',' . strtoupper(explode(urlencode('-'), $bps[$ibps])[0]) . ',', $ourtzlist)[1])[1])[0];
if (strpos($continfo, ';' . $thiscntis . ';') !== false) {
if ($crange == $wrange || $crange == ':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0]) {
$crange=':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0];
} else {
$crange=$wrange;
}
}
}
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_GET['data']);
}
}
for ($ibps=$mstart; $ibps<sizeof($bps); $ibps+=$mone) {
$bps[$ibps]=explode('~', $bps[$ibps])[0];
$bandp.="|" . $bps[$ibps];
if (strpos($bps[$ibps], '-') !== false) {
if (strpos($ourtzlist, ',' . strtoupper(explode('-', $bps[$ibps])[0]) . ',') !== false) {
$thiscntis=explode('/', explode('>', explode(',' . strtoupper(explode('-', $bps[$ibps])[0]) . ',', $ourtzlist)[1])[1])[0];
if (strpos($continfo, ';' . $thiscntis . ';') !== false) {
if ($crange == $wrange || $crange == ':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0]) {
$crange=':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0];
} else {
$crange=$wrange;
}
}
}
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_GET['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$thiscntis=explode('/', explode('>', explode(',' . strtoupper(explode(urlencode('-'), $bps[$ibps])[0]) . ',', $ourtzlist)[1])[1])[0];
if (strpos($continfo, ';' . $thiscntis . ';') !== false) {
if ($crange == $wrange || $crange == ':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0]) {
$crange=':fixed=' . explode(':', explode(':', explode(';' . $thiscntis . ';', $continfo)[1])[1])[0];
} else {
$crange=$wrange;
}
}
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_GET['data']);
}
}
if (!isset($_GET['onclick'])) { $_GET['onclick']='y'; }
//file_put_contents('xxx.xxx', $_GET['data']);
if ((6 == 6 || strpos(str_replace('+',' ',urldecode($_GET['title'])), ';') !== false) && strpos(str_replace('+',' ',urldecode($_GET['data'])), '|undefined') !== false) {
$isregional=true; // recent
//file_put_contents('x.x', $_GET['data']);
$dm='%20';
if (strpos($_GET['data'], '+') !== false) {
$dm='+';
} else if (strpos($_GET['data'], ' ') !== false) {
$dm=' ';
}
$dataparts=explode('' . $dm . ',' . $dm . '', $_GET['data']);
for ($kdata=0; $kdata<sizeof($dataparts); $kdata++) {
if (strpos($dataparts[$kdata], 'undefined') !== false) {
$_GET['data']=str_replace('`','',str_replace(',`','',(str_replace($dm,'%20',str_replace('' . $dataparts[$kdata], '', str_replace('' . $dm . '' . $dataparts[$kdata], '', str_replace('' . $dm . '' . $dataparts[$kdata] . '' . $dm . '', '', str_replace('' . $dm . '' . $dataparts[$kdata] . '' . $dm . ',', '', str_replace(',' . $dm . '' . $dataparts[$kdata] . '' . $dm . '', '', $_GET['data'])))))) . '`')));
//file_put_contents('xx.xx', "dm=" . $dm . ' and ' . $dataparts[$kdata] . ' ... leads to ... ' . $_GET['data']);
}
}
if (isset($_GET['iso'])) { $_GET['iso']=''; }
}
if ($isregional) {
if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js')) {
unlink($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js');
}
$cdefascr='<script type="text/javascript" src="/defascr.js?rand=' . rand(0,175647685786) . '" defer></script>';
$theframeoh="<img onload=\"document.getElementById('od2').style.width=over('100%');\" style='margin:0 0 0 0;width:530px;height:350px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&tellmecorners=y' id=kmap usemap=#imap data-oncontextmenu=itoggle(event); data-ondblclick=itoggle(event);></img><map name=imap id=imap><area data-oncontextmenu=itoggle(event); data-ondblclick=itoggle(event); onmouseover=defaover(event); onclick='setTimeout(stdefaclick,3000);' shape='default' nohref></area></map>";
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;' id=tdleft><tr><td style='vertical-align:top;margin:0 0 0 0;' data-oncontextmenu=itoggle(event); data-ondblclick=itoggle(event); onclick=itoggle(event); title='Click outside map to toggle among map Country view and World view and Continent view'>" . $theframeoh . "</td><td style=vertical-align:top; id=tdright>";
$postchartdiv="</td></tr></table>";
} else {
$postchartdiv="</td><td style=vertical-align:top; id=tdright>" . $theframeoh . "</td></tr></table>";
}
}
}
if ($name != "rand") { $justrand=false; }
if ($name != "iso" && substr(($name . ' '),0,3) == 'iso') {
$xiso=$name;
$xxiso=$name;
} else if ($name == 'iso' && $xxiso == '') {
$xxiso=$name;
}
}
}

?>

… and established, if suitable, a three way Google Charts Image Chart Map Chart toggling …

  1. Country view (initially shown) …
  2. World view (always a possibility) … and sometimes possible …
  3. Continental view … toggleable via clicks just outside the Image Chart Map Chart

… scenario, further to yesterday’s Google Chart Geo Chart Image Chart Better Context Tutorial in the changed geo_chart.php Geo Chart interfacer.


Previous relevant Google Chart Geo Chart Image Chart Better Context Tutorial is shown below.

Google Chart Geo Chart Image Chart Better Context Tutorial

Google Chart Geo Chart Image Chart Better Context Tutorial

On top of yesterday’s Google Chart Geo Chart Image Chart Context Tutorial efforts regarding Google Chart Geo Chart and Google Charts Image Chart Map Chart context we want to add layers of …

  • Geo Chart default “country shaded mode” mode of use …
  • image map (today confined to …
    <?php

    $prechartdiv="";
    $postchartdiv="";
    $xiso='iso';
    $xxiso='';
    $cdefascr='';
    if (isset($_POST['title']) || $justrand) {
    $ibps=1;
    foreach ($_POST as $name => $val) {
    if ($name == "data" && !isset($_POST['question']) && !isset($_POST['guess']) && !isset($_POST['titlequiz'])) {
    if (strpos(urldecode($_POST[$name]), "|") === false && strpos(urldecode($_POST[$name]), "~") !== false && $_POST[$name] != '') {
    $prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;'><tr><td style='vertical-align:top;margin:0 0 0 0;' id=tdleft>";
    $bps=explode('~', urldecode($_POST[$name]));
    $bandp=$bps[1];
    $isregional=false;
    if (isset($_POST['regional'])) { $isregional=true; }
    $theframeoh='';
    if (strpos($bps[$ibps], '-') !== false) {
    $isregional=true;
    $_POST['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_POST['data']);
    } else if (strpos($bps[$ibps], urlencode('-')) !== false) {
    $isregional=true;
    $_POST['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_POST['data']);
    }
    for ($ibps=3; $ibps<sizeof($bps); $ibps+=2) {
    $bandp.="|" . $bps[$ibps];
    if (strpos($bps[$ibps], '-') !== false) {
    $isregional=true;
    $_POST['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_POST['data']);
    } else if (strpos($bps[$ibps], urlencode('-')) !== false) {
    $isregional=true;
    $_POST['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_POST['data']);
    }
    }
    if (!isset($_POST['onclick'])) { $_POST['onclick']='y'; }
    if ($isregional) {
    if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js')) {
    unlink($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js');
    }
    $cdefascr='<script type="text/javascript" src="/defascr.js?rand=' . rand(0,175647685786) . '" defer></script>';
    $theframeoh="<img onload=\"document.getElementById('od2').style.width=over('100%');\" style='margin:0 0 0 0;width:530px;height:350px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&tellmecorners=y' id=kmap usemap=#imap></img><map name=imap id=imap><area onmouseover=defaover(event); onclick=defaclick(event); shape='default' nohref></area></map>";
    $prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;' id=tdleft><tr><td style='vertical-align:top;margin:0 0 0 0;'>" . $theframeoh . "</td><td style=vertical-align:top; id=tdright>";
    $postchartdiv="</td></tr></table>";
    } else {
    $theframeoh="<iframe onload=\"document.getElementById('od2').style.width='100%';\" style='margin:0 0 0 0;width:600px;height:400px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274'></iframe>";
    $postchartdiv="</td><td style=vertical-align:top; id=tdright>" . $theframeoh . "</td></tr></table>";
    }
    }
    }
    if ($name != "rand") { $justrand=false; }
    if ($name != "iso" && substr(($name . ' '),0,3) == 'iso') {
    $xiso=$name;
    $xxiso=$name;
    } else if ($name == 'iso' && $xxiso == '') {
    $xxiso=$name;
    }
    }
    }
    if (isset($_GET['title']) || $justrand) {
    $ibps=1;
    foreach ($_GET as $name => $val) {
    if ($name == "data" && !isset($_GET['question']) && !isset($_GET['guess']) && !isset($_GET['titlequiz'])) {
    if (strpos(urldecode($_GET[$name]), "|") === false && strpos(urldecode($_GET[$name]), "~") !== false && $_GET[$name] != '') {
    $prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;'><tr><td style='vertical-align:top;margin:0 0 0 0;' id=tdleft>";
    $bps=explode('~', urldecode($_GET[$name]));
    $bandp=$bps[1];
    $isregional=false;
    if (isset($_GET['regional'])) { $isregional=true; }
    $theframeoh='';
    if (strpos($bps[$ibps], '-') !== false) {
    $isregional=true;
    $_GET['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_GET['data']);
    } else if (strpos($bps[$ibps], urlencode('-')) !== false) {
    $isregional=true;
    $_GET['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_GET['data']);
    }
    for ($ibps=3; $ibps<sizeof($bps); $ibps+=2) {
    $bandp.="|" . $bps[$ibps];
    if (strpos($bps[$ibps], '-') !== false) {
    $isregional=true;
    $_GET['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_GET['data']);
    } else if (strpos($bps[$ibps], urlencode('-')) !== false) {
    $isregional=true;
    $_GET['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_GET['data']);
    }
    }
    if (!isset($_GET['onclick'])) { $_GET['onclick']='y'; }
    if ($isregional) {
    if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js')) {
    unlink($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js');
    }
    $cdefascr='<script type="text/javascript" src="/defascr.js?rand=' . rand(0,175647685786) . '" defer></script>';
    $theframeoh="<img onload=\"document.getElementById('od2').style.width=over('100%');\" style='margin:0 0 0 0;width:530px;height:350px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&tellmecorners=y' id=kmap usemap=#imap></img><map name=imap id=imap><area onmouseover=defaover(event); onclick=defaclick(event); shape='default' nohref></area></map>";
    $prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;' id=tdleft><tr><td style='vertical-align:top;margin:0 0 0 0;'>" . $theframeoh . "</td><td style=vertical-align:top; id=tdright>";
    $postchartdiv="</td></tr></table>";
    } else {
    $postchartdiv="</td><td style=vertical-align:top; id=tdright>" . $theframeoh . "</td></tr></table>";
    }
    }
    }
    if ($name != "rand") { $justrand=false; }
    if ($name != "iso" && substr(($name . ' '),0,3) == 'iso') {
    $xiso=$name;
    $xxiso=$name;
    } else if ($name == 'iso' && $xxiso == '') {
    $xxiso=$name;
    }
    }
    }

    ?>
    … default area thinking, for now)
  • onmouseover and onclick event logic
  • 404.php (this WordPress blog) error processing PHP GD imagecolorat “intelligence adding” functionality extensions
    <?php

    $im = imagecreatefromstring(file_get_contents('http://chart.googleapis.com/chart' . explode('&text1=', $theqs)[0]));

    if (isset($_GET['tellmecorners']) || isset($_POST['tellmecorners'])) {
    $alertstr='Please Watch this Space.';
    //file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js', ' function defaclick(evt) { alert("' . $alertstr . '"); } function defaover(evt) { evt.target.title="' . $alertstr . '"; } ');
    $alp="0123456789ABCDEF";
    $anymore='';
    $ideally=0;
    if (isset($_GET['chld']) || isset($_POST['chld'])) {
    $cntryst='';
    $cntrysts=[];
    if (isset($_GET['chco'])) {
    $cntryst=(str_replace('+',' ',urldecode($_GET['chld'])));
    } else if (isset($_POST['chco'])) {
    $cntryst=(str_replace('+',' ',urldecode($_POST['chld'])));
    }
    $cntrysts=explode('|', $cntryst);
    for ($iok=0; $iok<sizeof($cntrysts); $iok++) {
    $jjhuh=trim(file_get_contents('http://www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?match=' . $cntrysts[$iok]));
    if ($jjhuh != '') {
    $cntrysts[$iok]=$jjhuh;
    }
    }
    $ideally=(-3 + (7 * sizeof($cntrysts)));
    if (isset($_GET['chco']) || isset($_POST['chco'])) {
    $colst='';
    $colsts=[];
    if (isset($_GET['chco'])) {
    $colst=strtoupper(str_replace('+',' ',urldecode($_GET['chco'])));
    } else if (isset($_POST['chco'])) {
    $colst=strtoupper(str_replace('+',' ',urldecode($_POST['chco'])));
    }
    if (strpos('~' . $colst, '~B3BCC0|') !== false) {
    $colst=substr($colst, 7);
    }
    $colsts=explode('|', $colst);
    $colst.='|gggggg|D0D0D0|FFFFFF|B3BCC0|';
    $tlchex='gggggg';
    $trchex='gggggg';
    $blchex='gggggg';
    $brchex='gggggg';
    $blblurb='To top left is ';
    $brblurb='To top right is ';
    $tlblurb='To bottom left is ';
    $trblurb='To top right is ';
    for ($ione=1; $ione<=15; $ione++) {
    if ($blchex == 'gggggg' || $blchex == 'D0D0D0' || $blchex == 'FFFFFF') {
    for ($iij=($ione - 0); $iij<(($newWidth - $ione)); $iij++) {
    if ($blchex == 'gggggg' || $blchex == 'D0D0D0' || $blchex == 'FFFFFF') {
    $tlrgb = imagecolorat($im, $iij, ($ione - 1));
    if ($tlrgb) {
    $tlr = ($tlrgb >> 16) & 0xFF;
    $tlg = ($tlrgb >> 8) & 0xFF;
    $tlb = $tlrgb & 0xFF;
    $blchex=substr(substr($alp,($tlr / 16)),0,1) . substr(substr($alp,($tlr % 16)),0,1) . substr(substr($alp,($tlg / 16)),0,1) . substr(substr($alp,($tlg % 16)),0,1) . substr(substr($alp,($tlb / 16)),0,1) . substr(substr($alp,($tlb % 16)),0,1);
    if (strpos('|' . $colst, '|' . $blchex) !== false) {
    if (strlen(explode('|' . $blchex, '|' . $colst)[0]) > $ideally) {
    $blchex='gggggg';
    } else if ($iij > ($newWidth / 2)) {
    $blblurb='To top is ';
    } else if ($iij > ($ione - 1)) {
    $blblurb='To left is ';
    }
    }
    }
    }
    }
    }
    if ($brchex == 'gggggg' || $brchex == 'D0D0D0' || $brchex == 'FFFFFF') {
    for ($iij=($ione - 1); $iij<(($newHeight - $ione)); $iij++) {
    if ($brchex == 'gggggg' || $brchex == 'D0D0D0' || $brchex == 'FFFFFF' || $brchex == $blchex) {
    $trrgb = imagecolorat($im, ($newWidth - $ione), $iij);
    if ($trrgb) {
    $trr = ($trrgb >> 16) & 0xFF;
    $trg = ($trrgb >> 8) & 0xFF;
    $trb = $trrgb & 0xFF;
    $brchex=substr(substr($alp,($trr / 16)),0,1) . substr(substr($alp,($trr % 16)),0,1) . substr(substr($alp,($trg / 16)),0,1) . substr(substr($alp,($trg % 16)),0,1) . substr(substr($alp,($trb / 16)),0,1) . substr(substr($alp,($trb % 16)),0,1);
    if (strpos('|' . $colst, '|' . $brchex) !== false) {
    if (strlen(explode('|' . $brchex, '|' . $colst)[0]) > $ideally) {
    $brchex='gggggg';
    } else if ($iij > ($newHeight / 2)) {
    $brblurb='To bottom is ';
    } else if ($iij > ($ione - 1)) {
    $brblurb='To right is ';
    }
    }
    }
    }
    }
    }
    if ($tlchex == 'gggggg' || $tlchex == 'D0D0D0' || $tlchex == 'FFFFFF') {
    for ($iij=($ione - 1); $iij<(($newWidth - $ione)); $iij++) {
    if ($tlchex == 'gggggg' || $tlchex == 'D0D0D0' || $tlchex == 'FFFFFF' || $tlchex == $blchex || $tlchex == $brchex) {
    $blrgb = imagecolorat($im, $iij, ($newHeight - $ione));
    if ($blrgb) {
    $blr = ($blrgb >> 16) & 0xFF;
    $blg = ($blrgb >> 8) & 0xFF;
    $blb = $blrgb & 0xFF;
    $tlchex=substr(substr($alp,($blr / 16)),0,1) . substr(substr($alp,($blr % 16)),0,1) . substr(substr($alp,($blg / 16)),0,1) . substr(substr($alp,($blg % 16)),0,1) . substr(substr($alp,($blb / 16)),0,1) . substr(substr($alp,($blb % 16)),0,1);
    if (strpos(('|' . $colst), '|' . $tlchex) !== false) {
    if (strlen(explode('|' . $tlchex, '|' . $colst)[0]) > $ideally) {
    $tlchex='gggggg';
    } else if ($iij > ($newWidth / 2)) {
    $tlblurb='To right is ';
    } else if ($iij > ($ione - 1)) {
    $tlblurb='To left is ';
    } else {
    $tlblurb='To bottom left at ' . $iij . ',' . ($newHeight - $ione) . ' is ';
    } //else if ($anymore == '') { $anymore=' ideally=' . $ideally . ' wrt colst=' . $colst . ' and found=' . explode('|' . $tlchex, $colst)[0]; }
    }
    }
    }
    }
    }
    if ($trchex == 'gggggg' || $trchex == 'D0D0D0' || $trchex == 'FFFFFF') {
    for ($iij=($newHeight - $ione); $iij>($ione - 1); $iij--) {
    if ($trchex == 'gggggg' || $trchex == 'D0D0D0' || $trchex == 'FFFFFF' || $trchex == $blchex || $trchex == $brchex || $trchex == $tlchex) {
    $brrgb = imagecolorat($im, ($newWidth - $ione), $iij);
    if ($brrgb) {
    $brr = ($brrgb >> 16) & 0xFF;
    $brg = ($brrgb >> 8) & 0xFF;
    $brb = $brrgb & 0xFF;
    $trchex=substr(substr($alp,($brr / 16)),0,1) . substr(substr($alp,($brr % 16)),0,1) . substr(substr($alp,($brg / 16)),0,1) . substr(substr($alp,($brg % 16)),0,1) . substr(substr($alp,($brb / 16)),0,1) . substr(substr($alp,($brb % 16)),0,1);
    if (strpos('|' . $colst, '|' . $trchex) !== false) {
    if (strlen(explode('|' . $trchex, '|' . $colst)[0]) > $ideally) {
    $trchex='gggggg';
    } else if ($iij > ($newHeight / 2)) {
    $trblurb='To top is ';
    } else if ($iij > ($ione - 1)) {
    $trblurb='To right is ';
    }
    }
    }
    }
    }
    }
    }
    for ($ialert=0; $ialert<sizeof($colsts); $ialert++) {
    if ($tlchex == $colsts[$ialert]) {
    $alertstr=str_replace('Please Watch this Space.', '', $alertstr);
    if (strpos($alertstr, ' is ' . $cntrysts[$ialert] . '.') === false) {
    $alertstr.=$tlblurb . $cntrysts[$ialert] . '. ';
    }
    } else if ($trchex == $colsts[$ialert]) {
    $alertstr=str_replace('Please Watch this Space.', '', $alertstr);
    if (strpos($alertstr, ' is ' . $cntrysts[$ialert] . '.') === false) {
    $alertstr.=$trblurb . $cntrysts[$ialert] . '. ';
    }
    } else if ($blchex == $colsts[$ialert]) {
    $alertstr=str_replace('Please Watch this Space.', '', $alertstr);
    if (strpos($alertstr, ' is ' . $cntrysts[$ialert] . '.') === false) {
    $alertstr.=$blblurb . $cntrysts[$ialert] . '. ';
    }
    } else if ($brchex == $colsts[$ialert]) {
    $alertstr=str_replace('Please Watch this Space.', '', $alertstr);
    if (strpos($alertstr, ' is ' . $cntrysts[$ialert] . '.') === false) {
    $alertstr.=$brblurb . $cntrysts[$ialert] . '. ';
    }
    } else if ($anymore == '' && trim($cntrysts[$ialert]) != '') {
    $anymore=' Also appearing is ' . $cntrysts[$ialert] . '. ';
    } else if (trim($cntrysts[$ialert]) != '') {
    $anymore=str_replace('. ', ', ' . $cntrysts[$ialert] . '. ', str_replace(' is ', ' are ', $anymore));
    }
    }
    if ($alertstr != 'Please Watch this Space.') {
    //$alertstr.=' trcheck=' . $trchex;
    //$alertstr.=' brcheck=' . $brchex;
    //$alertstr.=' tlcheck=' . $tlchex;
    //$alertstr.=' blcheck=' . $blchex;
    if ($anymore != '' && strpos($alertstr, 'To ') === false) {
    $anymore=str_replace('Also appear', 'Appear', $anymore);
    }
    $alertstr.=$anymore;
    file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js', ' function defaclick(evt) { alert("' . $alertstr . '"); } function defaover(evt) { evt.target.title="' . $alertstr . '"; ' . " document.getElementsByTagName('img')[0].title=" . '"' . $alertstr . '"; } ');
    } else {
    //$alertstr.=' trcheck=' . $trchex;
    //$alertstr.=' brcheck=' . $brchex;
    //$alertstr.=' tlcheck=' . $tlchex;
    //$alertstr.=' blcheck=' . $blchex;
    if ($anymore != '' && strpos($alertstr, 'To ') === false) {
    $anymore=str_replace('Also appear', 'Appear', $anymore);
    }
    $alertstr.=$anymore;
    file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js', ' function defaclick(evt) { alert("' . $alertstr . '"); } function defaover(evt) { evt.target.title="' . $alertstr . '"; } ');
    }

    }
    }
    }


    ?>
    … via “internal use only” external Javascript creation back to the parent client side via …
  • Ajax dynamic Javascript implementation
    <?php echo ”

    function over(wht) {
    if (window.XMLHttpRequest) {
    myxhrthree = new window.XMLHttpRequest;
    }
    else {
    try {
    myxhrthree = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (othermicrosoft) {
    try {
    myxhrthree = new ActiveXObject('Microsoft.XMLHTTP');
    } catch (failed) {
    myxhrthree = false;
    }
    }
    //alert(0);
    }
    if (myxhrthree) {
    //alert(5);
    myxhrthree.onreadystatechange = deferbackin;
    //alert(65);
    myxhrthree.open('GET', '/defascr.js?rand=' + Math.floor(Math.random() * 195647654756), true);
    //alert(165);
    setTimeout(function(){ myxhrthree.send(null); }, 8000);
    //alert(265);
    }
    return wht;
    }

    function deferbackin() {
    if (myxhrthree.readyState == 4) {
    if (myxhrthree.status == 200) {
    // alert(1);
    if (myxhrthree.responseText) {
    var tag = document.createElement('script');
    tag.innerHTML = myxhrthree.responseText;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    //firstScriptTag.parentNode.insertAfter(tag, firstScriptTag);
    firstScriptTag.insertAdjacentElement('afterend', tag);
    //alert(myxhrthree.responseText);
    }
    }
    }
    }

    “; ?>
  • argument &regional=y forced involvement of Image Chart Map Chart using ISO-3166 regional code user entries …
    <?php echo ‘

    title = geoprompt("Enter Geo Map Title (background image URL or background image data URI ; separated ( followed by ; ) before title are available options (and suffix examples could be &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest and in beta is &iso=De for continent view of Germany regions ready for user defined markers within the map), and &regional=y additionally shows Image Chart and you can replace Survey with Quiz for a quiz, and you can prefix by a Region Code (eg. IT) (followed by ;) before title as an available options, and you can suffix by &onclick=y for added onclick functionality and/or &region=145 to display Western Asia (for example) and/or &text=y to display text and/or &aregeographicals=y (or instead of y put an http marker image URL like http://www.rjmprogramming.com.au/PHP/GeoChart/mapc64b.png) for you prefixing Labels by lat|long| values and/or &areplaces=y (or instead of y put a comma separated http marker image URL (or use hTtP for link but no image) or placename list (with ,+ usage indicating to plot a line)) for places (prefixable by the number part of an emoji HTML Entity (decimal) eg. 128249 is video camera) rather than countries, Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] (and to make a quiz question for someone after all your entries also append (things like) &guess=Brazil&question=Which country had Tijuana brass?))", "' . str_replace("+"," ",urldecode($GETtitle)) . '");

    ‘; ?>
  • ISO-3166 code mappings from code to region/country names in image_chart.php logic (Wikipedia assisted, thanks), via new match argument usage …
    <?php

    //
    // up the top
    //
    if (isset($_GET['match'])) {
    if (!isset($_GET['ccode'])) {
    $_GET['ccode']=explode('-',explode(urlencode('-'), $_GET['match'])[0])[0];
    if ($_GET['ccode'] == $_GET['match']) {
    for ($ihuh=0; $ihuh<sizeof($iso_country_codes); $ihuh+=2) {
    if (strtoupper(explode('-', $_GET['ccode'])[0]) == strtoupper($iso_country_codes[$ihuh])) {
    echo $iso_country_codes[1 + $ihuh];
    exit;
    }
    }
    }
    }
    } else if (isset($_POST['match'])) {
    if (!isset($_POST['ccode'])) {
    $_POST['ccode']=explode('-',explode(urlencode('-'), $_POST['match'])[0])[0];
    if ($_POST['ccode'] == $_POST['match']) {
    for ($ihuh=0; $ihuh>sizeof($iso_country_codes); $ihuh+=2) {
    if (strtoupper(explode('-', $_POST['ccode'])[0]) == strtoupper($iso_country_codes[$ihuh])) {
    echo $iso_country_codes[1 + $ihuh];
    exit;
    }
    }
    }
    }
    }
    //
    // ... as $thisstate gets defined
    //
    if (isset($_GET['match'])) {
    if ($thiscode == urldecode($_GET['match']) && $thisstate != '') {
    for ($ihuh=0; $ihuh<sizeof($iso_country_codes); $ihuh+=2) {
    if (strtoupper(explode('-', $thiscode)[0]) == strtoupper($iso_country_codes[$ihuh])) {
    echo $thisstate . ' (' . $iso_country_codes[1 + $ihuh] . ')';
    exit;
    }
    }
    echo $thisstate;
    exit;
    } //else {
    //echo '*' . $thiscode . '*';
    //exit;
    //}
    } else if (isset($_POST['match'])) {
    if ($thiscode == urldecode($_POST['match']) && $thisstate != '') {
    for ($ihuh=0; $ihuh<sizeof($iso_country_codes); $ihuh+=2) {
    if (strtoupper(explode('-', $thiscode)[0]) == strtoupper($iso_country_codes[$ihuh])) {
    echo $thisstate . ' (' . $iso_country_codes[1 + $ihuh] . ')';
    exit;
    }
    }
    echo $thisstate;
    exit;
    } //else {
    //echo '*' . $thiscode . '*';
    //exit;
    //}
    }
    //
    // near the end before usual navigations away
    //
    if (isset($_GET['match'])) {
    echo '';
    exit;
    } else if (isset($_POST['match'])) {
    echo '';
    exit;
    }

    ?>

… combining and augmenting each other to produce a more useful non-mobile “onmouseover” event (ie. on hover) and/or everyone’s “onclick” event user experience in …


Previous relevant Google Chart Geo Chart Image Chart Context Tutorial is shown below.

Google Chart Geo Chart Image Chart Context Tutorial

Google Chart Geo Chart Image Chart Context Tutorial

At its essence the Google Chart Geo Chart functions in one of two ways …

  1. “the shading of countries of interest” we first coded for as an interfacing mode of use … but later we realized it could also function as a …
  2. “plot markers on world view maps” or “plot markers on country view maps”

… and with today’s work ideas we go back to that first “shading of countries of interest” mode of use, and start to augment …

  • view
  • zoom level
  • context

… possibilities by adding a newly shown Google Charts Image Chart Map Chart into the mix, even to that “context” level of mixing up ISO-3166 regional codes (eg. US-FL Florida is used in today’s animated GIF presentation involving …


https://www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=My%20World%20Survey&width=556&qx=aaaag&height=347&country=Country&popularity=Popularity&data=%20[~BL~,56]%20,%20[~KN~,78]%20,%20[~LC~,79]%20,%20[~MQ~,79]%20,%20[~US-FL~,82]

… with some small Caribbean island nation ISO 2 letter country codes in “the context of” a Caribbean island map where nations which are too small to show on your usual “shading of countries of interest” Geo Chart world view map can show on an Image Chart (albeit very small)).

To allow for this we example $_GET or $_POST incoming arguments as per

<?php

$prechartdiv="";
$postchartdiv="";

$xiso='iso';
$xxiso='';
if (isset($_POST['title']) || $justrand) {
$ibps=1;
foreach ($_POST as $name => $val) {
if ($name == "data" && !isset($_POST['question']) && !isset($_POST['guess']) && !isset($_POST['titlequiz'])) {
if (strpos(urldecode($_POST[$name]), "|") === false && strpos(urldecode($_POST[$name]), "~") !== false && $_POST[$name] != '') {
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;'><tr><td style='vertical-align:top;margin:0 0 0 0;' id=tdleft>";
$bps=explode('~', urldecode($_POST[$name]));
$bandp=$bps[1];
$isregional=false;
$theframeoh='';
if (strpos($bps[$ibps], '-') !== false) {
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_POST['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_POST['data']);
}
for ($ibps=3; $ibps<sizeof($bps); $ibps+=2) {
$bandp.="|" . $bps[$ibps];
if (strpos($bps[$ibps], '-') !== false) {
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_POST['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_POST['data']);
}
}
$theframeoh="<iframe onload=\"document.getElementById('od2').style.width='100%';\" style='margin:0 0 0 0;width:600px;height:400px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274'></iframe>";
if ($isregional) {
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;' id=tdleft><tr><td style='vertical-align:top;margin:0 0 0 0;'>" . $theframeoh . "</td><td style=vertical-align:top; id=tdright>";
$postchartdiv="</td></tr></table>";
} else {
$postchartdiv="</td><td style=vertical-align:top; id=tdright>" . $theframeoh . "</td></tr></table>";
}
}
}

if ($name != "rand") { $justrand=false; }
if ($name != "iso" && substr(($name . ' '),0,3) == 'iso') {
$xiso=$name;
$xxiso=$name;
} else if ($name == 'iso' && $xxiso == '') {
$xxiso=$name;
}
}
}
if (isset($_GET['title']) || $justrand) {
$ibps=1;
foreach ($_GET as $name => $val) {
if ($name == "data" && !isset($_GET['question']) && !isset($_GET['guess']) && !isset($_GET['titlequiz'])) {
if (strpos(urldecode($_GET[$name]), "|") === false && strpos(urldecode($_GET[$name]), "~") !== false && $_GET[$name] != '') {
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;'><tr><td style='vertical-align:top;margin:0 0 0 0;' id=tdleft>";
$bps=explode('~', urldecode($_GET[$name]));
$bandp=$bps[1];
$isregional=false;
$theframeoh='';
if (strpos($bps[$ibps], '-') !== false) {
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_GET['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_GET['data']);
}
for ($ibps=3; $ibps<sizeof($bps); $ibps+=2) {
$bandp.="|" . $bps[$ibps];
if (strpos($bps[$ibps], '-') !== false) {
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_GET['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_GET['data']);
}
}
$theframeoh="<iframe onload=\"document.getElementById('od2').style.width='100%';\" style='margin:0 0 0 0;width:600px;height:400px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274'></iframe>";
if ($isregional) {
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;' id=tdleft><tr><td style='vertical-align:top;margin:0 0 0 0;'>" . $theframeoh . "</td><td style=vertical-align:top; id=tdright>";
$postchartdiv="</td></tr></table>";
} else {
$postchartdiv="</td><td style=vertical-align:top; id=tdright>" . $theframeoh . "</td></tr></table>";
}
}
}

if ($name != "rand") { $justrand=false; }
if ($name != "iso" && substr(($name . ' '),0,3) == 'iso') {
$xiso=$name;
$xxiso=$name;
} else if ($name == 'iso' && $xxiso == '') {
$xxiso=$name;
}
}
}

?>

… further to yesterday’s Google Chart Image Chart Map Chart Mobile Views Tutorial, feature in the changed geo_chart.php Geo Chart interfacer.


Previous relevant Google Chart Image Chart Map Chart Mobile Views Tutorial is shown below.

Google Chart Image Chart Map Chart Mobile Views Tutorial

Google Chart Image Chart Map Chart Mobile Views Tutorial

Yesterday’s Google Chart Image Chart Map Chart Country View Tutorial

  • country view … and before that …
  • continental view

… you may have noticed, relied on hashtag navigation, which had not been coded for, regarding the quirks of the mobile platform navigations. And so today, as the “beta phase” of these views continues, we’ve added, where PHP server meets Javascript client hashtag visibility

<?php

if (!isset($_POST['data'])) {
echo "
if (document.URL.indexOf('nojwin') == -1 && navigator.userAgent.match(/iPhone|iPad/i)) {
if (('' + location.hash).indexOf('title=') == -1) {
if (document.URL.indexOf('?') == -1) {
location.href=document.URL.split('#')[0] + '?nojwin=Q';
} else {
location.href=document.URL.split('#')[0] + '&nojwin=Q';
}
}
}
";
}

?>

… to remedy this problem, no longer happening in the changed geo_chart.php Geo Chart interfacer, also changing for more “beta phase” view discovery “slog”.


Previous relevant Google Chart Image Chart Map Chart Country View Tutorial is shown below.

Google Chart Image Chart Map Chart Country View Tutorial

Google Chart Image Chart Map Chart Country View Tutorial

Yesterday’s Google Chart Image Chart Map Chart Plotting Tutorial mentioned that …

  • in addition to the “beta” &iso=De style continental view of yesterday … we wanted to, and start today, to code for …
  • a “beta” &iso=DE&aregeographicals=y means by which we can plot user defined places (as markers) into a “region showing” country view map in a Google Charts Image Chart Map Chart

It was a hard slog getting to a harder slog, that is country dependent, so we’ll let you know when out of “beta” regarding its use. In the meantime, maybe you want to try below, by changing last two ISO-3166 country code characters (as required, and answer ensuing questions) …

https://www.rjmprogramming.com.au/PHP/GeoChart/?rand=1247746316#title=US%3BMy%20World%20Survey%26aregeographicals%3Dy%26iso%3DUS

… in the changed geo_chart.php Geo Chart interfacer.


Previous relevant Google Chart Image Chart Map Chart Plotting Tutorial is shown below.

Google Chart Image Chart Map Chart Plotting Tutorial

Google Chart Image Chart Map Chart Plotting Tutorial

In this current blog thread we’ve realized along the way that to combine …

… could lead to us being able to offer markers on a regional map, as another “area of functionality”.

We say “area of functionality” here because we are starting down this road implementing a …


continental view

… for the country you want to show a “regional guise” for, but down the track, we envisage a …


country view

… with a “regional ripple”.

How does the user achieve this new “continental” view Google Charts Image Chart Map Chart overlayed with markers? At that first prompt, as per this item

  1. Help itself … map.php … phase 1
  2. Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
  3. Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3
  4. Transfer the onclick prompt window functionality over to geo_chart.php … phase 4

… in this “mission statement” idea, the user coming up to either conduit now sees

Google Chart inhouse interfacing to …
Geo Chart Map Chart
<?php

echo 'title = geoprompt("Enter Geo Map Title (background image URL or background image data URI ; separated ( followed by ; ) before title are available options (and suffix examples could be &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest and in beta is &iso=De for continent view of Germany regions ready for user defined markers within the map), and you can replace Survey with Quiz for a quiz, and you can prefix by a Region Code (eg. IT) ( followed by ; ) before title as an available options, and you can suffix by &onclick=y for added onclick functionality and/or &region=145 to display Western Asia (for example) and/or &text=y to display text and/or &aregeographicals=y (or instead of y put an http marker image URL like http://www.rjmprogramming.com.au/PHP/GeoChart/mapc64b.png) for you prefixing Labels by lat|long| values and/or &areplaces=y (or instead of y put a comma separated http marker image URL (or use hTtP for link but no image) or placename list (with ,+ usage indicating to plot a line)) for places (prefixable by the number part of an emoji HTML Entity (decimal) eg. 128249 is video camera) rather than countries, Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] (and to make a quiz question for someone after all your entries also append (things like) &guess=Brazil&question=Which country had Tijuana brass?))", "' . str_replace("+"," ",urldecode($GETtitle)) . '"); ';

?>
<?php

echo ' var title = yourprompt("Enter Map Title (background image URL or image data URI ; separated ( followed by ; ) before title are options, and suffix by &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest (and in beta is &iso=De for continent view of Germany regions ready for user defined markers within the map) and suffix by &lines=y for overlay clickable link lines and/or suffix by &onclick=y for all onclick functionalities such as &brgplace=[1] for Bearing Distance table and perhaps &brgmode=trip for that table in trip order). Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] ... ' . $promptsuffix . '", "' . str_replace("+"," ",urldecode($GETtitle)). '"); ' . "\n";

?>

… to add to the progress of the recent Google Chart Image Chart Geo Chart Integration Tutorial. And then later the user can enter latitude|longitude|placename set(s) of interest in another prompt window further down that track, which get plotted onto that regional map after all the set(s) are collected off the user. Also displayed is the Geo Chart “country view” version of that data below the Image Chart Map Chart regional chart version above.

We show how this happens in today’s animated GIF presentation. And by the way, if regions have a wrong colour in that animated GIF, that was a bug now fixed.

Code wise …

  • we changed geo_chart.php Geo Chart interfacer
  • we changed map.php.php PHP code for Map Chart interfacer
  • we changed image_chart.php Google Chart Image Chart Map Chart interfacer … started to use …
    <?php

    // ;Continent;CC1|CC2|:blLAT,blLONG,trLAT,trLONG:width,height:scblX,scblY,sctrX,sctrY
    $continfo=';Europe;IS|CY|:35.16666,-27.6,67.0,33.36666:468,450:422,560,890,140';
    $continfo.=';Australia;AU|AU|:-44,113.65,-10.26667,161.28333:600,450:422,560,866,140';
    $continfo.=';Asia;FI|WS|:-14,37,81,179.9:600,450:422,560,866,140';
    $continfo.=';America;GS|US|:-56,-179.9,77,-35:600,450:422,560,866,140';
    $continfo.=';Africa;TF||:-35,-17,37,52:600,450:422,560,890,140';

    ?>
    … and pass the relevant bit of this data back to its caller, in an Ajax callback arrangement (making use of hashtag information passing)
    <?php echo ”

    function lasturlbackin() {
    if (myxhrlu.readyState == 4) {
    if (myxhrlu.status == 200) {
    // alert(1);
    if (myxhrlu.responseText) {
    if (myxhrlu.responseText.indexOf('#') != -1 && myxhrlu.responseText.indexOf(';') != -1) {
    plotblurb=decodeURIComponent(myxhrlu.responseText.replace(myxhrlu.responseText.split(';')[0],''));
    if (plotblurb.indexOf('America;') != -1) { iwis=eval(50 + eval(('' + document.getElementById('idivis').style.width).replace('px',''))); document.getElementById('idivis').style.width='' + iwis + 'px'; } else { iwis=-9; }
    plotblurbs=plotblurb.split(':');
    //var xcz=prompt(myxhrlu.responseText.replace('chart.googleapis.com/chart','www.rjmprogramming.com.au/ITblog/600/450/').replace('#&','&').replace(';','#;').replace('https:','').replace('http:',''),myxhrlu.responseText.replace('chart.googleapis.com/chart','www.rjmprogramming.com.au/ITblog/600/450/').replace('#&','&').replace(';','#;').replace('https:','').replace('http:',''));
    document.getElementById('idivis').style.backgroundImage='URL(\"' + chcowhitener(myxhrlu.responseText.replace('chart.googleapis.com/chart','www.rjmprogramming.com.au/ITblog/600/450/').replace('#&','&').replace(';','#;').replace('https:','').replace('http:','')) + '\")';
    document.getElementById('idivis').style.backgroundPosition='98% top';
    document.getElementById('idivis').style.backgroundRepeat='no-repeat';
    //document.getElementById('idivis').style.backgroundSize='65% 90%';
    }
    }
    }
    }
    }

    “; ?>
    … our “continents” recognized via PHP TimeZone place lookups

Did you know?

We’ve used Andorra usefully in the past, on a world view map …

  • because it is recognized by Google Charts Geo Chart … but is …
  • too small to plot

And this idea of a “continental view” started for us as an area of the world we could define corner data for, via two small countries. Well, it didn’t work in practice that well, but pleased us for a couple of hours. And so we remain in “Beta Land”, but with ideas about how to escape this land, hoping there are no repercussions docking anywhere near “Alpha Male Land”?!


Previous relevant Google Chart Image Chart Geo Chart Integration Tutorial is shown below.

Google Chart Image Chart Geo Chart Integration Tutorial

Google Chart Image Chart Geo Chart Integration Tutorial

We’re up to the second part of yesterday’s Google Chart Image Chart Map Chart Geo Chart Click Tutorial

  1. Help itself … map.php … phase 1
  2. Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
  3. Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3
  4. Transfer the onclick prompt window functionality over to geo_chart.php … phase 4

… phase 2 fixes, attending to Country Quiz Game Suite YouTube Tutorial idea with a Google Chart mapping component addition (thanks). Then we thought of the Google Chart Geo Chart‘s user interactive entry “portal”, should we say. Of course, we learn off what has happened before with this, leaving us time for a possible research and development thread of functionality, a bit off the radar, but not ready for release yet, though the signs are not too bad.

To bed down the Geo Chart interfacing to the Image Chart Map Chart usage it was the Javascript “function prelater” and associated “function later” which needed tweaking

<?php

echo "function prelater() { if (thistwo > 20) { var lesstwo=eval(-20 + thistwo); thistwo=20; setTimeout(prelater, eval(1000 * lesstwo)); return ''; } \n if (saetc) { saetc(); } if ((('' + location.hash).indexOf('title=') != -1 || document.URL.indexOf('?title=') != -1) && document.URL.indexOf('&') == -1) { t=decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]); title=t; w='556'; h='347'; c='Country'; p='Popularity'; w=''; h=''; c=''; p=''; m=''; ilstis=1; later('',w,h,c,p,m); } else { later('','','','','',''); } \n } \n function later(t,w,h,c,p,m) { \n";

echo "\n if (document.getElementById('od1')) { document.getElementById('od1').style.width='' + eval(window.getComputedStyle(document.body, null).getPropertyValue('width').replace('px','')) + 'px'; } \n";
echo "\n if (document.getElementById('od2')) { document.getElementById('od2').style.width='' + eval(window.getComputedStyle(document.body, null).getPropertyValue('width').replace('px','')) + 'px'; } \n";

if (1 == 1) {
echo ' var datalineprefix = " "; ' . "\n";
echo ' var acnt = -1; ' . "\n";
echo ' var iswq = false; ' . "\n";
echo ' var defv = ""; ' . "\n";
echo ' var dlpll = ""; ' . "\n";
echo ' var datalinesuffix = ""; ' . "\n";
echo ' var extra = "", four; ' . "\n";
echo ' var thisline = 1; ' . "\n";
echo ' var totalleft = 100.0; ' . "\n";
echo ' var title = ""; ' . "\n";
echo ' var alttitle = ""; ' . "\n";
echo ' var width = "", widthblurb=""; ' . "\n";
echo ' if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) ) { widthblurb=" (for quiz entries append &flag=y for Emoji Flags on tooltips)"; } else { widthblurb=" (for quiz entries append &istn=y for top left thumbnails and/or &flag=y for Emoji Flags on tooltips)"; } ' . "\n";
echo ' var height = ""; ' . "\n";
echo ' var country = ""; ' . "\n";
echo ' var popularity = ""; ' . "\n";
}
echo ' if ((t.length + w.length + h.length + c.length + p.length) == 0) { ' . "\n";
echo ' saetc(); if (("" + document.URL.split("#")[0] + "&").replace(/\+/g,"%20").indexOf("?titlequiz=My%20World%20Quiz&") != -1) { title="My World Quiz"; t=title; w="556"; h="347"; c="Country"; p="Popularity"; } else if (("" + location.hash).indexOf("title=") != -1 && document.URL.indexOf("&") == -1) { title=decodeURIComponent(("" + location.hash).split("title=")[1].split("&")[0]); ourdllb(); } else { title = geoprompt("Enter Geo Map Title (background image URL or background image data URI ; separated ( followed by ; ) before title are available options (and suffix examples could be &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest), and you can replace Survey with Quiz for a quiz, and you can prefix by a Region Code (eg. IT) ( followed by ; ) before title as an available options, and you can suffix by &onclick=y for added onclick functionality and/or ®ion=145 to display Western Asia (for example) and/or &text=y to display text and/or &aregeographicals=y (or instead of y put an http marker image URL like http://www.rjmprogramming.com.au/PHP/GeoChart/mapc64b.png) for you prefixing Labels by lat|long| values and/or &areplaces=y (or instead of y put a comma separated http marker image URL (or use hTtP for link but no image) or placename list (with ,+ usage indicating to plot a line)) for places (prefixable by the number part of an emoji HTML Entity (decimal) eg. 128249 is video camera) rather than countries, Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] (and to make a quiz question for someone after all your entries also append (things like) &guess=Brazil&question=Which country had Tijuana brass?))", "' . str_replace("+"," ",urldecode($GETtitle)) . '"); } if (title != null) { if (title == "My World Quiz") { iswq=true; t=title; allowed=false; fti=true; document.getElementById("wq").click(); } alttitle=title; if (title.indexOf("&are") != -1) { alttitle=placelook(title); title=alttitle; } } else { alttitle=""; } ' . "\n";
echo ' defv=""; acnt++; if (document.getElementById("defv" + acnt)) { defv=document.getElementById("defv" + acnt).value; } ' . "\n";
echo ' } ' . "\n";
echo ' if ((t.length + w.length + h.length + c.length + p.length) != 0) { ' . "\n";
echo ' title = t; ' . "\n";
echo ' width = w; ' . "\n";
echo ' height = h; ' . "\n";
echo ' country = c; ' . "\n";
echo ' popularity = p; ' . "\n";
echo ' } else if (title != null) { ' . "\n";
echo ' width = geoprompt("Enter Geo Map Width' . $whblurb . ' (7860.045 for Europe quiz) (3930.068 for South East Asia and Oceania quiz) (3230.035 for Africa quiz) (3001.011 for South America quiz) (2201.001 for North and Central America quiz) (2202.056 for Asia quiz)" + widthblurb, "' . $GETwidth . '"); if (width.split("&")[0] == "2202.056") { isquiz="Asia"; height="2002.029"; } else if (width.split("&")[0] == "2201.001") { isquiz="North and Central America"; height="2001.029"; } else if (width.split("&")[0] == "3001.011") { isquiz="South America"; height="2801.059"; } else if (width.split("&")[0] == "3230.035") { isquiz="Africa"; height="2737.052"; } else if (width.split("&")[0] == "7860.045") { isquiz="Europe"; height="6875.041"; } else if (width.split("&")[0] == "3930.068") { isquiz="South East Asia and Oceania"; height="3437.054"; } ' . "\n";
echo ' if (isquiz.length > 0) { if (isquiz == "Asia") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (2002.029 for Asia quiz ... add spaces for more quiz places)", "2002.029"); if ((height.trim() + ".").indexOf("2002.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else if (isquiz == "North and Central America") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (2001.029 for North and Central America quiz ... add spaces for more quiz places)", "2001.029"); if ((height.trim() + ".").indexOf("2001.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else if (isquiz == "South America") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (2801.059 for South America quiz ... add spaces for more quiz places)", "2801.059"); if ((height.trim() + ".").indexOf("2801.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else if (isquiz == "Africa") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (2737.052 for Africa quiz ... add spaces for more quiz places)", "2737.052"); if ((height.trim() + ".").indexOf("2737.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else if (isquiz == "South East Asia and Oceania ... add spaces for more quiz places") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (3437.054 for South East Asia and Oceania quiz)", "3437.054"); if ((height.trim() + ".").indexOf("3437.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (6875.041 for Europe quiz ... add spaces for more quiz places)", "6875.041"); if ((height.trim() + ".").indexOf("6875.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } } else { height = geoprompt("Enter Geo Map Height' . $whblurb . '", "' . $GETheight . '"); } ' . "\n";
echo ' if (title.indexOf("&are") != -1) { if (isquiz.length > 0) { if (1 == 1) { country="Places"; } else { country = geoprompt("Enter Places Label", "Places"); } } else { country = geoprompt("Enter Places Label", "Places"); } } else { if (isquiz.length > 0) { if (1 == 1) { country = "Country"; } else { country = geoprompt("Enter Country Label", "' . $GETcountry . '"); } } else { country = geoprompt("Enter Country Label", "' . $GETcountry . '"); } } ' . "\n";
echo ' if (isquiz.length > 0) { if (1 == 1) { popularity="Countdown"; } else { popularity = geoprompt("Enter " + country + " Numerical Measure(s) (ie. can be comma separated)", "Countdown"); } } else { popularity = geoprompt("Enter " + country + " Numerical Measure(s) (ie. can be comma separated)", "' . $GETpopularity . '"); } ' . "\n";
echo ' } ' . "\n";
echo ' var datac = ""; ' . "\n";
echo ' var sq = "' . "'" . '"; ' . "\n";
//echo ' datalineprefix = prompt("Enter " + country + " Name " + thisline, ""); ' . "\n";
echo " if (iswq) { if (document.URL.indexOf('wqperspective=') == -1) { document.getElementById('wq').click(); } allowed=false; fti=true; } if (fti) { datalineprefix = ''; dlpll = ''; } else { dlpll=''; if (alttitle.indexOf('&aregeographicals=') != -1) { datalineprefix = geoprompt(\"Enter Latitude|Longitude|\" + country + \" Name (can enter URL whose contents contains country,numerical sets or your own list entered here comma separated) \" + thisline + ' (optionally append with ' + '\\n\\n' + ',\"A tooltip (regarding {popularity}) of some sort like <a target=_blank href=' + \"'\" + 'https://www.google.com/#q={country}' + \"'\" + '>{country}</a>\" ' + '\\n\\n'" . $myextras . " + ' as an example of what is possible with HTML included)', ('`' + defv).replace('`0|0|','').replace('`','')); if (datalineprefix == null) { datalineprefix=''; } dlpll=datalineprefix.split('|')[0]; if (dlpll != '') { dlpll+='|' + datalineprefix.split('|')[1] + '|'; datalineprefix=datalineprefix.replace(dlpll,''); } } else { dlpll = ''; if (isquiz.length > 0 && iquiziso < quizisos.length) { datalineprefix=quizisos[iquiziso]; } else { datalineprefix = geoprompt(\"Enter \" + country + \" Name (can enter URL whose contents contains country,numerical sets or your own list entered here comma separated) \" + thisline + ' (optionally append with ' + '\\n\\n' + ',\"A tooltip (regarding {popularity}) of some sort like <a target=_blank href=' + \"'\" + 'https://www.google.com/#q={country}' + \"'\" + '>{country}</a>\" ' + '\\n\\n'" . $myextras . " + ' as an example of what is possible with HTML included)', ('`' + defv).replace('`0|0|','').replace('`','')); } } } " . "\n";
echo ' if (datalineprefix == null) { datalineprefix=""; } ' . "\n" . ' if (datalineprefix != null) { datalineprefix=dlp(datalineprefix); iof=0; dlsa=datalineprefix.split(","); if (dlsa.length > 1 && (eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(39))) > eval(datalineprefix.indexOf(",")) && eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(34))) > eval(datalineprefix.indexOf(",")))) { while (eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(39))) > eval(datalineprefix.indexOf(",")) && eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(34))) > eval(datalineprefix.indexOf(","))) { datalineprefix=datalineprefix.replace(",", "%2C"); iof+=0; } } datalineprefix=datalineprefix.replace(/#/g, "%23"); if (datalineprefix.indexOf("{country}") != -1 && datalineprefix.indexOf(",") != -1) { dlsa=datalineprefix.split(","); if (dlsa.length > 1) { datalineprefix=datalineprefix.replace("{country}",encodeURIComponent(dlsa[0])).replace("{country}",encodeURIComponent(dlsa[0])); } } } ' . "\n";
echo ' while (datalineprefix.length != 0 && (popularity.indexOf("ercent") == (0 - 1) || popularity.indexOf(" ercent ") != (0 - 1) || (popularity.indexOf("ercent") != (0 - 1) && totalleft > 0))) { ' . "\n";
if (1 == 1) {
echo ' if (datalinesuffix.length != 0) { ' . "\n";
echo " if (fti) { datalineprefix = ''; dlpll = ''; } else { dlpll=''; if (alttitle.indexOf('&aregeographicals=') != -1) { datalineprefix = geoprompt(\"Enter Latitude|Longitude|\" + country + \" Name (can enter URL whose contents contains country,numerical sets or your own list entered here comma separated) \" + thisline + ' (for no more please hit Cancel button and optionally append with ' + '\\n\\n' + ',\"A tooltip (regarding {popularity}) of some sort like <a target=_blank href=' + \"'\" + 'https://www.google.com/#q={country}' + \"'\" + '>{country}</a>\" ' + '\\n\\n'" . $myextras . " + ' as an example of what is possible with HTML included)', ('`' + defv).replace('`0|0|','').replace('`','')); if (datalineprefix == null) { datalineprefix=''; } dlpll=datalineprefix.split('|')[0]; if (dlpll != '') { dlpll+='|' + datalineprefix.split('|')[1] + '|'; datalineprefix=datalineprefix.replace(dlpll,''); } } else { dlpll = ''; if (isquiz.length > 0 && iquiziso < quizisos.length) { datalineprefix=quizisos[iquiziso]; } else { datalineprefix = geoprompt(\"Enter \" + country + \" Name (can enter URL whose contents contains country,numerical sets or your own list entered here comma separated) \" + thisline + ' (for no more please hit Cancel button and optionally append with ' + '\\n\\n' + ',\"A tooltip (regarding {popularity}) of some sort like <a target=_blank href=' + \"'\" + 'https://www.google.com/#q={country}' + \"'\" + '>{country}</a>\" ' + '\\n\\n'" . $myextras . " + ' as an example of what is possible with HTML included)', ('`' + defv).replace('`0|0|','').replace('`','')); } } } " . "\n";
echo ' if (datalineprefix != null) { datalineprefix=dlp(datalineprefix); iof=0; dlsa=datalineprefix.split(","); if (dlsa.length > 1 && (eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(39))) > eval(datalineprefix.indexOf(",")) && eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(34))) > eval(datalineprefix.indexOf(",")))) { while (eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(39))) > eval(datalineprefix.indexOf(",")) && eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(34))) > eval(datalineprefix.indexOf(","))) { datalineprefix=datalineprefix.replace(",", "%2C"); iof+=0; } } datalineprefix=datalineprefix.replace(/#/g, "%23"); if (datalineprefix.indexOf("{country}") != -1 && datalineprefix.indexOf(",") != -1) { dlsa=datalineprefix.split(","); if (dlsa.length > 1) { datalineprefix=datalineprefix.replace("{country}",encodeURIComponent(dlsa[0])).replace("{country}",encodeURIComponent(dlsa[0])); } } } ' . "\n";
echo ' } ' . "\n";
//echo ' } ' . "\n";
echo ' if (datalineprefix == null) { ' . "\n";
echo ' datalineprefix = ""; ' . "\n";
echo ' totalleft = 0; ' . "\n";
echo ' } else if (datalineprefix.length != 0) { ' . "\n";
echo ' extra = ""; ' . "\n";
echo ' if (popularity.indexOf("ercent") != (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) extra = " (for " + totalleft + " enter nothing or hit Cancel button)"; ' . "\n";
echo ' if (fti) { datalinesuffix = ""; } else { if (isquiz.length > 0) { if (iquiziso < quizisos.length) { datalinesuffix="" + theval; iquiziso++; } else { datalinesuffix = geoprompt("Enter " + popularity.replace(" ercent ", "") + " " + thisline + extra, "" + theval); } theval--; } else { datalinesuffix = geoprompt("Enter " + popularity.replace(" ercent ", "") + " " + thisline + extra, "0"); } } ' . "\n";
echo ' if (datalinesuffix == null && popularity.indexOf("ercent") != (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) datalinesuffix = totalleft; ' . "\n";
echo ' if (datalinesuffix == null) datalinesuffix = "0"; ' . "\n";
echo ' if (datalinesuffix != null) datalineprefix = datalineprefix.replace("{popularity}", datalinesuffix); ' . "\n";
echo ' if (datalinesuffix.length == 0) { ' . "\n";
echo ' datalinesuffix = eval(totalleft); ' . "\n";
echo ' totalleft = 0; ' . "\n";
echo ' } else if (eval(totalleft) == eval(datalinesuffix) && popularity.indexOf("ercent") != (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) { ' . "\n";
echo ' totalleft = 0; ' . "\n";
echo ' } else if (eval(datalinesuffix) > eval(totalleft) && popularity.indexOf("ercent") != (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) { ' . "\n";
echo ' datalinesuffix = eval(totalleft); ' . "\n";
echo ' totalleft = 0; ' . "\n";
echo ' } else if (eval(datalinesuffix) > eval(totalleft) && popularity.indexOf("ercent") == (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) { ' . "\n";
echo ' popularity = popularity + " ercent "; ' . "\n";
echo ' } else { ' . "\n";
echo ' totalleft = eval(totalleft) - eval(datalinesuffix); ' . "\n";
echo ' } ' . "\n";
//echo ' datac = datac + ",[~" + datalineprefix + "~," + datalinesuffix + "]"; ' . "\n";
echo ' if (datalineprefix.indexOf("' . "'" . '") == -1) { four=("" + datalinesuffix).split(","); if (exra != "") { exra=String.fromCharCode(39) + "Regarding " + popularity + four[0] + String.fromCharCode(39) + ","; } datac = datac + comma + " [" + dlpll + "~" + datalineprefix.replace(/\%5f/g,"%20").replace(/\_/g,"%20") + "~," + exra + datalinesuffix + "] "; } ' . "\n";
echo ' if (datalineprefix.indexOf("' . "'" . '") != -1) { four=("" + datalinesuffix).split(","); exra=String.fromCharCode(39) + "Regarding " + popularity + four[0] + String.fromCharCode(39) + ","; datac = datac + comma + " [" + dlpll + "~" + datalineprefix.replace(",", "~,").replace(/\%5f/g,"%20").replace(/\_/g,"%20") + "," + datalinesuffix + "] "; } ' . "\n";
echo ' thisline++; defv=""; acnt=eval(-1 + thisline); if (document.getElementById("defv" + acnt)) { defv=document.getElementById("defv" + acnt).value; } ' . "\n comma=','; \n";
echo ' } ' . "\n";
} else {
echo "\n whileinnards(); \n";
}
echo ' } ' . "\n";
if (!isset($_GET['isMobile']) && !isset($_POST['isMobile'])) {
echo ' if (allowed) { var windowlocation = "./geo_chart.php?title=" + title + m + "&width=" + width + "&height=" + height + "&country=" + country + nojwinextra + "&popularity=" + popularity.replace(" ercent ", "") + "&data=" + assess_small(datac); if (windowlocation.length > 800) { document.getElementById("dpostform").innerHTML="<form method=POST id=postform action=./geo_chart.php><input type=hidden name=wouldlikeyoutoseekpermission value=y></input></form>"; var wwl=iftoobig("",windowlocation); if (wwl != "#") { if (plotblurbs.length != 0) { window.open(wwl,"_blank"); } else { location.href=wwl; } } } else { if (plotblurbs.length != 0) { window.open(windowlocation,"_blank"); } else { window.location=windowlocation; } } } ' . "\n";
} else {
echo ' if (allowed) { var windowlocation = "./geo_chart.php?isMobile=y&title=" + title + m + "&width=" + width + "&height=" + height + "&country=" + country + nojwinextra + "&popularity=" + popularity.replace(" ercent ", "") + "&data=" + assess_small(datac); if (windowlocation.length > 800) { document.getElementById("dpostform").innerHTML="<form method=POST id=postform action=./geo_chart.php><input type=hidden name=wouldlikeyoutoseekpermission value=y></input></form>"; var wwl=iftoobig("",windowlocation); if (wwl != "#") { if (plotblurbs.length != 0) { window.open(wwl,"_blank"); } else { location.href=wwl; } } } else { if (plotblurbs.length != 0) { window.open(windowlocation,"_blank"); } else { window.location=windowlocation; } } } ' . "\n";
}
echo "} \n"; // . "} \n";
echo '</' . 'script' . '>' . "\n";
}

?>

… in our the changed geo_chart.php Geo Chart interfacer.

You can also see this play out at WordPress 4.1.1’s New Google Chart Image Chart Map Chart Geo Chart Click Tutorial


Previous relevant Google Chart Image Chart Map Chart Geo Chart Click Tutorial is shown below.

Google Chart Image Chart Map Chart Geo Chart Click Tutorial

Google Chart Image Chart Map Chart Geo Chart Click Tutorial

Onto yesterday’s Google Chart Image Chart Map Chart Mainstream Interfacing Tutorial plan of attack, today we need to add a fourth spoke, if you will …

  1. Help itself … map.php … phase 1
  2. Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
  3. Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3
  4. Transfer the onclick prompt window functionality over to geo_chart.php … phase 4

… so that the user has a new way to access these geographical latitude and longitude based functionalities.

This involved getting in behind the “used to be” way the SVG circle markers were created and attend to both …

  1. an amended onclick logic set appears everytime now, if argument onclick is set, rather than just when a marker was associated with a URL, using a new data-svggeo global data attribute, and when clicked for those non-URL scenarios show the new Javascript prompt window menu … and …
  2. adjust the way a title attribute was included in the SVG in favour of an SVG title element version, so that a tooltip displays for non-mobile platform markers, when hovering over them

<?php

if (isset($_GET['aregeographicals'])) {
$gare=$_GET['aregeographicals'];
$ugare=urldecode($gare);
if ($ugare == "Y") {
$ugare=expandh($GETdata);
}
if (strpos(strtolower($ugare), "http") !== false || isset($_GET['onclick'])) {
$upa=wlook($ugare);
//echo ' alert("' . $upa . '"); ';
//exit;
$gsis=explode(",",$upa);
$igsis=0;
if (strpos(strtolower($gsis[0]), "http") === false) {
for ($jgsis=1; $jgsis<sizeof($gsis); $jgsis++) {
if ($igsis == 0 && strpos(strtolower($gsis[$jgsis]), "http") !== false) {
$igsis=$jgsis;
}
}
}
echo "\n var froma=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], toa=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], igsis=0, localgdis=(\"" . $GETdata . "\").split(']'), localgsis=(\"" . $upa . "\").split(','), peninfo=(\"" . $upa . "\").split(','); \n gsis=(\"" . $upa . "\").split(','); \n gdis=(\"" . $GETdata . "\").split(']'); \n";
if (isset($_GET['peninfo'])) {
echo "\n peninfo=(\"" . $_GET['peninfo'] . "\").replace(/\,\ /g,',+').split(','); for (var pjgs=0; pjgs<peninfo.length; pjgs++) { if ((peninfo[pjgs] + ' ').substring(0,1) == '+') { peninfo[pjgs]='+' + peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)].replace('+',''); } else { peninfo[pjgs]=peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)]; } if (peninfo[pjgs] != '' && gsis.length > pjgs) { if (gsis[pjgs] == '') { gsis[pjgs]='//www.wikipedia.org'; } } } \n";
}
// ... bad was ...echo "\n if (document.getElementById('defs')) { console.log(' attaChEdImage' + jgs + '=" . noemoji($gsis[$igsis]) . "'); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n alldefs=document.getElementsByTagName('defs'); if (alldefs.length > 0) { if (('' + alldefs[0].id) != '') { defsid=styleit('' + alldefs[0].id); } } if (document.getElementById(defsid)) { console.log(' attaChEdImage' + jgs + '=" . noemoji($gsis[$igsis]) . "'); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n if (document.getElementById(defsid) && gsis.length >= 1) { for (var jgs=0; jgs<gsis.length; jgs++) { if (gsis[jgs] != '') { console.log('attachedImage' + jgs + '=' + noemoji(gsis[jgs])); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage' + jgs + '\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"' + noemoji(gsis[jgs]) + '\"><image xlink:href = \"' + noemoji(gsis[jgs]) + '\" href = \"' + noemoji(gsis[jgs]) + '\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; } } } \n";
echo "\n var lastpl='', lastcx=-1, lastcy=-1, lastlx=-1, lastly=-1, gsuff='', linew='', postgs=[], gs=document.getElementsByTagName('g'), iigs=0, malt='';\n for (var igs=0; igs<gs.length; igs++) { \n if (peninfo.length > iigs) { \n malt=peninfo[iigs].replace('+','').trim(); \n } else { \n malt=''; \n } \n if (gsis.length > iigs) { \n if (fooc(gsis[iigs]) != '') { \n if (gsis[iigs].trim() == '') { \n gsuff='x'; \n } else { \n toa[1]=emojimaybe(gsis[iigs],malt,'></circle>',iigs); \n if (toa[1] == '></circle>') { \n toa[0]='<circle ' + refooc(lastfooc); \n toa[2]=' cx='; \n toa[3]=' cy='; \n toa[4]=' r='; \n toa[5]=' fill='; \n toa[6]=' stroke='; \n toa[7]=' stroke-width='; \n toa[8]=' opacity='; \n } else { \n toa[1]=toa[1].replace('>',' onclick=gck(' + ('~' + iigs + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\">'); \n toa[0]='<text '; \n toa[2]=' x='; \n toa[3]=' y='; \n toa[4]=' data-r='; \n toa[5]=' data-fill='; \n toa[6]=' data-stroke='; toa[7]=' data-stroke-width='; \n toa[8]=' data-opacity='; \n if (gsis[iigs].indexOf(' ') != -1) { \n gsis[iigs]=gsis[iigs].replace(gsis[iigs].split(' ')[0] + ' ',''); \n } \n } \n gsuff='' + iigs; \n } \n } else { \n gsuff=''; \n } \n } else { \n gsuff=''; \n } \n if (gsuff != 'x' && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.replace('<text ','<circle ').indexOf('<circle') != -1 && (gs[igs].innerHTML + '*').replace('</text>*','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1) { \n if (peninfo.length > iigs) { \n if (peninfo[iigs].indexOf('+') != -1) { \n linew='<line title=\"' + gdis[eval(-1 + iigs)].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + ' to ' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" onmouseover=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" onclick=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" x1=\"' + lastcx + '\" y1=\"' + lastcy + '\" x2=\"' + eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]) + '\" y2=\"' + eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]) + '\" style=\"stroke:rgb(255,0,0);stroke-width:2\" />'; \n } \n } \n postgs=gs[igs].innerHTML.split(' fill='); \n gs[igs].innerHTML=tel(gs[igs].innerHTML.replace(' fill=' + postgs[1].substring(0,1) + postgs[1].substring(1).split(postgs[1].substring(0,1))[0], ' onclick=gck(' + ('~' + gsuff + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" fill=' + postgs[1].substring(0,1) + 'url(#attachedImage' + gsuff + ')').replace(froma[0],toa[0]).replace(froma[1],toa[1]).replace(froma[2],toa[2]).replace(froma[3],toa[3]).replace(froma[4],toa[4]).replace(froma[5],toa[5]).replace(froma[6],toa[6]).replace(froma[7],toa[7]).replace(froma[8],toa[8])) + linew; } linew=''; if ((gs[igs].innerHTML.replace('<line ','*<line ') + '*').replace('</text>','</circle>').replace('-stroke','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1 && gs[igs].innerHTML.indexOf(' onclick=') != -1 && gs[igs].innerHTML.replace('<text x=','<text fill= ').indexOf('fill=') != -1) { lastcx=eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]); lastcy=eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]); lastlx=gdis[iigs].split('[')[1].split('|')[0]; lastly=gdis[iigs].split('[')[1].split('|')[1]; lastpl=gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' '); \n iigs++; \n } \n } \n } \n";
}
} else if (isset($_POST['aregeographicals'])) {
$gare=$_POST['aregeographicals'];
$ugare=urldecode($gare);
if ($ugare == "Y") {
$ugare=expandh($GETdata);
}
if (strpos(strtolower(str_replace("+"," ",$ugare)), "http") !== false || isset($_POST['onclick'])) {
$upa=wlook(str_replace("+"," ",$ugare));
$gsis=explode(",",$upa);
$igsis=0;
if (strpos(strtolower($gsis[0]), "http") === false) {
for ($jgsis=1; $jgsis<sizeof($gsis); $jgsis++) {
if ($igsis == 0 && strpos(strtolower($gsis[$jgsis]), "http") !== false) {
$igsis=$jgsis;
}
}
}
echo "\n var froma=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], toa=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], igsis=0, localgdis=(\"" . $GETdata . "\").split(']'), localgsis=(\"" . $upa . "\").split(','), peninfo=(\"" . $upa . "\").split(','); \n gsis=(\"" . $upa . "\").split(','); \n gdis=(\"" . $GETdata . "\").split(']'); \n";
if (isset($_POST['peninfo'])) {
echo "\n peninfo=(\"" . $_POST['peninfo'] . "\").replace(/\,\ /g,',+').split(','); for (var pjgs=0; pjgs<peninfo.length; pjgs++) { if ((peninfo[pjgs] + ' ').substring(0,1) == '+') { peninfo[pjgs]='+' + peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)].replace('+',''); } else { peninfo[pjgs]=peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)]; } if (peninfo[pjgs] != '' && gsis.length > pjgs) { if (gsis[pjgs] == '') { gsis[pjgs]='//www.wikipedia.org'; } } } \n";
}
echo "\n alldefs=document.getElementsByTagName('defs'); if (alldefs.length > 0) { if (('' + alldefs[0].id) != '') { defsid=styleit('' + alldefs[0].id); } } if (document.getElementById(defsid)) { console.log(' attaChedImage' + jgs + '=" . noemoji($gsis[$igsis]) . "'); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n if (document.getElementById(defsid) && gsis.length >= 1) { for (var jgs=0; jgs<gsis.length; jgs++) { if (gsis[jgs] != '') { console.log(' atTachedImage' + jgs + '=' + noemoji(gsis[jgs])); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage' + jgs + '\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"' + noemoji(gsis[jgs]) + '\"><image xlink:href = \"' + noemoji(gsis[jgs]) + '\" href = \"' + noemoji(gsis[jgs]) + '\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; } } } \n";
echo "\n var lastpl='', lastcx=-1, lastcy=-1, lastlx=-1, lastly=-1, gsuff='', linew='', postgs=[], gs=document.getElementsByTagName('g'), iigs=0, malt=''; for (var igs=0; igs<gs.length; igs++) { if (peninfo.length > iigs) { malt=peninfo[iigs].replace('+','').trim(); } else { malt=''; } if (gsis.length > iigs) { if (gsis[iigs] != '') { if (fooc(gsis[iigs]).trim() == '') { gsuff='x'; } else { toa[1]=emojimaybe(gsis[iigs],malt,'></circle>',iigs); if (toa[1] == '></circle>') { toa[0]='<circle ' + refooc(lastfooc); toa[2]=' cx='; toa[3]=' cy='; toa[4]=' r='; toa[5]=' fill='; toa[6]=' stroke='; toa[7]=' stroke-width='; toa[8]=' opacity='; } else { toa[1]=toa[1].replace('>',' onclick=gck(' + ('~' + iigs + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\">'); toa[0]='<text '; toa[2]=' x='; toa[3]=' y='; toa[4]=' data-r='; toa[5]=' data-fill='; toa[6]=' data-stroke='; toa[7]=' data-stroke-width='; toa[8]=' data-opacity='; if (gsis[iigs].indexOf(' ') != -1) { gsis[iigs]=gsis[iigs].replace(gsis[iigs].split(' ')[0] + ' ',''); } } gsuff='' + iigs; } } else { gsuff=''; } } else { gsuff=''; } if (gsuff != 'x' && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.replace('<text ','<circle ').indexOf('<circle') != -1 && (gs[igs].innerHTML + '*').replace('</text>*','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1) { if (peninfo.length > iigs) { if (peninfo[iigs].indexOf('+') != -1) { linew='<line title=\"' + gdis[eval(-1 + iigs)].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + ' to ' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" onmouseover=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" onclick=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" x1=\"' + lastcx + '\" y1=\"' + lastcy + '\" x2=\"' + eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]) + '\" y2=\"' + eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]) + '\" style=\"stroke:rgb(255,0,0);stroke-width:2\" />'; } } postgs=gs[igs].innerHTML.split(' fill='); gs[igs].innerHTML=tel(gs[igs].innerHTML.replace(' fill=' + postgs[1].substring(0,1) + postgs[1].substring(1).split(postgs[1].substring(0,1))[0], ' onclick=gck(' + ('~' + gsuff + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" fill=' + postgs[1].substring(0,1) + 'url(#attachedImage' + gsuff + ')').replace(froma[0],toa[0]).replace(froma[1],toa[1]).replace(froma[2],toa[2]).replace(froma[3],toa[3]).replace(froma[4],toa[4]).replace(froma[5],toa[5]).replace(froma[6],toa[6]).replace(froma[7],toa[7]).replace(froma[8],toa[8])) + linew; } linew=''; if ((gs[igs].innerHTML.replace('<line ','*<line ') + '*').replace('</text>','</circle>').replace('-stroke','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1 && gs[igs].innerHTML.indexOf(' onclick=') != -1 && gs[igs].innerHTML.replace('<text x=','<text fill= ').indexOf('fill=') != -1) { lastcx=eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]); lastcy=eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]); lastlx=gdis[iigs].split('[')[1].split('|')[0]; lastly=gdis[iigs].split('[')[1].split('|')[1]; lastpl=gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' '); iigs++; } } } \n";
}
} else if (isset($_GET['areplaces'])) {
if (strpos(strtolower(urldecode($_GET['areplaces'])), "http") !== false || isset($_GET['onclick'])) {
$upa=wlook(urldecode($_GET['areplaces']));
$gsis=explode(",",$upa);
$igsis=0;
if (strpos(strtolower($gsis[0]), "http") === false) {
for ($jgsis=1; $jgsis<sizeof($gsis); $jgsis++) {
if ($igsis == 0 && strpos(strtolower($gsis[$jgsis]), "http") !== false) {
$igsis=$jgsis;
}
}
}
echo "\n var froma=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], toa=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], igsis=0, localgdis=(\"" . $GETdata . "\").split(']'), localgsis=(\"" . $upa . "\").split(','), peninfo=(\"" . $upa . "\").split(','); \n gsis=(\"" . $upa . "\").split(','); \n gdis=(\"" . $GETdata . "\").split(']'); \n";
if (isset($_GET['peninfo'])) {
echo "\n peninfo=(\"" . $_GET['peninfo'] . "\").replace(/\,\ /g,',+').split(','); for (var pjgs=0; pjgs<peninfo.length; pjgs++) { if ((peninfo[pjgs] + ' ').substring(0,1) == '+') { peninfo[pjgs]='+' + peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)].replace('+',''); } else { peninfo[pjgs]=peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)]; } if (peninfo[pjgs] != '' && gsis.length > pjgs) { if (gsis[pjgs] == '') { gsis[pjgs]='//www.wikipedia.org'; } } } \n";
}
echo "\n alldefs=document.getElementsByTagName('defs'); if (alldefs.length > 0) { if (('' + alldefs[0].id) != '') { defsid=styleit('' + alldefs[0].id); } } if (document.getElementById(defsid)) { document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n if (document.getElementById(defsid) && gsis.length >= 1) { for (var jgs=0; jgs<gsis.length; jgs++) { if (gsis[jgs] != '') { document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage' + jgs + '\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"' + noemoji(gsis[jgs]) + '\"><image xlink:href = \"' + noemoji(gsis[jgs]) + '\" href = \"' + noemoji(gsis[jgs]) + '\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; } } } \n";
echo "\n var lastpl='', lastcx=-1, lastcy=-1, lastlx=-1, lastly=-1, gsuff='', linew='', postgs=[], gs=document.getElementsByTagName('g'), iigs=0, malt=''; for (var igs=0; igs<gs.length; igs++) { if (peninfo.length > iigs) { malt=peninfo[iigs].replace('+','').trim(); } else { malt=''; } if (gsis.length > iigs) { if (fooc(gsis[iigs]) != '') { if (gsis[iigs].trim() == '') { gsuff='x'; } else { toa[1]=emojimaybe(gsis[iigs],malt,'></circle>',iigs); if (toa[1] == '></circle>') { toa[0]='<circle ' + refooc(lastfooc); toa[2]=' cx='; toa[3]=' cy='; toa[4]=' r='; toa[5]=' fill='; toa[6]=' stroke='; toa[7]=' stroke-width='; toa[8]=' opacity='; } else { toa[1]=toa[1].replace('>',' onclick=gck(' + ('~' + iigs + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\">'); toa[0]='<text '; toa[2]=' x='; toa[3]=' y='; toa[4]=' data-r='; toa[5]=' data-fill='; toa[6]=' data-stroke='; toa[7]=' data-stroke-width='; toa[8]=' data-opacity='; if (gsis[iigs].indexOf(' ') != -1) { gsis[iigs]=gsis[iigs].replace(gsis[iigs].split(' ')[0] + ' ',''); } } gsuff='' + iigs; } } else { gsuff=''; } } else { gsuff=''; } if (gsuff != 'x' && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.replace('<text ','<circle ').indexOf('<circle') != -1 && (gs[igs].innerHTML + '*').replace('</text>*','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1) { if (peninfo.length > iigs) { if (peninfo[iigs].indexOf('+') != -1) { linew='<line title=\"' + gdis[eval(-1 + iigs)].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + ' to ' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" onmouseover=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" onclick=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" x1=\"' + lastcx + '\" y1=\"' + lastcy + '\" x2=\"' + eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]) + '\" y2=\"' + eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]) + '\" style=\"stroke:rgb(255,0,0);stroke-width:2\" />'; } } postgs=gs[igs].innerHTML.split(' fill='); gs[igs].innerHTML=tel(gs[igs].innerHTML.replace(' fill=' + postgs[1].substring(0,1) + postgs[1].substring(1).split(postgs[1].substring(0,1))[0], ' onclick=gck(' + ('~' + gsuff + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" fill=' + postgs[1].substring(0,1) + 'url(#attachedImage' + gsuff + ')').replace(froma[0],toa[0]).replace(froma[1],toa[1]).replace(froma[2],toa[2]).replace(froma[3],toa[3]).replace(froma[4],toa[4]).replace(froma[5],toa[5]).replace(froma[6],toa[6]).replace(froma[7],toa[7]).replace(froma[8],toa[8])) + linew; } linew=''; if ((gs[igs].innerHTML.replace('<line ','*<line ') + '*').replace('</text>','</circle>').replace('-stroke','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1 && gs[igs].innerHTML.indexOf(' onclick=') != -1 && gs[igs].innerHTML.replace('<text x=','<text fill= ').indexOf('fill=') != -1) { lastcx=eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]); lastcy=eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]); lastlx=gdis[iigs].split('[')[1].split('|')[0]; lastly=gdis[iigs].split('[')[1].split('|')[1]; lastpl=gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' '); iigs++; } } } \n";
}
} else if (isset($_POST['areplaces'])) {
if (strpos(strtolower(urldecode($_POST['areplaces'])), "http") !== false || isset($_POST['onclick'])) {
$upa=wlook(urldecode($_POST['areplaces']));
$gsis=explode(",",$upa);
$igsis=0;
if (strpos(strtolower($gsis[0]), "http") === false) {
for ($jgsis=1; $jgsis<sizeof($gsis); $jgsis++) {
if ($igsis == 0 && strpos(strtolower($gsis[$jgsis]), "http") !== false) {
$igsis=$jgsis;
}
}
}
echo "\n var froma=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], toa=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], igsis=0, localgdis=(\"" . $GETdata . "\").split(']'), localgsis=(\"" . $upa . "\").split(','), peninfo=(\"" . $upa . "\").split(','); \n gsis=(\"" . $upa . "\").split(','); \n gdis=(\"" . $GETdata . "\").split(']'); \n";
if (isset($_POST['peninfo'])) {
echo "\n peninfo=(\"" . $_POST['peninfo'] . "\").replace(/\,\ /g,',+').split(','); for (var pjgs=0; pjgs<peninfo.length; pjgs++) { if ((peninfo[pjgs] + ' ').substring(0,1) == '+') { peninfo[pjgs]='+' + peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)].replace('+',''); } else { peninfo[pjgs]=peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)]; } if (peninfo[pjgs] != '' && gsis.length > pjgs) { if (gsis[pjgs] == '') { gsis[pjgs]='//www.wikipedia.org'; } } } \n";
}
echo "\n alldefs=document.getElementsByTagName('defs'); if (alldefs.length > 0) { if (('' + alldefs[0].id) != '') { defsid=styleit('' + alldefs[0].id); } } if (document.getElementById(defsid)) { document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n if (document.getElementById(defsid) && gsis.length >= 1) { for (var jgs=0; jgs<gsis.length; jgs++) { if (gsis[jgs] != '') { document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage' + jgs + '\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"' + noemoji(gsis[jgs]) + '\"><image xlink:href = \"' + noemoji(gsis[jgs]) + '\" href = \"' + noemoji(gsis[jgs]) + '\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; } } } \n";
echo "\n var lastpl='', lastcx=-1, lastcy=-1, lastlx=-1, lastly=-1, gsuff='', linew='', postgs=[], gs=document.getElementsByTagName('g'), iigs=0, malt=''; for (var igs=0; igs<gs.length; igs++) { if (peninfo.length > iigs) { malt=peninfo[iigs].replace('+','').trim(); } else { malt=''; } if (gsis.length > iigs) { if (gsis[iigs] != '') { if (fooc(gsis[iigs]).trim() == '') { gsuff='x'; } else { toa[1]=emojimaybe(gsis[iigs],malt,'></circle>',iigs); if (toa[1] == '></circle>') { toa[0]='<circle ' + refooc(lastfooc); toa[2]=' cx='; toa[3]=' cy='; toa[4]=' r='; toa[5]=' fill='; toa[6]=' stroke='; toa[7]=' stroke-width='; toa[8]=' opacity='; } else { toa[1]=toa[1].replace('>',' onclick=gck(' + ('~' + iigs + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\">'); toa[0]='<text '; toa[2]=' x='; toa[3]=' y='; toa[4]=' data-r='; toa[5]=' data-fill='; toa[6]=' data-stroke='; toa[7]=' data-stroke-width='; toa[8]=' data-opacity='; if (gsis[iigs].indexOf(' ') != -1) { gsis[iigs]=gsis[iigs].replace(gsis[iigs].split(' ')[0] + ' ',''); } } gsuff='' + iigs; } } else { gsuff=''; } } else { gsuff=''; } if (gsuff != 'x' && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.replace('<text ','<circle ').indexOf('<circle') != -1 && (gs[igs].innerHTML + '*').replace('</text>*','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1) { if (peninfo.length > iigs) { if (peninfo[iigs].indexOf('+') != -1) { linew='<line title=\"' + gdis[eval(-1 + iigs)].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + ' to ' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" onmouseover=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" onclick=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" x1=\"' + lastcx + '\" y1=\"' + lastcy + '\" x2=\"' + eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]) + '\" y2=\"' + eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]) + '\" style=\"stroke:rgb(255,0,0);stroke-width:2\" />'; } } postgs=gs[igs].innerHTML.split(' fill='); gs[igs].innerHTML=tel(gs[igs].innerHTML.replace(' fill=' + postgs[1].substring(0,1) + postgs[1].substring(1).split(postgs[1].substring(0,1))[0], ' onclick=gck(' + ('~' + gsuff + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" fill=' + postgs[1].substring(0,1) + 'url(#attachedImage' + gsuff + ')').replace(froma[0],toa[0]).replace(froma[1],toa[1]).replace(froma[2],toa[2]).replace(froma[3],toa[3]).replace(froma[4],toa[4]).replace(froma[5],toa[5]).replace(froma[6],toa[6]).replace(froma[7],toa[7]).replace(froma[8],toa[8])) + linew; } linew=''; if ((gs[igs].innerHTML.replace('<line ','*<line ') + '*').replace('</text>','</circle>').replace('-stroke','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1 && gs[igs].innerHTML.indexOf(' onclick=') != -1 && gs[igs].innerHTML.replace('<text x=','<text fill= ').indexOf('fill=') != -1) { lastcx=eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]); lastcy=eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]); lastlx=gdis[iigs].split('[')[1].split('|')[0]; lastly=gdis[iigs].split('[')[1].split('|')[1]; lastpl=gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' '); iigs++; } } } \n";
}
}

?>

… in our the changed geo_chart.php Geo Chart interfacer.


Previous relevant Google Chart Image Chart Map Chart Mainstream Interfacing Tutorial is shown below.

Google Chart Image Chart Map Chart Mainstream Interfacing Tutorial

Google Chart Image Chart Map Chart Mainstream Interfacing Tutorial

Yesterday’s Google Chart Image Chart Map Chart Mainstream Primer Tutorial mentioned a three point plan …

  1. Help itself … map.php … phase 1
  2. Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
  3. Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3

… we find ourselves still dealing with the “first point” above regarding, where it rubs up against the first half of the second point (if all that makes sense), today.

This means we might now, with map.php user interfacing, present a Google Charts Image Chart Map Chart in various guises …

  • &iso=US-NJ|CA-AB suffix to the map title showing a non-legended cropped world view of that | delimited region codes list
  • &isoall=AU suffix to the map title showing a legended (initially) country view of country’s regions … toggleable to …
  • a world view of that same user setting (via click or right click)

… after that first prompt, if the user entered settings to indicate that desire.

We’ve moved on to a “four point” code section of relevance paradigm today, with …


var xiso='iso';
if (document.URL.indexOf('&iso') != -1 && document.URL.indexOf('&iso=') == -1) {
xiso='iso' + document.URL.indexOf('&iso')[1].split('=')[0];
}
var isusdams='<?php echo (isset($_POST['iso']) ? trim(str_replace('+',' ',urldecode($_POST['iso']))) : (isset($_GET['iso']) ? trim(str_replace('+',' ',urldecode($_GET['iso']))) : '')); ?>';
if (xiso != 'iso' && isusdams == '') { isusdams=decodeURIComponent(document.URL.split('&' + xiso + '=')[1].split('&')[0]); }
//alert('xiso=' + xiso + ' and isusdams=' + isusdams);
if (window.top || isusdams.trim() != '') {
if (isusdams.trim() != '') {
if (isusdams.indexOf(';') == -1) { isusdams+=';'; }
} else if (top.document.URL.indexOf('/dams_usa.htm') != -1) {
isusdams='US;';
} else if (top.document.URL.indexOf('/australian_') != -1) {
isusdams='AU;';
} else if (top.document.URL.indexOf('/ireland_') != -1) {
isusdams='IE;';
} else if (top.document.URL.indexOf('/new_zealand_') != -1) {
isusdams='NZ;';
} else if (document.URL.indexOf('iso=') != -1) {
isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (parent.document.URL.indexOf('/tz_places.php?iso=') != -1) {
isusdams=parent.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (top.document.URL.indexOf('/tz_places.php?iso=') != -1) {
isusdams=top.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';
}
} else if (document.URL.indexOf('iso=') != -1) {
isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (document.URL.indexOf('&iso') != -1) {
isusdams=document.URL.split('&iso')[1].split('=')[1].split('&')[0].split('#')[0] + ';';
}
if (isusdams != '') { // amapidgeo
if (document.getElementById('amapidgeo')) {
document.getElementById('amapidgeo').click();
} else {
setTimeout(latergeoclick, 5000);
}
}

… and …

<?php echo ”

function gogeo(usug) {
if (documentURL.indexOf('data=') != -1) {
if ((documentURL + '~').indexOf('&data=~') != -1 && ('' + pardata).replace('undefined','') != '') {
documentURL=documentURL + pardata;
}
var isdfrom='youllneverfindthis';
var isdto='youllneverfindthis';
var isfrom='youllneverfindthis';
var isto='youllneverfindthis';
var xiso='iso';
if (document.URL.indexOf('&iso') != -1 && document.URL.indexOf('&iso=') == -1) {
xiso='iso' + document.URL.indexOf('&iso')[1].split('=')[0];
isdfrom='&iso' + document.URL.split('&iso')[1].split('=')[0] + '=';
isdto='&iso=';
}
var isusdams='" . (isset($_POST['iso']) ? trim(str_replace('+',' ',urldecode($_POST['iso']))) : (isset($_GET['iso']) ? trim(str_replace('+',' ',urldecode($_GET['iso']))) : '')) . "';
if (xiso != 'iso' && isusdams == '') { isusdams=decodeURIComponent(document.URL.split('&' + xiso + '=')[1].split('&')[0]); }
if (window.top || isusdams.trim() != '') {
if (isusdams.trim() != '') {
if (isusdams.indexOf(';') == -1) { isusdams+=';'; }
if (eval('' + isusdams.length) > 3) { isfrom=isusdams.substring(0,3); isto=isusdams.substring(0,2) + ';'; }
} else if (top.document.URL.indexOf('/dams_usa.htm') != -1) {
isusdams='US;';
} else if (top.document.URL.indexOf('/australian_') != -1) {
isusdams='AU;';
} else if (top.document.URL.indexOf('/ireland_') != -1) {
isusdams='IE;';
} else if (top.document.URL.indexOf('/new_zealand_') != -1) {
isusdams='NZ;';
} else if (document.URL.indexOf('iso=') != -1) {
isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (parent.document.URL.indexOf('/tz_places.php?iso=') != -1) {
isusdams=parent.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (top.document.URL.indexOf('/tz_places.php?iso=') != -1) {
isusdams=top.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';
}
} else if (document.URL.indexOf('iso=') != -1) {
isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (document.URL.indexOf('&iso') != -1) {
isusdams=document.URL.split('&iso')[1].split('=')[1].split('&')[0].split('#')[0] + ';';
isdfrom='&iso' + document.URL.split('&iso')[1].split('=')[0] + '=';
isdto='&iso=';
}
if (isusdams != '') {
locationhref=toolong((documentURL.replace(isdfrom,isdto) + '%20,%20[-90.0|0.0|~%20~,999999999]').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=y&').replace('title=','title=' + (isusdams + ' ').substring(0,3).trim().replace(isfrom,isto)).replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]'));
} else {
locationhref=toolong((documentURL.replace(isdfrom,isdto) + '%20,%20[-90.0|0.0|~%20~,999999999]').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=y&').replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]'));
}
//locationhref=toolong((documentURL + ',[-90.0,0.0,~%20~,999999999]').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=' + agy + '&').replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]'));
//locationhref=toolong((documentURL + '').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=' + agy + '&').replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]'));
} else {
locationhref=usug;
}
if (locationhref != '#') { location.href=locationhref; } locationhref='';
}

“; ?>

… and within the map.php interactivity logic

<?php echo ”

function yourprompt(blb, defa) {
if (('' + location.hash).indexOf('title=') != -1 && document.URL.indexOf('&') == -1) {
return decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]);
} else if (document.URL.indexOf('title=') != -1 && document.URL.indexOf('&') == -1) {
return decodeURIComponent(document.URL.split('title=')[1].split('=')[1].split('&')[0]);
}
return ourprompt(blb, defa);
}


// used at ...
echo ' var title = yourprompt("Enter Map Title (background image URL or image data URI ; separated ( followed by ; ) before title are options, and suffix by &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest and suffix by &lines=y for overlay clickable link lines and/or suffix by &onclick=y for all onclick functionalities such as &brgplace=[1] for Bearing Distance table and perhaps &brgmode=trip for that table in trip order). Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] ... ' . $promptsuffix . '", "' . str_replace("+"," ",urldecode($GETtitle)). '"); ' . "\n";

“; ?>

… and …

<?php echo ”

function dllb() {
var qpw=0;
var justiso=true;
if (('' + location.hash).indexOf('title=') != -1 && document.URL.indexOf('&') == -1) {
thistwo=8;
regionstuff=decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]);
if (regionstuff.indexOf('&iso') != -1) {
if (regionstuff.split('&iso')[1].substring(0,1) != '=') { justiso=false; }
regionstuff=decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]).split('&iso')[1].split('=')[1].split('&')[0];
}
if (!justiso) {
thistwo=20;
document.getElementById('idivis').style.width='700px';
document.getElementById('idivis').style.height='500px';
document.getElementById('idivis').style.backgroundColor='yellow';
//document.getElementById('idivis').style.backgroundRepeat='no-repeat';
//document.getElementById('idivis').style.backgroundSize='contain';
//document.getElementById('idivis').style.background='URL("//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '")';
document.getElementById('idivis').innerHTML='<img oncontextmenu="document.getElementById(' + "'idivis'" + ').click();" onclick="document.getElementById(' + "'idivis'" + ').click();" title="Click or right click near border to toggle between country view and world view" title="" id=ifdivis style="width:600px;height:400px;" src="//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '"></img>';
document.getElementById('idivis').title='Click or right click near border to toggle between country view and world view';
document.getElementById('idivis').onclick=function(evt){ thistwo+=50; if (document.getElementById('ifdivis').src.indexOf('&') == -1) { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0] + '&world=World'; evt.target.style.backgroundColor='lightblue'; } else { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0]; evt.target.style.backgroundColor='yellow'; } };
document.getElementById('idivis').oncontextmenu=function(evt){ thistwo+=50; if (document.getElementById('ifdivis').src.indexOf('&') == -1) { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0] + '&world=World'; evt.target.style.backgroundColor='lightblue'; } else { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0]; evt.target.style.backgroundColor='yellow'; } };
//window.open('//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2), '_blank', 'top=20,left=20,width=900,height=700');
} else {
document.getElementById('idivis').style.width='600px';
document.getElementById('idivis').style.height='400px';
document.getElementById('idivis').innerHTML='<iframe style="width:600px;height:400px;" src="//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=' + regionstuff + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274"></iframe>';
}
} else if (document.URL.indexOf('title=') != -1 && document.URL.indexOf('&') == -1) {
thistwo=8;
regionstuff=decodeURIComponent(document.URL.split('title=')[1].split('=')[1].split('&')[0]);
if (regionstuff.indexOf('&iso') != -1) {
if (regionstuff.split('&iso')[1].substring(0,1) != '=') { justiso=false; }
regionstuff=decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]).split('&iso')[1].split('=')[1].split('&')[0];
}
if (!justiso) {
thistwo=20;
document.getElementById('idivis').style.width='700px';
document.getElementById('idivis').style.height='500px';
document.getElementById('idivis').style.backgroundColor='yellow';
//document.getElementById('idivis').style.backgroundRepeat='no-repeat';
//document.getElementById('idivis').style.backgroundSize='contain';
//document.getElementById('idivis').style.background='URL("//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '")';
//document.getElementById('idivis').innerHTML='<iframe title="Click or right click near border to toggle between country view and world view" id=ifdivis style="width:700px;height:500px;" src="//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '"></iframe>';
document.getElementById('idivis').innerHTML='<img oncontextmenu="document.getElementById(' + "'idivis'" + ').click();" onclick="document.getElementById(' + "'idivis'" + ').click();" title="Click or right click near border to toggle between country view and world view" title="" id=ifdivis style="width:600px;height:400px;" src="//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '"></img>';
document.getElementById('idivis').title='Click or right click near border to toggle between country view and world view';
document.getElementById('idivis').onclick=function(evt){ thistwo+=50; if (document.getElementById('ifdivis').src.indexOf('&') == -1) { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0] + '&world=World'; evt.target.style.backgroundColor='lightblue'; } else { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0]; evt.target.style.backgroundColor='yellow'; } };
document.getElementById('idivis').oncontextmenu=function(evt){ thistwo+=50; if (document.getElementById('ifdivis').src.indexOf('&') == -1) { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0] + '&world=World'; evt.target.style.backgroundColor='lightblue'; } else { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0]; evt.target.style.backgroundColor='yellow'; } };
//window.open('//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2), '_blank', 'top=20,left=20,width=900,height=700');
} else {
document.getElementById('idivis').style.width='600px';
document.getElementById('idivis').style.height='400px';
document.getElementById('idivis').innerHTML='<iframe style="width:600px;height:400px;" src="//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=' + regionstuff + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274"></iframe>';
}
}
//
// rest of usual dllb "onload" event logic follows ...
}

“; ?>

… in the changed map.php.php PHP code for our inhouse Google Chart Map Chart interfacer.

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.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Google Chart Geo Chart Image Chart Better Context Tutorial

Google Chart Geo Chart Image Chart Better Context Tutorial

Google Chart Geo Chart Image Chart Better Context Tutorial

On top of yesterday’s Google Chart Geo Chart Image Chart Context Tutorial efforts regarding Google Chart Geo Chart and Google Charts Image Chart Map Chart context we want to add layers of …

  • Geo Chart default “country shaded mode” mode of use …
  • image map (today confined to …
    <?php

    $prechartdiv="";
    $postchartdiv="";
    $xiso='iso';
    $xxiso='';
    $cdefascr='';
    if (isset($_POST['title']) || $justrand) {
    $ibps=1;
    foreach ($_POST as $name => $val) {
    if ($name == "data" && !isset($_POST['question']) && !isset($_POST['guess']) && !isset($_POST['titlequiz'])) {
    if (strpos(urldecode($_POST[$name]), "|") === false && strpos(urldecode($_POST[$name]), "~") !== false && $_POST[$name] != '') {
    $prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;'><tr><td style='vertical-align:top;margin:0 0 0 0;' id=tdleft>";
    $bps=explode('~', urldecode($_POST[$name]));
    $bandp=$bps[1];
    $isregional=false;
    if (isset($_POST['regional'])) { $isregional=true; }
    $theframeoh='';
    if (strpos($bps[$ibps], '-') !== false) {
    $isregional=true;
    $_POST['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_POST['data']);
    } else if (strpos($bps[$ibps], urlencode('-')) !== false) {
    $isregional=true;
    $_POST['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_POST['data']);
    }
    for ($ibps=3; $ibps<sizeof($bps); $ibps+=2) {
    $bandp.="|" . $bps[$ibps];
    if (strpos($bps[$ibps], '-') !== false) {
    $isregional=true;
    $_POST['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_POST['data']);
    } else if (strpos($bps[$ibps], urlencode('-')) !== false) {
    $isregional=true;
    $_POST['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_POST['data']);
    }
    }
    if (!isset($_POST['onclick'])) { $_POST['onclick']='y'; }
    if ($isregional) {
    if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js')) {
    unlink($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js');
    }
    $cdefascr='<script type="text/javascript" src="/defascr.js?rand=' . rand(0,175647685786) . '" defer></script>';
    $theframeoh="<img onload=\"document.getElementById('od2').style.width=over('100%');\" style='margin:0 0 0 0;width:530px;height:350px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&tellmecorners=y' id=kmap usemap=#imap></img><map name=imap id=imap><area onmouseover=defaover(event); onclick=defaclick(event); shape='default' nohref></area></map>";
    $prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;' id=tdleft><tr><td style='vertical-align:top;margin:0 0 0 0;'>" . $theframeoh . "</td><td style=vertical-align:top; id=tdright>";
    $postchartdiv="</td></tr></table>";
    } else {
    $theframeoh="<iframe onload=\"document.getElementById('od2').style.width='100%';\" style='margin:0 0 0 0;width:600px;height:400px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274'></iframe>";
    $postchartdiv="</td><td style=vertical-align:top; id=tdright>" . $theframeoh . "</td></tr></table>";
    }
    }
    }
    if ($name != "rand") { $justrand=false; }
    if ($name != "iso" && substr(($name . ' '),0,3) == 'iso') {
    $xiso=$name;
    $xxiso=$name;
    } else if ($name == 'iso' && $xxiso == '') {
    $xxiso=$name;
    }
    }
    }
    if (isset($_GET['title']) || $justrand) {
    $ibps=1;
    foreach ($_GET as $name => $val) {
    if ($name == "data" && !isset($_GET['question']) && !isset($_GET['guess']) && !isset($_GET['titlequiz'])) {
    if (strpos(urldecode($_GET[$name]), "|") === false && strpos(urldecode($_GET[$name]), "~") !== false && $_GET[$name] != '') {
    $prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;'><tr><td style='vertical-align:top;margin:0 0 0 0;' id=tdleft>";
    $bps=explode('~', urldecode($_GET[$name]));
    $bandp=$bps[1];
    $isregional=false;
    if (isset($_GET['regional'])) { $isregional=true; }
    $theframeoh='';
    if (strpos($bps[$ibps], '-') !== false) {
    $isregional=true;
    $_GET['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_GET['data']);
    } else if (strpos($bps[$ibps], urlencode('-')) !== false) {
    $isregional=true;
    $_GET['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_GET['data']);
    }
    for ($ibps=3; $ibps<sizeof($bps); $ibps+=2) {
    $bandp.="|" . $bps[$ibps];
    if (strpos($bps[$ibps], '-') !== false) {
    $isregional=true;
    $_GET['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_GET['data']);
    } else if (strpos($bps[$ibps], urlencode('-')) !== false) {
    $isregional=true;
    $_GET['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_GET['data']);
    }
    }
    if (!isset($_GET['onclick'])) { $_GET['onclick']='y'; }
    if ($isregional) {
    if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js')) {
    unlink($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js');
    }
    $cdefascr='<script type="text/javascript" src="/defascr.js?rand=' . rand(0,175647685786) . '" defer></script>';
    $theframeoh="<img onload=\"document.getElementById('od2').style.width=over('100%');\" style='margin:0 0 0 0;width:530px;height:350px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&tellmecorners=y' id=kmap usemap=#imap></img><map name=imap id=imap><area onmouseover=defaover(event); onclick=defaclick(event); shape='default' nohref></area></map>";
    $prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;' id=tdleft><tr><td style='vertical-align:top;margin:0 0 0 0;'>" . $theframeoh . "</td><td style=vertical-align:top; id=tdright>";
    $postchartdiv="</td></tr></table>";
    } else {
    $postchartdiv="</td><td style=vertical-align:top; id=tdright>" . $theframeoh . "</td></tr></table>";
    }
    }
    }
    if ($name != "rand") { $justrand=false; }
    if ($name != "iso" && substr(($name . ' '),0,3) == 'iso') {
    $xiso=$name;
    $xxiso=$name;
    } else if ($name == 'iso' && $xxiso == '') {
    $xxiso=$name;
    }
    }
    }

    ?>
    … default area thinking, for now)
  • onmouseover and onclick event logic
  • 404.php (this WordPress blog) error processing PHP GD imagecolorat “intelligence adding” functionality extensions
    <?php

    $im = imagecreatefromstring(file_get_contents('http://chart.googleapis.com/chart' . explode('&text1=', $theqs)[0]));

    if (isset($_GET['tellmecorners']) || isset($_POST['tellmecorners'])) {
    $alertstr='Please Watch this Space.';
    //file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js', ' function defaclick(evt) { alert("' . $alertstr . '"); } function defaover(evt) { evt.target.title="' . $alertstr . '"; } ');
    $alp="0123456789ABCDEF";
    $anymore='';
    $ideally=0;
    if (isset($_GET['chld']) || isset($_POST['chld'])) {
    $cntryst='';
    $cntrysts=[];
    if (isset($_GET['chco'])) {
    $cntryst=(str_replace('+',' ',urldecode($_GET['chld'])));
    } else if (isset($_POST['chco'])) {
    $cntryst=(str_replace('+',' ',urldecode($_POST['chld'])));
    }
    $cntrysts=explode('|', $cntryst);
    for ($iok=0; $iok<sizeof($cntrysts); $iok++) {
    $jjhuh=trim(file_get_contents('http://www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?match=' . $cntrysts[$iok]));
    if ($jjhuh != '') {
    $cntrysts[$iok]=$jjhuh;
    }
    }
    $ideally=(-3 + (7 * sizeof($cntrysts)));
    if (isset($_GET['chco']) || isset($_POST['chco'])) {
    $colst='';
    $colsts=[];
    if (isset($_GET['chco'])) {
    $colst=strtoupper(str_replace('+',' ',urldecode($_GET['chco'])));
    } else if (isset($_POST['chco'])) {
    $colst=strtoupper(str_replace('+',' ',urldecode($_POST['chco'])));
    }
    if (strpos('~' . $colst, '~B3BCC0|') !== false) {
    $colst=substr($colst, 7);
    }
    $colsts=explode('|', $colst);
    $colst.='|gggggg|D0D0D0|FFFFFF|B3BCC0|';
    $tlchex='gggggg';
    $trchex='gggggg';
    $blchex='gggggg';
    $brchex='gggggg';
    $blblurb='To top left is ';
    $brblurb='To top right is ';
    $tlblurb='To bottom left is ';
    $trblurb='To top right is ';
    for ($ione=1; $ione<=15; $ione++) {
    if ($blchex == 'gggggg' || $blchex == 'D0D0D0' || $blchex == 'FFFFFF') {
    for ($iij=($ione - 0); $iij<(($newWidth - $ione)); $iij++) {
    if ($blchex == 'gggggg' || $blchex == 'D0D0D0' || $blchex == 'FFFFFF') {
    $tlrgb = imagecolorat($im, $iij, ($ione - 1));
    if ($tlrgb) {
    $tlr = ($tlrgb >> 16) & 0xFF;
    $tlg = ($tlrgb >> 8) & 0xFF;
    $tlb = $tlrgb & 0xFF;
    $blchex=substr(substr($alp,($tlr / 16)),0,1) . substr(substr($alp,($tlr % 16)),0,1) . substr(substr($alp,($tlg / 16)),0,1) . substr(substr($alp,($tlg % 16)),0,1) . substr(substr($alp,($tlb / 16)),0,1) . substr(substr($alp,($tlb % 16)),0,1);
    if (strpos('|' . $colst, '|' . $blchex) !== false) {
    if (strlen(explode('|' . $blchex, '|' . $colst)[0]) > $ideally) {
    $blchex='gggggg';
    } else if ($iij > ($newWidth / 2)) {
    $blblurb='To top is ';
    } else if ($iij > ($ione - 1)) {
    $blblurb='To left is ';
    }
    }
    }
    }
    }
    }
    if ($brchex == 'gggggg' || $brchex == 'D0D0D0' || $brchex == 'FFFFFF') {
    for ($iij=($ione - 1); $iij<(($newHeight - $ione)); $iij++) {
    if ($brchex == 'gggggg' || $brchex == 'D0D0D0' || $brchex == 'FFFFFF' || $brchex == $blchex) {
    $trrgb = imagecolorat($im, ($newWidth - $ione), $iij);
    if ($trrgb) {
    $trr = ($trrgb >> 16) & 0xFF;
    $trg = ($trrgb >> 8) & 0xFF;
    $trb = $trrgb & 0xFF;
    $brchex=substr(substr($alp,($trr / 16)),0,1) . substr(substr($alp,($trr % 16)),0,1) . substr(substr($alp,($trg / 16)),0,1) . substr(substr($alp,($trg % 16)),0,1) . substr(substr($alp,($trb / 16)),0,1) . substr(substr($alp,($trb % 16)),0,1);
    if (strpos('|' . $colst, '|' . $brchex) !== false) {
    if (strlen(explode('|' . $brchex, '|' . $colst)[0]) > $ideally) {
    $brchex='gggggg';
    } else if ($iij > ($newHeight / 2)) {
    $brblurb='To bottom is ';
    } else if ($iij > ($ione - 1)) {
    $brblurb='To right is ';
    }
    }
    }
    }
    }
    }
    if ($tlchex == 'gggggg' || $tlchex == 'D0D0D0' || $tlchex == 'FFFFFF') {
    for ($iij=($ione - 1); $iij<(($newWidth - $ione)); $iij++) {
    if ($tlchex == 'gggggg' || $tlchex == 'D0D0D0' || $tlchex == 'FFFFFF' || $tlchex == $blchex || $tlchex == $brchex) {
    $blrgb = imagecolorat($im, $iij, ($newHeight - $ione));
    if ($blrgb) {
    $blr = ($blrgb >> 16) & 0xFF;
    $blg = ($blrgb >> 8) & 0xFF;
    $blb = $blrgb & 0xFF;
    $tlchex=substr(substr($alp,($blr / 16)),0,1) . substr(substr($alp,($blr % 16)),0,1) . substr(substr($alp,($blg / 16)),0,1) . substr(substr($alp,($blg % 16)),0,1) . substr(substr($alp,($blb / 16)),0,1) . substr(substr($alp,($blb % 16)),0,1);
    if (strpos(('|' . $colst), '|' . $tlchex) !== false) {
    if (strlen(explode('|' . $tlchex, '|' . $colst)[0]) > $ideally) {
    $tlchex='gggggg';
    } else if ($iij > ($newWidth / 2)) {
    $tlblurb='To right is ';
    } else if ($iij > ($ione - 1)) {
    $tlblurb='To left is ';
    } else {
    $tlblurb='To bottom left at ' . $iij . ',' . ($newHeight - $ione) . ' is ';
    } //else if ($anymore == '') { $anymore=' ideally=' . $ideally . ' wrt colst=' . $colst . ' and found=' . explode('|' . $tlchex, $colst)[0]; }
    }
    }
    }
    }
    }
    if ($trchex == 'gggggg' || $trchex == 'D0D0D0' || $trchex == 'FFFFFF') {
    for ($iij=($newHeight - $ione); $iij>($ione - 1); $iij--) {
    if ($trchex == 'gggggg' || $trchex == 'D0D0D0' || $trchex == 'FFFFFF' || $trchex == $blchex || $trchex == $brchex || $trchex == $tlchex) {
    $brrgb = imagecolorat($im, ($newWidth - $ione), $iij);
    if ($brrgb) {
    $brr = ($brrgb >> 16) & 0xFF;
    $brg = ($brrgb >> 8) & 0xFF;
    $brb = $brrgb & 0xFF;
    $trchex=substr(substr($alp,($brr / 16)),0,1) . substr(substr($alp,($brr % 16)),0,1) . substr(substr($alp,($brg / 16)),0,1) . substr(substr($alp,($brg % 16)),0,1) . substr(substr($alp,($brb / 16)),0,1) . substr(substr($alp,($brb % 16)),0,1);
    if (strpos('|' . $colst, '|' . $trchex) !== false) {
    if (strlen(explode('|' . $trchex, '|' . $colst)[0]) > $ideally) {
    $trchex='gggggg';
    } else if ($iij > ($newHeight / 2)) {
    $trblurb='To top is ';
    } else if ($iij > ($ione - 1)) {
    $trblurb='To right is ';
    }
    }
    }
    }
    }
    }
    }
    for ($ialert=0; $ialert<sizeof($colsts); $ialert++) {
    if ($tlchex == $colsts[$ialert]) {
    $alertstr=str_replace('Please Watch this Space.', '', $alertstr);
    if (strpos($alertstr, ' is ' . $cntrysts[$ialert] . '.') === false) {
    $alertstr.=$tlblurb . $cntrysts[$ialert] . '. ';
    }
    } else if ($trchex == $colsts[$ialert]) {
    $alertstr=str_replace('Please Watch this Space.', '', $alertstr);
    if (strpos($alertstr, ' is ' . $cntrysts[$ialert] . '.') === false) {
    $alertstr.=$trblurb . $cntrysts[$ialert] . '. ';
    }
    } else if ($blchex == $colsts[$ialert]) {
    $alertstr=str_replace('Please Watch this Space.', '', $alertstr);
    if (strpos($alertstr, ' is ' . $cntrysts[$ialert] . '.') === false) {
    $alertstr.=$blblurb . $cntrysts[$ialert] . '. ';
    }
    } else if ($brchex == $colsts[$ialert]) {
    $alertstr=str_replace('Please Watch this Space.', '', $alertstr);
    if (strpos($alertstr, ' is ' . $cntrysts[$ialert] . '.') === false) {
    $alertstr.=$brblurb . $cntrysts[$ialert] . '. ';
    }
    } else if ($anymore == '' && trim($cntrysts[$ialert]) != '') {
    $anymore=' Also appearing is ' . $cntrysts[$ialert] . '. ';
    } else if (trim($cntrysts[$ialert]) != '') {
    $anymore=str_replace('. ', ', ' . $cntrysts[$ialert] . '. ', str_replace(' is ', ' are ', $anymore));
    }
    }
    if ($alertstr != 'Please Watch this Space.') {
    //$alertstr.=' trcheck=' . $trchex;
    //$alertstr.=' brcheck=' . $brchex;
    //$alertstr.=' tlcheck=' . $tlchex;
    //$alertstr.=' blcheck=' . $blchex;
    if ($anymore != '' && strpos($alertstr, 'To ') === false) {
    $anymore=str_replace('Also appear', 'Appear', $anymore);
    }
    $alertstr.=$anymore;
    file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js', ' function defaclick(evt) { alert("' . $alertstr . '"); } function defaover(evt) { evt.target.title="' . $alertstr . '"; ' . " document.getElementsByTagName('img')[0].title=" . '"' . $alertstr . '"; } ');
    } else {
    //$alertstr.=' trcheck=' . $trchex;
    //$alertstr.=' brcheck=' . $brchex;
    //$alertstr.=' tlcheck=' . $tlchex;
    //$alertstr.=' blcheck=' . $blchex;
    if ($anymore != '' && strpos($alertstr, 'To ') === false) {
    $anymore=str_replace('Also appear', 'Appear', $anymore);
    }
    $alertstr.=$anymore;
    file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'defascr.js', ' function defaclick(evt) { alert("' . $alertstr . '"); } function defaover(evt) { evt.target.title="' . $alertstr . '"; } ');
    }

    }
    }
    }


    ?>
    … via “internal use only” external Javascript creation back to the parent client side via …
  • Ajax dynamic Javascript implementation
    <?php echo ”

    function over(wht) {
    if (window.XMLHttpRequest) {
    myxhrthree = new window.XMLHttpRequest;
    }
    else {
    try {
    myxhrthree = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (othermicrosoft) {
    try {
    myxhrthree = new ActiveXObject('Microsoft.XMLHTTP');
    } catch (failed) {
    myxhrthree = false;
    }
    }
    //alert(0);
    }
    if (myxhrthree) {
    //alert(5);
    myxhrthree.onreadystatechange = deferbackin;
    //alert(65);
    myxhrthree.open('GET', '/defascr.js?rand=' + Math.floor(Math.random() * 195647654756), true);
    //alert(165);
    setTimeout(function(){ myxhrthree.send(null); }, 8000);
    //alert(265);
    }
    return wht;
    }

    function deferbackin() {
    if (myxhrthree.readyState == 4) {
    if (myxhrthree.status == 200) {
    // alert(1);
    if (myxhrthree.responseText) {
    var tag = document.createElement('script');
    tag.innerHTML = myxhrthree.responseText;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    //firstScriptTag.parentNode.insertAfter(tag, firstScriptTag);
    firstScriptTag.insertAdjacentElement('afterend', tag);
    //alert(myxhrthree.responseText);
    }
    }
    }
    }

    “; ?>
  • argument &regional=y forced involvement of Image Chart Map Chart using ISO-3166 regional code user entries …
    <?php echo ‘

    title = geoprompt("Enter Geo Map Title (background image URL or background image data URI ; separated ( followed by ; ) before title are available options (and suffix examples could be &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest and in beta is &iso=De for continent view of Germany regions ready for user defined markers within the map), and &regional=y additionally shows Image Chart and you can replace Survey with Quiz for a quiz, and you can prefix by a Region Code (eg. IT) (followed by ;) before title as an available options, and you can suffix by &onclick=y for added onclick functionality and/or &region=145 to display Western Asia (for example) and/or &text=y to display text and/or &aregeographicals=y (or instead of y put an http marker image URL like http://www.rjmprogramming.com.au/PHP/GeoChart/mapc64b.png) for you prefixing Labels by lat|long| values and/or &areplaces=y (or instead of y put a comma separated http marker image URL (or use hTtP for link but no image) or placename list (with ,+ usage indicating to plot a line)) for places (prefixable by the number part of an emoji HTML Entity (decimal) eg. 128249 is video camera) rather than countries, Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] (and to make a quiz question for someone after all your entries also append (things like) &guess=Brazil&question=Which country had Tijuana brass?))", "' . str_replace("+"," ",urldecode($GETtitle)) . '");

    ‘; ?>
  • ISO-3166 code mappings from code to region/country names in image_chart.php logic (Wikipedia assisted, thanks), via new match argument usage …
    <?php

    //
    // up the top
    //
    if (isset($_GET['match'])) {
    if (!isset($_GET['ccode'])) {
    $_GET['ccode']=explode('-',explode(urlencode('-'), $_GET['match'])[0])[0];
    if ($_GET['ccode'] == $_GET['match']) {
    for ($ihuh=0; $ihuh<sizeof($iso_country_codes); $ihuh+=2) {
    if (strtoupper(explode('-', $_GET['ccode'])[0]) == strtoupper($iso_country_codes[$ihuh])) {
    echo $iso_country_codes[1 + $ihuh];
    exit;
    }
    }
    }
    }
    } else if (isset($_POST['match'])) {
    if (!isset($_POST['ccode'])) {
    $_POST['ccode']=explode('-',explode(urlencode('-'), $_POST['match'])[0])[0];
    if ($_POST['ccode'] == $_POST['match']) {
    for ($ihuh=0; $ihuh>sizeof($iso_country_codes); $ihuh+=2) {
    if (strtoupper(explode('-', $_POST['ccode'])[0]) == strtoupper($iso_country_codes[$ihuh])) {
    echo $iso_country_codes[1 + $ihuh];
    exit;
    }
    }
    }
    }
    }
    //
    // ... as $thisstate gets defined
    //
    if (isset($_GET['match'])) {
    if ($thiscode == urldecode($_GET['match']) && $thisstate != '') {
    for ($ihuh=0; $ihuh<sizeof($iso_country_codes); $ihuh+=2) {
    if (strtoupper(explode('-', $thiscode)[0]) == strtoupper($iso_country_codes[$ihuh])) {
    echo $thisstate . ' (' . $iso_country_codes[1 + $ihuh] . ')';
    exit;
    }
    }
    echo $thisstate;
    exit;
    } //else {
    //echo '*' . $thiscode . '*';
    //exit;
    //}
    } else if (isset($_POST['match'])) {
    if ($thiscode == urldecode($_POST['match']) && $thisstate != '') {
    for ($ihuh=0; $ihuh<sizeof($iso_country_codes); $ihuh+=2) {
    if (strtoupper(explode('-', $thiscode)[0]) == strtoupper($iso_country_codes[$ihuh])) {
    echo $thisstate . ' (' . $iso_country_codes[1 + $ihuh] . ')';
    exit;
    }
    }
    echo $thisstate;
    exit;
    } //else {
    //echo '*' . $thiscode . '*';
    //exit;
    //}
    }
    //
    // near the end before usual navigations away
    //
    if (isset($_GET['match'])) {
    echo '';
    exit;
    } else if (isset($_POST['match'])) {
    echo '';
    exit;
    }

    ?>

… combining and augmenting each other to produce a more useful non-mobile “onmouseover” event (ie. on hover) and/or everyone’s “onclick” event user experience in …


Previous relevant Google Chart Geo Chart Image Chart Context Tutorial is shown below.

Google Chart Geo Chart Image Chart Context Tutorial

Google Chart Geo Chart Image Chart Context Tutorial

At its essence the Google Chart Geo Chart functions in one of two ways …

  1. “the shading of countries of interest” we first coded for as an interfacing mode of use … but later we realized it could also function as a …
  2. “plot markers on world view maps” or “plot markers on country view maps”

… and with today’s work ideas we go back to that first “shading of countries of interest” mode of use, and start to augment …

  • view
  • zoom level
  • context

… possibilities by adding a newly shown Google Charts Image Chart Map Chart into the mix, even to that “context” level of mixing up ISO-3166 regional codes (eg. US-FL Florida is used in today’s animated GIF presentation involving …


https://www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=My%20World%20Survey&width=556&qx=aaaag&height=347&country=Country&popularity=Popularity&data=%20[~BL~,56]%20,%20[~KN~,78]%20,%20[~LC~,79]%20,%20[~MQ~,79]%20,%20[~US-FL~,82]

… with some small Caribbean island nation ISO 2 letter country codes in “the context of” a Caribbean island map where nations which are too small to show on your usual “shading of countries of interest” Geo Chart world view map can show on an Image Chart (albeit very small)).

To allow for this we example $_GET or $_POST incoming arguments as per

<?php

$prechartdiv="";
$postchartdiv="";

$xiso='iso';
$xxiso='';
if (isset($_POST['title']) || $justrand) {
$ibps=1;
foreach ($_POST as $name => $val) {
if ($name == "data" && !isset($_POST['question']) && !isset($_POST['guess']) && !isset($_POST['titlequiz'])) {
if (strpos(urldecode($_POST[$name]), "|") === false && strpos(urldecode($_POST[$name]), "~") !== false && $_POST[$name] != '') {
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;'><tr><td style='vertical-align:top;margin:0 0 0 0;' id=tdleft>";
$bps=explode('~', urldecode($_POST[$name]));
$bandp=$bps[1];
$isregional=false;
$theframeoh='';
if (strpos($bps[$ibps], '-') !== false) {
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_POST['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_POST['data']);
}
for ($ibps=3; $ibps<sizeof($bps); $ibps+=2) {
$bandp.="|" . $bps[$ibps];
if (strpos($bps[$ibps], '-') !== false) {
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_POST['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_POST['data']);
}
}
$theframeoh="<iframe onload=\"document.getElementById('od2').style.width='100%';\" style='margin:0 0 0 0;width:600px;height:400px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274'></iframe>";
if ($isregional) {
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;' id=tdleft><tr><td style='vertical-align:top;margin:0 0 0 0;'>" . $theframeoh . "</td><td style=vertical-align:top; id=tdright>";
$postchartdiv="</td></tr></table>";
} else {
$postchartdiv="</td><td style=vertical-align:top; id=tdright>" . $theframeoh . "</td></tr></table>";
}
}
}

if ($name != "rand") { $justrand=false; }
if ($name != "iso" && substr(($name . ' '),0,3) == 'iso') {
$xiso=$name;
$xxiso=$name;
} else if ($name == 'iso' && $xxiso == '') {
$xxiso=$name;
}
}
}
if (isset($_GET['title']) || $justrand) {
$ibps=1;
foreach ($_GET as $name => $val) {
if ($name == "data" && !isset($_GET['question']) && !isset($_GET['guess']) && !isset($_GET['titlequiz'])) {
if (strpos(urldecode($_GET[$name]), "|") === false && strpos(urldecode($_GET[$name]), "~") !== false && $_GET[$name] != '') {
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;'><tr><td style='vertical-align:top;margin:0 0 0 0;' id=tdleft>";
$bps=explode('~', urldecode($_GET[$name]));
$bandp=$bps[1];
$isregional=false;
$theframeoh='';
if (strpos($bps[$ibps], '-') !== false) {
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_GET['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_GET['data']);
}
for ($ibps=3; $ibps<sizeof($bps); $ibps+=2) {
$bandp.="|" . $bps[$ibps];
if (strpos($bps[$ibps], '-') !== false) {
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_GET['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_GET['data']);
}
}
$theframeoh="<iframe onload=\"document.getElementById('od2').style.width='100%';\" style='margin:0 0 0 0;width:600px;height:400px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274'></iframe>";
if ($isregional) {
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;' id=tdleft><tr><td style='vertical-align:top;margin:0 0 0 0;'>" . $theframeoh . "</td><td style=vertical-align:top; id=tdright>";
$postchartdiv="</td></tr></table>";
} else {
$postchartdiv="</td><td style=vertical-align:top; id=tdright>" . $theframeoh . "</td></tr></table>";
}
}
}

if ($name != "rand") { $justrand=false; }
if ($name != "iso" && substr(($name . ' '),0,3) == 'iso') {
$xiso=$name;
$xxiso=$name;
} else if ($name == 'iso' && $xxiso == '') {
$xxiso=$name;
}
}
}

?>

… further to yesterday’s Google Chart Image Chart Map Chart Mobile Views Tutorial, feature in the changed geo_chart.php Geo Chart interfacer.


Previous relevant Google Chart Image Chart Map Chart Mobile Views Tutorial is shown below.

Google Chart Image Chart Map Chart Mobile Views Tutorial

Google Chart Image Chart Map Chart Mobile Views Tutorial

Yesterday’s Google Chart Image Chart Map Chart Country View Tutorial

  • country view … and before that …
  • continental view

… you may have noticed, relied on hashtag navigation, which had not been coded for, regarding the quirks of the mobile platform navigations. And so today, as the “beta phase” of these views continues, we’ve added, where PHP server meets Javascript client hashtag visibility

<?php

if (!isset($_POST['data'])) {
echo "
if (document.URL.indexOf('nojwin') == -1 && navigator.userAgent.match(/iPhone|iPad/i)) {
if (('' + location.hash).indexOf('title=') == -1) {
if (document.URL.indexOf('?') == -1) {
location.href=document.URL.split('#')[0] + '?nojwin=Q';
} else {
location.href=document.URL.split('#')[0] + '&nojwin=Q';
}
}
}
";
}

?>

… to remedy this problem, no longer happening in the changed geo_chart.php Geo Chart interfacer, also changing for more “beta phase” view discovery “slog”.


Previous relevant Google Chart Image Chart Map Chart Country View Tutorial is shown below.

Google Chart Image Chart Map Chart Country View Tutorial

Google Chart Image Chart Map Chart Country View Tutorial

Yesterday’s Google Chart Image Chart Map Chart Plotting Tutorial mentioned that …

  • in addition to the “beta” &iso=De style continental view of yesterday … we wanted to, and start today, to code for …
  • a “beta” &iso=DE&aregeographicals=y means by which we can plot user defined places (as markers) into a “region showing” country view map in a Google Charts Image Chart Map Chart

It was a hard slog getting to a harder slog, that is country dependent, so we’ll let you know when out of “beta” regarding its use. In the meantime, maybe you want to try below, by changing last two ISO-3166 country code characters (as required, and answer ensuing questions) …

https://www.rjmprogramming.com.au/PHP/GeoChart/?rand=1247746316#title=US%3BMy%20World%20Survey%26aregeographicals%3Dy%26iso%3DUS

… in the changed geo_chart.php Geo Chart interfacer.


Previous relevant Google Chart Image Chart Map Chart Plotting Tutorial is shown below.

Google Chart Image Chart Map Chart Plotting Tutorial

Google Chart Image Chart Map Chart Plotting Tutorial

In this current blog thread we’ve realized along the way that to combine …

… could lead to us being able to offer markers on a regional map, as another “area of functionality”.

We say “area of functionality” here because we are starting down this road implementing a …


continental view

… for the country you want to show a “regional guise” for, but down the track, we envisage a …


country view

… with a “regional ripple”.

How does the user achieve this new “continental” view Google Charts Image Chart Map Chart overlayed with markers? At that first prompt, as per this item

  1. Help itself … map.php … phase 1
  2. Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
  3. Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3
  4. Transfer the onclick prompt window functionality over to geo_chart.php … phase 4

… in this “mission statement” idea, the user coming up to either conduit now sees

Google Chart inhouse interfacing to …
Geo Chart Map Chart
<?php

echo 'title = geoprompt("Enter Geo Map Title (background image URL or background image data URI ; separated ( followed by ; ) before title are available options (and suffix examples could be &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest and in beta is &iso=De for continent view of Germany regions ready for user defined markers within the map), and you can replace Survey with Quiz for a quiz, and you can prefix by a Region Code (eg. IT) ( followed by ; ) before title as an available options, and you can suffix by &onclick=y for added onclick functionality and/or &region=145 to display Western Asia (for example) and/or &text=y to display text and/or &aregeographicals=y (or instead of y put an http marker image URL like http://www.rjmprogramming.com.au/PHP/GeoChart/mapc64b.png) for you prefixing Labels by lat|long| values and/or &areplaces=y (or instead of y put a comma separated http marker image URL (or use hTtP for link but no image) or placename list (with ,+ usage indicating to plot a line)) for places (prefixable by the number part of an emoji HTML Entity (decimal) eg. 128249 is video camera) rather than countries, Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] (and to make a quiz question for someone after all your entries also append (things like) &guess=Brazil&question=Which country had Tijuana brass?))", "' . str_replace("+"," ",urldecode($GETtitle)) . '"); ';

?>
<?php

echo ' var title = yourprompt("Enter Map Title (background image URL or image data URI ; separated ( followed by ; ) before title are options, and suffix by &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest (and in beta is &iso=De for continent view of Germany regions ready for user defined markers within the map) and suffix by &lines=y for overlay clickable link lines and/or suffix by &onclick=y for all onclick functionalities such as &brgplace=[1] for Bearing Distance table and perhaps &brgmode=trip for that table in trip order). Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] ... ' . $promptsuffix . '", "' . str_replace("+"," ",urldecode($GETtitle)). '"); ' . "\n";

?>

… to add to the progress of the recent Google Chart Image Chart Geo Chart Integration Tutorial. And then later the user can enter latitude|longitude|placename set(s) of interest in another prompt window further down that track, which get plotted onto that regional map after all the set(s) are collected off the user. Also displayed is the Geo Chart “country view” version of that data below the Image Chart Map Chart regional chart version above.

We show how this happens in today’s animated GIF presentation. And by the way, if regions have a wrong colour in that animated GIF, that was a bug now fixed.

Code wise …

  • we changed geo_chart.php Geo Chart interfacer
  • we changed map.php.php PHP code for Map Chart interfacer
  • we changed image_chart.php Google Chart Image Chart Map Chart interfacer … started to use …
    <?php

    // ;Continent;CC1|CC2|:blLAT,blLONG,trLAT,trLONG:width,height:scblX,scblY,sctrX,sctrY
    $continfo=';Europe;IS|CY|:35.16666,-27.6,67.0,33.36666:468,450:422,560,890,140';
    $continfo.=';Australia;AU|AU|:-44,113.65,-10.26667,161.28333:600,450:422,560,866,140';
    $continfo.=';Asia;FI|WS|:-14,37,81,179.9:600,450:422,560,866,140';
    $continfo.=';America;GS|US|:-56,-179.9,77,-35:600,450:422,560,866,140';
    $continfo.=';Africa;TF||:-35,-17,37,52:600,450:422,560,890,140';

    ?>
    … and pass the relevant bit of this data back to its caller, in an Ajax callback arrangement (making use of hashtag information passing)
    <?php echo ”

    function lasturlbackin() {
    if (myxhrlu.readyState == 4) {
    if (myxhrlu.status == 200) {
    // alert(1);
    if (myxhrlu.responseText) {
    if (myxhrlu.responseText.indexOf('#') != -1 && myxhrlu.responseText.indexOf(';') != -1) {
    plotblurb=decodeURIComponent(myxhrlu.responseText.replace(myxhrlu.responseText.split(';')[0],''));
    if (plotblurb.indexOf('America;') != -1) { iwis=eval(50 + eval(('' + document.getElementById('idivis').style.width).replace('px',''))); document.getElementById('idivis').style.width='' + iwis + 'px'; } else { iwis=-9; }
    plotblurbs=plotblurb.split(':');
    //var xcz=prompt(myxhrlu.responseText.replace('chart.googleapis.com/chart','www.rjmprogramming.com.au/ITblog/600/450/').replace('#&','&').replace(';','#;').replace('https:','').replace('http:',''),myxhrlu.responseText.replace('chart.googleapis.com/chart','www.rjmprogramming.com.au/ITblog/600/450/').replace('#&','&').replace(';','#;').replace('https:','').replace('http:',''));
    document.getElementById('idivis').style.backgroundImage='URL(\"' + chcowhitener(myxhrlu.responseText.replace('chart.googleapis.com/chart','www.rjmprogramming.com.au/ITblog/600/450/').replace('#&','&').replace(';','#;').replace('https:','').replace('http:','')) + '\")';
    document.getElementById('idivis').style.backgroundPosition='98% top';
    document.getElementById('idivis').style.backgroundRepeat='no-repeat';
    //document.getElementById('idivis').style.backgroundSize='65% 90%';
    }
    }
    }
    }
    }

    “; ?>
    … our “continents” recognized via PHP TimeZone place lookups

Did you know?

We’ve used Andorra usefully in the past, on a world view map …

  • because it is recognized by Google Charts Geo Chart … but is …
  • too small to plot

And this idea of a “continental view” started for us as an area of the world we could define corner data for, via two small countries. Well, it didn’t work in practice that well, but pleased us for a couple of hours. And so we remain in “Beta Land”, but with ideas about how to escape this land, hoping there are no repercussions docking anywhere near “Alpha Male Land”?!


Previous relevant Google Chart Image Chart Geo Chart Integration Tutorial is shown below.

Google Chart Image Chart Geo Chart Integration Tutorial

Google Chart Image Chart Geo Chart Integration Tutorial

We’re up to the second part of yesterday’s Google Chart Image Chart Map Chart Geo Chart Click Tutorial

  1. Help itself … map.php … phase 1
  2. Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
  3. Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3
  4. Transfer the onclick prompt window functionality over to geo_chart.php … phase 4

… phase 2 fixes, attending to Country Quiz Game Suite YouTube Tutorial idea with a Google Chart mapping component addition (thanks). Then we thought of the Google Chart Geo Chart‘s user interactive entry “portal”, should we say. Of course, we learn off what has happened before with this, leaving us time for a possible research and development thread of functionality, a bit off the radar, but not ready for release yet, though the signs are not too bad.

To bed down the Geo Chart interfacing to the Image Chart Map Chart usage it was the Javascript “function prelater” and associated “function later” which needed tweaking

<?php

echo "function prelater() { if (thistwo > 20) { var lesstwo=eval(-20 + thistwo); thistwo=20; setTimeout(prelater, eval(1000 * lesstwo)); return ''; } \n if (saetc) { saetc(); } if ((('' + location.hash).indexOf('title=') != -1 || document.URL.indexOf('?title=') != -1) && document.URL.indexOf('&') == -1) { t=decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]); title=t; w='556'; h='347'; c='Country'; p='Popularity'; w=''; h=''; c=''; p=''; m=''; ilstis=1; later('',w,h,c,p,m); } else { later('','','','','',''); } \n } \n function later(t,w,h,c,p,m) { \n";

echo "\n if (document.getElementById('od1')) { document.getElementById('od1').style.width='' + eval(window.getComputedStyle(document.body, null).getPropertyValue('width').replace('px','')) + 'px'; } \n";
echo "\n if (document.getElementById('od2')) { document.getElementById('od2').style.width='' + eval(window.getComputedStyle(document.body, null).getPropertyValue('width').replace('px','')) + 'px'; } \n";

if (1 == 1) {
echo ' var datalineprefix = " "; ' . "\n";
echo ' var acnt = -1; ' . "\n";
echo ' var iswq = false; ' . "\n";
echo ' var defv = ""; ' . "\n";
echo ' var dlpll = ""; ' . "\n";
echo ' var datalinesuffix = ""; ' . "\n";
echo ' var extra = "", four; ' . "\n";
echo ' var thisline = 1; ' . "\n";
echo ' var totalleft = 100.0; ' . "\n";
echo ' var title = ""; ' . "\n";
echo ' var alttitle = ""; ' . "\n";
echo ' var width = "", widthblurb=""; ' . "\n";
echo ' if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) ) { widthblurb=" (for quiz entries append &flag=y for Emoji Flags on tooltips)"; } else { widthblurb=" (for quiz entries append &istn=y for top left thumbnails and/or &flag=y for Emoji Flags on tooltips)"; } ' . "\n";
echo ' var height = ""; ' . "\n";
echo ' var country = ""; ' . "\n";
echo ' var popularity = ""; ' . "\n";
}
echo ' if ((t.length + w.length + h.length + c.length + p.length) == 0) { ' . "\n";
echo ' saetc(); if (("" + document.URL.split("#")[0] + "&").replace(/\+/g,"%20").indexOf("?titlequiz=My%20World%20Quiz&") != -1) { title="My World Quiz"; t=title; w="556"; h="347"; c="Country"; p="Popularity"; } else if (("" + location.hash).indexOf("title=") != -1 && document.URL.indexOf("&") == -1) { title=decodeURIComponent(("" + location.hash).split("title=")[1].split("&")[0]); ourdllb(); } else { title = geoprompt("Enter Geo Map Title (background image URL or background image data URI ; separated ( followed by ; ) before title are available options (and suffix examples could be &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest), and you can replace Survey with Quiz for a quiz, and you can prefix by a Region Code (eg. IT) ( followed by ; ) before title as an available options, and you can suffix by &onclick=y for added onclick functionality and/or ®ion=145 to display Western Asia (for example) and/or &text=y to display text and/or &aregeographicals=y (or instead of y put an http marker image URL like http://www.rjmprogramming.com.au/PHP/GeoChart/mapc64b.png) for you prefixing Labels by lat|long| values and/or &areplaces=y (or instead of y put a comma separated http marker image URL (or use hTtP for link but no image) or placename list (with ,+ usage indicating to plot a line)) for places (prefixable by the number part of an emoji HTML Entity (decimal) eg. 128249 is video camera) rather than countries, Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] (and to make a quiz question for someone after all your entries also append (things like) &guess=Brazil&question=Which country had Tijuana brass?))", "' . str_replace("+"," ",urldecode($GETtitle)) . '"); } if (title != null) { if (title == "My World Quiz") { iswq=true; t=title; allowed=false; fti=true; document.getElementById("wq").click(); } alttitle=title; if (title.indexOf("&are") != -1) { alttitle=placelook(title); title=alttitle; } } else { alttitle=""; } ' . "\n";
echo ' defv=""; acnt++; if (document.getElementById("defv" + acnt)) { defv=document.getElementById("defv" + acnt).value; } ' . "\n";
echo ' } ' . "\n";
echo ' if ((t.length + w.length + h.length + c.length + p.length) != 0) { ' . "\n";
echo ' title = t; ' . "\n";
echo ' width = w; ' . "\n";
echo ' height = h; ' . "\n";
echo ' country = c; ' . "\n";
echo ' popularity = p; ' . "\n";
echo ' } else if (title != null) { ' . "\n";
echo ' width = geoprompt("Enter Geo Map Width' . $whblurb . ' (7860.045 for Europe quiz) (3930.068 for South East Asia and Oceania quiz) (3230.035 for Africa quiz) (3001.011 for South America quiz) (2201.001 for North and Central America quiz) (2202.056 for Asia quiz)" + widthblurb, "' . $GETwidth . '"); if (width.split("&")[0] == "2202.056") { isquiz="Asia"; height="2002.029"; } else if (width.split("&")[0] == "2201.001") { isquiz="North and Central America"; height="2001.029"; } else if (width.split("&")[0] == "3001.011") { isquiz="South America"; height="2801.059"; } else if (width.split("&")[0] == "3230.035") { isquiz="Africa"; height="2737.052"; } else if (width.split("&")[0] == "7860.045") { isquiz="Europe"; height="6875.041"; } else if (width.split("&")[0] == "3930.068") { isquiz="South East Asia and Oceania"; height="3437.054"; } ' . "\n";
echo ' if (isquiz.length > 0) { if (isquiz == "Asia") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (2002.029 for Asia quiz ... add spaces for more quiz places)", "2002.029"); if ((height.trim() + ".").indexOf("2002.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else if (isquiz == "North and Central America") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (2001.029 for North and Central America quiz ... add spaces for more quiz places)", "2001.029"); if ((height.trim() + ".").indexOf("2001.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else if (isquiz == "South America") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (2801.059 for South America quiz ... add spaces for more quiz places)", "2801.059"); if ((height.trim() + ".").indexOf("2801.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else if (isquiz == "Africa") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (2737.052 for Africa quiz ... add spaces for more quiz places)", "2737.052"); if ((height.trim() + ".").indexOf("2737.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else if (isquiz == "South East Asia and Oceania ... add spaces for more quiz places") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (3437.054 for South East Asia and Oceania quiz)", "3437.054"); if ((height.trim() + ".").indexOf("3437.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (6875.041 for Europe quiz ... add spaces for more quiz places)", "6875.041"); if ((height.trim() + ".").indexOf("6875.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } } else { height = geoprompt("Enter Geo Map Height' . $whblurb . '", "' . $GETheight . '"); } ' . "\n";
echo ' if (title.indexOf("&are") != -1) { if (isquiz.length > 0) { if (1 == 1) { country="Places"; } else { country = geoprompt("Enter Places Label", "Places"); } } else { country = geoprompt("Enter Places Label", "Places"); } } else { if (isquiz.length > 0) { if (1 == 1) { country = "Country"; } else { country = geoprompt("Enter Country Label", "' . $GETcountry . '"); } } else { country = geoprompt("Enter Country Label", "' . $GETcountry . '"); } } ' . "\n";
echo ' if (isquiz.length > 0) { if (1 == 1) { popularity="Countdown"; } else { popularity = geoprompt("Enter " + country + " Numerical Measure(s) (ie. can be comma separated)", "Countdown"); } } else { popularity = geoprompt("Enter " + country + " Numerical Measure(s) (ie. can be comma separated)", "' . $GETpopularity . '"); } ' . "\n";
echo ' } ' . "\n";
echo ' var datac = ""; ' . "\n";
echo ' var sq = "' . "'" . '"; ' . "\n";
//echo ' datalineprefix = prompt("Enter " + country + " Name " + thisline, ""); ' . "\n";
echo " if (iswq) { if (document.URL.indexOf('wqperspective=') == -1) { document.getElementById('wq').click(); } allowed=false; fti=true; } if (fti) { datalineprefix = ''; dlpll = ''; } else { dlpll=''; if (alttitle.indexOf('&aregeographicals=') != -1) { datalineprefix = geoprompt(\"Enter Latitude|Longitude|\" + country + \" Name (can enter URL whose contents contains country,numerical sets or your own list entered here comma separated) \" + thisline + ' (optionally append with ' + '\\n\\n' + ',\"A tooltip (regarding {popularity}) of some sort like <a target=_blank href=' + \"'\" + 'https://www.google.com/#q={country}' + \"'\" + '>{country}</a>\" ' + '\\n\\n'" . $myextras . " + ' as an example of what is possible with HTML included)', ('`' + defv).replace('`0|0|','').replace('`','')); if (datalineprefix == null) { datalineprefix=''; } dlpll=datalineprefix.split('|')[0]; if (dlpll != '') { dlpll+='|' + datalineprefix.split('|')[1] + '|'; datalineprefix=datalineprefix.replace(dlpll,''); } } else { dlpll = ''; if (isquiz.length > 0 && iquiziso < quizisos.length) { datalineprefix=quizisos[iquiziso]; } else { datalineprefix = geoprompt(\"Enter \" + country + \" Name (can enter URL whose contents contains country,numerical sets or your own list entered here comma separated) \" + thisline + ' (optionally append with ' + '\\n\\n' + ',\"A tooltip (regarding {popularity}) of some sort like <a target=_blank href=' + \"'\" + 'https://www.google.com/#q={country}' + \"'\" + '>{country}</a>\" ' + '\\n\\n'" . $myextras . " + ' as an example of what is possible with HTML included)', ('`' + defv).replace('`0|0|','').replace('`','')); } } } " . "\n";
echo ' if (datalineprefix == null) { datalineprefix=""; } ' . "\n" . ' if (datalineprefix != null) { datalineprefix=dlp(datalineprefix); iof=0; dlsa=datalineprefix.split(","); if (dlsa.length > 1 && (eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(39))) > eval(datalineprefix.indexOf(",")) && eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(34))) > eval(datalineprefix.indexOf(",")))) { while (eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(39))) > eval(datalineprefix.indexOf(",")) && eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(34))) > eval(datalineprefix.indexOf(","))) { datalineprefix=datalineprefix.replace(",", "%2C"); iof+=0; } } datalineprefix=datalineprefix.replace(/#/g, "%23"); if (datalineprefix.indexOf("{country}") != -1 && datalineprefix.indexOf(",") != -1) { dlsa=datalineprefix.split(","); if (dlsa.length > 1) { datalineprefix=datalineprefix.replace("{country}",encodeURIComponent(dlsa[0])).replace("{country}",encodeURIComponent(dlsa[0])); } } } ' . "\n";
echo ' while (datalineprefix.length != 0 && (popularity.indexOf("ercent") == (0 - 1) || popularity.indexOf(" ercent ") != (0 - 1) || (popularity.indexOf("ercent") != (0 - 1) && totalleft > 0))) { ' . "\n";
if (1 == 1) {
echo ' if (datalinesuffix.length != 0) { ' . "\n";
echo " if (fti) { datalineprefix = ''; dlpll = ''; } else { dlpll=''; if (alttitle.indexOf('&aregeographicals=') != -1) { datalineprefix = geoprompt(\"Enter Latitude|Longitude|\" + country + \" Name (can enter URL whose contents contains country,numerical sets or your own list entered here comma separated) \" + thisline + ' (for no more please hit Cancel button and optionally append with ' + '\\n\\n' + ',\"A tooltip (regarding {popularity}) of some sort like <a target=_blank href=' + \"'\" + 'https://www.google.com/#q={country}' + \"'\" + '>{country}</a>\" ' + '\\n\\n'" . $myextras . " + ' as an example of what is possible with HTML included)', ('`' + defv).replace('`0|0|','').replace('`','')); if (datalineprefix == null) { datalineprefix=''; } dlpll=datalineprefix.split('|')[0]; if (dlpll != '') { dlpll+='|' + datalineprefix.split('|')[1] + '|'; datalineprefix=datalineprefix.replace(dlpll,''); } } else { dlpll = ''; if (isquiz.length > 0 && iquiziso < quizisos.length) { datalineprefix=quizisos[iquiziso]; } else { datalineprefix = geoprompt(\"Enter \" + country + \" Name (can enter URL whose contents contains country,numerical sets or your own list entered here comma separated) \" + thisline + ' (for no more please hit Cancel button and optionally append with ' + '\\n\\n' + ',\"A tooltip (regarding {popularity}) of some sort like <a target=_blank href=' + \"'\" + 'https://www.google.com/#q={country}' + \"'\" + '>{country}</a>\" ' + '\\n\\n'" . $myextras . " + ' as an example of what is possible with HTML included)', ('`' + defv).replace('`0|0|','').replace('`','')); } } } " . "\n";
echo ' if (datalineprefix != null) { datalineprefix=dlp(datalineprefix); iof=0; dlsa=datalineprefix.split(","); if (dlsa.length > 1 && (eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(39))) > eval(datalineprefix.indexOf(",")) && eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(34))) > eval(datalineprefix.indexOf(",")))) { while (eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(39))) > eval(datalineprefix.indexOf(",")) && eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(34))) > eval(datalineprefix.indexOf(","))) { datalineprefix=datalineprefix.replace(",", "%2C"); iof+=0; } } datalineprefix=datalineprefix.replace(/#/g, "%23"); if (datalineprefix.indexOf("{country}") != -1 && datalineprefix.indexOf(",") != -1) { dlsa=datalineprefix.split(","); if (dlsa.length > 1) { datalineprefix=datalineprefix.replace("{country}",encodeURIComponent(dlsa[0])).replace("{country}",encodeURIComponent(dlsa[0])); } } } ' . "\n";
echo ' } ' . "\n";
//echo ' } ' . "\n";
echo ' if (datalineprefix == null) { ' . "\n";
echo ' datalineprefix = ""; ' . "\n";
echo ' totalleft = 0; ' . "\n";
echo ' } else if (datalineprefix.length != 0) { ' . "\n";
echo ' extra = ""; ' . "\n";
echo ' if (popularity.indexOf("ercent") != (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) extra = " (for " + totalleft + " enter nothing or hit Cancel button)"; ' . "\n";
echo ' if (fti) { datalinesuffix = ""; } else { if (isquiz.length > 0) { if (iquiziso < quizisos.length) { datalinesuffix="" + theval; iquiziso++; } else { datalinesuffix = geoprompt("Enter " + popularity.replace(" ercent ", "") + " " + thisline + extra, "" + theval); } theval--; } else { datalinesuffix = geoprompt("Enter " + popularity.replace(" ercent ", "") + " " + thisline + extra, "0"); } } ' . "\n";
echo ' if (datalinesuffix == null && popularity.indexOf("ercent") != (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) datalinesuffix = totalleft; ' . "\n";
echo ' if (datalinesuffix == null) datalinesuffix = "0"; ' . "\n";
echo ' if (datalinesuffix != null) datalineprefix = datalineprefix.replace("{popularity}", datalinesuffix); ' . "\n";
echo ' if (datalinesuffix.length == 0) { ' . "\n";
echo ' datalinesuffix = eval(totalleft); ' . "\n";
echo ' totalleft = 0; ' . "\n";
echo ' } else if (eval(totalleft) == eval(datalinesuffix) && popularity.indexOf("ercent") != (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) { ' . "\n";
echo ' totalleft = 0; ' . "\n";
echo ' } else if (eval(datalinesuffix) > eval(totalleft) && popularity.indexOf("ercent") != (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) { ' . "\n";
echo ' datalinesuffix = eval(totalleft); ' . "\n";
echo ' totalleft = 0; ' . "\n";
echo ' } else if (eval(datalinesuffix) > eval(totalleft) && popularity.indexOf("ercent") == (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) { ' . "\n";
echo ' popularity = popularity + " ercent "; ' . "\n";
echo ' } else { ' . "\n";
echo ' totalleft = eval(totalleft) - eval(datalinesuffix); ' . "\n";
echo ' } ' . "\n";
//echo ' datac = datac + ",[~" + datalineprefix + "~," + datalinesuffix + "]"; ' . "\n";
echo ' if (datalineprefix.indexOf("' . "'" . '") == -1) { four=("" + datalinesuffix).split(","); if (exra != "") { exra=String.fromCharCode(39) + "Regarding " + popularity + four[0] + String.fromCharCode(39) + ","; } datac = datac + comma + " [" + dlpll + "~" + datalineprefix.replace(/\%5f/g,"%20").replace(/\_/g,"%20") + "~," + exra + datalinesuffix + "] "; } ' . "\n";
echo ' if (datalineprefix.indexOf("' . "'" . '") != -1) { four=("" + datalinesuffix).split(","); exra=String.fromCharCode(39) + "Regarding " + popularity + four[0] + String.fromCharCode(39) + ","; datac = datac + comma + " [" + dlpll + "~" + datalineprefix.replace(",", "~,").replace(/\%5f/g,"%20").replace(/\_/g,"%20") + "," + datalinesuffix + "] "; } ' . "\n";
echo ' thisline++; defv=""; acnt=eval(-1 + thisline); if (document.getElementById("defv" + acnt)) { defv=document.getElementById("defv" + acnt).value; } ' . "\n comma=','; \n";
echo ' } ' . "\n";
} else {
echo "\n whileinnards(); \n";
}
echo ' } ' . "\n";
if (!isset($_GET['isMobile']) && !isset($_POST['isMobile'])) {
echo ' if (allowed) { var windowlocation = "./geo_chart.php?title=" + title + m + "&width=" + width + "&height=" + height + "&country=" + country + nojwinextra + "&popularity=" + popularity.replace(" ercent ", "") + "&data=" + assess_small(datac); if (windowlocation.length > 800) { document.getElementById("dpostform").innerHTML="<form method=POST id=postform action=./geo_chart.php><input type=hidden name=wouldlikeyoutoseekpermission value=y></input></form>"; var wwl=iftoobig("",windowlocation); if (wwl != "#") { if (plotblurbs.length != 0) { window.open(wwl,"_blank"); } else { location.href=wwl; } } } else { if (plotblurbs.length != 0) { window.open(windowlocation,"_blank"); } else { window.location=windowlocation; } } } ' . "\n";
} else {
echo ' if (allowed) { var windowlocation = "./geo_chart.php?isMobile=y&title=" + title + m + "&width=" + width + "&height=" + height + "&country=" + country + nojwinextra + "&popularity=" + popularity.replace(" ercent ", "") + "&data=" + assess_small(datac); if (windowlocation.length > 800) { document.getElementById("dpostform").innerHTML="<form method=POST id=postform action=./geo_chart.php><input type=hidden name=wouldlikeyoutoseekpermission value=y></input></form>"; var wwl=iftoobig("",windowlocation); if (wwl != "#") { if (plotblurbs.length != 0) { window.open(wwl,"_blank"); } else { location.href=wwl; } } } else { if (plotblurbs.length != 0) { window.open(windowlocation,"_blank"); } else { window.location=windowlocation; } } } ' . "\n";
}
echo "} \n"; // . "} \n";
echo '</' . 'script' . '>' . "\n";
}

?>

… in our the changed geo_chart.php Geo Chart interfacer.

You can also see this play out at WordPress 4.1.1’s New Google Chart Image Chart Map Chart Geo Chart Click Tutorial


Previous relevant Google Chart Image Chart Map Chart Geo Chart Click Tutorial is shown below.

Google Chart Image Chart Map Chart Geo Chart Click Tutorial

Google Chart Image Chart Map Chart Geo Chart Click Tutorial

Onto yesterday’s Google Chart Image Chart Map Chart Mainstream Interfacing Tutorial plan of attack, today we need to add a fourth spoke, if you will …

  1. Help itself … map.php … phase 1
  2. Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
  3. Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3
  4. Transfer the onclick prompt window functionality over to geo_chart.php … phase 4

… so that the user has a new way to access these geographical latitude and longitude based functionalities.

This involved getting in behind the “used to be” way the SVG circle markers were created and attend to both …

  1. an amended onclick logic set appears everytime now, if argument onclick is set, rather than just when a marker was associated with a URL, using a new data-svggeo global data attribute, and when clicked for those non-URL scenarios show the new Javascript prompt window menu … and …
  2. adjust the way a title attribute was included in the SVG in favour of an SVG title element version, so that a tooltip displays for non-mobile platform markers, when hovering over them

<?php

if (isset($_GET['aregeographicals'])) {
$gare=$_GET['aregeographicals'];
$ugare=urldecode($gare);
if ($ugare == "Y") {
$ugare=expandh($GETdata);
}
if (strpos(strtolower($ugare), "http") !== false || isset($_GET['onclick'])) {
$upa=wlook($ugare);
//echo ' alert("' . $upa . '"); ';
//exit;
$gsis=explode(",",$upa);
$igsis=0;
if (strpos(strtolower($gsis[0]), "http") === false) {
for ($jgsis=1; $jgsis<sizeof($gsis); $jgsis++) {
if ($igsis == 0 && strpos(strtolower($gsis[$jgsis]), "http") !== false) {
$igsis=$jgsis;
}
}
}
echo "\n var froma=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], toa=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], igsis=0, localgdis=(\"" . $GETdata . "\").split(']'), localgsis=(\"" . $upa . "\").split(','), peninfo=(\"" . $upa . "\").split(','); \n gsis=(\"" . $upa . "\").split(','); \n gdis=(\"" . $GETdata . "\").split(']'); \n";
if (isset($_GET['peninfo'])) {
echo "\n peninfo=(\"" . $_GET['peninfo'] . "\").replace(/\,\ /g,',+').split(','); for (var pjgs=0; pjgs<peninfo.length; pjgs++) { if ((peninfo[pjgs] + ' ').substring(0,1) == '+') { peninfo[pjgs]='+' + peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)].replace('+',''); } else { peninfo[pjgs]=peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)]; } if (peninfo[pjgs] != '' && gsis.length > pjgs) { if (gsis[pjgs] == '') { gsis[pjgs]='//www.wikipedia.org'; } } } \n";
}
// ... bad was ...echo "\n if (document.getElementById('defs')) { console.log(' attaChEdImage' + jgs + '=" . noemoji($gsis[$igsis]) . "'); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n alldefs=document.getElementsByTagName('defs'); if (alldefs.length > 0) { if (('' + alldefs[0].id) != '') { defsid=styleit('' + alldefs[0].id); } } if (document.getElementById(defsid)) { console.log(' attaChEdImage' + jgs + '=" . noemoji($gsis[$igsis]) . "'); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n if (document.getElementById(defsid) && gsis.length >= 1) { for (var jgs=0; jgs<gsis.length; jgs++) { if (gsis[jgs] != '') { console.log('attachedImage' + jgs + '=' + noemoji(gsis[jgs])); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage' + jgs + '\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"' + noemoji(gsis[jgs]) + '\"><image xlink:href = \"' + noemoji(gsis[jgs]) + '\" href = \"' + noemoji(gsis[jgs]) + '\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; } } } \n";
echo "\n var lastpl='', lastcx=-1, lastcy=-1, lastlx=-1, lastly=-1, gsuff='', linew='', postgs=[], gs=document.getElementsByTagName('g'), iigs=0, malt='';\n for (var igs=0; igs<gs.length; igs++) { \n if (peninfo.length > iigs) { \n malt=peninfo[iigs].replace('+','').trim(); \n } else { \n malt=''; \n } \n if (gsis.length > iigs) { \n if (fooc(gsis[iigs]) != '') { \n if (gsis[iigs].trim() == '') { \n gsuff='x'; \n } else { \n toa[1]=emojimaybe(gsis[iigs],malt,'></circle>',iigs); \n if (toa[1] == '></circle>') { \n toa[0]='<circle ' + refooc(lastfooc); \n toa[2]=' cx='; \n toa[3]=' cy='; \n toa[4]=' r='; \n toa[5]=' fill='; \n toa[6]=' stroke='; \n toa[7]=' stroke-width='; \n toa[8]=' opacity='; \n } else { \n toa[1]=toa[1].replace('>',' onclick=gck(' + ('~' + iigs + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\">'); \n toa[0]='<text '; \n toa[2]=' x='; \n toa[3]=' y='; \n toa[4]=' data-r='; \n toa[5]=' data-fill='; \n toa[6]=' data-stroke='; toa[7]=' data-stroke-width='; \n toa[8]=' data-opacity='; \n if (gsis[iigs].indexOf(' ') != -1) { \n gsis[iigs]=gsis[iigs].replace(gsis[iigs].split(' ')[0] + ' ',''); \n } \n } \n gsuff='' + iigs; \n } \n } else { \n gsuff=''; \n } \n } else { \n gsuff=''; \n } \n if (gsuff != 'x' && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.replace('<text ','<circle ').indexOf('<circle') != -1 && (gs[igs].innerHTML + '*').replace('</text>*','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1) { \n if (peninfo.length > iigs) { \n if (peninfo[iigs].indexOf('+') != -1) { \n linew='<line title=\"' + gdis[eval(-1 + iigs)].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + ' to ' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" onmouseover=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" onclick=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" x1=\"' + lastcx + '\" y1=\"' + lastcy + '\" x2=\"' + eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]) + '\" y2=\"' + eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]) + '\" style=\"stroke:rgb(255,0,0);stroke-width:2\" />'; \n } \n } \n postgs=gs[igs].innerHTML.split(' fill='); \n gs[igs].innerHTML=tel(gs[igs].innerHTML.replace(' fill=' + postgs[1].substring(0,1) + postgs[1].substring(1).split(postgs[1].substring(0,1))[0], ' onclick=gck(' + ('~' + gsuff + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" fill=' + postgs[1].substring(0,1) + 'url(#attachedImage' + gsuff + ')').replace(froma[0],toa[0]).replace(froma[1],toa[1]).replace(froma[2],toa[2]).replace(froma[3],toa[3]).replace(froma[4],toa[4]).replace(froma[5],toa[5]).replace(froma[6],toa[6]).replace(froma[7],toa[7]).replace(froma[8],toa[8])) + linew; } linew=''; if ((gs[igs].innerHTML.replace('<line ','*<line ') + '*').replace('</text>','</circle>').replace('-stroke','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1 && gs[igs].innerHTML.indexOf(' onclick=') != -1 && gs[igs].innerHTML.replace('<text x=','<text fill= ').indexOf('fill=') != -1) { lastcx=eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]); lastcy=eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]); lastlx=gdis[iigs].split('[')[1].split('|')[0]; lastly=gdis[iigs].split('[')[1].split('|')[1]; lastpl=gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' '); \n iigs++; \n } \n } \n } \n";
}
} else if (isset($_POST['aregeographicals'])) {
$gare=$_POST['aregeographicals'];
$ugare=urldecode($gare);
if ($ugare == "Y") {
$ugare=expandh($GETdata);
}
if (strpos(strtolower(str_replace("+"," ",$ugare)), "http") !== false || isset($_POST['onclick'])) {
$upa=wlook(str_replace("+"," ",$ugare));
$gsis=explode(",",$upa);
$igsis=0;
if (strpos(strtolower($gsis[0]), "http") === false) {
for ($jgsis=1; $jgsis<sizeof($gsis); $jgsis++) {
if ($igsis == 0 && strpos(strtolower($gsis[$jgsis]), "http") !== false) {
$igsis=$jgsis;
}
}
}
echo "\n var froma=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], toa=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], igsis=0, localgdis=(\"" . $GETdata . "\").split(']'), localgsis=(\"" . $upa . "\").split(','), peninfo=(\"" . $upa . "\").split(','); \n gsis=(\"" . $upa . "\").split(','); \n gdis=(\"" . $GETdata . "\").split(']'); \n";
if (isset($_POST['peninfo'])) {
echo "\n peninfo=(\"" . $_POST['peninfo'] . "\").replace(/\,\ /g,',+').split(','); for (var pjgs=0; pjgs<peninfo.length; pjgs++) { if ((peninfo[pjgs] + ' ').substring(0,1) == '+') { peninfo[pjgs]='+' + peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)].replace('+',''); } else { peninfo[pjgs]=peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)]; } if (peninfo[pjgs] != '' && gsis.length > pjgs) { if (gsis[pjgs] == '') { gsis[pjgs]='//www.wikipedia.org'; } } } \n";
}
echo "\n alldefs=document.getElementsByTagName('defs'); if (alldefs.length > 0) { if (('' + alldefs[0].id) != '') { defsid=styleit('' + alldefs[0].id); } } if (document.getElementById(defsid)) { console.log(' attaChedImage' + jgs + '=" . noemoji($gsis[$igsis]) . "'); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n if (document.getElementById(defsid) && gsis.length >= 1) { for (var jgs=0; jgs<gsis.length; jgs++) { if (gsis[jgs] != '') { console.log(' atTachedImage' + jgs + '=' + noemoji(gsis[jgs])); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage' + jgs + '\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"' + noemoji(gsis[jgs]) + '\"><image xlink:href = \"' + noemoji(gsis[jgs]) + '\" href = \"' + noemoji(gsis[jgs]) + '\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; } } } \n";
echo "\n var lastpl='', lastcx=-1, lastcy=-1, lastlx=-1, lastly=-1, gsuff='', linew='', postgs=[], gs=document.getElementsByTagName('g'), iigs=0, malt=''; for (var igs=0; igs<gs.length; igs++) { if (peninfo.length > iigs) { malt=peninfo[iigs].replace('+','').trim(); } else { malt=''; } if (gsis.length > iigs) { if (gsis[iigs] != '') { if (fooc(gsis[iigs]).trim() == '') { gsuff='x'; } else { toa[1]=emojimaybe(gsis[iigs],malt,'></circle>',iigs); if (toa[1] == '></circle>') { toa[0]='<circle ' + refooc(lastfooc); toa[2]=' cx='; toa[3]=' cy='; toa[4]=' r='; toa[5]=' fill='; toa[6]=' stroke='; toa[7]=' stroke-width='; toa[8]=' opacity='; } else { toa[1]=toa[1].replace('>',' onclick=gck(' + ('~' + iigs + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\">'); toa[0]='<text '; toa[2]=' x='; toa[3]=' y='; toa[4]=' data-r='; toa[5]=' data-fill='; toa[6]=' data-stroke='; toa[7]=' data-stroke-width='; toa[8]=' data-opacity='; if (gsis[iigs].indexOf(' ') != -1) { gsis[iigs]=gsis[iigs].replace(gsis[iigs].split(' ')[0] + ' ',''); } } gsuff='' + iigs; } } else { gsuff=''; } } else { gsuff=''; } if (gsuff != 'x' && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.replace('<text ','<circle ').indexOf('<circle') != -1 && (gs[igs].innerHTML + '*').replace('</text>*','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1) { if (peninfo.length > iigs) { if (peninfo[iigs].indexOf('+') != -1) { linew='<line title=\"' + gdis[eval(-1 + iigs)].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + ' to ' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" onmouseover=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" onclick=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" x1=\"' + lastcx + '\" y1=\"' + lastcy + '\" x2=\"' + eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]) + '\" y2=\"' + eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]) + '\" style=\"stroke:rgb(255,0,0);stroke-width:2\" />'; } } postgs=gs[igs].innerHTML.split(' fill='); gs[igs].innerHTML=tel(gs[igs].innerHTML.replace(' fill=' + postgs[1].substring(0,1) + postgs[1].substring(1).split(postgs[1].substring(0,1))[0], ' onclick=gck(' + ('~' + gsuff + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" fill=' + postgs[1].substring(0,1) + 'url(#attachedImage' + gsuff + ')').replace(froma[0],toa[0]).replace(froma[1],toa[1]).replace(froma[2],toa[2]).replace(froma[3],toa[3]).replace(froma[4],toa[4]).replace(froma[5],toa[5]).replace(froma[6],toa[6]).replace(froma[7],toa[7]).replace(froma[8],toa[8])) + linew; } linew=''; if ((gs[igs].innerHTML.replace('<line ','*<line ') + '*').replace('</text>','</circle>').replace('-stroke','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1 && gs[igs].innerHTML.indexOf(' onclick=') != -1 && gs[igs].innerHTML.replace('<text x=','<text fill= ').indexOf('fill=') != -1) { lastcx=eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]); lastcy=eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]); lastlx=gdis[iigs].split('[')[1].split('|')[0]; lastly=gdis[iigs].split('[')[1].split('|')[1]; lastpl=gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' '); iigs++; } } } \n";
}
} else if (isset($_GET['areplaces'])) {
if (strpos(strtolower(urldecode($_GET['areplaces'])), "http") !== false || isset($_GET['onclick'])) {
$upa=wlook(urldecode($_GET['areplaces']));
$gsis=explode(",",$upa);
$igsis=0;
if (strpos(strtolower($gsis[0]), "http") === false) {
for ($jgsis=1; $jgsis<sizeof($gsis); $jgsis++) {
if ($igsis == 0 && strpos(strtolower($gsis[$jgsis]), "http") !== false) {
$igsis=$jgsis;
}
}
}
echo "\n var froma=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], toa=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], igsis=0, localgdis=(\"" . $GETdata . "\").split(']'), localgsis=(\"" . $upa . "\").split(','), peninfo=(\"" . $upa . "\").split(','); \n gsis=(\"" . $upa . "\").split(','); \n gdis=(\"" . $GETdata . "\").split(']'); \n";
if (isset($_GET['peninfo'])) {
echo "\n peninfo=(\"" . $_GET['peninfo'] . "\").replace(/\,\ /g,',+').split(','); for (var pjgs=0; pjgs<peninfo.length; pjgs++) { if ((peninfo[pjgs] + ' ').substring(0,1) == '+') { peninfo[pjgs]='+' + peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)].replace('+',''); } else { peninfo[pjgs]=peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)]; } if (peninfo[pjgs] != '' && gsis.length > pjgs) { if (gsis[pjgs] == '') { gsis[pjgs]='//www.wikipedia.org'; } } } \n";
}
echo "\n alldefs=document.getElementsByTagName('defs'); if (alldefs.length > 0) { if (('' + alldefs[0].id) != '') { defsid=styleit('' + alldefs[0].id); } } if (document.getElementById(defsid)) { document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n if (document.getElementById(defsid) && gsis.length >= 1) { for (var jgs=0; jgs<gsis.length; jgs++) { if (gsis[jgs] != '') { document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage' + jgs + '\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"' + noemoji(gsis[jgs]) + '\"><image xlink:href = \"' + noemoji(gsis[jgs]) + '\" href = \"' + noemoji(gsis[jgs]) + '\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; } } } \n";
echo "\n var lastpl='', lastcx=-1, lastcy=-1, lastlx=-1, lastly=-1, gsuff='', linew='', postgs=[], gs=document.getElementsByTagName('g'), iigs=0, malt=''; for (var igs=0; igs<gs.length; igs++) { if (peninfo.length > iigs) { malt=peninfo[iigs].replace('+','').trim(); } else { malt=''; } if (gsis.length > iigs) { if (fooc(gsis[iigs]) != '') { if (gsis[iigs].trim() == '') { gsuff='x'; } else { toa[1]=emojimaybe(gsis[iigs],malt,'></circle>',iigs); if (toa[1] == '></circle>') { toa[0]='<circle ' + refooc(lastfooc); toa[2]=' cx='; toa[3]=' cy='; toa[4]=' r='; toa[5]=' fill='; toa[6]=' stroke='; toa[7]=' stroke-width='; toa[8]=' opacity='; } else { toa[1]=toa[1].replace('>',' onclick=gck(' + ('~' + iigs + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\">'); toa[0]='<text '; toa[2]=' x='; toa[3]=' y='; toa[4]=' data-r='; toa[5]=' data-fill='; toa[6]=' data-stroke='; toa[7]=' data-stroke-width='; toa[8]=' data-opacity='; if (gsis[iigs].indexOf(' ') != -1) { gsis[iigs]=gsis[iigs].replace(gsis[iigs].split(' ')[0] + ' ',''); } } gsuff='' + iigs; } } else { gsuff=''; } } else { gsuff=''; } if (gsuff != 'x' && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.replace('<text ','<circle ').indexOf('<circle') != -1 && (gs[igs].innerHTML + '*').replace('</text>*','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1) { if (peninfo.length > iigs) { if (peninfo[iigs].indexOf('+') != -1) { linew='<line title=\"' + gdis[eval(-1 + iigs)].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + ' to ' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" onmouseover=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" onclick=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" x1=\"' + lastcx + '\" y1=\"' + lastcy + '\" x2=\"' + eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]) + '\" y2=\"' + eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]) + '\" style=\"stroke:rgb(255,0,0);stroke-width:2\" />'; } } postgs=gs[igs].innerHTML.split(' fill='); gs[igs].innerHTML=tel(gs[igs].innerHTML.replace(' fill=' + postgs[1].substring(0,1) + postgs[1].substring(1).split(postgs[1].substring(0,1))[0], ' onclick=gck(' + ('~' + gsuff + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" fill=' + postgs[1].substring(0,1) + 'url(#attachedImage' + gsuff + ')').replace(froma[0],toa[0]).replace(froma[1],toa[1]).replace(froma[2],toa[2]).replace(froma[3],toa[3]).replace(froma[4],toa[4]).replace(froma[5],toa[5]).replace(froma[6],toa[6]).replace(froma[7],toa[7]).replace(froma[8],toa[8])) + linew; } linew=''; if ((gs[igs].innerHTML.replace('<line ','*<line ') + '*').replace('</text>','</circle>').replace('-stroke','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1 && gs[igs].innerHTML.indexOf(' onclick=') != -1 && gs[igs].innerHTML.replace('<text x=','<text fill= ').indexOf('fill=') != -1) { lastcx=eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]); lastcy=eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]); lastlx=gdis[iigs].split('[')[1].split('|')[0]; lastly=gdis[iigs].split('[')[1].split('|')[1]; lastpl=gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' '); iigs++; } } } \n";
}
} else if (isset($_POST['areplaces'])) {
if (strpos(strtolower(urldecode($_POST['areplaces'])), "http") !== false || isset($_POST['onclick'])) {
$upa=wlook(urldecode($_POST['areplaces']));
$gsis=explode(",",$upa);
$igsis=0;
if (strpos(strtolower($gsis[0]), "http") === false) {
for ($jgsis=1; $jgsis<sizeof($gsis); $jgsis++) {
if ($igsis == 0 && strpos(strtolower($gsis[$jgsis]), "http") !== false) {
$igsis=$jgsis;
}
}
}
echo "\n var froma=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], toa=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], igsis=0, localgdis=(\"" . $GETdata . "\").split(']'), localgsis=(\"" . $upa . "\").split(','), peninfo=(\"" . $upa . "\").split(','); \n gsis=(\"" . $upa . "\").split(','); \n gdis=(\"" . $GETdata . "\").split(']'); \n";
if (isset($_POST['peninfo'])) {
echo "\n peninfo=(\"" . $_POST['peninfo'] . "\").replace(/\,\ /g,',+').split(','); for (var pjgs=0; pjgs<peninfo.length; pjgs++) { if ((peninfo[pjgs] + ' ').substring(0,1) == '+') { peninfo[pjgs]='+' + peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)].replace('+',''); } else { peninfo[pjgs]=peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)]; } if (peninfo[pjgs] != '' && gsis.length > pjgs) { if (gsis[pjgs] == '') { gsis[pjgs]='//www.wikipedia.org'; } } } \n";
}
echo "\n alldefs=document.getElementsByTagName('defs'); if (alldefs.length > 0) { if (('' + alldefs[0].id) != '') { defsid=styleit('' + alldefs[0].id); } } if (document.getElementById(defsid)) { document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n if (document.getElementById(defsid) && gsis.length >= 1) { for (var jgs=0; jgs<gsis.length; jgs++) { if (gsis[jgs] != '') { document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage' + jgs + '\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"' + noemoji(gsis[jgs]) + '\"><image xlink:href = \"' + noemoji(gsis[jgs]) + '\" href = \"' + noemoji(gsis[jgs]) + '\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; } } } \n";
echo "\n var lastpl='', lastcx=-1, lastcy=-1, lastlx=-1, lastly=-1, gsuff='', linew='', postgs=[], gs=document.getElementsByTagName('g'), iigs=0, malt=''; for (var igs=0; igs<gs.length; igs++) { if (peninfo.length > iigs) { malt=peninfo[iigs].replace('+','').trim(); } else { malt=''; } if (gsis.length > iigs) { if (gsis[iigs] != '') { if (fooc(gsis[iigs]).trim() == '') { gsuff='x'; } else { toa[1]=emojimaybe(gsis[iigs],malt,'></circle>',iigs); if (toa[1] == '></circle>') { toa[0]='<circle ' + refooc(lastfooc); toa[2]=' cx='; toa[3]=' cy='; toa[4]=' r='; toa[5]=' fill='; toa[6]=' stroke='; toa[7]=' stroke-width='; toa[8]=' opacity='; } else { toa[1]=toa[1].replace('>',' onclick=gck(' + ('~' + iigs + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\">'); toa[0]='<text '; toa[2]=' x='; toa[3]=' y='; toa[4]=' data-r='; toa[5]=' data-fill='; toa[6]=' data-stroke='; toa[7]=' data-stroke-width='; toa[8]=' data-opacity='; if (gsis[iigs].indexOf(' ') != -1) { gsis[iigs]=gsis[iigs].replace(gsis[iigs].split(' ')[0] + ' ',''); } } gsuff='' + iigs; } } else { gsuff=''; } } else { gsuff=''; } if (gsuff != 'x' && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.replace('<text ','<circle ').indexOf('<circle') != -1 && (gs[igs].innerHTML + '*').replace('</text>*','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1) { if (peninfo.length > iigs) { if (peninfo[iigs].indexOf('+') != -1) { linew='<line title=\"' + gdis[eval(-1 + iigs)].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + ' to ' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" onmouseover=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" onclick=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" x1=\"' + lastcx + '\" y1=\"' + lastcy + '\" x2=\"' + eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]) + '\" y2=\"' + eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]) + '\" style=\"stroke:rgb(255,0,0);stroke-width:2\" />'; } } postgs=gs[igs].innerHTML.split(' fill='); gs[igs].innerHTML=tel(gs[igs].innerHTML.replace(' fill=' + postgs[1].substring(0,1) + postgs[1].substring(1).split(postgs[1].substring(0,1))[0], ' onclick=gck(' + ('~' + gsuff + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" fill=' + postgs[1].substring(0,1) + 'url(#attachedImage' + gsuff + ')').replace(froma[0],toa[0]).replace(froma[1],toa[1]).replace(froma[2],toa[2]).replace(froma[3],toa[3]).replace(froma[4],toa[4]).replace(froma[5],toa[5]).replace(froma[6],toa[6]).replace(froma[7],toa[7]).replace(froma[8],toa[8])) + linew; } linew=''; if ((gs[igs].innerHTML.replace('<line ','*<line ') + '*').replace('</text>','</circle>').replace('-stroke','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1 && gs[igs].innerHTML.indexOf(' onclick=') != -1 && gs[igs].innerHTML.replace('<text x=','<text fill= ').indexOf('fill=') != -1) { lastcx=eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]); lastcy=eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]); lastlx=gdis[iigs].split('[')[1].split('|')[0]; lastly=gdis[iigs].split('[')[1].split('|')[1]; lastpl=gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' '); iigs++; } } } \n";
}
}

?>

… in our the changed geo_chart.php Geo Chart interfacer.


Previous relevant Google Chart Image Chart Map Chart Mainstream Interfacing Tutorial is shown below.

Google Chart Image Chart Map Chart Mainstream Interfacing Tutorial

Google Chart Image Chart Map Chart Mainstream Interfacing Tutorial

Yesterday’s Google Chart Image Chart Map Chart Mainstream Primer Tutorial mentioned a three point plan …

  1. Help itself … map.php … phase 1
  2. Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
  3. Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3

… we find ourselves still dealing with the “first point” above regarding, where it rubs up against the first half of the second point (if all that makes sense), today.

This means we might now, with map.php user interfacing, present a Google Charts Image Chart Map Chart in various guises …

  • &iso=US-NJ|CA-AB suffix to the map title showing a non-legended cropped world view of that | delimited region codes list
  • &isoall=AU suffix to the map title showing a legended (initially) country view of country’s regions … toggleable to …
  • a world view of that same user setting (via click or right click)

… after that first prompt, if the user entered settings to indicate that desire.

We’ve moved on to a “four point” code section of relevance paradigm today, with …


var xiso='iso';
if (document.URL.indexOf('&iso') != -1 && document.URL.indexOf('&iso=') == -1) {
xiso='iso' + document.URL.indexOf('&iso')[1].split('=')[0];
}
var isusdams='<?php echo (isset($_POST['iso']) ? trim(str_replace('+',' ',urldecode($_POST['iso']))) : (isset($_GET['iso']) ? trim(str_replace('+',' ',urldecode($_GET['iso']))) : '')); ?>';
if (xiso != 'iso' && isusdams == '') { isusdams=decodeURIComponent(document.URL.split('&' + xiso + '=')[1].split('&')[0]); }
//alert('xiso=' + xiso + ' and isusdams=' + isusdams);
if (window.top || isusdams.trim() != '') {
if (isusdams.trim() != '') {
if (isusdams.indexOf(';') == -1) { isusdams+=';'; }
} else if (top.document.URL.indexOf('/dams_usa.htm') != -1) {
isusdams='US;';
} else if (top.document.URL.indexOf('/australian_') != -1) {
isusdams='AU;';
} else if (top.document.URL.indexOf('/ireland_') != -1) {
isusdams='IE;';
} else if (top.document.URL.indexOf('/new_zealand_') != -1) {
isusdams='NZ;';
} else if (document.URL.indexOf('iso=') != -1) {
isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (parent.document.URL.indexOf('/tz_places.php?iso=') != -1) {
isusdams=parent.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (top.document.URL.indexOf('/tz_places.php?iso=') != -1) {
isusdams=top.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';
}
} else if (document.URL.indexOf('iso=') != -1) {
isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (document.URL.indexOf('&iso') != -1) {
isusdams=document.URL.split('&iso')[1].split('=')[1].split('&')[0].split('#')[0] + ';';
}
if (isusdams != '') { // amapidgeo
if (document.getElementById('amapidgeo')) {
document.getElementById('amapidgeo').click();
} else {
setTimeout(latergeoclick, 5000);
}
}

… and …

<?php echo ”

function gogeo(usug) {
if (documentURL.indexOf('data=') != -1) {
if ((documentURL + '~').indexOf('&data=~') != -1 && ('' + pardata).replace('undefined','') != '') {
documentURL=documentURL + pardata;
}
var isdfrom='youllneverfindthis';
var isdto='youllneverfindthis';
var isfrom='youllneverfindthis';
var isto='youllneverfindthis';
var xiso='iso';
if (document.URL.indexOf('&iso') != -1 && document.URL.indexOf('&iso=') == -1) {
xiso='iso' + document.URL.indexOf('&iso')[1].split('=')[0];
isdfrom='&iso' + document.URL.split('&iso')[1].split('=')[0] + '=';
isdto='&iso=';
}
var isusdams='" . (isset($_POST['iso']) ? trim(str_replace('+',' ',urldecode($_POST['iso']))) : (isset($_GET['iso']) ? trim(str_replace('+',' ',urldecode($_GET['iso']))) : '')) . "';
if (xiso != 'iso' && isusdams == '') { isusdams=decodeURIComponent(document.URL.split('&' + xiso + '=')[1].split('&')[0]); }
if (window.top || isusdams.trim() != '') {
if (isusdams.trim() != '') {
if (isusdams.indexOf(';') == -1) { isusdams+=';'; }
if (eval('' + isusdams.length) > 3) { isfrom=isusdams.substring(0,3); isto=isusdams.substring(0,2) + ';'; }
} else if (top.document.URL.indexOf('/dams_usa.htm') != -1) {
isusdams='US;';
} else if (top.document.URL.indexOf('/australian_') != -1) {
isusdams='AU;';
} else if (top.document.URL.indexOf('/ireland_') != -1) {
isusdams='IE;';
} else if (top.document.URL.indexOf('/new_zealand_') != -1) {
isusdams='NZ;';
} else if (document.URL.indexOf('iso=') != -1) {
isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (parent.document.URL.indexOf('/tz_places.php?iso=') != -1) {
isusdams=parent.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (top.document.URL.indexOf('/tz_places.php?iso=') != -1) {
isusdams=top.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';
}
} else if (document.URL.indexOf('iso=') != -1) {
isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (document.URL.indexOf('&iso') != -1) {
isusdams=document.URL.split('&iso')[1].split('=')[1].split('&')[0].split('#')[0] + ';';
isdfrom='&iso' + document.URL.split('&iso')[1].split('=')[0] + '=';
isdto='&iso=';
}
if (isusdams != '') {
locationhref=toolong((documentURL.replace(isdfrom,isdto) + '%20,%20[-90.0|0.0|~%20~,999999999]').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=y&').replace('title=','title=' + (isusdams + ' ').substring(0,3).trim().replace(isfrom,isto)).replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]'));
} else {
locationhref=toolong((documentURL.replace(isdfrom,isdto) + '%20,%20[-90.0|0.0|~%20~,999999999]').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=y&').replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]'));
}
//locationhref=toolong((documentURL + ',[-90.0,0.0,~%20~,999999999]').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=' + agy + '&').replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]'));
//locationhref=toolong((documentURL + '').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=' + agy + '&').replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]'));
} else {
locationhref=usug;
}
if (locationhref != '#') { location.href=locationhref; } locationhref='';
}

“; ?>

… and within the map.php interactivity logic

<?php echo ”

function yourprompt(blb, defa) {
if (('' + location.hash).indexOf('title=') != -1 && document.URL.indexOf('&') == -1) {
return decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]);
} else if (document.URL.indexOf('title=') != -1 && document.URL.indexOf('&') == -1) {
return decodeURIComponent(document.URL.split('title=')[1].split('=')[1].split('&')[0]);
}
return ourprompt(blb, defa);
}


// used at ...
echo ' var title = yourprompt("Enter Map Title (background image URL or image data URI ; separated ( followed by ; ) before title are options, and suffix by &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest and suffix by &lines=y for overlay clickable link lines and/or suffix by &onclick=y for all onclick functionalities such as &brgplace=[1] for Bearing Distance table and perhaps &brgmode=trip for that table in trip order). Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] ... ' . $promptsuffix . '", "' . str_replace("+"," ",urldecode($GETtitle)). '"); ' . "\n";

“; ?>

… and …

<?php echo ”

function dllb() {
var qpw=0;
var justiso=true;
if (('' + location.hash).indexOf('title=') != -1 && document.URL.indexOf('&') == -1) {
thistwo=8;
regionstuff=decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]);
if (regionstuff.indexOf('&iso') != -1) {
if (regionstuff.split('&iso')[1].substring(0,1) != '=') { justiso=false; }
regionstuff=decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]).split('&iso')[1].split('=')[1].split('&')[0];
}
if (!justiso) {
thistwo=20;
document.getElementById('idivis').style.width='700px';
document.getElementById('idivis').style.height='500px';
document.getElementById('idivis').style.backgroundColor='yellow';
//document.getElementById('idivis').style.backgroundRepeat='no-repeat';
//document.getElementById('idivis').style.backgroundSize='contain';
//document.getElementById('idivis').style.background='URL("//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '")';
document.getElementById('idivis').innerHTML='<img oncontextmenu="document.getElementById(' + "'idivis'" + ').click();" onclick="document.getElementById(' + "'idivis'" + ').click();" title="Click or right click near border to toggle between country view and world view" title="" id=ifdivis style="width:600px;height:400px;" src="//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '"></img>';
document.getElementById('idivis').title='Click or right click near border to toggle between country view and world view';
document.getElementById('idivis').onclick=function(evt){ thistwo+=50; if (document.getElementById('ifdivis').src.indexOf('&') == -1) { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0] + '&world=World'; evt.target.style.backgroundColor='lightblue'; } else { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0]; evt.target.style.backgroundColor='yellow'; } };
document.getElementById('idivis').oncontextmenu=function(evt){ thistwo+=50; if (document.getElementById('ifdivis').src.indexOf('&') == -1) { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0] + '&world=World'; evt.target.style.backgroundColor='lightblue'; } else { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0]; evt.target.style.backgroundColor='yellow'; } };
//window.open('//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2), '_blank', 'top=20,left=20,width=900,height=700');
} else {
document.getElementById('idivis').style.width='600px';
document.getElementById('idivis').style.height='400px';
document.getElementById('idivis').innerHTML='<iframe style="width:600px;height:400px;" src="//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=' + regionstuff + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274"></iframe>';
}
} else if (document.URL.indexOf('title=') != -1 && document.URL.indexOf('&') == -1) {
thistwo=8;
regionstuff=decodeURIComponent(document.URL.split('title=')[1].split('=')[1].split('&')[0]);
if (regionstuff.indexOf('&iso') != -1) {
if (regionstuff.split('&iso')[1].substring(0,1) != '=') { justiso=false; }
regionstuff=decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]).split('&iso')[1].split('=')[1].split('&')[0];
}
if (!justiso) {
thistwo=20;
document.getElementById('idivis').style.width='700px';
document.getElementById('idivis').style.height='500px';
document.getElementById('idivis').style.backgroundColor='yellow';
//document.getElementById('idivis').style.backgroundRepeat='no-repeat';
//document.getElementById('idivis').style.backgroundSize='contain';
//document.getElementById('idivis').style.background='URL("//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '")';
//document.getElementById('idivis').innerHTML='<iframe title="Click or right click near border to toggle between country view and world view" id=ifdivis style="width:700px;height:500px;" src="//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '"></iframe>';
document.getElementById('idivis').innerHTML='<img oncontextmenu="document.getElementById(' + "'idivis'" + ').click();" onclick="document.getElementById(' + "'idivis'" + ').click();" title="Click or right click near border to toggle between country view and world view" title="" id=ifdivis style="width:600px;height:400px;" src="//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '"></img>';
document.getElementById('idivis').title='Click or right click near border to toggle between country view and world view';
document.getElementById('idivis').onclick=function(evt){ thistwo+=50; if (document.getElementById('ifdivis').src.indexOf('&') == -1) { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0] + '&world=World'; evt.target.style.backgroundColor='lightblue'; } else { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0]; evt.target.style.backgroundColor='yellow'; } };
document.getElementById('idivis').oncontextmenu=function(evt){ thistwo+=50; if (document.getElementById('ifdivis').src.indexOf('&') == -1) { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0] + '&world=World'; evt.target.style.backgroundColor='lightblue'; } else { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0]; evt.target.style.backgroundColor='yellow'; } };
//window.open('//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2), '_blank', 'top=20,left=20,width=900,height=700');
} else {
document.getElementById('idivis').style.width='600px';
document.getElementById('idivis').style.height='400px';
document.getElementById('idivis').innerHTML='<iframe style="width:600px;height:400px;" src="//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=' + regionstuff + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274"></iframe>';
}
}
//
// rest of usual dllb "onload" event logic follows ...
}

“; ?>

… in the changed map.php.php PHP code for our inhouse Google Chart Map Chart interfacer.

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.

Posted in Ajax, Colour Matching, eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Google Chart Geo Chart Image Chart Context Tutorial

Google Chart Geo Chart Image Chart Context Tutorial

Google Chart Geo Chart Image Chart Context Tutorial

At its essence the Google Chart Geo Chart functions in one of two ways …

  1. “the shading of countries of interest” we first coded for as an interfacing mode of use … but later we realized it could also function as a …
  2. “plot markers on world view maps” or “plot markers on country view maps”

… and with today’s work ideas we go back to that first “shading of countries of interest” mode of use, and start to augment …

  • view
  • zoom level
  • context

… possibilities by adding a newly shown Google Charts Image Chart Map Chart into the mix, even to that “context” level of mixing up ISO-3166 regional codes (eg. US-FL Florida is used in today’s animated GIF presentation involving …


https://www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=My%20World%20Survey&width=556&qx=aaaag&height=347&country=Country&popularity=Popularity&data=%20[~BL~,56]%20,%20[~KN~,78]%20,%20[~LC~,79]%20,%20[~MQ~,79]%20,%20[~US-FL~,82]

… with some small Caribbean island nation ISO 2 letter country codes in “the context of” a Caribbean island map where nations which are too small to show on your usual “shading of countries of interest” Geo Chart world view map can show on an Image Chart (albeit very small)).

To allow for this we example $_GET or $_POST incoming arguments as per

<?php

$prechartdiv="";
$postchartdiv="";

$xiso='iso';
$xxiso='';
if (isset($_POST['title']) || $justrand) {
$ibps=1;
foreach ($_POST as $name => $val) {
if ($name == "data" && !isset($_POST['question']) && !isset($_POST['guess']) && !isset($_POST['titlequiz'])) {
if (strpos(urldecode($_POST[$name]), "|") === false && strpos(urldecode($_POST[$name]), "~") !== false && $_POST[$name] != '') {
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;'><tr><td style='vertical-align:top;margin:0 0 0 0;' id=tdleft>";
$bps=explode('~', urldecode($_POST[$name]));
$bandp=$bps[1];
$isregional=false;
$theframeoh='';
if (strpos($bps[$ibps], '-') !== false) {
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_POST['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_POST['data']);
}
for ($ibps=3; $ibps<sizeof($bps); $ibps+=2) {
$bandp.="|" . $bps[$ibps];
if (strpos($bps[$ibps], '-') !== false) {
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_POST['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$isregional=true;
$_POST['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_POST['data']);
}
}
$theframeoh="<iframe onload=\"document.getElementById('od2').style.width='100%';\" style='margin:0 0 0 0;width:600px;height:400px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274'></iframe>";
if ($isregional) {
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;' id=tdleft><tr><td style='vertical-align:top;margin:0 0 0 0;'>" . $theframeoh . "</td><td style=vertical-align:top; id=tdright>";
$postchartdiv="</td></tr></table>";
} else {
$postchartdiv="</td><td style=vertical-align:top; id=tdright>" . $theframeoh . "</td></tr></table>";
}
}
}

if ($name != "rand") { $justrand=false; }
if ($name != "iso" && substr(($name . ' '),0,3) == 'iso') {
$xiso=$name;
$xxiso=$name;
} else if ($name == 'iso' && $xxiso == '') {
$xxiso=$name;
}
}
}
if (isset($_GET['title']) || $justrand) {
$ibps=1;
foreach ($_GET as $name => $val) {
if ($name == "data" && !isset($_GET['question']) && !isset($_GET['guess']) && !isset($_GET['titlequiz'])) {
if (strpos(urldecode($_GET[$name]), "|") === false && strpos(urldecode($_GET[$name]), "~") !== false && $_GET[$name] != '') {
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;'><tr><td style='vertical-align:top;margin:0 0 0 0;' id=tdleft>";
$bps=explode('~', urldecode($_GET[$name]));
$bandp=$bps[1];
$isregional=false;
$theframeoh='';
if (strpos($bps[$ibps], '-') !== false) {
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_GET['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_GET['data']);
}
for ($ibps=3; $ibps<sizeof($bps); $ibps+=2) {
$bandp.="|" . $bps[$ibps];
if (strpos($bps[$ibps], '-') !== false) {
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode('-', $bps[$ibps])[0],$_GET['data']);
} else if (strpos($bps[$ibps], urlencode('-')) !== false) {
$isregional=true;
$_GET['data']=str_replace($bps[$ibps], explode(urlencode('-'), $bps[$ibps])[0],$_GET['data']);
}
}
$theframeoh="<iframe onload=\"document.getElementById('od2').style.width='100%';\" style='margin:0 0 0 0;width:600px;height:400px;' src='//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=" . $bandp . "&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274'></iframe>";
if ($isregional) {
$prechartdiv="<table cellpadding=5 cellspacing=5 style='margin:0 0 0 0;' id=tdleft><tr><td style='vertical-align:top;margin:0 0 0 0;'>" . $theframeoh . "</td><td style=vertical-align:top; id=tdright>";
$postchartdiv="</td></tr></table>";
} else {
$postchartdiv="</td><td style=vertical-align:top; id=tdright>" . $theframeoh . "</td></tr></table>";
}
}
}

if ($name != "rand") { $justrand=false; }
if ($name != "iso" && substr(($name . ' '),0,3) == 'iso') {
$xiso=$name;
$xxiso=$name;
} else if ($name == 'iso' && $xxiso == '') {
$xxiso=$name;
}
}
}

?>

… further to yesterday’s Google Chart Image Chart Map Chart Mobile Views Tutorial, feature in the changed geo_chart.php Geo Chart interfacer.


Previous relevant Google Chart Image Chart Map Chart Mobile Views Tutorial is shown below.

Google Chart Image Chart Map Chart Mobile Views Tutorial

Google Chart Image Chart Map Chart Mobile Views Tutorial

Yesterday’s Google Chart Image Chart Map Chart Country View Tutorial

  • country view … and before that …
  • continental view

… you may have noticed, relied on hashtag navigation, which had not been coded for, regarding the quirks of the mobile platform navigations. And so today, as the “beta phase” of these views continues, we’ve added, where PHP server meets Javascript client hashtag visibility

<?php

if (!isset($_POST['data'])) {
echo "
if (document.URL.indexOf('nojwin') == -1 && navigator.userAgent.match(/iPhone|iPad/i)) {
if (('' + location.hash).indexOf('title=') == -1) {
if (document.URL.indexOf('?') == -1) {
location.href=document.URL.split('#')[0] + '?nojwin=Q';
} else {
location.href=document.URL.split('#')[0] + '&nojwin=Q';
}
}
}
";
}

?>

… to remedy this problem, no longer happening in the changed geo_chart.php Geo Chart interfacer, also changing for more “beta phase” view discovery “slog”.


Previous relevant Google Chart Image Chart Map Chart Country View Tutorial is shown below.

Google Chart Image Chart Map Chart Country View Tutorial

Google Chart Image Chart Map Chart Country View Tutorial

Yesterday’s Google Chart Image Chart Map Chart Plotting Tutorial mentioned that …

  • in addition to the “beta” &iso=De style continental view of yesterday … we wanted to, and start today, to code for …
  • a “beta” &iso=DE&aregeographicals=y means by which we can plot user defined places (as markers) into a “region showing” country view map in a Google Charts Image Chart Map Chart

It was a hard slog getting to a harder slog, that is country dependent, so we’ll let you know when out of “beta” regarding its use. In the meantime, maybe you want to try below, by changing last two ISO-3166 country code characters (as required, and answer ensuing questions) …

https://www.rjmprogramming.com.au/PHP/GeoChart/?rand=1247746316#title=US%3BMy%20World%20Survey%26aregeographicals%3Dy%26iso%3DUS

… in the changed geo_chart.php Geo Chart interfacer.


Previous relevant Google Chart Image Chart Map Chart Plotting Tutorial is shown below.

Google Chart Image Chart Map Chart Plotting Tutorial

Google Chart Image Chart Map Chart Plotting Tutorial

In this current blog thread we’ve realized along the way that to combine …

… could lead to us being able to offer markers on a regional map, as another “area of functionality”.

We say “area of functionality” here because we are starting down this road implementing a …


continental view

… for the country you want to show a “regional guise” for, but down the track, we envisage a …


country view

… with a “regional ripple”.

How does the user achieve this new “continental” view Google Charts Image Chart Map Chart overlayed with markers? At that first prompt, as per this item

  1. Help itself … map.php … phase 1
  2. Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
  3. Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3
  4. Transfer the onclick prompt window functionality over to geo_chart.php … phase 4

… in this “mission statement” idea, the user coming up to either conduit now sees

Google Chart inhouse interfacing to …
Geo Chart Map Chart
<?php

echo 'title = geoprompt("Enter Geo Map Title (background image URL or background image data URI ; separated ( followed by ; ) before title are available options (and suffix examples could be &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest and in beta is &iso=De for continent view of Germany regions ready for user defined markers within the map), and you can replace Survey with Quiz for a quiz, and you can prefix by a Region Code (eg. IT) ( followed by ; ) before title as an available options, and you can suffix by &onclick=y for added onclick functionality and/or &region=145 to display Western Asia (for example) and/or &text=y to display text and/or &aregeographicals=y (or instead of y put an http marker image URL like http://www.rjmprogramming.com.au/PHP/GeoChart/mapc64b.png) for you prefixing Labels by lat|long| values and/or &areplaces=y (or instead of y put a comma separated http marker image URL (or use hTtP for link but no image) or placename list (with ,+ usage indicating to plot a line)) for places (prefixable by the number part of an emoji HTML Entity (decimal) eg. 128249 is video camera) rather than countries, Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] (and to make a quiz question for someone after all your entries also append (things like) &guess=Brazil&question=Which country had Tijuana brass?))", "' . str_replace("+"," ",urldecode($GETtitle)) . '"); ';

?>
<?php

echo ' var title = yourprompt("Enter Map Title (background image URL or image data URI ; separated ( followed by ; ) before title are options, and suffix by &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest (and in beta is &iso=De for continent view of Germany regions ready for user defined markers within the map) and suffix by &lines=y for overlay clickable link lines and/or suffix by &onclick=y for all onclick functionalities such as &brgplace=[1] for Bearing Distance table and perhaps &brgmode=trip for that table in trip order). Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] ... ' . $promptsuffix . '", "' . str_replace("+"," ",urldecode($GETtitle)). '"); ' . "\n";

?>

… to add to the progress of the recent Google Chart Image Chart Geo Chart Integration Tutorial. And then later the user can enter latitude|longitude|placename set(s) of interest in another prompt window further down that track, which get plotted onto that regional map after all the set(s) are collected off the user. Also displayed is the Geo Chart “country view” version of that data below the Image Chart Map Chart regional chart version above.

We show how this happens in today’s animated GIF presentation. And by the way, if regions have a wrong colour in that animated GIF, that was a bug now fixed.

Code wise …

  • we changed geo_chart.php Geo Chart interfacer
  • we changed map.php.php PHP code for Map Chart interfacer
  • we changed image_chart.php Google Chart Image Chart Map Chart interfacer … started to use …
    <?php

    // ;Continent;CC1|CC2|:blLAT,blLONG,trLAT,trLONG:width,height:scblX,scblY,sctrX,sctrY
    $continfo=';Europe;IS|CY|:35.16666,-27.6,67.0,33.36666:468,450:422,560,890,140';
    $continfo.=';Australia;AU|AU|:-44,113.65,-10.26667,161.28333:600,450:422,560,866,140';
    $continfo.=';Asia;FI|WS|:-14,37,81,179.9:600,450:422,560,866,140';
    $continfo.=';America;GS|US|:-56,-179.9,77,-35:600,450:422,560,866,140';
    $continfo.=';Africa;TF||:-35,-17,37,52:600,450:422,560,890,140';

    ?>
    … and pass the relevant bit of this data back to its caller, in an Ajax callback arrangement (making use of hashtag information passing)
    <?php echo ”

    function lasturlbackin() {
    if (myxhrlu.readyState == 4) {
    if (myxhrlu.status == 200) {
    // alert(1);
    if (myxhrlu.responseText) {
    if (myxhrlu.responseText.indexOf('#') != -1 && myxhrlu.responseText.indexOf(';') != -1) {
    plotblurb=decodeURIComponent(myxhrlu.responseText.replace(myxhrlu.responseText.split(';')[0],''));
    if (plotblurb.indexOf('America;') != -1) { iwis=eval(50 + eval(('' + document.getElementById('idivis').style.width).replace('px',''))); document.getElementById('idivis').style.width='' + iwis + 'px'; } else { iwis=-9; }
    plotblurbs=plotblurb.split(':');
    //var xcz=prompt(myxhrlu.responseText.replace('chart.googleapis.com/chart','www.rjmprogramming.com.au/ITblog/600/450/').replace('#&','&').replace(';','#;').replace('https:','').replace('http:',''),myxhrlu.responseText.replace('chart.googleapis.com/chart','www.rjmprogramming.com.au/ITblog/600/450/').replace('#&','&').replace(';','#;').replace('https:','').replace('http:',''));
    document.getElementById('idivis').style.backgroundImage='URL(\"' + chcowhitener(myxhrlu.responseText.replace('chart.googleapis.com/chart','www.rjmprogramming.com.au/ITblog/600/450/').replace('#&','&').replace(';','#;').replace('https:','').replace('http:','')) + '\")';
    document.getElementById('idivis').style.backgroundPosition='98% top';
    document.getElementById('idivis').style.backgroundRepeat='no-repeat';
    //document.getElementById('idivis').style.backgroundSize='65% 90%';
    }
    }
    }
    }
    }

    “; ?>
    … our “continents” recognized via PHP TimeZone place lookups

Did you know?

We’ve used Andorra usefully in the past, on a world view map …

  • because it is recognized by Google Charts Geo Chart … but is …
  • too small to plot

And this idea of a “continental view” started for us as an area of the world we could define corner data for, via two small countries. Well, it didn’t work in practice that well, but pleased us for a couple of hours. And so we remain in “Beta Land”, but with ideas about how to escape this land, hoping there are no repercussions docking anywhere near “Alpha Male Land”?!


Previous relevant Google Chart Image Chart Geo Chart Integration Tutorial is shown below.

Google Chart Image Chart Geo Chart Integration Tutorial

Google Chart Image Chart Geo Chart Integration Tutorial

We’re up to the second part of yesterday’s Google Chart Image Chart Map Chart Geo Chart Click Tutorial

  1. Help itself … map.php … phase 1
  2. Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
  3. Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3
  4. Transfer the onclick prompt window functionality over to geo_chart.php … phase 4

… phase 2 fixes, attending to Country Quiz Game Suite YouTube Tutorial idea with a Google Chart mapping component addition (thanks). Then we thought of the Google Chart Geo Chart‘s user interactive entry “portal”, should we say. Of course, we learn off what has happened before with this, leaving us time for a possible research and development thread of functionality, a bit off the radar, but not ready for release yet, though the signs are not too bad.

To bed down the Geo Chart interfacing to the Image Chart Map Chart usage it was the Javascript “function prelater” and associated “function later” which needed tweaking

<?php

echo "function prelater() { if (thistwo > 20) { var lesstwo=eval(-20 + thistwo); thistwo=20; setTimeout(prelater, eval(1000 * lesstwo)); return ''; } \n if (saetc) { saetc(); } if ((('' + location.hash).indexOf('title=') != -1 || document.URL.indexOf('?title=') != -1) && document.URL.indexOf('&') == -1) { t=decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]); title=t; w='556'; h='347'; c='Country'; p='Popularity'; w=''; h=''; c=''; p=''; m=''; ilstis=1; later('',w,h,c,p,m); } else { later('','','','','',''); } \n } \n function later(t,w,h,c,p,m) { \n";

echo "\n if (document.getElementById('od1')) { document.getElementById('od1').style.width='' + eval(window.getComputedStyle(document.body, null).getPropertyValue('width').replace('px','')) + 'px'; } \n";
echo "\n if (document.getElementById('od2')) { document.getElementById('od2').style.width='' + eval(window.getComputedStyle(document.body, null).getPropertyValue('width').replace('px','')) + 'px'; } \n";

if (1 == 1) {
echo ' var datalineprefix = " "; ' . "\n";
echo ' var acnt = -1; ' . "\n";
echo ' var iswq = false; ' . "\n";
echo ' var defv = ""; ' . "\n";
echo ' var dlpll = ""; ' . "\n";
echo ' var datalinesuffix = ""; ' . "\n";
echo ' var extra = "", four; ' . "\n";
echo ' var thisline = 1; ' . "\n";
echo ' var totalleft = 100.0; ' . "\n";
echo ' var title = ""; ' . "\n";
echo ' var alttitle = ""; ' . "\n";
echo ' var width = "", widthblurb=""; ' . "\n";
echo ' if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) ) { widthblurb=" (for quiz entries append &flag=y for Emoji Flags on tooltips)"; } else { widthblurb=" (for quiz entries append &istn=y for top left thumbnails and/or &flag=y for Emoji Flags on tooltips)"; } ' . "\n";
echo ' var height = ""; ' . "\n";
echo ' var country = ""; ' . "\n";
echo ' var popularity = ""; ' . "\n";
}
echo ' if ((t.length + w.length + h.length + c.length + p.length) == 0) { ' . "\n";
echo ' saetc(); if (("" + document.URL.split("#")[0] + "&").replace(/\+/g,"%20").indexOf("?titlequiz=My%20World%20Quiz&") != -1) { title="My World Quiz"; t=title; w="556"; h="347"; c="Country"; p="Popularity"; } else if (("" + location.hash).indexOf("title=") != -1 && document.URL.indexOf("&") == -1) { title=decodeURIComponent(("" + location.hash).split("title=")[1].split("&")[0]); ourdllb(); } else { title = geoprompt("Enter Geo Map Title (background image URL or background image data URI ; separated ( followed by ; ) before title are available options (and suffix examples could be &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest), and you can replace Survey with Quiz for a quiz, and you can prefix by a Region Code (eg. IT) ( followed by ; ) before title as an available options, and you can suffix by &onclick=y for added onclick functionality and/or ®ion=145 to display Western Asia (for example) and/or &text=y to display text and/or &aregeographicals=y (or instead of y put an http marker image URL like http://www.rjmprogramming.com.au/PHP/GeoChart/mapc64b.png) for you prefixing Labels by lat|long| values and/or &areplaces=y (or instead of y put a comma separated http marker image URL (or use hTtP for link but no image) or placename list (with ,+ usage indicating to plot a line)) for places (prefixable by the number part of an emoji HTML Entity (decimal) eg. 128249 is video camera) rather than countries, Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] (and to make a quiz question for someone after all your entries also append (things like) &guess=Brazil&question=Which country had Tijuana brass?))", "' . str_replace("+"," ",urldecode($GETtitle)) . '"); } if (title != null) { if (title == "My World Quiz") { iswq=true; t=title; allowed=false; fti=true; document.getElementById("wq").click(); } alttitle=title; if (title.indexOf("&are") != -1) { alttitle=placelook(title); title=alttitle; } } else { alttitle=""; } ' . "\n";
echo ' defv=""; acnt++; if (document.getElementById("defv" + acnt)) { defv=document.getElementById("defv" + acnt).value; } ' . "\n";
echo ' } ' . "\n";
echo ' if ((t.length + w.length + h.length + c.length + p.length) != 0) { ' . "\n";
echo ' title = t; ' . "\n";
echo ' width = w; ' . "\n";
echo ' height = h; ' . "\n";
echo ' country = c; ' . "\n";
echo ' popularity = p; ' . "\n";
echo ' } else if (title != null) { ' . "\n";
echo ' width = geoprompt("Enter Geo Map Width' . $whblurb . ' (7860.045 for Europe quiz) (3930.068 for South East Asia and Oceania quiz) (3230.035 for Africa quiz) (3001.011 for South America quiz) (2201.001 for North and Central America quiz) (2202.056 for Asia quiz)" + widthblurb, "' . $GETwidth . '"); if (width.split("&")[0] == "2202.056") { isquiz="Asia"; height="2002.029"; } else if (width.split("&")[0] == "2201.001") { isquiz="North and Central America"; height="2001.029"; } else if (width.split("&")[0] == "3001.011") { isquiz="South America"; height="2801.059"; } else if (width.split("&")[0] == "3230.035") { isquiz="Africa"; height="2737.052"; } else if (width.split("&")[0] == "7860.045") { isquiz="Europe"; height="6875.041"; } else if (width.split("&")[0] == "3930.068") { isquiz="South East Asia and Oceania"; height="3437.054"; } ' . "\n";
echo ' if (isquiz.length > 0) { if (isquiz == "Asia") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (2002.029 for Asia quiz ... add spaces for more quiz places)", "2002.029"); if ((height.trim() + ".").indexOf("2002.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else if (isquiz == "North and Central America") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (2001.029 for North and Central America quiz ... add spaces for more quiz places)", "2001.029"); if ((height.trim() + ".").indexOf("2001.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else if (isquiz == "South America") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (2801.059 for South America quiz ... add spaces for more quiz places)", "2801.059"); if ((height.trim() + ".").indexOf("2801.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else if (isquiz == "Africa") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (2737.052 for Africa quiz ... add spaces for more quiz places)", "2737.052"); if ((height.trim() + ".").indexOf("2737.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else if (isquiz == "South East Asia and Oceania ... add spaces for more quiz places") { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (3437.054 for South East Asia and Oceania quiz)", "3437.054"); if ((height.trim() + ".").indexOf("3437.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } else { height = geoprompt("Enter Geo Map Height' . $whblurb . ' (6875.041 for Europe quiz ... add spaces for more quiz places)", "6875.041"); if ((height.trim() + ".").indexOf("6875.") != 0) { isquiz=""; } else { height=setsixteenquiz(height); } } } else { height = geoprompt("Enter Geo Map Height' . $whblurb . '", "' . $GETheight . '"); } ' . "\n";
echo ' if (title.indexOf("&are") != -1) { if (isquiz.length > 0) { if (1 == 1) { country="Places"; } else { country = geoprompt("Enter Places Label", "Places"); } } else { country = geoprompt("Enter Places Label", "Places"); } } else { if (isquiz.length > 0) { if (1 == 1) { country = "Country"; } else { country = geoprompt("Enter Country Label", "' . $GETcountry . '"); } } else { country = geoprompt("Enter Country Label", "' . $GETcountry . '"); } } ' . "\n";
echo ' if (isquiz.length > 0) { if (1 == 1) { popularity="Countdown"; } else { popularity = geoprompt("Enter " + country + " Numerical Measure(s) (ie. can be comma separated)", "Countdown"); } } else { popularity = geoprompt("Enter " + country + " Numerical Measure(s) (ie. can be comma separated)", "' . $GETpopularity . '"); } ' . "\n";
echo ' } ' . "\n";
echo ' var datac = ""; ' . "\n";
echo ' var sq = "' . "'" . '"; ' . "\n";
//echo ' datalineprefix = prompt("Enter " + country + " Name " + thisline, ""); ' . "\n";
echo " if (iswq) { if (document.URL.indexOf('wqperspective=') == -1) { document.getElementById('wq').click(); } allowed=false; fti=true; } if (fti) { datalineprefix = ''; dlpll = ''; } else { dlpll=''; if (alttitle.indexOf('&aregeographicals=') != -1) { datalineprefix = geoprompt(\"Enter Latitude|Longitude|\" + country + \" Name (can enter URL whose contents contains country,numerical sets or your own list entered here comma separated) \" + thisline + ' (optionally append with ' + '\\n\\n' + ',\"A tooltip (regarding {popularity}) of some sort like <a target=_blank href=' + \"'\" + 'https://www.google.com/#q={country}' + \"'\" + '>{country}</a>\" ' + '\\n\\n'" . $myextras . " + ' as an example of what is possible with HTML included)', ('`' + defv).replace('`0|0|','').replace('`','')); if (datalineprefix == null) { datalineprefix=''; } dlpll=datalineprefix.split('|')[0]; if (dlpll != '') { dlpll+='|' + datalineprefix.split('|')[1] + '|'; datalineprefix=datalineprefix.replace(dlpll,''); } } else { dlpll = ''; if (isquiz.length > 0 && iquiziso < quizisos.length) { datalineprefix=quizisos[iquiziso]; } else { datalineprefix = geoprompt(\"Enter \" + country + \" Name (can enter URL whose contents contains country,numerical sets or your own list entered here comma separated) \" + thisline + ' (optionally append with ' + '\\n\\n' + ',\"A tooltip (regarding {popularity}) of some sort like <a target=_blank href=' + \"'\" + 'https://www.google.com/#q={country}' + \"'\" + '>{country}</a>\" ' + '\\n\\n'" . $myextras . " + ' as an example of what is possible with HTML included)', ('`' + defv).replace('`0|0|','').replace('`','')); } } } " . "\n";
echo ' if (datalineprefix == null) { datalineprefix=""; } ' . "\n" . ' if (datalineprefix != null) { datalineprefix=dlp(datalineprefix); iof=0; dlsa=datalineprefix.split(","); if (dlsa.length > 1 && (eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(39))) > eval(datalineprefix.indexOf(",")) && eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(34))) > eval(datalineprefix.indexOf(",")))) { while (eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(39))) > eval(datalineprefix.indexOf(",")) && eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(34))) > eval(datalineprefix.indexOf(","))) { datalineprefix=datalineprefix.replace(",", "%2C"); iof+=0; } } datalineprefix=datalineprefix.replace(/#/g, "%23"); if (datalineprefix.indexOf("{country}") != -1 && datalineprefix.indexOf(",") != -1) { dlsa=datalineprefix.split(","); if (dlsa.length > 1) { datalineprefix=datalineprefix.replace("{country}",encodeURIComponent(dlsa[0])).replace("{country}",encodeURIComponent(dlsa[0])); } } } ' . "\n";
echo ' while (datalineprefix.length != 0 && (popularity.indexOf("ercent") == (0 - 1) || popularity.indexOf(" ercent ") != (0 - 1) || (popularity.indexOf("ercent") != (0 - 1) && totalleft > 0))) { ' . "\n";
if (1 == 1) {
echo ' if (datalinesuffix.length != 0) { ' . "\n";
echo " if (fti) { datalineprefix = ''; dlpll = ''; } else { dlpll=''; if (alttitle.indexOf('&aregeographicals=') != -1) { datalineprefix = geoprompt(\"Enter Latitude|Longitude|\" + country + \" Name (can enter URL whose contents contains country,numerical sets or your own list entered here comma separated) \" + thisline + ' (for no more please hit Cancel button and optionally append with ' + '\\n\\n' + ',\"A tooltip (regarding {popularity}) of some sort like <a target=_blank href=' + \"'\" + 'https://www.google.com/#q={country}' + \"'\" + '>{country}</a>\" ' + '\\n\\n'" . $myextras . " + ' as an example of what is possible with HTML included)', ('`' + defv).replace('`0|0|','').replace('`','')); if (datalineprefix == null) { datalineprefix=''; } dlpll=datalineprefix.split('|')[0]; if (dlpll != '') { dlpll+='|' + datalineprefix.split('|')[1] + '|'; datalineprefix=datalineprefix.replace(dlpll,''); } } else { dlpll = ''; if (isquiz.length > 0 && iquiziso < quizisos.length) { datalineprefix=quizisos[iquiziso]; } else { datalineprefix = geoprompt(\"Enter \" + country + \" Name (can enter URL whose contents contains country,numerical sets or your own list entered here comma separated) \" + thisline + ' (for no more please hit Cancel button and optionally append with ' + '\\n\\n' + ',\"A tooltip (regarding {popularity}) of some sort like <a target=_blank href=' + \"'\" + 'https://www.google.com/#q={country}' + \"'\" + '>{country}</a>\" ' + '\\n\\n'" . $myextras . " + ' as an example of what is possible with HTML included)', ('`' + defv).replace('`0|0|','').replace('`','')); } } } " . "\n";
echo ' if (datalineprefix != null) { datalineprefix=dlp(datalineprefix); iof=0; dlsa=datalineprefix.split(","); if (dlsa.length > 1 && (eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(39))) > eval(datalineprefix.indexOf(",")) && eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(34))) > eval(datalineprefix.indexOf(",")))) { while (eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(39))) > eval(datalineprefix.indexOf(",")) && eval(-1 + iof + datalineprefix.indexOf(String.fromCharCode(34))) > eval(datalineprefix.indexOf(","))) { datalineprefix=datalineprefix.replace(",", "%2C"); iof+=0; } } datalineprefix=datalineprefix.replace(/#/g, "%23"); if (datalineprefix.indexOf("{country}") != -1 && datalineprefix.indexOf(",") != -1) { dlsa=datalineprefix.split(","); if (dlsa.length > 1) { datalineprefix=datalineprefix.replace("{country}",encodeURIComponent(dlsa[0])).replace("{country}",encodeURIComponent(dlsa[0])); } } } ' . "\n";
echo ' } ' . "\n";
//echo ' } ' . "\n";
echo ' if (datalineprefix == null) { ' . "\n";
echo ' datalineprefix = ""; ' . "\n";
echo ' totalleft = 0; ' . "\n";
echo ' } else if (datalineprefix.length != 0) { ' . "\n";
echo ' extra = ""; ' . "\n";
echo ' if (popularity.indexOf("ercent") != (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) extra = " (for " + totalleft + " enter nothing or hit Cancel button)"; ' . "\n";
echo ' if (fti) { datalinesuffix = ""; } else { if (isquiz.length > 0) { if (iquiziso < quizisos.length) { datalinesuffix="" + theval; iquiziso++; } else { datalinesuffix = geoprompt("Enter " + popularity.replace(" ercent ", "") + " " + thisline + extra, "" + theval); } theval--; } else { datalinesuffix = geoprompt("Enter " + popularity.replace(" ercent ", "") + " " + thisline + extra, "0"); } } ' . "\n";
echo ' if (datalinesuffix == null && popularity.indexOf("ercent") != (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) datalinesuffix = totalleft; ' . "\n";
echo ' if (datalinesuffix == null) datalinesuffix = "0"; ' . "\n";
echo ' if (datalinesuffix != null) datalineprefix = datalineprefix.replace("{popularity}", datalinesuffix); ' . "\n";
echo ' if (datalinesuffix.length == 0) { ' . "\n";
echo ' datalinesuffix = eval(totalleft); ' . "\n";
echo ' totalleft = 0; ' . "\n";
echo ' } else if (eval(totalleft) == eval(datalinesuffix) && popularity.indexOf("ercent") != (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) { ' . "\n";
echo ' totalleft = 0; ' . "\n";
echo ' } else if (eval(datalinesuffix) > eval(totalleft) && popularity.indexOf("ercent") != (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) { ' . "\n";
echo ' datalinesuffix = eval(totalleft); ' . "\n";
echo ' totalleft = 0; ' . "\n";
echo ' } else if (eval(datalinesuffix) > eval(totalleft) && popularity.indexOf("ercent") == (0 - 1) && popularity.indexOf(" ercent ") == (0 - 1)) { ' . "\n";
echo ' popularity = popularity + " ercent "; ' . "\n";
echo ' } else { ' . "\n";
echo ' totalleft = eval(totalleft) - eval(datalinesuffix); ' . "\n";
echo ' } ' . "\n";
//echo ' datac = datac + ",[~" + datalineprefix + "~," + datalinesuffix + "]"; ' . "\n";
echo ' if (datalineprefix.indexOf("' . "'" . '") == -1) { four=("" + datalinesuffix).split(","); if (exra != "") { exra=String.fromCharCode(39) + "Regarding " + popularity + four[0] + String.fromCharCode(39) + ","; } datac = datac + comma + " [" + dlpll + "~" + datalineprefix.replace(/\%5f/g,"%20").replace(/\_/g,"%20") + "~," + exra + datalinesuffix + "] "; } ' . "\n";
echo ' if (datalineprefix.indexOf("' . "'" . '") != -1) { four=("" + datalinesuffix).split(","); exra=String.fromCharCode(39) + "Regarding " + popularity + four[0] + String.fromCharCode(39) + ","; datac = datac + comma + " [" + dlpll + "~" + datalineprefix.replace(",", "~,").replace(/\%5f/g,"%20").replace(/\_/g,"%20") + "," + datalinesuffix + "] "; } ' . "\n";
echo ' thisline++; defv=""; acnt=eval(-1 + thisline); if (document.getElementById("defv" + acnt)) { defv=document.getElementById("defv" + acnt).value; } ' . "\n comma=','; \n";
echo ' } ' . "\n";
} else {
echo "\n whileinnards(); \n";
}
echo ' } ' . "\n";
if (!isset($_GET['isMobile']) && !isset($_POST['isMobile'])) {
echo ' if (allowed) { var windowlocation = "./geo_chart.php?title=" + title + m + "&width=" + width + "&height=" + height + "&country=" + country + nojwinextra + "&popularity=" + popularity.replace(" ercent ", "") + "&data=" + assess_small(datac); if (windowlocation.length > 800) { document.getElementById("dpostform").innerHTML="<form method=POST id=postform action=./geo_chart.php><input type=hidden name=wouldlikeyoutoseekpermission value=y></input></form>"; var wwl=iftoobig("",windowlocation); if (wwl != "#") { if (plotblurbs.length != 0) { window.open(wwl,"_blank"); } else { location.href=wwl; } } } else { if (plotblurbs.length != 0) { window.open(windowlocation,"_blank"); } else { window.location=windowlocation; } } } ' . "\n";
} else {
echo ' if (allowed) { var windowlocation = "./geo_chart.php?isMobile=y&title=" + title + m + "&width=" + width + "&height=" + height + "&country=" + country + nojwinextra + "&popularity=" + popularity.replace(" ercent ", "") + "&data=" + assess_small(datac); if (windowlocation.length > 800) { document.getElementById("dpostform").innerHTML="<form method=POST id=postform action=./geo_chart.php><input type=hidden name=wouldlikeyoutoseekpermission value=y></input></form>"; var wwl=iftoobig("",windowlocation); if (wwl != "#") { if (plotblurbs.length != 0) { window.open(wwl,"_blank"); } else { location.href=wwl; } } } else { if (plotblurbs.length != 0) { window.open(windowlocation,"_blank"); } else { window.location=windowlocation; } } } ' . "\n";
}
echo "} \n"; // . "} \n";
echo '</' . 'script' . '>' . "\n";
}

?>

… in our the changed geo_chart.php Geo Chart interfacer.

You can also see this play out at WordPress 4.1.1’s New Google Chart Image Chart Map Chart Geo Chart Click Tutorial


Previous relevant Google Chart Image Chart Map Chart Geo Chart Click Tutorial is shown below.

Google Chart Image Chart Map Chart Geo Chart Click Tutorial

Google Chart Image Chart Map Chart Geo Chart Click Tutorial

Onto yesterday’s Google Chart Image Chart Map Chart Mainstream Interfacing Tutorial plan of attack, today we need to add a fourth spoke, if you will …

  1. Help itself … map.php … phase 1
  2. Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
  3. Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3
  4. Transfer the onclick prompt window functionality over to geo_chart.php … phase 4

… so that the user has a new way to access these geographical latitude and longitude based functionalities.

This involved getting in behind the “used to be” way the SVG circle markers were created and attend to both …

  1. an amended onclick logic set appears everytime now, if argument onclick is set, rather than just when a marker was associated with a URL, using a new data-svggeo global data attribute, and when clicked for those non-URL scenarios show the new Javascript prompt window menu … and …
  2. adjust the way a title attribute was included in the SVG in favour of an SVG title element version, so that a tooltip displays for non-mobile platform markers, when hovering over them

<?php

if (isset($_GET['aregeographicals'])) {
$gare=$_GET['aregeographicals'];
$ugare=urldecode($gare);
if ($ugare == "Y") {
$ugare=expandh($GETdata);
}
if (strpos(strtolower($ugare), "http") !== false || isset($_GET['onclick'])) {
$upa=wlook($ugare);
//echo ' alert("' . $upa . '"); ';
//exit;
$gsis=explode(",",$upa);
$igsis=0;
if (strpos(strtolower($gsis[0]), "http") === false) {
for ($jgsis=1; $jgsis<sizeof($gsis); $jgsis++) {
if ($igsis == 0 && strpos(strtolower($gsis[$jgsis]), "http") !== false) {
$igsis=$jgsis;
}
}
}
echo "\n var froma=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], toa=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], igsis=0, localgdis=(\"" . $GETdata . "\").split(']'), localgsis=(\"" . $upa . "\").split(','), peninfo=(\"" . $upa . "\").split(','); \n gsis=(\"" . $upa . "\").split(','); \n gdis=(\"" . $GETdata . "\").split(']'); \n";
if (isset($_GET['peninfo'])) {
echo "\n peninfo=(\"" . $_GET['peninfo'] . "\").replace(/\,\ /g,',+').split(','); for (var pjgs=0; pjgs<peninfo.length; pjgs++) { if ((peninfo[pjgs] + ' ').substring(0,1) == '+') { peninfo[pjgs]='+' + peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)].replace('+',''); } else { peninfo[pjgs]=peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)]; } if (peninfo[pjgs] != '' && gsis.length > pjgs) { if (gsis[pjgs] == '') { gsis[pjgs]='//www.wikipedia.org'; } } } \n";
}
// ... bad was ...echo "\n if (document.getElementById('defs')) { console.log(' attaChEdImage' + jgs + '=" . noemoji($gsis[$igsis]) . "'); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n alldefs=document.getElementsByTagName('defs'); if (alldefs.length > 0) { if (('' + alldefs[0].id) != '') { defsid=styleit('' + alldefs[0].id); } } if (document.getElementById(defsid)) { console.log(' attaChEdImage' + jgs + '=" . noemoji($gsis[$igsis]) . "'); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n if (document.getElementById(defsid) && gsis.length >= 1) { for (var jgs=0; jgs<gsis.length; jgs++) { if (gsis[jgs] != '') { console.log('attachedImage' + jgs + '=' + noemoji(gsis[jgs])); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage' + jgs + '\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"' + noemoji(gsis[jgs]) + '\"><image xlink:href = \"' + noemoji(gsis[jgs]) + '\" href = \"' + noemoji(gsis[jgs]) + '\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; } } } \n";
echo "\n var lastpl='', lastcx=-1, lastcy=-1, lastlx=-1, lastly=-1, gsuff='', linew='', postgs=[], gs=document.getElementsByTagName('g'), iigs=0, malt='';\n for (var igs=0; igs<gs.length; igs++) { \n if (peninfo.length > iigs) { \n malt=peninfo[iigs].replace('+','').trim(); \n } else { \n malt=''; \n } \n if (gsis.length > iigs) { \n if (fooc(gsis[iigs]) != '') { \n if (gsis[iigs].trim() == '') { \n gsuff='x'; \n } else { \n toa[1]=emojimaybe(gsis[iigs],malt,'></circle>',iigs); \n if (toa[1] == '></circle>') { \n toa[0]='<circle ' + refooc(lastfooc); \n toa[2]=' cx='; \n toa[3]=' cy='; \n toa[4]=' r='; \n toa[5]=' fill='; \n toa[6]=' stroke='; \n toa[7]=' stroke-width='; \n toa[8]=' opacity='; \n } else { \n toa[1]=toa[1].replace('>',' onclick=gck(' + ('~' + iigs + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\">'); \n toa[0]='<text '; \n toa[2]=' x='; \n toa[3]=' y='; \n toa[4]=' data-r='; \n toa[5]=' data-fill='; \n toa[6]=' data-stroke='; toa[7]=' data-stroke-width='; \n toa[8]=' data-opacity='; \n if (gsis[iigs].indexOf(' ') != -1) { \n gsis[iigs]=gsis[iigs].replace(gsis[iigs].split(' ')[0] + ' ',''); \n } \n } \n gsuff='' + iigs; \n } \n } else { \n gsuff=''; \n } \n } else { \n gsuff=''; \n } \n if (gsuff != 'x' && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.replace('<text ','<circle ').indexOf('<circle') != -1 && (gs[igs].innerHTML + '*').replace('</text>*','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1) { \n if (peninfo.length > iigs) { \n if (peninfo[iigs].indexOf('+') != -1) { \n linew='<line title=\"' + gdis[eval(-1 + iigs)].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + ' to ' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" onmouseover=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" onclick=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" x1=\"' + lastcx + '\" y1=\"' + lastcy + '\" x2=\"' + eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]) + '\" y2=\"' + eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]) + '\" style=\"stroke:rgb(255,0,0);stroke-width:2\" />'; \n } \n } \n postgs=gs[igs].innerHTML.split(' fill='); \n gs[igs].innerHTML=tel(gs[igs].innerHTML.replace(' fill=' + postgs[1].substring(0,1) + postgs[1].substring(1).split(postgs[1].substring(0,1))[0], ' onclick=gck(' + ('~' + gsuff + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" fill=' + postgs[1].substring(0,1) + 'url(#attachedImage' + gsuff + ')').replace(froma[0],toa[0]).replace(froma[1],toa[1]).replace(froma[2],toa[2]).replace(froma[3],toa[3]).replace(froma[4],toa[4]).replace(froma[5],toa[5]).replace(froma[6],toa[6]).replace(froma[7],toa[7]).replace(froma[8],toa[8])) + linew; } linew=''; if ((gs[igs].innerHTML.replace('<line ','*<line ') + '*').replace('</text>','</circle>').replace('-stroke','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1 && gs[igs].innerHTML.indexOf(' onclick=') != -1 && gs[igs].innerHTML.replace('<text x=','<text fill= ').indexOf('fill=') != -1) { lastcx=eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]); lastcy=eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]); lastlx=gdis[iigs].split('[')[1].split('|')[0]; lastly=gdis[iigs].split('[')[1].split('|')[1]; lastpl=gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' '); \n iigs++; \n } \n } \n } \n";
}
} else if (isset($_POST['aregeographicals'])) {
$gare=$_POST['aregeographicals'];
$ugare=urldecode($gare);
if ($ugare == "Y") {
$ugare=expandh($GETdata);
}
if (strpos(strtolower(str_replace("+"," ",$ugare)), "http") !== false || isset($_POST['onclick'])) {
$upa=wlook(str_replace("+"," ",$ugare));
$gsis=explode(",",$upa);
$igsis=0;
if (strpos(strtolower($gsis[0]), "http") === false) {
for ($jgsis=1; $jgsis<sizeof($gsis); $jgsis++) {
if ($igsis == 0 && strpos(strtolower($gsis[$jgsis]), "http") !== false) {
$igsis=$jgsis;
}
}
}
echo "\n var froma=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], toa=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], igsis=0, localgdis=(\"" . $GETdata . "\").split(']'), localgsis=(\"" . $upa . "\").split(','), peninfo=(\"" . $upa . "\").split(','); \n gsis=(\"" . $upa . "\").split(','); \n gdis=(\"" . $GETdata . "\").split(']'); \n";
if (isset($_POST['peninfo'])) {
echo "\n peninfo=(\"" . $_POST['peninfo'] . "\").replace(/\,\ /g,',+').split(','); for (var pjgs=0; pjgs<peninfo.length; pjgs++) { if ((peninfo[pjgs] + ' ').substring(0,1) == '+') { peninfo[pjgs]='+' + peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)].replace('+',''); } else { peninfo[pjgs]=peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)]; } if (peninfo[pjgs] != '' && gsis.length > pjgs) { if (gsis[pjgs] == '') { gsis[pjgs]='//www.wikipedia.org'; } } } \n";
}
echo "\n alldefs=document.getElementsByTagName('defs'); if (alldefs.length > 0) { if (('' + alldefs[0].id) != '') { defsid=styleit('' + alldefs[0].id); } } if (document.getElementById(defsid)) { console.log(' attaChedImage' + jgs + '=" . noemoji($gsis[$igsis]) . "'); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n if (document.getElementById(defsid) && gsis.length >= 1) { for (var jgs=0; jgs<gsis.length; jgs++) { if (gsis[jgs] != '') { console.log(' atTachedImage' + jgs + '=' + noemoji(gsis[jgs])); document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage' + jgs + '\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"' + noemoji(gsis[jgs]) + '\"><image xlink:href = \"' + noemoji(gsis[jgs]) + '\" href = \"' + noemoji(gsis[jgs]) + '\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; } } } \n";
echo "\n var lastpl='', lastcx=-1, lastcy=-1, lastlx=-1, lastly=-1, gsuff='', linew='', postgs=[], gs=document.getElementsByTagName('g'), iigs=0, malt=''; for (var igs=0; igs<gs.length; igs++) { if (peninfo.length > iigs) { malt=peninfo[iigs].replace('+','').trim(); } else { malt=''; } if (gsis.length > iigs) { if (gsis[iigs] != '') { if (fooc(gsis[iigs]).trim() == '') { gsuff='x'; } else { toa[1]=emojimaybe(gsis[iigs],malt,'></circle>',iigs); if (toa[1] == '></circle>') { toa[0]='<circle ' + refooc(lastfooc); toa[2]=' cx='; toa[3]=' cy='; toa[4]=' r='; toa[5]=' fill='; toa[6]=' stroke='; toa[7]=' stroke-width='; toa[8]=' opacity='; } else { toa[1]=toa[1].replace('>',' onclick=gck(' + ('~' + iigs + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\">'); toa[0]='<text '; toa[2]=' x='; toa[3]=' y='; toa[4]=' data-r='; toa[5]=' data-fill='; toa[6]=' data-stroke='; toa[7]=' data-stroke-width='; toa[8]=' data-opacity='; if (gsis[iigs].indexOf(' ') != -1) { gsis[iigs]=gsis[iigs].replace(gsis[iigs].split(' ')[0] + ' ',''); } } gsuff='' + iigs; } } else { gsuff=''; } } else { gsuff=''; } if (gsuff != 'x' && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.replace('<text ','<circle ').indexOf('<circle') != -1 && (gs[igs].innerHTML + '*').replace('</text>*','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1) { if (peninfo.length > iigs) { if (peninfo[iigs].indexOf('+') != -1) { linew='<line title=\"' + gdis[eval(-1 + iigs)].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + ' to ' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" onmouseover=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" onclick=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" x1=\"' + lastcx + '\" y1=\"' + lastcy + '\" x2=\"' + eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]) + '\" y2=\"' + eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]) + '\" style=\"stroke:rgb(255,0,0);stroke-width:2\" />'; } } postgs=gs[igs].innerHTML.split(' fill='); gs[igs].innerHTML=tel(gs[igs].innerHTML.replace(' fill=' + postgs[1].substring(0,1) + postgs[1].substring(1).split(postgs[1].substring(0,1))[0], ' onclick=gck(' + ('~' + gsuff + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" fill=' + postgs[1].substring(0,1) + 'url(#attachedImage' + gsuff + ')').replace(froma[0],toa[0]).replace(froma[1],toa[1]).replace(froma[2],toa[2]).replace(froma[3],toa[3]).replace(froma[4],toa[4]).replace(froma[5],toa[5]).replace(froma[6],toa[6]).replace(froma[7],toa[7]).replace(froma[8],toa[8])) + linew; } linew=''; if ((gs[igs].innerHTML.replace('<line ','*<line ') + '*').replace('</text>','</circle>').replace('-stroke','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1 && gs[igs].innerHTML.indexOf(' onclick=') != -1 && gs[igs].innerHTML.replace('<text x=','<text fill= ').indexOf('fill=') != -1) { lastcx=eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]); lastcy=eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]); lastlx=gdis[iigs].split('[')[1].split('|')[0]; lastly=gdis[iigs].split('[')[1].split('|')[1]; lastpl=gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' '); iigs++; } } } \n";
}
} else if (isset($_GET['areplaces'])) {
if (strpos(strtolower(urldecode($_GET['areplaces'])), "http") !== false || isset($_GET['onclick'])) {
$upa=wlook(urldecode($_GET['areplaces']));
$gsis=explode(",",$upa);
$igsis=0;
if (strpos(strtolower($gsis[0]), "http") === false) {
for ($jgsis=1; $jgsis<sizeof($gsis); $jgsis++) {
if ($igsis == 0 && strpos(strtolower($gsis[$jgsis]), "http") !== false) {
$igsis=$jgsis;
}
}
}
echo "\n var froma=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], toa=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], igsis=0, localgdis=(\"" . $GETdata . "\").split(']'), localgsis=(\"" . $upa . "\").split(','), peninfo=(\"" . $upa . "\").split(','); \n gsis=(\"" . $upa . "\").split(','); \n gdis=(\"" . $GETdata . "\").split(']'); \n";
if (isset($_GET['peninfo'])) {
echo "\n peninfo=(\"" . $_GET['peninfo'] . "\").replace(/\,\ /g,',+').split(','); for (var pjgs=0; pjgs<peninfo.length; pjgs++) { if ((peninfo[pjgs] + ' ').substring(0,1) == '+') { peninfo[pjgs]='+' + peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)].replace('+',''); } else { peninfo[pjgs]=peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)]; } if (peninfo[pjgs] != '' && gsis.length > pjgs) { if (gsis[pjgs] == '') { gsis[pjgs]='//www.wikipedia.org'; } } } \n";
}
echo "\n alldefs=document.getElementsByTagName('defs'); if (alldefs.length > 0) { if (('' + alldefs[0].id) != '') { defsid=styleit('' + alldefs[0].id); } } if (document.getElementById(defsid)) { document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n if (document.getElementById(defsid) && gsis.length >= 1) { for (var jgs=0; jgs<gsis.length; jgs++) { if (gsis[jgs] != '') { document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage' + jgs + '\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"' + noemoji(gsis[jgs]) + '\"><image xlink:href = \"' + noemoji(gsis[jgs]) + '\" href = \"' + noemoji(gsis[jgs]) + '\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; } } } \n";
echo "\n var lastpl='', lastcx=-1, lastcy=-1, lastlx=-1, lastly=-1, gsuff='', linew='', postgs=[], gs=document.getElementsByTagName('g'), iigs=0, malt=''; for (var igs=0; igs<gs.length; igs++) { if (peninfo.length > iigs) { malt=peninfo[iigs].replace('+','').trim(); } else { malt=''; } if (gsis.length > iigs) { if (fooc(gsis[iigs]) != '') { if (gsis[iigs].trim() == '') { gsuff='x'; } else { toa[1]=emojimaybe(gsis[iigs],malt,'></circle>',iigs); if (toa[1] == '></circle>') { toa[0]='<circle ' + refooc(lastfooc); toa[2]=' cx='; toa[3]=' cy='; toa[4]=' r='; toa[5]=' fill='; toa[6]=' stroke='; toa[7]=' stroke-width='; toa[8]=' opacity='; } else { toa[1]=toa[1].replace('>',' onclick=gck(' + ('~' + iigs + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\">'); toa[0]='<text '; toa[2]=' x='; toa[3]=' y='; toa[4]=' data-r='; toa[5]=' data-fill='; toa[6]=' data-stroke='; toa[7]=' data-stroke-width='; toa[8]=' data-opacity='; if (gsis[iigs].indexOf(' ') != -1) { gsis[iigs]=gsis[iigs].replace(gsis[iigs].split(' ')[0] + ' ',''); } } gsuff='' + iigs; } } else { gsuff=''; } } else { gsuff=''; } if (gsuff != 'x' && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.replace('<text ','<circle ').indexOf('<circle') != -1 && (gs[igs].innerHTML + '*').replace('</text>*','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1) { if (peninfo.length > iigs) { if (peninfo[iigs].indexOf('+') != -1) { linew='<line title=\"' + gdis[eval(-1 + iigs)].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + ' to ' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" onmouseover=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" onclick=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" x1=\"' + lastcx + '\" y1=\"' + lastcy + '\" x2=\"' + eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]) + '\" y2=\"' + eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]) + '\" style=\"stroke:rgb(255,0,0);stroke-width:2\" />'; } } postgs=gs[igs].innerHTML.split(' fill='); gs[igs].innerHTML=tel(gs[igs].innerHTML.replace(' fill=' + postgs[1].substring(0,1) + postgs[1].substring(1).split(postgs[1].substring(0,1))[0], ' onclick=gck(' + ('~' + gsuff + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" fill=' + postgs[1].substring(0,1) + 'url(#attachedImage' + gsuff + ')').replace(froma[0],toa[0]).replace(froma[1],toa[1]).replace(froma[2],toa[2]).replace(froma[3],toa[3]).replace(froma[4],toa[4]).replace(froma[5],toa[5]).replace(froma[6],toa[6]).replace(froma[7],toa[7]).replace(froma[8],toa[8])) + linew; } linew=''; if ((gs[igs].innerHTML.replace('<line ','*<line ') + '*').replace('</text>','</circle>').replace('-stroke','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1 && gs[igs].innerHTML.indexOf(' onclick=') != -1 && gs[igs].innerHTML.replace('<text x=','<text fill= ').indexOf('fill=') != -1) { lastcx=eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]); lastcy=eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]); lastlx=gdis[iigs].split('[')[1].split('|')[0]; lastly=gdis[iigs].split('[')[1].split('|')[1]; lastpl=gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' '); iigs++; } } } \n";
}
} else if (isset($_POST['areplaces'])) {
if (strpos(strtolower(urldecode($_POST['areplaces'])), "http") !== false || isset($_POST['onclick'])) {
$upa=wlook(urldecode($_POST['areplaces']));
$gsis=explode(",",$upa);
$igsis=0;
if (strpos(strtolower($gsis[0]), "http") === false) {
for ($jgsis=1; $jgsis<sizeof($gsis); $jgsis++) {
if ($igsis == 0 && strpos(strtolower($gsis[$jgsis]), "http") !== false) {
$igsis=$jgsis;
}
}
}
echo "\n var froma=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], toa=['<circle ','></circle>',' cx=',' cy=',' r=',' fill=',' stroke=',' stroke-width=',' opacity='], igsis=0, localgdis=(\"" . $GETdata . "\").split(']'), localgsis=(\"" . $upa . "\").split(','), peninfo=(\"" . $upa . "\").split(','); \n gsis=(\"" . $upa . "\").split(','); \n gdis=(\"" . $GETdata . "\").split(']'); \n";
if (isset($_POST['peninfo'])) {
echo "\n peninfo=(\"" . $_POST['peninfo'] . "\").replace(/\,\ /g,',+').split(','); for (var pjgs=0; pjgs<peninfo.length; pjgs++) { if ((peninfo[pjgs] + ' ').substring(0,1) == '+') { peninfo[pjgs]='+' + peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)].replace('+',''); } else { peninfo[pjgs]=peninfo[pjgs].split('|')[eval(-1 + peninfo[pjgs].split('|').length)]; } if (peninfo[pjgs] != '' && gsis.length > pjgs) { if (gsis[pjgs] == '') { gsis[pjgs]='//www.wikipedia.org'; } } } \n";
}
echo "\n alldefs=document.getElementsByTagName('defs'); if (alldefs.length > 0) { if (('' + alldefs[0].id) != '') { defsid=styleit('' + alldefs[0].id); } } if (document.getElementById(defsid)) { document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"" . noemoji($gsis[$igsis]) . "\"><image xlink:href = \"" . noemoji($gsis[$igsis]) . "\" href = \"" . noemoji($gsis[$igsis]) . "\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; \n";
echo "\n if (document.getElementById(defsid) && gsis.length >= 1) { for (var jgs=0; jgs<gsis.length; jgs++) { if (gsis[jgs] != '') { document.getElementById(defsid).innerHTML+='<pattern id = \"attachedImage' + jgs + '\" height = \"100%\" width = \"100%\" patternContentUnits = \"objectBoundingBox\" title=\"' + noemoji(gsis[jgs]) + '\"><image xlink:href = \"' + noemoji(gsis[jgs]) + '\" href = \"' + noemoji(gsis[jgs]) + '\" preserveAspectRatio = \"none\" width = \"1\" height = \"1\"/></pattern>'; } } } \n";
echo "\n var lastpl='', lastcx=-1, lastcy=-1, lastlx=-1, lastly=-1, gsuff='', linew='', postgs=[], gs=document.getElementsByTagName('g'), iigs=0, malt=''; for (var igs=0; igs<gs.length; igs++) { if (peninfo.length > iigs) { malt=peninfo[iigs].replace('+','').trim(); } else { malt=''; } if (gsis.length > iigs) { if (gsis[iigs] != '') { if (fooc(gsis[iigs]).trim() == '') { gsuff='x'; } else { toa[1]=emojimaybe(gsis[iigs],malt,'></circle>',iigs); if (toa[1] == '></circle>') { toa[0]='<circle ' + refooc(lastfooc); toa[2]=' cx='; toa[3]=' cy='; toa[4]=' r='; toa[5]=' fill='; toa[6]=' stroke='; toa[7]=' stroke-width='; toa[8]=' opacity='; } else { toa[1]=toa[1].replace('>',' onclick=gck(' + ('~' + iigs + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\">'); toa[0]='<text '; toa[2]=' x='; toa[3]=' y='; toa[4]=' data-r='; toa[5]=' data-fill='; toa[6]=' data-stroke='; toa[7]=' data-stroke-width='; toa[8]=' data-opacity='; if (gsis[iigs].indexOf(' ') != -1) { gsis[iigs]=gsis[iigs].replace(gsis[iigs].split(' ')[0] + ' ',''); } } gsuff='' + iigs; } } else { gsuff=''; } } else { gsuff=''; } if (gsuff != 'x' && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.replace('<text ','<circle ').indexOf('<circle') != -1 && (gs[igs].innerHTML + '*').replace('</text>*','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('fill=') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1) { if (peninfo.length > iigs) { if (peninfo[iigs].indexOf('+') != -1) { linew='<line title=\"' + gdis[eval(-1 + iigs)].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + ' to ' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" onmouseover=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" onclick=\"tripd(this,' + lastlx + ',' + lastly + ',' + gdis[iigs].split('[')[1].split('|')[0] + ',' + gdis[iigs].split('[')[1].split('|')[1] + ',true);\" x1=\"' + lastcx + '\" y1=\"' + lastcy + '\" x2=\"' + eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]) + '\" y2=\"' + eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]) + '\" style=\"stroke:rgb(255,0,0);stroke-width:2\" />'; } } postgs=gs[igs].innerHTML.split(' fill='); gs[igs].innerHTML=tel(gs[igs].innerHTML.replace(' fill=' + postgs[1].substring(0,1) + postgs[1].substring(1).split(postgs[1].substring(0,1))[0], ' onclick=gck(' + ('~' + gsuff + '~').replace('~~','-1').replace('~','').replace('~','') + ',this); fill=\"#008000\" data-svggeo=\"' + ('' + gdis[iigs].split('~')[0].replace('[','').trim().replace(/^\|/g,'').replace(/\|$/g,'')).substring(0).trim() + '\" title=\"' + gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' ') + '\" fill=' + postgs[1].substring(0,1) + 'url(#attachedImage' + gsuff + ')').replace(froma[0],toa[0]).replace(froma[1],toa[1]).replace(froma[2],toa[2]).replace(froma[3],toa[3]).replace(froma[4],toa[4]).replace(froma[5],toa[5]).replace(froma[6],toa[6]).replace(froma[7],toa[7]).replace(froma[8],toa[8])) + linew; } linew=''; if ((gs[igs].innerHTML.replace('<line ','*<line ') + '*').replace('</text>','</circle>').replace('-stroke','</circle>*').indexOf('</circle>*') != -1 && gs[igs].innerHTML.indexOf('font-family=') == -1 && gs[igs].innerHTML.indexOf(' onclick=') != -1 && gs[igs].innerHTML.replace('<text x=','<text fill= ').indexOf('fill=') != -1) { lastcx=eval(gs[igs].innerHTML.split('x=\"')[1].split('\"')[0]); lastcy=eval(gs[igs].innerHTML.split('y=\"')[1].split('\"')[0]); lastlx=gdis[iigs].split('[')[1].split('|')[0]; lastly=gdis[iigs].split('[')[1].split('|')[1]; lastpl=gdis[iigs].split('~')[1].replace(/\%20/g,' ').replace(/\_/g,' '); iigs++; } } } \n";
}
}

?>

… in our the changed geo_chart.php Geo Chart interfacer.


Previous relevant Google Chart Image Chart Map Chart Mainstream Interfacing Tutorial is shown below.

Google Chart Image Chart Map Chart Mainstream Interfacing Tutorial

Google Chart Image Chart Map Chart Mainstream Interfacing Tutorial

Yesterday’s Google Chart Image Chart Map Chart Mainstream Primer Tutorial mentioned a three point plan …

  1. Help itself … map.php … phase 1
  2. Redirect to Image Chart Map Chart … map.php and/or geo_chart.php … just after first prompt … phase 2
  3. Caller form method=POST map.php action interventions at onsubmit event … non map.php … phase 3

… we find ourselves still dealing with the “first point” above regarding, where it rubs up against the first half of the second point (if all that makes sense), today.

This means we might now, with map.php user interfacing, present a Google Charts Image Chart Map Chart in various guises …

  • &iso=US-NJ|CA-AB suffix to the map title showing a non-legended cropped world view of that | delimited region codes list
  • &isoall=AU suffix to the map title showing a legended (initially) country view of country’s regions … toggleable to …
  • a world view of that same user setting (via click or right click)

… after that first prompt, if the user entered settings to indicate that desire.

We’ve moved on to a “four point” code section of relevance paradigm today, with …


var xiso='iso';
if (document.URL.indexOf('&iso') != -1 && document.URL.indexOf('&iso=') == -1) {
xiso='iso' + document.URL.indexOf('&iso')[1].split('=')[0];
}
var isusdams='<?php echo (isset($_POST['iso']) ? trim(str_replace('+',' ',urldecode($_POST['iso']))) : (isset($_GET['iso']) ? trim(str_replace('+',' ',urldecode($_GET['iso']))) : '')); ?>';
if (xiso != 'iso' && isusdams == '') { isusdams=decodeURIComponent(document.URL.split('&' + xiso + '=')[1].split('&')[0]); }
//alert('xiso=' + xiso + ' and isusdams=' + isusdams);
if (window.top || isusdams.trim() != '') {
if (isusdams.trim() != '') {
if (isusdams.indexOf(';') == -1) { isusdams+=';'; }
} else if (top.document.URL.indexOf('/dams_usa.htm') != -1) {
isusdams='US;';
} else if (top.document.URL.indexOf('/australian_') != -1) {
isusdams='AU;';
} else if (top.document.URL.indexOf('/ireland_') != -1) {
isusdams='IE;';
} else if (top.document.URL.indexOf('/new_zealand_') != -1) {
isusdams='NZ;';
} else if (document.URL.indexOf('iso=') != -1) {
isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (parent.document.URL.indexOf('/tz_places.php?iso=') != -1) {
isusdams=parent.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (top.document.URL.indexOf('/tz_places.php?iso=') != -1) {
isusdams=top.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';
}
} else if (document.URL.indexOf('iso=') != -1) {
isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (document.URL.indexOf('&iso') != -1) {
isusdams=document.URL.split('&iso')[1].split('=')[1].split('&')[0].split('#')[0] + ';';
}
if (isusdams != '') { // amapidgeo
if (document.getElementById('amapidgeo')) {
document.getElementById('amapidgeo').click();
} else {
setTimeout(latergeoclick, 5000);
}
}

… and …

<?php echo ”

function gogeo(usug) {
if (documentURL.indexOf('data=') != -1) {
if ((documentURL + '~').indexOf('&data=~') != -1 && ('' + pardata).replace('undefined','') != '') {
documentURL=documentURL + pardata;
}
var isdfrom='youllneverfindthis';
var isdto='youllneverfindthis';
var isfrom='youllneverfindthis';
var isto='youllneverfindthis';
var xiso='iso';
if (document.URL.indexOf('&iso') != -1 && document.URL.indexOf('&iso=') == -1) {
xiso='iso' + document.URL.indexOf('&iso')[1].split('=')[0];
isdfrom='&iso' + document.URL.split('&iso')[1].split('=')[0] + '=';
isdto='&iso=';
}
var isusdams='" . (isset($_POST['iso']) ? trim(str_replace('+',' ',urldecode($_POST['iso']))) : (isset($_GET['iso']) ? trim(str_replace('+',' ',urldecode($_GET['iso']))) : '')) . "';
if (xiso != 'iso' && isusdams == '') { isusdams=decodeURIComponent(document.URL.split('&' + xiso + '=')[1].split('&')[0]); }
if (window.top || isusdams.trim() != '') {
if (isusdams.trim() != '') {
if (isusdams.indexOf(';') == -1) { isusdams+=';'; }
if (eval('' + isusdams.length) > 3) { isfrom=isusdams.substring(0,3); isto=isusdams.substring(0,2) + ';'; }
} else if (top.document.URL.indexOf('/dams_usa.htm') != -1) {
isusdams='US;';
} else if (top.document.URL.indexOf('/australian_') != -1) {
isusdams='AU;';
} else if (top.document.URL.indexOf('/ireland_') != -1) {
isusdams='IE;';
} else if (top.document.URL.indexOf('/new_zealand_') != -1) {
isusdams='NZ;';
} else if (document.URL.indexOf('iso=') != -1) {
isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (parent.document.URL.indexOf('/tz_places.php?iso=') != -1) {
isusdams=parent.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (top.document.URL.indexOf('/tz_places.php?iso=') != -1) {
isusdams=top.document.URL.split('/tz_places.php?iso=')[1].split('&')[0].split('#')[0] + ';';
}
} else if (document.URL.indexOf('iso=') != -1) {
isusdams=document.URL.split('iso=')[1].split('&')[0].split('#')[0] + ';';
} else if (document.URL.indexOf('&iso') != -1) {
isusdams=document.URL.split('&iso')[1].split('=')[1].split('&')[0].split('#')[0] + ';';
isdfrom='&iso' + document.URL.split('&iso')[1].split('=')[0] + '=';
isdto='&iso=';
}
if (isusdams != '') {
locationhref=toolong((documentURL.replace(isdfrom,isdto) + '%20,%20[-90.0|0.0|~%20~,999999999]').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=y&').replace('title=','title=' + (isusdams + ' ').substring(0,3).trim().replace(isfrom,isto)).replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]'));
} else {
locationhref=toolong((documentURL.replace(isdfrom,isdto) + '%20,%20[-90.0|0.0|~%20~,999999999]').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=y&').replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]'));
}
//locationhref=toolong((documentURL + ',[-90.0,0.0,~%20~,999999999]').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=' + agy + '&').replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]'));
//locationhref=toolong((documentURL + '').replace('/Map', '/GeoChart').replace('map.php', 'geo_chart.php').replace('?','?width=556&height=347&country=Places&popularity=&aregeographicals=' + agy + '&').replace(/\=\,/g,'=').replace(/\,\~/g,'|~').replace(/0\,/g,'0|').replace(/1\,/g,'1|').replace(/2\,/g,'2|').replace(/3\,/g,'3|').replace(/4\,/g,'4|').replace(/5\,/g,'5|').replace(/6\,/g,'6|').replace(/7\,/g,'7|').replace(/8\,/g,'8|').replace(/9\,/g,'9|').replace('%27|%20','%27,%20').replace('%27|','%27,').replace(/\~\]/g,'~,1]'));
} else {
locationhref=usug;
}
if (locationhref != '#') { location.href=locationhref; } locationhref='';
}

“; ?>

… and within the map.php interactivity logic

<?php echo ”

function yourprompt(blb, defa) {
if (('' + location.hash).indexOf('title=') != -1 && document.URL.indexOf('&') == -1) {
return decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]);
} else if (document.URL.indexOf('title=') != -1 && document.URL.indexOf('&') == -1) {
return decodeURIComponent(document.URL.split('title=')[1].split('=')[1].split('&')[0]);
}
return ourprompt(blb, defa);
}


// used at ...
echo ' var title = yourprompt("Enter Map Title (background image URL or image data URI ; separated ( followed by ; ) before title are options, and suffix by &iso=BR for BR as example of ISO country code for Brazil or &isoall=AU for regions of AU as country code of Australia or &iso=US-NJ|CA-AB example of regions of interest and suffix by &lines=y for overlay clickable link lines and/or suffix by &onclick=y for all onclick functionalities such as &brgplace=[1] for Bearing Distance table and perhaps &brgmode=trip for that table in trip order). Email Attachment Title suffixes are &emailto=[emailTo] &emailsubject=[EmailSubject] ... ' . $promptsuffix . '", "' . str_replace("+"," ",urldecode($GETtitle)). '"); ' . "\n";

“; ?>

… and …

<?php echo ”

function dllb() {
var qpw=0;
var justiso=true;
if (('' + location.hash).indexOf('title=') != -1 && document.URL.indexOf('&') == -1) {
thistwo=8;
regionstuff=decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]);
if (regionstuff.indexOf('&iso') != -1) {
if (regionstuff.split('&iso')[1].substring(0,1) != '=') { justiso=false; }
regionstuff=decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]).split('&iso')[1].split('=')[1].split('&')[0];
}
if (!justiso) {
thistwo=20;
document.getElementById('idivis').style.width='700px';
document.getElementById('idivis').style.height='500px';
document.getElementById('idivis').style.backgroundColor='yellow';
//document.getElementById('idivis').style.backgroundRepeat='no-repeat';
//document.getElementById('idivis').style.backgroundSize='contain';
//document.getElementById('idivis').style.background='URL("//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '")';
document.getElementById('idivis').innerHTML='<img oncontextmenu="document.getElementById(' + "'idivis'" + ').click();" onclick="document.getElementById(' + "'idivis'" + ').click();" title="Click or right click near border to toggle between country view and world view" title="" id=ifdivis style="width:600px;height:400px;" src="//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '"></img>';
document.getElementById('idivis').title='Click or right click near border to toggle between country view and world view';
document.getElementById('idivis').onclick=function(evt){ thistwo+=50; if (document.getElementById('ifdivis').src.indexOf('&') == -1) { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0] + '&world=World'; evt.target.style.backgroundColor='lightblue'; } else { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0]; evt.target.style.backgroundColor='yellow'; } };
document.getElementById('idivis').oncontextmenu=function(evt){ thistwo+=50; if (document.getElementById('ifdivis').src.indexOf('&') == -1) { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0] + '&world=World'; evt.target.style.backgroundColor='lightblue'; } else { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0]; evt.target.style.backgroundColor='yellow'; } };
//window.open('//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2), '_blank', 'top=20,left=20,width=900,height=700');
} else {
document.getElementById('idivis').style.width='600px';
document.getElementById('idivis').style.height='400px';
document.getElementById('idivis').innerHTML='<iframe style="width:600px;height:400px;" src="//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=' + regionstuff + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274"></iframe>';
}
} else if (document.URL.indexOf('title=') != -1 && document.URL.indexOf('&') == -1) {
thistwo=8;
regionstuff=decodeURIComponent(document.URL.split('title=')[1].split('=')[1].split('&')[0]);
if (regionstuff.indexOf('&iso') != -1) {
if (regionstuff.split('&iso')[1].substring(0,1) != '=') { justiso=false; }
regionstuff=decodeURIComponent(('' + location.hash).split('title=')[1].split('&')[0]).split('&iso')[1].split('=')[1].split('&')[0];
}
if (!justiso) {
thistwo=20;
document.getElementById('idivis').style.width='700px';
document.getElementById('idivis').style.height='500px';
document.getElementById('idivis').style.backgroundColor='yellow';
//document.getElementById('idivis').style.backgroundRepeat='no-repeat';
//document.getElementById('idivis').style.backgroundSize='contain';
//document.getElementById('idivis').style.background='URL("//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '")';
//document.getElementById('idivis').innerHTML='<iframe title="Click or right click near border to toggle between country view and world view" id=ifdivis style="width:700px;height:500px;" src="//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '"></iframe>';
document.getElementById('idivis').innerHTML='<img oncontextmenu="document.getElementById(' + "'idivis'" + ').click();" onclick="document.getElementById(' + "'idivis'" + ').click();" title="Click or right click near border to toggle between country view and world view" title="" id=ifdivis style="width:600px;height:400px;" src="//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2) + '"></img>';
document.getElementById('idivis').title='Click or right click near border to toggle between country view and world view';
document.getElementById('idivis').onclick=function(evt){ thistwo+=50; if (document.getElementById('ifdivis').src.indexOf('&') == -1) { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0] + '&world=World'; evt.target.style.backgroundColor='lightblue'; } else { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0]; evt.target.style.backgroundColor='yellow'; } };
document.getElementById('idivis').oncontextmenu=function(evt){ thistwo+=50; if (document.getElementById('ifdivis').src.indexOf('&') == -1) { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0] + '&world=World'; evt.target.style.backgroundColor='lightblue'; } else { document.getElementById('ifdivis').src=document.getElementById('ifdivis').src.split('&')[0]; evt.target.style.backgroundColor='yellow'; } };
//window.open('//www.rjmprogramming.com.au/PHP/GeoChart/image_chart.php?ccode=' + regionstuff.substring(0,2), '_blank', 'top=20,left=20,width=900,height=700');
} else {
document.getElementById('idivis').style.width='600px';
document.getElementById('idivis').style.height='400px';
document.getElementById('idivis').innerHTML='<iframe style="width:600px;height:400px;" src="//www.rjmprogramming.com.au/ITblog/550/350/?cht=map&chld=' + regionstuff + '&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274"></iframe>';
}
}
//
// rest of usual dllb "onload" event logic follows ...
}

“; ?>

… in the changed map.php.php PHP code for our inhouse Google Chart Map Chart interfacer.

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.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment