Pulls weather data trough ajax and renders bootstrap html. PHP Laravel back-end code: https://gist.github.com/danielme85/8ddd04431ea2d6982e0b14802464ea0a

danWeather.js

/**
 * 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));