I'm learning the mapbox gl js examples and have trouble understanding a function. The function can be found here https://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/ it's in fact the "filterEl.addEventListener('keyup', function(e)" in the example.

I already removed the complete function and noticed no difference in behaviour.

This is the code:

 filterEl.addEventListener('keyup', function(e) {
        var value = normalize(e.target.value);

        // Filter visible features that don't match the input value.
        var filtered = airports.filter(function(feature) {
            var name = normalize(feature.properties.name);
            var code = normalize(feature.properties.abbrev);
            return name.indexOf(value) > -1 || code.indexOf(value) > -1;

        // Populate the sidebar with filtered results

        // Set the filter to populate features into the layer.
        map.setFilter('airport', ['in', 'abbrev'].concat(filtered.map(function(feature) {
            return feature.properties.abbrev;

The function responds to keyboard input. It filters out airport names or airport codes from the list that don't contain each typed character, narrowing which airports are listed and which airport markers are displayed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.