Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Enter a location name, get a map, a weather forecast, and a Giphy image for each day's weather.
<!--
Enter a location name, submit the form.
Get a map, a weather forecast, and a Giphy image for each day's weather.
Requires API Keys for:
* Giphy: https://github.com/Giphy/GiphyAPI
* Forecast: https://developer.forecast.io/
* Google Maps JavaScript API Key
https://developers.google.com/maps/documentation/javascript/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Weather forecast</title>
<style type="text/css">
#map {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<form class="js-placeForm">
<label>
Enter a location:
<input type="text" class="js-place">
</label>
<input type="submit" value="Find">
</form>
<div id="map"></div>
<ul class="js-forecast">
</ul>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLEMAPSAPIKEY"></script>
<script type="text/javascript">
// Also used above in googleapis.com request.
var googleMapsApiKey = "GOOGLEMAPSAPIKEY";
var forecastApiKey = "FORECASTIOAPIKEY";
var giphyApiKey = "GIPHYAPIKEY";
function showMap(place) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': place}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var mapOptions = {
zoom: 8,
center: results[0].geometry.location,
// HYBRID, SATELLITE, ROADMAP, or TERRAIN:
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
showForecast(
results[0].geometry.location.lat(), results[0].geometry.location.lng()
);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
};
function showForecast(lat, lng) {
$('.js-forecast').empty();
$.ajax('https://api.forecast.io/forecast/' + forecastApiKey + '/' + lat + ',' + lng, {
dataType: 'jsonp'
}).done(function(results) {
console.log(results);
for (var n=0; n < results['daily']['data'].length; n++) {
showDayForecast( results['daily']['data'][n] );
}
}).fail(function(jqXHR, textStatus) {
alert( textStatus );
});
};
function showDayForecast(forecast) {
var date = new Date(forecast['time'] * 1000);
var day = date.getDay(); // 0-6
var days = [
'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'
];
var dayOfWeek = days[day];
var imageUrl = getImage(forecast['icon'], forecast['time']);
$('.js-forecast').append(
$('<li>').html(
'<p><span class="day-of-week">' + dayOfWeek + ':</span> <span class="summary">' + forecast['summary'] + '</span></p>'
)
.addClass('js-day-'+forecast['time'] + ' day')
);
};
function getImage(iconName, time) {
// Pairing Forecast.io icon values with giphy search strings.
var searchTerms = {
"clear-day": "blue sky",
"clear-night": "stars",
"rain": "rain",
"snow": "snow",
"sleet": "sleet",
"wind": "tornado",
"fog": "foggy",
"cloudy": "clouds",
"partly-cloudy-day": "cloudy",
"partly-cloudy-night": "clouds night"
};
$.ajax('http://api.giphy.com/v1/gifs/search?q=' + searchTerms[iconName] + '&api_key=' + giphyApiKey
).done(function(results) {
console.log(results);
var randomImage = randomItem(results['data']);
var url = randomImage['images']['fixed_width']['url'];
$('.js-day-'+time).append(
$('<img>').prop('src', url)
);
}).fail(function(jqXHR, textStatus) {
alert( textStatus );
});
};
function randomItem(arrayName) {
return arrayName[Math.floor(Math.random() * arrayName.length)];
};
$(document).ready(function() {
$('.js-placeForm').on('submit', function(ev){
ev.preventDefault();
if ($('.js-place').prop('value') != '') {
showMap( $('.js-place').prop('value') );
};
});
});
</script>
</body>
</html>
@philgyford

This comment has been minimized.

Copy link
Owner Author

philgyford commented Oct 16, 2015

No matter what I try, it keeps coming out with 8-spaced Tabs, sorry.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.