Mapbox Layer features duplicate IDs

Question

I'm building a web app with Mapbox-GL-JS and it uses mapbox studio tilesets to add layers as choropleths. However when I access the layer, multiple features seem to be receiving the same ID.

https://github.com/mapbox/mapbox-gl-js/issues/8284 Here it was mentioned that it was due to my data, however there is no ID field in the dataset: https://www.dropbox.com/s/5ci0hosqakvdahx/townships.json?dl=0

https://jsbin.com/cuhewomepo/1/edit?html,js,output

map.on("mousemove", "gemeentes", function (e) {
    if (e.features.length > 0) {
        if (hoverGemeenteId) {
            map.setFeatureState({
                source: 'gemeentes-src',
                sourceLayer: 'townships-0u4ffk',
                id: hoverGemeenteId
            }, {hover: false});
        }
        hoverGemeenteId = e.features[0].id;
        console.log(hoverGemeenteId);
        map.setFeatureState({
            source: 'gemeentes-src',
            sourceLayer: 'townships-0u4ffk',
            id: hoverGemeenteId
        }, {hover: true});
    }
});

Which follows the project example: https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/

Whenever a township is hovered it changes color, however since there are multiple townships with the same ID, multiple areas light up instead of just the one that is hovered.

EDIT: When I run the following code:

const filtered = map.querySourceFeatures('gemeentes-src', {
        sourceLayer: 'townships-0u4ffk',
        filter: ['>=', ['id'], 0]
    });

It shows clearly that there are multiple features with the same id and no ID goes above 249. It's almost as if there is a 250 cap and new features just start at 0 again.

I don't know why, but that JSBin is just rendering a white page for me. I can see it fetching Mapbox resources, but nothing is displaying. — Steve Bennett

Brendan Nee Brendan Nee · Accepted Answer · 2020-11-13T23:59:29

When adding a source, you can use the option promoteId to assign unique IDs to features based on a property.

https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector-promoteId

For example (from the PR that added this feature to MapboxGL):

map.addSource('counties', {
    "type": "vector",
    "url": "mapbox://mapbox.82pkq93d",
    "promoteId": {"original": "COUNTY"}
});
...
map.setFeatureState({
    source: 'counties', 
    sourceLayer: 'original', 
    id: 'Marin County' // reference a feature by a county name for feature-state
}, {hover: true});

Mapbox Layer features duplicate IDs

1 Answers