mapbox / mapbox/mapbox-gl-js

Confusing documentation: can I safely call `setFeatureState` before `sourcedata` event?

Open
#12,158 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

docs :scroll:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

The [code example on data joins & feature state](https://docs.mapbox.com/help/tutorials/data-joins-with-mapbox-boundaries/) is:

(1) broken (using `&&` instead of `||`, `of` instead of `in`, trying to iterate over a function, etc.)

(2) Leaving the brokenness aside (because I don't really care about that), more importantly it seems to suggest that `map.setFeatureState` may only be called after `map.isSourceLoaded()` returns true:

> Finally, you'll wait until the statesData source has been added to the map before calling your custom setState function to set the feature state:
```javascript
// Check if `statesData` source is loaded.
function setAfterLoad(event) {
if (event.sourceID !== 'statesData' && !event.isSourceLoaded) return;
setStates(); // <-- calls setFeatureState
map.off('sourcedata', setAfterLoad);
}

// If `statesData` source is loaded, call `setStates()`.
if (map.isSourceLoaded('statesData')) {
setStates();
} else {
map.on('sourcedata', setAfterLoad);
}
```

Is that correct??? Shouldn't I be able to call `setFeatureState` even if the source is not fully loaded yet? Additionally, this code example seems to imply that "source has been added to the map" when we receive a `sourcedata` event, however, that shouldn't be the case, right? A source is added to the map as soon as `map.addSource()` is called.

So why should any of that be necessary? Why shouldn't I be able to do, simply:

```javascript
map.on('load', () => {
map.addSource(sourceId, mySource); // I don't care when the source has finished loading
map.setFeatureState({source: sourceId, id: 1234}, {'blah': 'blah blah'});
})
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked data joins and feature state tutorial and review its setFeatureState, addSource, sourcedata, and isSourceLoaded usage. Verify the documented timing and correct the example's syntax and explanation so the behavior and completion criteria are clear.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.