<html>
<head>
<style>
#geoplXace::before {
content: 'Map is in background ...';
}
</style>
<script type=text/javascript>
var theurl='//www.rjmprogramming.com.au/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='';
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;
}
}
</script>
</head>
<body>
<input type=hidden id=georeceiver value=geoplace></input>
<!--iframe style=display:none; src='//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=My%20World%20Survey&onclick=y&aregeographicals=yes&width=601.001&height=601.029&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-->
<iframe id=myif style=display:none; src='//www.rjmprogramming.com.au/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>
<!--iframe style=display:none; src='//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=My%20World%20Survey&onclick=y&aregeographicals=yes&width=2201.001&height=2001.029&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 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 onclick=rearrange(); type=button value=Apply style='background-color:yellow;'></input>
</td></tr>
</table>
</body>
</html>