{"id":31040,"date":"2017-06-29T03:01:03","date_gmt":"2017-06-28T17:01:03","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=31040"},"modified":"2017-06-28T20:04:34","modified_gmt":"2017-06-28T10:04:34","slug":"other-side-of-the-world-map-chart-styling-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-map-chart-styling-tutorial\/","title":{"rendered":"Other Side of the World Map Chart Styling Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm?place=Lisbon,Portugal\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Other Side of the World Map Chart Styling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world_map_chart_styling.jpg\" title=\"Other Side of the World Map Chart Styling Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Other Side of the World Map Chart Styling Tutorial<\/p><\/div>\n<p>You&#8217;ll have noticed with our &#8220;Other Side of the World&#8221; web application of recent days &#8230; or maybe not, if you were dozing off &#8230; how much use we make of the <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 Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> functionality.  Can&#8217;t do without it &#8230; thanks, Google.<\/p>\n<p>Now if you go to read about the Google Chart Map Chart you may end up at this very <a target=_blank title='Google Chart Map Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map'>interesting webpage<\/a>, and even if it was some time back you were last there, it is always worth checking back in every now and then for information on changes, or to reread this functionality rich software suite documentation.  We only touch the &#8220;tip of the iceberg&#8221; with the way we interface to Google Charts, but today we want to take some small steps to improving on that.  Even taking small steps, when dealing with a third-party product so rich in possibilities, we try to be generic and be able to offer more to those adventurous users out there, both laptop and mobile (at least iPad only at this stage) users.<\/p>\n<p>So we have set up a way for iPad users using the mobile app to be able to save their comma prefixed &#8230;<\/p>\n<ul>\n<li>localized Google Chart Map Chart styling ideas from <a target=_blank title='Google Chart Map Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map'>here<\/a> when they interactively enter Map Chart criteria &#8230; and for &#8230;<\/li>\n<li>all users of our &#8220;Other Side of the World&#8221; web application get an additional non-default Google Chart Map Chart &#8220;Styled Map&#8221; tab (in addition to their default &#8220;Map&#8221; and &#8220;Satellite&#8221; tabs), and some non-default Google Chart Map Chart icons &#8230; thanks to <a target=_blank title='Icons Land ... thanks for map icons' href='HTTP:\/\/www.icons-land.com\/'>Icons-Land<\/a> here<\/li>\n<\/ul>\n<p>The new icons for that latter scenario also feature a different icon showing after a &#8220;pin&#8221; icon is selected (ie. the Google Chart click\/touch &#8220;select&#8221; event is called into play).<\/p>\n<p>The code for these Map Chart changes remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html----GETME' title='other_side_of_the_world.htm'>other_side_of_the_world.htm<\/a> (changed in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html----GETME' title='other_side_of_the_world.html-GETME'>this minor way<\/a> for our HTML supervisor of Google Chart Map Chart purposes today) if you like, or want to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm' title='other_side_of_the_world.htm'>try out<\/a> (or try out for a specific (argument) location, such as <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm?place=Beijing,China' title='other_side_of_the_world.htm'>Beijing try out<\/a>), again.  The major changes related to  in the Google Chart Map Chart web application PHP you could call <a target=_blank title='map.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php-----------------GETME'>map.php<\/a>, and which changed in <a target=_blank title='map.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php-----------------GETME'>this way<\/a>, starting down our long path towards more Map Chart styling possibilities.<\/p>\n<hr>\n<p id='osotwit'>Previous relevant <a target=_blank title='Other Side of the World Iframe Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-iframe-tutorial\/'>Other Side of the World Iframe Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm?place=Cairo\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Other Side of the World Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world_iframe_more.jpg\" title=\"Other Side of the World Iframe Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Other Side of the World Iframe Tutorial<\/p><\/div>\n<p>Our &#8220;Other Side of the World&#8221; web application we&#8217;ve been developing lately has made extensive use of the HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element, mainly as a &#8220;reader&#8221; of data in that <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings'>Client Pre-emptive Iframe<\/a> technique way.  But the HTML iframe element is probably better known for its data integration and display talents, and it is these that we call upon today, to (software) integrate two other existing sources of data so that, display-wise we have four table (td) cells in play now those being the original &#8230;<\/p>\n<ul>\n<li>top left cell where the user interacts to show latitude and longitudes and placenames of interest<\/li>\n<li>top right cell showing these &#8220;latitude and longitudes and placenames of interest&#8221; paired with their &#8220;Other Side of the World&#8221; counterparts within a <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 Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> (software) integration &#8230; and, as of today we add into the equation &#8230;<\/li>\n<li>bottom left cell where depending on whether we&#8217;ve derived our &#8220;latitude and longitudes and placenames of interest&#8221; from &#8230;\n<ol>\n<li>the <a target=_blank title='Weather Underground' href='http:\/\/www.wunderground.com'>Weather Underground<\/a> HTML select (dropdown) element results in an HTML iframe element hosting a <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/weather-api-via-iframe-jquery-ajax-autocomplete-tutorial\/' title='Weather API via Iframe jQuery Ajax Autocomplete Tutorial'>Weather API via Iframe jQuery Ajax Autocomplete Tutorial<\/a>&#8216;s TimeZone Places dataset &#8230; or &#8230;<\/li>\n<li>the <a target=_blank href='http:\/\/stutzfamily.com\/mrstutz\/LatLong\/latlonglist.htm'>useful webpage<\/a> (thanks) HTML select (dropdown) element results in an HTML iframe element hosting a <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-video-in-iframe-api-regex-tutorial\/' title='YouTube Embedded Video in Iframe API RegEx Tutorial '>YouTube Embedded Video in Iframe API RegEx Tutorial <\/a>&#8216;s <a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a> (embedded) video integrator<\/li>\n<\/ol>\n<\/li>\n<li>bottom right cell where the user&#8217;s &#8220;latitude and longitudes and placenames of interest&#8221;&#8216;s &#8220;Other Side of the World&#8221; interfaces to the <a target=_blank href='http:\/\/stutzfamily.com\/mrstutz\/LatLong\/latlonglist.htm'>useful webpage<\/a> (thanks) HTML select (dropdown) element results in an HTML iframe element hosting a <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-video-in-iframe-api-regex-tutorial\/' title='YouTube Embedded Video in Iframe API RegEx Tutorial '>YouTube Embedded Video in Iframe API RegEx Tutorial <\/a>&#8216;s <a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a> (embedded) video integrator<\/li>\n<\/ul>\n<p>We now think the use of all this can have you hopping around the world discovering lots of geographical based, video based and timezone based information about lots of places around the world, lots of which you may never have known much about.<\/p>\n<p>We&#8217;ve software integrated today, as well as integrated &#8220;where&#8221; web application thoughts with &#8220;when&#8221; web application thoughts.<\/p>\n<p>Another feature of today&#8217;s changes involves the <a target=_blank title='Geolocation information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Geolocation'>geolocation<\/a> features of the Javascript &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Geolocation\/getCurrentPosition' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Geolocation\/getCurrentPosition'>navigator.geolocation.getCurrentPosition(success[, error[, options]])<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; syntax method of allowing Location Services, if allowed by the user, return a latitude and longitude position of the user themselves, information used at the instigation of the web application, and which we also used with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-where-does-it-get-me-to-primer-tutorial\/' title='HTML\/Javascript Where Does It Get Me To Primer Tutorial'>HTML\/Javascript Where Does It Get Me To Primer Tutorial<\/a> and <a target=_blank title='Google Chart Map Chart Select Event Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-map-chart-select-event-primer-tutorial\/'>Google Chart Map Chart Select Event Primer Tutorial<\/a> in the past.<\/p>\n<p>The code for this remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html---GETME' title='other_side_of_the_world.htm'>other_side_of_the_world.htm<\/a> (changed in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html---GETME' title='other_side_of_the_world.html-GETME'>this way<\/a> for our HTML iframe (software) integration purposes today) if you like, or want to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm' title='other_side_of_the_world.htm'>try out<\/a> (or try out for a specific (argument) location, such as <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm?place=Alice%20Springs' title='other_side_of_the_world.htm'>Alice Springs try out<\/a>), again.  It also required small changes to &#8230;<\/p>\n<ul>\n<li>HTML of the YouTube embedded iframe video integrator&#8217;s supervisory <a target=_blank title='karaoke_youtube_api.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html--------------GETME'>karaoke_youtube_api.htm<\/a> changed in <a target=_blank title='karaoke_youtube_api.htm' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html--------------GETME'>this way<\/a> and with this <a target=_blank title='karaoke_youtube_api.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm'>live run<\/a> link<\/li>\n<\/ul>\n<p>We hope you try it out and discover some new things!<\/p>\n<hr>\n<p id='osotwot'>Previous relevant <a target=_blank title='Other Side of the World Onblur Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-onblur-tutorial\/'>Other Side of the World Onblur Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm?place=Sydney\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Other Side of the World Onblur Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world_yet_more.jpg\" title=\"Other Side of the World Onblur Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Other Side of the World Onblur Tutorial<\/p><\/div>\n<p>The <a target=_blank title='Event onblur information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onblur.asp'><i>onblur<\/i><\/a> event in web programming is a very important event regarding interactive keyboard entries made by the user.  We base new functionality, today, with our &#8220;Other Side of the World&#8221; web application, by allowing a user who enters in their own &#8220;place&#8221; information, can have that information filtered through the same &#8220;autocomplete&#8221; database provided by the wonderful <a target=_blank title='Weather Underground' href='http:\/\/www.wunderground.com'>Weather Underground<\/a> and its great API service.<\/p>\n<p>When we presented the last Weather Underground related blog posting we even used this functionality also interfacing to the <a target=_blank title='Event onkeyup information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onkeyup.asp'><i>onkeyup<\/i><\/a> keyboard event, making it look up the database after just a few characters typed into the associated HTML input type=text text box, but today we lessen the interaction, presuming the user knows a location of interest and will only want information after tabbing out of this text box &#8230; hence the <i>onblur<\/i> event, only, logic interface to new functionality that creates an additional HTML select (dropdown) element of use to populate those same &#8230;<\/p>\n<ul>\n<li>placename<\/li>\n<li>country &#8230; linked to &#8230;<\/li>\n<li>latitude<\/li>\n<li>longitude<\/li>\n<\/ul>\n<p> &#8230; fields as talked about yesterday when we presented <a title='Other Side of the World Places Tutorial' href='#osowpt'>Other Side of the World Places Tutorial<\/a> as shown below.<\/p>\n<p>So that&#8217;s the idea, but making it happen involved some tweaking of the parts to the Weather Underground blog posting <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/weather-api-via-iframe-jquery-ajax-autocomplete-tutorial\/' title='Weather API via Iframe jQuery Ajax AutoComplete Tutorial'>Weather API via Iframe jQuery Ajax AutoComplete Tutorial<\/a> from some time back, the changes for which we&#8217;ll explain later.<\/p>\n<p>Again we call on <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings'>Client Pre-emptive Iframe<\/a> techniques for this, telling us that you can just keep on adding HTML iframe elements to make this technique happen for several different sources of information, as necessary.<\/p>\n<p>The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html--GETME' title='other_side_of_the_world.htm'>other_side_of_the_world.htm<\/a> (changed in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html--GETME' title='other_side_of_the_world.html-GETME'>this way<\/a> for our <i>onblur<\/i> event purposes today) if you like, or want to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm' title='other_side_of_the_world.htm'>try out<\/a> (or try out for a specific (argument) location, such as <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm?place=Darwin' title='other_side_of_the_world.htm'>Darwin try out<\/a>), again.  It also required small changes to &#8230;<\/p>\n<ul>\n<li>HTML of the &#8220;parent&#8221; you could call <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html---GETME'>autocomplete.htm<\/a> changed in <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html---GETME'>this way<\/a> and with this <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.htm'>live run<\/a> link (or specific place argument calls like the one here for <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.htm?place=Darwin'>live run for Darwin<\/a> link) &#8230; and its &#8230;<\/li>\n<li>PHP autocomplete jQuery Ajax engined helper you could call <a target=_blank title='using_key.php' href='http:\/\/www.rjmprogramming.com.au\/weather\/using_key.php--GETME'>using_key.php<\/a> and tweaked in <a target=_blank title='using_key.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/weather\/using_key.php--GETME'>this way<\/a>\n<\/ul>\n<hr>\n<p id='osowpt'>Previous relevant <a target=_blank title='Other Side of the World Places Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-places-tutorial\/'>Other Side of the World Places Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Other Side of the World Places Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world_more.jpg\" title=\"Other Side of the World Places Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Other Side of the World Places Tutorial<\/p><\/div>\n<p>A fair while ago now we were in the midst of writing a Geographicals Suite of web applications that, given Latitude and Longitude pairs you could calculate things like &#8230;<\/p>\n<ol>\n<li>Sun Angle at noon<\/li>\n<li>Moon Angle at noon<\/li>\n<li>Coriolis Effect<\/li>\n<li>Distance between Geographical Locations<\/li>\n<li>Weather at Geographical Location<\/li>\n<\/ol>\n<p> &#8230; and that we eventually added some &#8220;placename&#8221; capabilities to all this, introduced with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-sun-angle-tutorial\/' title='PHP\/Javascript\/HTML Sun Angle Tutorial'>PHP\/Javascript\/HTML Sun Angle Tutorial<\/a>, which harnessed all this useful goodwill of <a target=_blank href='http:\/\/stutzfamily.com\/mrstutz\/LatLong\/latlonglist.htm'>this useful webpage<\/a> (thanks) publishing some placename geographicals data.<\/p>\n<ul>\n<li>placename<\/li>\n<li>country &#8230; linked to &#8230;<\/li>\n<li>latitude<\/li>\n<li>longitude<\/li>\n<\/ul>\n<p> &#8230; and that we &#8220;channel&#8221; today, via our beloved <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings'>Client Pre-emptive Iframe<\/a> techniques, so that we reuse PHP, rather than having to create new PHP, as an aid to the modularization for added &#8220;placename&#8221; functionality to our &#8220;Other Side of the World&#8221; web application we started presenting yesterday with <a title='Other Side of the World Primer Tutorial' href='#osotwpt'>Other Side of the World Primer Tutorial<\/a> as shown below.<\/p>\n<p>Another thing we are trialling today is a concept (that admittedly seems to need more work in Firefox) of an HTML select (dropdown) element having an <i>onclick<\/i> event (after an <i>onchange<\/i> event that changes that select element value to a non-nothing value) having a logic whereby that select element value is used to repopulate the &#8230;<\/p>\n<ul>\n<li>placename (, country) (Great Circle Distance in km away)<\/li>\n<li>latitude<\/li>\n<li>longitude<\/li>\n<\/ul>\n<p> &#8230; HTML input type=text and type=number fields automatically.  In the normal case of events in non-Firefox web browsers an <i>onchange<\/i> event change of value to a non-nothing value just causes that select element value to be one of the places shown on the <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 Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> that we display.<\/p>\n<p>The default is to show five of the nearest placenames in the derived list, but a &#8220;+&#8221; button can increase that number of &#8220;nearest&#8221;s as required.<\/p>\n<p>The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html-GETME' title='other_side_of_the_world.htm'>other_side_of_the_world.htm<\/a> (changed in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html-GETME' title='other_side_of_the_world.html-GETME'>this way<\/a> for our purposes today) if you like, or want to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm' title='other_side_of_the_world.htm'>try out<\/a>, again perhaps?<\/p>\n<hr>\n<p id='osotwpt'>Previous relevant <a target=_blank title='Other Side of the World Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-primer-tutorial\/'>Other Side of the World Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Other Side of the World Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.jpg\" title=\"Other Side of the Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Other Side of the World Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;ve written a first draft of an &#8220;Other Side of the World&#8221; web application using a Google Chart Map Chart embedded into an HTML iframe element to show the user &#8230;<\/p>\n<ul>\n<li>the position of the place that they enter in for their latitude and longitude &#8230; as well as &#8230;<\/li>\n<li>&#8220;the other side of the world&#8221; to the position of the place that they enter in for their latitude and longitude, calculated by imagining you take a trip from your original location through the middle of the Earth and straight through onto the other location<\/li>\n<\/ul>\n<p>Is this our &#8220;sister&#8221; location?  Am not sure.  But somebody was telling &#8220;Porkies&#8221; to me as a child where we were told &#8220;China&#8221; as being on the other side.<\/p>\n<p>The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html' title='other_side_of_the_world.html_GETME'>other_side_of_the_world.html<\/a> if you like, or want to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html' title='other_side_of_the_world.html'>try out<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d28620' onclick='var dv=document.getElementById(\"d28620\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geographicals\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28620' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d30966' onclick='var dv=document.getElementById(\"d30966\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d30966' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d30981' onclick='var dv=document.getElementById(\"d30981\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onblur\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d30981' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d30998' onclick='var dv=document.getElementById(\"d30998\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/integration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d30998' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d31040' onclick='var dv=document.getElementById(\"d31040\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d31040' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>You&#8217;ll have noticed with our &#8220;Other Side of the World&#8221; web application of recent days &#8230; or maybe not, if you were dozing off &#8230; how much use we make of the Google Charts Map Chart functionality. Can&#8217;t do without &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-map-chart-styling-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[1695,281,354,367,400,481,483,513,518,576,587,614,630,631,652,1934,745,2126,777,795,2006,860,1631,861,1812,932,2134,949,1917,1107,1866,1168,1373,1399,2244],"class_list":["post-31040","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-autocompletion","tag-css","tag-dom","tag-dropdown","tag-event","tag-geographicals","tag-geolocation","tag-google","tag-google-chart","tag-html","tag-iframe","tag-integration","tag-ipad","tag-iphone","tag-javascript","tag-location-services","tag-map","tag-map-chart","tag-meta-tag","tag-mobile","tag-momentum-based-scrolling","tag-onblur","tag-onchange","tag-onclick","tag-onkeyup","tag-php","tag-place","tag-placenames","tag-scroll","tag-scrolling","tag-select","tag-software-integration","tag-viewport","tag-weather","tag-weather-underground"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/31040"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=31040"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/31040\/revisions"}],"predecessor-version":[{"id":31042,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/31040\/revisions\/31042"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=31040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=31040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=31040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}