Pulls weather data trough ajax and renders bootstrap html. PHP Laravel back-end code: https://gist.github.com/danielme85/8ddd04431ea2d6982e0b14802464ea0a
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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) + '°</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) + '°</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