document.addEventListener("DOMContentLoaded", function(event) {

    /** Converts numeric degrees to radians */
    if (typeof(Number.prototype.toRad) === "undefined") {
        Number.prototype.toRad = function() {
            return this * Math.PI / 180;
        }
    }

    function distance (lon1, lat1, lon2, lat2) {
        var R = 6371; // Radius of the earth in km
        var dLat = (lat2-lat1).toRad();  // Javascript functions in radians
        var dLon = (lon2-lon1).toRad(); 
        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
              Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * 
              Math.sin(dLon/2) * Math.sin(dLon/2); 
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
        var d = R * c; // Distance in km
        return d;
    }

    function getLocation () {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else { 
            console.log("Geolocation is not supported by this browser.");
        }
    }

    function showPosition (position) {
        var data = {
            longitude: position.coords.longitude,
            latitude: position.coords.latitude,
            _csrf: $('#csrf_token').val(),
        };
        $.ajax({
            url: '/location',
            method: 'POST',
            data: data,
        }).done(function (response) {
            console.log(response);
        });

        var users = $('.profile-info .distance')

        $.map(users, function (obj) {
            var user_long = Number($(obj).attr('data-long'));
            var user_lat = Number($(obj).attr('data-lat'));
            var dist = distance(position.coords.longitude, position.coords.latitude,
                user_long, user_lat);
            if (!isNaN(dist)) {
                $(obj).html(Math.round(dist) + 'km');
            }
        });
    }

    $('.search-box').click(function () {
        $('.filter-options').addClass('open');
    });

    $('body > .container-fluid').click(function () {
        $('.filter-options').removeClass('open');
    });

    $('.filter-options').click(function (event) {
        event.stopPropagation();
    });

    const MAX_SLIDER_VALUE = 50;
    var distance_slider = $('#distance-slider').bootstrapSlider({
        max: MAX_SLIDER_VALUE,
        min: 2,
        step: 2,
        value: MAX_SLIDER_VALUE,
        formatter: function (value) {
            if (value === 50) {
                $('#distance-label').addClass('inactive');
                return 'No distance filter';
            }
            $('#distance-label').removeClass('inactive');
            return value + ' km';
        }
    });
    $('.filter-button').click(function () {
        $('.filter-options').removeClass('open');
        var skill_names = $.map($('.category-filter .skill-select .selected'), function (obj) {
            return $(obj).attr('name');
        });
        if (skill_names.length == 0) {
            var free_search_text = $('.search-box').val();
            skill_names = [free_search_text];
        }
        var slider_value = distance_slider.bootstrapSlider('getValue');
        $.ajax({
            url: '/users/search',
            data: {
                distance: slider_value == MAX_SLIDER_VALUE ? -1 : slider_value, // Distance in km in which to search
                request_type: $('.filter-options .service-type.selected').attr('name'),
                skills: skill_names,
            },
        }).done(function (response) {
            $('.grid').masonry('remove', $('.grid').masonry('getItemElements'));
            // FIXME: don't know why masonry doesnt let me pass array to 'appended'
            // as suggested in docs. If we do 'appeneded' for each one, we get
            // different animation and might be slower?
            response.forEach(function (html) {
                var content = $(html);
                $('.grid').masonry().append(content).masonry('addItems', content);
            });
            $('.grid').masonry('layout');
        });
    });

    var previousScroll = 0;
    $(window).scroll(function(event){
       var scroll = $(this).scrollTop();
       if (scroll > previousScroll){
           $('.filter-options').removeClass('open');
       }
       previousScroll = scroll;
    });

    getLocation();
});

@@ -3276,10 +3276,12 @@
 E ? 
--1
+null
  : s

Set distance to null if none selected