Weather API via Iframe jQuery Ajax Map Tutorial

Weather API via Iframe jQuery Ajax Map Tutorial

We’re still trying out the exciting, the wonderful Weather API by Weather Underground today, building on the start we made to our “Weather API Project” when we presented yesterday’s Weather API via Iframe jQuery Ajax Tutorial primarily concentrating on AutoComplete. Today’s work is more about the Weather Underground API weather information as far as …

• Geolookup
• Astronomy
• Current Conditions
• Three day forecast
• Almanac

… is concerned. It’s tempting to think that software integration between software components is simple, and you often start thinking this way. But beware … 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 “out there” ideas should be allowed into the discussions to help here, because if you start restrictively it may be quite hard to “open” the project up later to incorporate software integration ideas from unexpected sources.

Where we most progress today with our integrations it is with our Google Chart Map Chart “grandchild” HTML iframe software components, in two areas of that Map Chart’s onclick “select” event logic …

1. add a Weather option linking to a Weather Underground webpage
2. add a TimeZone option linking to a TimeZone Converter webpage

So far with our Current Conditions testing we’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’s work that the “driver” of all this functionality is via …

• AutoComplete

… 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 size=8 to size=1 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 (Document Object Model) to use is often derivable without looking up references by going from how you view the HTML element properties it’s relatively straightforward to envisage hierarchical code, such as for a fictional HTML (select element) dropdown …

<select id=mysel size=8 style="background-color:green;"><option value=1>1</option><option value=2>2</option></select>

… we can use …

document.getElementById('mysel').size=1; // can change the number of dropped down entries showing to 1 (from 8 )

… at that first hierarchy level, or for things within the “style” property subproperties level we use syntax (that can involve changed spellings (that are best memorised, but can often be categorised as “-” goes to “Capital Letter”)) like …

document.getElementById('mysel').style.backgroundColor='pink'; // can change the dropdown background colour to pink (from green)

So just want to reiterate yesterday’s …

You may recall us talking about AutoComplete ideas previously at this blog at this link. Also of interest with today’s work might be tutorials about jQuery Ajax, a technology we also use today. Adding to that, it would be good to become familiar with the JSON protocol we’ve talked about with these tutorials.

And so what we have our “parent” HTML web application you could call autocomplete.htm (amended in this way) doing is to populate an HTML (select element) dropdown housed in the “parent” from the “child” that is called by the parent as a result of that keyboard onkeyup event. This dropdown is a multiple mode selection dropdown, and so we also provide an HTML input 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 tz_places.php (amended in this way) as an interfacing approach involving Weather Underground data items calling “grandchild” Google Chart Map Chart HTML iframe map.php (amended in this way) … again calling on Weather Underground API database data items …

• Place name
• Latitude
• Longitude
• Country Code
• Timezone Name

So we still have this work in progress, and we really hope you try out our live run today to get a feel for the possibilities this great API can give to you.

Previous relevant Weather API via Iframe jQuery Ajax Tutorial is shown below.

Weather API via Iframe jQuery Ajax Tutorial

We’re trying out an exciting Weather API by Weather Underground today. It’s not that the Weather Underground API is just about weather, because, at the very least, there are means to access information in the following areas of interest …

• Geolookup
• Astronomy
• Current Conditions
• Three day forecast
• Almanac

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 …

• AutoComplete

… set of Weather Underground API functionality, where the data is supplied, very generously, without that API Key. You may recall us talking about AutoComplete ideas previously at this blog at this link. Also of interest with today’s work might be tutorials about jQuery Ajax, a technology we also use today. Adding to that, it would be good to become familiar with the JSON protocol we’ve talked about with these tutorials.

Okay, with all that under your belt, what we do with the work today, is to have a single HTML input type=text element set to have the autocomplete property to off, because we intend to use our own auto completion today. As the user types into the text field, after the third character, via the onkeyup keyboard event, we will use jQuery Ajax techniques, housed in our HTML iframe element “child” PHP using_key.php 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.

We have to thank this useful link 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.

Effectively, what our “parent” HTML web application you could call autocomplete.html does is to populate an HTML (select element) dropdown housed in the “parent” from the “child” that is called by the parent as a result of that keyboard onkeyup event. This dropdown is a multiple mode selection dropdown, and so we also provide an HTML input 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 tz_places.php (amended in this way) as an interfacing approach involving Weather Underground data items …

• Place name
• Latitude
• Longitude
• Country Code
• Timezone Name

So we have a work in progress, but we really hope you try out our live run today to get a feel for the possibilities this great API can give to you.

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

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