atravelblog/js/page-pins-map.js

var places = page_pins_map.places;
var map;
var map_center = {lat: parseFloat(places[0]['lat']), lng: parseFloat(places[0]['lng']) };
var traveler = page_pins_map.traveler;
jQuery('document').ready(function(){
    for(var i=0; i<traveler.length; i++){
        var opt = jQuery('<li>');
        opt.addClass('ui-widget-content');
        opt.text(traveler[i]);
        jQuery('#travelers-select').append(opt);
    }
    jQuery( "#travelers-select" ).selectable({
        stop: applyFilters
    });
    if(typeof google !== 'undefined'){
        // reinit map in case google maps loaded before this script did
        initMap();
    }
    jQuery('#travelers-reset-button').on('click', resetFilter);
    jQuery('#toggle-and-or').toggleSwitch({
        width: "140px",
        height: "20px",
        onLabel: "Insgesamt",
        offLabel: "Zusammen",
        onToggle: applyFilters
    });
    jQuery('#travelers-extend-button').on('click', toggleExtendTravelers);
    toggleExtendTravelers();
    initTimeRangeSlider();
});
var markers = [];
function initMap() {
    markers = [];
    map = new google.maps.Map(document.getElementById('map-stats'), {
        center: map_center,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    });
    var bounds = new google.maps.LatLngBounds();
    for(var i = 0; i < places.length; i++){
        var marker = new google.maps.Marker({
            position: {lat: parseFloat(places[i]['lat']), lng: parseFloat(places[i]['lng']) },
            title: places[i]['title'],
            url: "/?p="+places[i]['post'],
            traveler: places[i]['traveler'],
            startYear: parseInt(places[i]['start'].substr(0,4)),
            endYear: parseInt(places[i]['end'].substr(0,4)),
            map: map
        });
        marker.setVisible(true);
        markers.push(marker);
        google.maps.event.addListener(marker, 'click', function() {
            window.location.href = this.url;
        });
        bounds.extend(marker.getPosition());
    }
    map.fitBounds(bounds);
    window.setTimeout(function(){
        if(map.getZoom() > 15){
            map.setZoom(15);
        }
    }, 500);
}

function initTimeRangeSlider(){
    var minYear = 3000;
    var maxYear = 0;
    for(var i=0; i<places.length; i++){
        var start = parseInt(places[i].start.substr(0,4));
        var end = parseInt(places[i].end.substr(0,4));
        minYear = (minYear < start ? minYear : start);
        maxYear = (maxYear > end ? maxYear : end);
    }
    jQuery('#time-range-slider').slider({
        range: true,
        min: minYear,
        max: maxYear,
        values: [ minYear, maxYear ],
        slide: function( event, ui ) {
            jQuery( "#time-range" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
        },
        change: applyFilters
    });
    jQuery( "#time-range" ).val( jQuery( "#time-range-slider" ).slider( "values", 0 ) +
        " - " + jQuery( "#time-range-slider" ).slider( "values", 1 ) );
}

function applyFilters(){
    var travelers = [];
    jQuery('#travelers-select .ui-selected').each(function (i, elem) {
        travelers.push(jQuery(elem).text());
    });
    if(jQuery('#toggle-and-or')[0].checked){
        filterMarkersByTravelersOr(travelers);
    } else {
        filterMarkersByTravelersAnd(travelers);
    }
    hideOutOfRangePins(jQuery( "#time-range-slider" ).slider( "values", 0 ), jQuery( "#time-range-slider" ).slider( "values", 1 ) );
}

function resetFilter(){
    jQuery('#travelers-select .ui-selected').each(function (i, elem) {
        jQuery(elem).removeClass('ui-selected');
    });
    var minYear = jQuery('#time-range-slider').slider("option", "min");
    var maxYear = jQuery('#time-range-slider').slider("option", "max");
    jQuery('#time-range-slider').slider( "values", [ minYear, maxYear ] );
    jQuery('#toggle-and-or').prop( "checked", false );
    filterMarkersByTravelersAnd([]);
}

function filterMarkersByTravelersAnd(travelers){
    for(var i=0; i<markers.length; i++){
        markers[i].setVisible(false);
        var all_there = true;
        for(var j=0; j<travelers.length; j++){
            if(markers[i]['traveler'].indexOf(travelers[j]) == -1){
                all_there = false;
                break;
            }
        }
        if(all_there){
            markers[i].setVisible(true);
        }
    }
}

function filterMarkersByTravelersOr(travelers){
    for(var i=0; i<markers.length; i++){
        markers[i].setVisible(false);
        for(var j=0; j<travelers.length; j++){
            if(markers[i]['traveler'].indexOf(travelers[j]) > -1){
                markers[i].setVisible(true);
                break;
            }
        }
    }
}

function hideOutOfRangePins(start, end){
    for(var i=0; i<markers.length; i++){
        if(markers[i].endYear < start || markers[i].startYear > end){
            markers[i].setVisible(false);
        }
    }
}

function toggleExtendTravelers() {
    jQuery('#travelers-select li').filter(function(i){
        return jQuery(this).text().indexOf(' ') !== -1;
    }).each(function(i){
        jQuery(this).toggle();
    });
}