<html>
<head>
<style>
#geoplXace::before {
content: 'Map is in background ...';
}

html { height: 100%; overflow:auto; }

body { height: 100%; }
</style>
<script type=text/javascript>
var theurl='/PHP/GeoChart/geo_chart.php?title=My%20World%20Survey&onclick=y&aregeographicals=yes&width=800.001&height=700.00&country=Places&popularity=Countdown&retsvg=y&data=%20[-89.9|-89.9|~Down%20South~,9]%20,%20[19.4326|-99.1332|~Mexico%20City~,2]';
var newurl='';
var becomesbigger='105';
var becomessmaller='95';
var becomeslefter='0';
var becomesrighter='0';
var becomestoper='0';
var becomesbottomer='0';

function theleft(lmove) {
lmove=('' + lmove).replace('%','');
if (eval('' + lmove) >= 0 && eval('' + becomestoper) >= 0) {
document.body.style.marginLeft=('-' + lmove + 'px').replace('--','');
document.body.style.marginTop=('-' + becomestoper + 'px').replace('--','');
//window.scrollTo(eval('' + lmove), eval('' + becomestoper));
//document.title="window.scrollTo(" + lmove + "," + becomestoper + ");";
} else if (eval('' + lmove) < 0) {
document.body.style.marginLeft='' + lmove + 'px';
document.body.style.marginTop=('-' + becomestoper + 'px').replace('--',''); //'0px';
//window.scrollTo(0, eval('' + becomestoper));
//document.title="window.scrollTo(0," + becomestoper + "); #" + lmove + ",0";
} else {
document.body.style.marginLeft=('-' + lmove + 'px').replace('--',''); //'0px';
document.body.style.marginTop=('-' + becomestoper + 'px').replace('--','');
//window.scrollTo(eval('' + lmove), 0);
//document.title="window.scrollTo(" + lmove + ",0); #0," + becomestoper + "";
}
return lmove + '';
}

function theright(lmove) {
lmove=('' + lmove).replace('%','');
if (eval('' + lmove) >= 0 && eval('' + becomestoper) >= 0) {
document.body.style.marginLeft=('-' + lmove + 'px').replace('--','');
document.body.style.marginTop=('-' + becomestoper + 'px').replace('--','');
//window.scrollTo(eval('' + lmove), eval('' + becomestoper));
//document.title="window.scrollTo(" + lmove + "," + becomestoper + ");";
} else if (eval('' + lmove) < 0) {
document.body.style.marginLeft='' + lmove + 'px';
document.body.style.marginTop=('-' + becomestoper + 'px').replace('--',''); //'0px';
//window.scrollTo(0, eval('' + becomestoper));
//document.title="window.scrollTo(0," + becomestoper + "); #" + lmove + ",0";
} else {
document.body.style.marginLeft=('-' + lmove + 'px').replace('--',''); //'0px';
document.body.style.marginTop=('-' + becomestoper + 'px').replace('--','');
//window.scrollTo(eval('' + lmove), 0);
//document.title="window.scrollTo(" + lmove + ",0); #0," + becomestoper + "";
}
return lmove + '';
}

function thetop(lmove) {
lmove=('' + lmove).replace('%','');
if (eval('' + lmove) >= 0 && eval('' + becomeslefter) >= 0) {
document.body.style.marginLeft=('-' + becomeslefter + 'px').replace('--','');
document.body.style.marginTop=('-' + lmove + 'px').replace('--','');
//window.scrollTo(eval('' + becomeslefter), eval('' + lmove));
//document.title="window.scrollTo(" + becomeslefter + "," + lmove + ");";
} else if (eval('' + lmove) < 0) {
document.body.style.marginLeft=('-' + becomeslefter + 'px').replace('--','');
document.body.style.marginTop='' + lmove + 'px';
//window.scrollTo(eval('' + becomeslefter), 0);
//document.title="window.scrollTo(" + becomeslefter + ",0); #0," + lmove;
} else {
document.body.style.marginLeft=('-' + becomeslefter + 'px').replace('--','');
document.body.style.marginTop=('-' + lmove + 'px').replace('--','');
//window.scrollTo(0, eval('' + lmove));
//document.title="window.scrollTo(0," + lmove + "); #" + lmove + ",0";
}
return lmove + '';
}

function thebottom(lmove) {
lmove=('' + lmove).replace('%','');
if (eval('' + lmove) >= 0 && eval('' + becomeslefter) >= 0) {
document.body.style.marginLeft=('-' + becomeslefter + 'px').replace('--','');
document.body.style.marginTop=('-' + lmove + 'px').replace('--','');
//window.scrollTo(eval('' + becomeslefter), eval('' + lmove));
//document.title="window.scrollTo(" + becomeslefter + "," + lmove + ");";
} else if (eval('' + lmove) < 0) {
document.body.style.marginLeft=('-' + becomeslefter + 'px').replace('--','');
document.body.style.marginTop='' + lmove + 'px';
//window.scrollTo(eval('' + becomeslefter), 0);
//document.title="window.scrollTo(" + becomeslefter + ",0); #0," + lmove;
} else {
document.body.style.marginLeft=('-' + becomeslefter + 'px').replace('--','');
document.body.style.marginTop=('-' + lmove + 'px').replace('--','');
//window.scrollTo(0, eval('' + lmove));
//document.title="window.scrollTo(0," + lmove + "); #" + lmove + ",0";
}
return lmove + '';
}

function rearrange() {
newurl=theurl;
if (document.getElementById('iwidth').value.trim() != '' && document.getElementById('iheight').value.trim() != '') {
document.getElementById('geoplace').style.width='' + document.getElementById('iwidth').value + 'px';
document.getElementById('geoplace').style.height='' + document.getElementById('iheight').value + 'px';
newurl=newurl.replace('&width=800.001&height=700.00&', '&width=' + document.getElementById('iwidth').value + '&height=' + document.getElementById('iheight').value + '&');
}
if (document.getElementById('ilat').value.trim() != '' && document.getElementById('ilong').value.trim() != '') {
newurl=newurl.replace('[19.4326|-99.1332|', '[' + document.getElementById('ilat').value + '|' + document.getElementById('ilong').value + '|');
}
if (document.getElementById('iplace').value.trim() != '') {
newurl=newurl.replace('~Mexico%20City~', '~' + document.getElementById('iplace').value.replace(/\ /g,'%20').replace(/\]\,/g,'] ,').replace(/\,\[/g,', [') + '~');
}
if (newurl != theurl) {
document.getElementById('myif').src=newurl;
if (1 == 2) {
var recto=document.getElementById('myif').getBoundingClientRect();
document.getElementById('myif').style.position='absolute';
document.getElementById('myif').style.top='' + recto.top + 'px';
document.getElementById('myif').style.left='' + recto.top + 'px';
document.getElementById('myif').style.width='' + recto.width + 'px';
document.getElementById('myif').style.height='' + recto.height + 'px';
document.getElementById('myif').style.display='block';
}
location.href=document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19878675) + '#url=' + encodeURIComponent(newurl);
}
}

function lhit() {
var therect=null, eles=['zdown','zup','zright','zleft','zout','zin','butin'];
document.body.style.width='' + (document.getElementById('iwidth').value > screen.width ? screen.width : document.getElementById('iwidth').value) + 'px';
document.body.style.height='' + (document.getElementById('iheight').value > screen.height ? screen.height : document.getElementById('iheight').value) + 'px';
document.body.WebkitOverflowScrolling='touch';
for (var ij=0; ij<eles.length; ij++) {
therect=document.getElementById(eles[ij]).getBoundingClientRect();
document.getElementById(eles[ij]).style.position='absolute';
document.getElementById(eles[ij]).style.left='' + therect.left + 'px';
document.getElementById(eles[ij]).style.top='' + therect.top + 'px';
document.getElementById(eles[ij]).style.width='' + therect.width + 'px';
document.getElementById(eles[ij]).style.height='' + therect.height + 'px';
}
if (('' + location.hash).indexOf('url=') != -1) {
document.getElementById('myif').style.position='sticky';
document.getElementById('geoplace').style.border='1px solid transparent';
document.getElementById('tdright').style.opacity='0.7';
document.getElementById('butin').style.opacity='0.7';
document.getElementById('myif').src=decodeURIComponent(('' + location.hash).split('url=')[1]);
}
}
</script>
</head>
<body onload='lhit();' style='overflow:-x:scroll;overflow:-y:scroll;'>
<input type=hidden id=georeceiver value=geoplace></input>


<iframe id=myif style=display:none;overflow:scroll; src='/PHP/GeoChart/geo_chart.php?title=My%20World%20Survey&onclick=y&aregeographicals=yes&width=800.001&height=700.00&country=Places&popularity=Countdown&retsvg=y&data=%20[-89.9|-89.9|~Down%20South~,9]%20,%20[19.4326|-99.1332|~Mexico%20City~,2]'></iframe>


<table>
<tr><td>
<div style='margin:0 0 0 0;padding:0 0 0 0;opacity:1.0;align-items:top;display:flex;width:800px;height:700px;backXground-repeat:no-repeat;border:1px dotted pink;' id=geoplace></div>
</td><td id=tdright style='padding-left:20px;vertical-align:top;'>
<h1><a target=_blank href='https://developers.google.com/chart/interactive/docs/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts</a> <a target=_blank title='Google Chart Geo Chart' href='https://developers.google.com/chart/interactive/docs/gallery/geochart'>Geo Chart</a> Fitting In</h1>
<h3>RJM Programming - June, 2024</h3>
<input onblur="if (this.value.length > 0 && document.getElementById('iheight').value == '') { document.getElementById('iheight').value='700'; }" id=iwidth type=text placeholder='Width [800]' value=></input><br>
<input onblur="if (this.value.length > 0 && document.getElementById('iwidth').value == '') { document.getElementById('iwidth').value='800'; }" id=iheight type=text placeholder='Height [700]' value=></input><br>
<input onblur="if (this.value.length > 0 && document.getElementById('ilong').value == '') { document.getElementById('ilong').value='-99.1332'; }" id=ilat type=text placeholder='Latitude [19.4326]' value=></input><br>
<input onblur="if (this.value.length > 0 && document.getElementById('ilat').value == '') { document.getElementById('ilat').value='19.4326'; }" id=ilong type=text placeholder='Longitude [-99.1332]' value=></input><br>
<input id=iplace type=text placeholder='Place [Mexico City]' title='To add a place to Mexico city you could enter, for example ... Mexico City~,2] , [51.5|0|~London' value=></input><br><br>
<input id=butin onclick=rearrange(); type=button value=Apply style='background-color:yellow;'></input>
<button onclick="document.body.style.zoom='' + becomesbigger + '%'; becomesbigger='' + eval(5 + eval('' + becomesbigger)); becomessmaller=becomesbigger; becomessmaller='' + eval(-5 + eval('' + becomessmaller));" title='Zoom In' id=zin style=background-color:cyan;>➕</button>
<button style=background-color:magenta; onclick="document.body.style.zoom='' + becomessmaller + '%'; becomessmaller='' + eval(-5 + eval('' + becomessmaller)); becomesbigger=becomessmaller; becomesbigger='' + eval(5 + eval('' + becomesbigger));" title='Zoom Out' id=zout>➖</button>
<button style=background-color:lightblue; onclick="theleft('' + becomeslefter + '%'); becomeslefter='' + eval(-5 + eval('' + becomeslefter)); becomesrighter=becomeslefter; becomesrighter='' + eval(5 + eval('' + becomesrighter));" title='Move left' id=zleft>⬅</button>
<button style=background-color:lightblue; onclick="theright('' + becomesrighter + '%'); becomesrighter='' + eval(5 + eval('' + becomesrighter)); becomeslefter=becomesrighter; becomeslefter='' + eval(-5 + eval('' + becomeslefter));" title='Move right' id=zright>➡</button>
<button style=background-color:lightblue; onclick="thetop('' + becomestoper + '%'); becomestoper='' + eval(-5 + eval('' + becomestoper)); becomesbottomer=becomestoper; becomesbottomer='' + eval(5 + eval('' + becomesbottomer));" title='Move up' id=zup>⬆</button>
<button style=background-color:lightblue; onclick="thebottom('' + becomesbottomer + '%'); becomesbottomer='' + eval(5 + eval('' + becomesbottomer)); becomestoper=becomesbottomer; becomestoper='' + eval(-5 + eval('' + becomestoper));" title='Move down' id=zdown>⬇</button>
</td></tr>
</table>
</body>
</html>