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.
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});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With