简体   繁体   中英

how to add multiple filters to mapbox leaflet maps

I have a working mapbox/leaflet map and I can filter based on dropdowns but only one of them will work, not sure of the syntax (or if it's possible) to combine filters?

I basically have a real estate map populated with json data which includes property types and neighborhoods. need to combine the possible filters, so selecting a different property type won't erase the neighborhood filter.

$('#propertytype').change(function() {
    if ($(this).val() === 'all') {
        console.log($(this).val());
        markers.setFilter(function(f) {
            return f.properties['type'] != null;
        });
    } else {
        console.log($(this).val());
        var ptype = $(this).val();
        markers.setFilter(function(f) {
            return f.properties['type'] === ptype;
        });
        return false;
    }
});

$('#neighborhood').change(function() {
    if ($(this).val() === 'all') {
        console.log($(this).val());
        markers.setFilter(function(f) {
            return f.properties['neighborhood'] != null;
        });
    } else {
        console.log($(this).val());
        var hood = $(this).val();
        markers.setFilter(function(f) {
            return f.properties['neighborhood'] === hood;
        });
        return false;
    }
});

Sure, simplify into one function:

$('#propertytype, #neighborhood').change(function() {
    var propertyType = $('#propertytype').val();
    var neighborhood = $('#neighborhood').val();
    markers.setFilter(function(f) {
        return (propertyType === 'all' || f.properties.type == propertyType) &&
            (neighborhood === 'all' || f.properties.neighborhood === neighborhood);
    });
    return false;
});

(haven't executed this code, but should work)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM