Skip to content

Instantly share code, notes, and snippets.

@danielme85 danielme85/danWeather.js
Last active Mar 2, 2017

Embed
What would you like to do?
Pulls weather data trough ajax and renders bootstrap html. PHP Laravel back-end code: https://gist.github.com/danielme85/8ddd04431ea2d6982e0b14802464ea0a
/**
* Created by mellum on 8/3/2016.
* Gets data from Laravel back-end: https://gist.github.com/danielme85/8ddd04431ea2d6982e0b14802464ea0a
* Based on GeoIP2 https://github.com/danielme85/laravel-geoip2
* This product includes GeoLite2 data created by MaxMind, available from: http://www.maxmind.com
* Beautiful css weather icons by Erik Flowers: https://erikflowers.github.io/weather-icons/
* Weather data from: http://openweathermap.org/api
*
*/
(function($) {
$.fn.danWeather = function() {
var $this = $(this);
loadWeather('/geoip/weather', $this);
$('#try-html5-geoweather').on('click', function (e) {
e.preventDefault();
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
loadWeather('/weather', $this, lat, long, 'post');
},
function(error) {
$this.html('<p>Could not load Geo-location from browser...</p>');
}
);
}
else {
loadWeather('/geoip/weather', $this, null, null, 'get');
}
});
function loadWeather(url, element, lat, long, method) {
$.ajaxSetup({headers: {'X-CSRF-Token': $('meta[name="_token"]').attr('content')}});
$.ajax({
dataType: 'json',
method: method,
url: url,
data: {lat: lat, long: long},
cache: false,
beforeSend: function () {
$(element).html('<i class="fa fa-cog fa-spin fa-3x fa-fw"></i> <br> <small class="text-muted">Loading weather...</small>');
},
success: function (weather) {
html = '<h4>Weather for the '+weather.current.name+' area:</h4>';
html += '<span class="btn btn-sm btn-default disabled" style="opacity: 1; margin-top: 5px; line-height: 1.2;">Now<br><i style="font-size: 22px; padding: 4px;" class="wi wi-owm-' + weather.current.weather[0].id + '"></i><br>' + weather.current.weather[0].main + '<br>' + Math.round(weather.current.main.temp) + '&deg;</span> ';
if (weather.forecast.list) {
$.each(weather.forecast.list, function (i, e) {
html += '<span class="btn btn-sm btn-default disabled" style="opacity: 1; margin-top: 5px; line-height: 1.2;">' + e.day.substr(0, 3) + '<br><i style="font-size: 22px; padding: 4px;" class="wi wi-owm-' + e.weather[0].id + '"></i><br>' + e.weather[0].main + '<br>' + Math.round(e.temp.day) + '&deg;</span> ';
});
}
$(element).html(html);
},
error: function (error) {
$(element).html('<p>Sorry, weather is unavailable right now...</p>');
},
complete: function () {
}
});
}
}
}(jQuery));
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.