How to get unique feature properties from geojson source in Mapbox GL JS?

Question

I've defined a mapbox geojson source:

map.addSource("places", {
    type: "geojson",
    data: "http://example.com/myfile.geojson",
});

My geojson source file has this structure:

{
"type": "FeatureCollection",
"features": [{
    "type": "Feature",
    "properties": {
        "icon": "theatre"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-77.038659, 38.931567]
    }},

    {
    "type": "Feature",
    "properties": {
        "icon": "music"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-77.020945, 38.878241]
    }},
    ...]
}

I would like to get the unique names of the 'icon' properties (here: theatre and music). How can I loop over source to get these unique values? The objective here is to add a layer from these unique names for filtering purposes.

Answer 1

I found here the answer to my question. Basically, add a layer to the source, use mapbox function queryRenderedFeatures to get the features and then get unique features with the help of dedicated function getUniqueFeatures. After I can loop over uniqueFeatures to print the elements:

var features = map.queryRenderedFeatures({layers: ['my_layer']});
var uniqueFeatures = getUniqueFeatures(features, "icon"); 

uniqueFeatures.forEach(function(feature) {
        var prop = feature.properties;
        console.log(prop.icon);
})

The getUniqueFeatures function:

function getUniqueFeatures(array, comparatorProperty) {
    var existingFeatureKeys = {};
    // Because features come from tiled vector data, feature geometries may be split
    // or duplicated across tile boundaries and, as a result, features may appear
    // multiple times in query results.
    var uniqueFeatures = array.filter(function(el) {
        if (existingFeatureKeys[el.properties[comparatorProperty]]) {
            return false;
        } else {
            existingFeatureKeys[el.properties[comparatorProperty]] = true;
            return true;
        }
    });

    return uniqueFeatures;
}

Answer 2

We can use JavaScript Set object to store unique values.

const uniqueIcons = new Set();

const data = {}; // Your JSON data.

data.features.forEach((item) => {
  uniqueIcons.add(item.properties.icon);
});

Example:

 const uniqueIcons = new Set(); const data = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "icon": "theatre" }, "geometry": { "type": "Point", "coordinates": [-77.038659, 38.931567] } }, { "type": "Feature", "properties": { "icon": "music" }, "geometry": { "type": "Point", "coordinates": [-77.020945, 38.878241] } }, { "type": "Feature", "properties": { "icon": "theatre" }, "geometry": { "type": "Point", "coordinates": [-77.038659, 38.931567] } } ] }; data.features.forEach((item) => { uniqueIcons.add(item.properties.icon); }); for(let icon of uniqueIcons) { console.log(icon); }