This repository has been archived by the owner on Aug 31, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 34
/
Copy pathcurrentconditions.html
161 lines (134 loc) · 6.66 KB
/
currentconditions.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE HTML>
<html>
<!--
This page shows how to search for a location (by free text) and
retrieve the current conditions for the location.
For more information visit: http://api.accuweather.com/developers/
** Remember that you need to obtain your own API key by contacting AccuWeather. **
-->
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
// Configure our weather widget during jQuery.OnReady
$(function () {
var isMetric = false;
var locationUrl = "";
var currentConditionsUrl = "";
// Visit http://apidev.accuweather.com/developers/languages for a list of supported languages
var language = "en";
// Contact AccuWeather to get an official key. They key in this
// example is temporary and should NOT be used it in production.
var apiKey = "cloudBurst";
var awxClearMessages = function() {
$("#awxLocationInfo").html("...");
$("#awxLocationUrl").html("...");
$("#awxWeatherInfo").html("...");
$("#awxWeatherUrl").html("...");
}
// Searches for a city with the name specified in freeText.
// freeText can be something like:
// new york
// new york, ny
// paris
// paris, france
// For more info about location API go to http://apidev.accuweather.com/developers/locations
var awxCityLookUp = function (freeText) {
awxClearMessages();
locationUrl = "http://apidev.accuweather.com/locations/v1/search?q=" + freeText + "&apikey=" + apiKey;
$.ajax({
type: "GET",
url: locationUrl,
dataType: "jsonp",
cache: true, // Use cache for better reponse times
jsonpCallback: "awxCallback", // Prevent unique callback name for better reponse times
success: function (data) { awxCityLookUpFound(data); }
});
};
// Displays what location(s) were found.
var awxCityLookUpFound = function (data) {
var msg, locationKey = null;
$("#awxLocationUrl").html("<a href=" + encodeURI(locationUrl) + ">" + locationUrl + "</a>");
if (data.length == 1) {
locationKey = data[0].Key;
msg = "One location found: <b>" + data[0].LocalizedName + "</b>. Key: " + locationKey;
}
else if(data.length == 0) {
msg = "No locations found."
}
else {
locationKey = data[0].Key;
msg = "Multiple locations found (" + data.length + "). Selecting the first one: " +
"<b>" + data[0].LocalizedName + ", " + data[0].Country.ID + "</b>. Key: " + locationKey;
}
$("#awxLocationInfo").html(msg);
if(locationKey != null) {
awxGetCurrentConditions(locationKey);
}
};
// Gets current conditions for the location.
// For more info about Current Conditions API go to http://apidev.accuweather.com/developers/locations
var awxGetCurrentConditions = function (locationKey) {
currentConditionsUrl = "http://apidev.accuweather.com/currentconditions/v1/" +
locationKey + ".json?language=" + language + "&apikey=" + apiKey;
$.ajax({
type: "GET",
url: currentConditionsUrl,
dataType: "jsonp",
cache: true, // Use cache for better reponse times
jsonpCallback: "awxCallback", // Prevent unique callback name for better reponse times
success: function (data) {
var html;
if(data && data.length > 0) {
var conditions = data[0];
var temp = isMetric ? conditions.Temperature.Metric : conditions.Temperature.Imperial;
html = conditions.WeatherText + ", " + temp.Value + " " + temp.Unit;
}
else {
html = "N/A";
}
$("#awxWeatherInfo").html(html);
$("#awxWeatherUrl").html("<a href=" + currentConditionsUrl + ">" + currentConditionsUrl + "</a>");
}
});
};
$("#awxSearchTextBox").keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
var text = $("#awxSearchTextBox").val();
awxCityLookUp(text);
return false;
} else {
return true;
}
});
$("#awxSearchButton").click(function () {
var text = $("#awxSearchTextBox").val();
awxCityLookUp(text);
});
});
</script>
</head>
<body>
<h2>Location Search and Current Conditions</h2>
<p>This page shows how to search for a location by name (e.g. new york, ny) or by postal code (e.g. 64110) and fetch the current conditions and the location.</p>
<div>Enter location name:
<input id="awxSearchTextBox" placeholder="new york, ny" />
<input id="awxSearchButton" type="submit" value="Search" />
</div>
<h3>Location Information</h3>
<ul>
<li>URL: <span id="awxLocationUrl"/>N/A
<li><span id="awxLocationInfo">(Location information will be displayed here)</span>
</ul>
<h3>Current Conditions</h3>
<ul>
<li>URL: <span id="awxWeatherUrl"/>N/A
<li><span id="awxWeatherInfo">(Current conditions will be displayed here)</span>
</ul>
<h3>More info</h3>
<ul>
<li>The source code for this example is available at <a href="https://github.com/AccuWeather/AccuWeatherApiSamples">https://github.com/AccuWeather/AccuWeatherApiSamples</a>.</li>
<li>Detailed information about the AccuWeather API is available at <a href="http://api.accuweather.com/developers/">http://api.accuweather.com/developers/</a>.</li>
<li><b><i>Remember to get your own API key.</i></b> This sample is using a temporary key not suitable for production.</li>
</ul>
</body>
</html>