{"id":27634,"date":"2017-01-19T03:01:02","date_gmt":"2017-01-18T17:01:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=27634"},"modified":"2018-01-25T14:46:29","modified_gmt":"2018-01-25T04:46:29","slug":"weather-api-via-iframe-jquery-ajax-map-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/weather-api-via-iframe-jquery-ajax-map-tutorial\/","title":{"rendered":"Weather API via Iframe jQuery Ajax Map Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/weather\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Weather API via Iframe jQuery Ajax Map Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/weather\/mapweather.JPG\" title=\"Karaoke via YouTube API in Iframe jQuery Ajax Map Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Weather API via Iframe jQuery Ajax Map Tutorial<\/p><\/div>\n<p>We&#8217;re still trying out the exciting, the wonderful Weather API by <a target=_blank title='Weather Underground' href='http:\/\/www.wunderground.com'>Weather Underground<\/a> today, building on the start we made to our &#8220;Weather API Project&#8221; when we presented yesterday&#8217;s <a target=_blank title='Weather API via Iframe jQuery Ajax Tutorial' href='#wavijat'>Weather API via Iframe jQuery Ajax Tutorial<\/a> primarily concentrating on <i>AutoComplete<\/i>.  Today&#8217;s work is more about the Weather Underground API <i>weather<\/i> information <b>as far as<\/b> &#8230;<\/p>\n<ul>\n<li>Geolookup<\/li>\n<li>Astronomy<\/li>\n<li><b>Current Conditions<\/b><\/li>\n<li>Three day forecast<\/li>\n<li>Almanac<\/li>\n<\/ul>\n<p> &#8230; is concerned.  It&#8217;s tempting to think that software integration between software components is simple, and you often start thinking this way.  But beware &#8230; sometimes this thinking can be fallacious, and this type of work takes a long time.   We often find this to be the case, and like doing renovations on an existing house is so much harder than if you can start from scratch, with software it can be like that too.  However, well planned and designed projects will probably have that advantage of having future ideas allowed for during the planning phase.  Obviously, during this planning phase, as many &#8220;out there&#8221; ideas should be allowed into the discussions to help here, because if you start restrictively it may be quite hard to &#8220;open&#8221; the project up later to incorporate software integration ideas from unexpected sources.<\/p>\n<p>Where we most progress today with our integrations it is with our Google Chart Map Chart &#8220;grandchild&#8221; HTML <i>iframe<\/i> software components, in two areas of that Map Chart&#8217;s <\/i>onclick<\/i> &#8220;select&#8221; event logic &#8230;<\/p>\n<ol>\n<li>add a <b>W<\/b>eather option linking to a Weather Underground webpage<\/li>\n<li>add a <b>T<\/b>imeZone option linking to a <a target=_blank title='TimeZone Converter' href='http:\/\/timezoneconverter.com'>TimeZone Converter<\/a> webpage<\/li>\n<\/ol>\n<p>So far with our <b>Current Conditions<\/b> testing we&#8217;ve still not come across any information from the Weather Underground API database requiring the use of our API Key, but am sure we will get to some of this as time goes on.  You may recall from yesterday&#8217;s work that the &#8220;driver&#8221; of all this functionality is via &#8230;<\/p>\n<ul>\n<li><i>AutoComplete<\/i><\/li>\n<\/ul>\n<p> &#8230; set of Weather Underground API functionality, and this aspect to our project is unchanged today.   To make more room at various times we did change the working of the HTML (select element) dropdown as far as non-mobile platforms are concerned, by shrinking it from <i>size=8<\/i> to <i>size=1<\/i> once interested data items have been selected.  Perhaps we have never explained a Javascript DOM matter before regarding this that by and large the Javascript DOM (<a target=_blank title='DOM information from Wikipedia ... thanks' href='https:\/\/en.m.wikipedia.org\/wiki\/Document_Object_Model'>Document Object Model<\/a>) to use is often derivable without looking up references by going from how you view the HTML element properties it&#8217;s relatively straightforward to envisage hierarchical code, such as for a fictional HTML (select element) dropdown &#8230;<\/p>\n<p><code>&lt;select id=mysel size=8 style=\"background-color:green;\"&gt;&lt;option value=1&gt;1&lt;\/option&gt;&lt;option value=2&gt;2&lt;\/option&gt;&lt;\/select&gt;<\/code><\/p>\n<p> &#8230; we can use &#8230;<\/p>\n<p><code><i>document.getElementById('mysel').size=1;<\/i>  \/\/ can change the number of dropped down entries showing to 1 (from 8 )<\/code><\/p>\n<p> &#8230; at that first hierarchy level, or for things within the &#8220;style&#8221; property <i>subproperties<\/i> level we use syntax (that can involve changed spellings (that are best memorised, but can often be categorised as &#8220;-&#8221; goes to &#8220;Capital Letter&#8221;)) like &#8230;<\/p>\n<p><code><i>document.getElementById('mysel').style.backgroundColor='pink';<\/i>  \/\/ can change the dropdown background colour to pink (from green)<\/code><\/p>\n<p>So just want to reiterate yesterday&#8217;s &#8230;<\/p>\n<blockquote><p>You may recall us talking about <a target=_blank title='AutoComplete information from Wikipedia ... thanks' href='https:\/\/en.m.wikipedia.org\/wiki\/Autocomplete'>AutoComplete<\/a> ideas previously at this blog at <a target=_blank title='AutoComplete tutorials here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/autocomplete'>this link<\/a>.  Also of interest with today&#8217;s work might be tutorials about <a target=_blank title='jQuery Ajax information' href='http:\/\/api.jquery.com\/jquery.ajax\/'>jQuery Ajax<\/a>, a technology <a target=_blank title='jQuery Ajax blog posting here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=jQuery+Ajax'>we also use<\/a> today.  Adding to that, it would be good to become familiar with the <a target=_blank title='JSON information from Wikipedia ... thanks' href='https:\/\/en.m.wikipedia.org\/wiki\/JSON'>JSON<\/a> protocol we&#8217;ve talked about with <a target=_blank title='JSON tutorials here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/json'>these tutorials<\/a>.<\/p><\/blockquote>\n<p>And so what we have our &#8220;parent&#8221; HTML web application you could call <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html-GETME'>autocomplete.htm<\/a> (amended 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>) doing is to populate an HTML (select element) dropdown housed in the &#8220;parent&#8221; from the &#8220;child&#8221; that is called by the parent as a result of that keyboard <i>onkeyup<\/i> event.  This dropdown is a <i>multiple<\/i> mode selection dropdown, and so we also provide an HTML <i>input<\/i> type=button to click or tap when you are finished selected any relevant Weather Underground data items of relevance.  And just for today, those selections have their data gathered together into a call to our recent <a target=_blank title='tz_places.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php-------GETME'>tz_places.php<\/a> (amended in <a target=_blank title='tz_places.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php-------GETME'>this way<\/a>) as an interfacing approach involving Weather Underground data items calling &#8220;grandchild&#8221; Google Chart Map Chart HTML iframe <a target=_blank title='map.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php------------GETME'>map.php<\/a> (amended 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>)  &#8230; again calling on Weather Underground API database data items &#8230;<\/p>\n<ul>\n<li>Place name<\/li>\n<li>Latitude<\/li>\n<li>Longitude<\/li>\n<li>Country Code<\/li>\n<li>Timezone Name<\/li>\n<\/ul>\n<p>So we still have this work in progress, and we really hope you try out our <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.htm'>live run<\/a> today to get a feel for the possibilities this great API can give to you.<\/p>\n<hr>\n<p id='wavijat'>Previous relevant <a target=_blank title='Weather API via Iframe jQuery Ajax Tutorial' href='http:\/\/www.rjmprogrmming.com.au\/ITblog\/Weather-api-via-iframe-jquery-ajax-tutorial\/'>Weather API via Iframe jQuery Ajax Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/weather\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Weather API via Iframe jQuery Ajax Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/weather\/IMG_0857.PNG\" title=\"Weather API via Iframe jQuery Ajax Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Weather API via Iframe jQuery Ajax Tutorial<\/p><\/div>\n<p>We&#8217;re trying out an exciting Weather API by <a target=_blank title='Weather Underground' href='http:\/\/www.wunderground.com'>Weather Underground<\/a> today.  It&#8217;s not that the Weather Underground API is just about <i>weather<\/i>, because, at the very least, there are means to access information in the following areas of interest &#8230;<\/p>\n<ul>\n<li>Geolookup<\/li>\n<li>Astronomy<\/li>\n<li>Current Conditions<\/li>\n<li>Three day forecast<\/li>\n<li>Almanac<\/li>\n<\/ul>\n<p>Many established APIs require, at least for some of the access to information, an API Key personalised for your own use by applying for one.  Today, though, we concentrate on an &#8230;<\/p>\n<ul>\n<li>AutoComplete<\/li>\n<\/ul>\n<p> &#8230; set of Weather Underground API functionality, where the data is supplied, very generously, without that API Key.  You may recall us talking about <a target=_blank title='AutoComplete information from Wikipedia ... thanks' href='https:\/\/en.m.wikipedia.org\/wiki\/Autocomplete'>AutoComplete<\/a> ideas previously at this blog at <a target=_blank title='AutoComplete tutorials here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/autocompletion'>this link<\/a>.  Also of interest with today&#8217;s work might be tutorials about <a target=_blank title='jQuery Ajax information' href='http:\/\/api.jquery.com\/jquery.ajax\/'>jQuery Ajax<\/a>, a technology <a target=_blank title='jQuery Ajax blog posting here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=jQuery+Ajax'>we also use<\/a> today.  Adding to that, it would be good to become familiar with the <a target=_blank title='JSON information from Wikipedia ... thanks' href='https:\/\/en.m.wikipedia.org\/wiki\/JSON'>JSON<\/a> protocol we&#8217;ve talked about with <a target=_blank title='JSON tutorials here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/json'>these tutorials<\/a>.<\/p>\n<p>Okay, with all that under your belt, what we do with the work today, is to have a single HTML <i>input<\/i> type=text element set to have the <i>autocomplete<\/i> property to <i>off<\/i>, because we intend to use our own auto completion today.  As the user types into the text field, after the third character, via the <i>onkeyup<\/i> keyboard event, we will use jQuery Ajax techniques, housed in our HTML <i>iframe<\/i> element &#8220;child&#8221; PHP <a target=_blank title='using_key.php' href='http:\/\/www.rjmprogramming.com.au\/weather\/using_key.php_GETME'>using_key.php<\/a> helper code, where we will house the jQuery Ajax code for a wide variety of calling methods needed to glean information from the truly international Weather Underground data set.<\/p>\n<p>We have to thank this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/31624481\/jquery-autocomplete-using-with-weather-underground-api'>useful link<\/a> for the great advice that set us in the right direction interpreting the JSON array (RESULTS) response for the AutoCompletion call we made.  At one stage we attempted a PHP file_get_contents call instead, but this did not work, as Weather Underground appears to much prefer a GET Ajax call methodology instead.<\/p>\n<p>Effectively, what our &#8220;parent&#8221; HTML web application you could call <a target=_blank title='autocomplete.html' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html_GETME'>autocomplete.html<\/a> does is to populate an HTML (select element) dropdown housed in the &#8220;parent&#8221; from the &#8220;child&#8221; that is called by the parent as a result of that keyboard <i>onkeyup<\/i> event.  This dropdown is a <i>multiple<\/i> mode selection dropdown, and so we also provide an HTML <i>input<\/i> type=button to click or tap when you are finished selecting any relevant Weather Underground data items of relevance.  And just for today, those selections have their data gathered together into a call to our recent <a target=_blank title='tz_places.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php------GETME'>tz_places.php<\/a> (amended in <a target=_blank title='tz_places.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php------GETME'>this way<\/a>) as an interfacing approach involving Weather Underground data items &#8230;<\/p>\n<ul>\n<li>Place name<\/li>\n<li>Latitude<\/li>\n<li>Longitude<\/li>\n<li>Country Code<\/li>\n<li>Timezone Name<\/li>\n<\/ul>\n<p>So we have a work in progress, but we really hope you try out our <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html'>live run<\/a> today to get a feel for the possibilities this great API can give to you.<\/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='#d27612' onclick='var dv=document.getElementById(\"d27612\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/api\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27612' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\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='#d27634' onclick='var dv=document.getElementById(\"d27634\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27634' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re still trying out the exciting, the wonderful Weather API by Weather Underground today, building on the start we made to our &#8220;Weather API Project&#8221; when we presented yesterday&#8217;s Weather API via Iframe jQuery Ajax Tutorial primarily concentrating on AutoComplete. &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/weather-api-via-iframe-jquery-ajax-map-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":[2,12,14,37],"tags":[69,88,103,117,1695,277,354,429,513,518,576,652,663,664,745,2126,2092,1812,932,997,2124,1319,1399],"class_list":["post-27634","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-api","tag-array","tag-auto-completion","tag-autocompletion","tag-cross-domain","tag-dom","tag-file_get_contents","tag-google","tag-google-chart","tag-html","tag-javascript","tag-jquery","tag-json","tag-map","tag-map-chart","tag-multiple","tag-onkeyup","tag-php","tag-programming","tag-response","tag-tutorial","tag-weather"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27634"}],"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=27634"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27634\/revisions"}],"predecessor-version":[{"id":27757,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27634\/revisions\/27757"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=27634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=27634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=27634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}