1

How do I get Mapbox GL addlayer 'in' filter to work when the match target is a comma separated list? i.e. v10 will work v7 doesn't

    var layers = [
        ["v1",  '#723122', "1,2,3,4,5,6,7,8,9"],                //- Artificial Surfaces
        ["v2",  '#8B4225', "10,11,12,13,14,15,16"],             //- Bare or lightly vegetated
        ["v3",  '#B4FFFF', "20,21,22"],                         //- Water bodies
        ["v4",  '#DBB052', "41,42,43,44"],                      //- Tussock
        ["v5",  '#F0D54E', "'30','31','32'"],                         //- Cropland
        ["v6",  '#ABCD66', "40"],                               //- Grassland
        ["v7",  '#508474', "45,46,47,48,49,70"],                //- Wetland
        ["v8",  '#8C7922', "50"],                               //- Fernland
        ["v9",  '#C4BB89', "51"],                               //- Gorse or Broom
        ["v10", '#89CD66', "52"],                               //- Manuka Kanuka
        ["v11", '#8C7922', "54"],                               //- Indigenous Hardwood
        ["v12", '#8C7922', "55"],                               //- Sub Alpine
        ["v13", '#C4BB89', "56,59,60,61,62,63,64,65,66,67,68"], //- Mixed Exotic
        ["v14", '#8C7922', "58"],                               //- Matagouri  Grey Scrub
        ["v15", '#75923C', "69"],                               //- Indigenoues Forest
        ["v16", '#4F6228', "71"]                                //- Exotic Forest
    ];

    $.ajax({
        type    : 'GET',
        url     : "http://" + location.host + '/json/vegetation/' + northWest[1] + '/' +southEast[1]+ '/' +southEast[0]+ '/' +northWest[0] + '/',
        dataType: 'json',
        success : function(jsn){

            if(!map.getSource('lris_vegetation')) {
                map.addSource('lris_vegetation', {
                    'type': 'geojson',
                    'data': jsn
                });
            }

            $.each(layers, function(idx,layer){

                var layerId = layer[0];

                console.log("layerId: " + layerId + " : " + layer[0] + " : " + layer[1] + " classes: ", layer[2]);

                if(!map.getLayer(layerId)) {
                    map.addLayer({
                        'id'    : layerId,
                        'type'  : 'fill',
                        'source': 'lris_vegetation',
                        'layout': {
                            'visibility'    : 'none'
                        },
                        'paint': {
                            'fill-color'        : layer[1],
                            'fill-opacity'      : 0.4,
                            'fill-outline-color': "#000"
                        },
                        "filter": ["in", "Class_2012", layer[2]]
                    });
                }
            });

        },
        error   : function(e){
            console.log(e.responseText);
        },
        beforeSend:function(){
            $('.loader').show();
        }
    })
    .always(function () {
        $('.loader').hide();
        $('#vegetation-legend').show();
    });

1 Answer 1

2

According to the docs, 'filter' needs to be a flat array:

This filter requires that the class property of each feature is equal to either "street_major", "street_minor", or "street_limited".

["in", "class", "street_major", "street_minor", "street_limited"]

So instead of:

"filter": ["in", "Class_2012", layer[2]]

How about:

"filter": ['in', 'Class_2012'].concat(layer[2].split(','))

Using this example:

["v13", '#C4BB89', "56,59,60,61,62,63,64,65,66,67,68"]

Your filter will be:

["in", "Class_2012", "56", "59", "60", "61", "62", "63", "64", "65", "66", "67", "68"]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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