A recent fix from our support team explores MapDataEvents
By: Mal Wood-Santoro
As a member of the support team at Mapbox, I help users build out their ideas and troubleshoot problems. Recently, I faced a challenge involving events in Mapbox GL JS that was not only an interesting problem to tackle but also sheds light on how to work with the MapDataEvent when a tile belonging to a source changes in some way.
A user contacted us about filtering points for a specific feature and then displaying the name associated with that feature on the map. The problem was that after the points on the map were visually filtered, the name property of every point was still being displayed. Why wasn’t it showing the data for just the single filtered feature? Take a look at the problem below:
When I initially examined the code, nothing seemed out of place. To troubleshoot, I printed the layer’s features in the console and confirmed the issue. Although the points on the map were visually filtering, the data didn’t appear to be changing. It seemed that setFilter() might be working asynchronously and not completing the process of filtering until after the data was printed. I decided to use setTimeout() to test this theory by delaying the printing of the features for a few seconds, and it worked! This proved that the data needed more time to filter before proceeding with the rest of the code. My next step was to dig into Mapbox GL JS documentation and find a solution for the user.
I learned from the docs that any time an event is fired changing the map’s data in some way, an object is emitted that contains the boolean isSourceLoaded. If isSourceLoaded is false, this means there is still work being done to load or update the source data. This was exactly the information I needed. I tried printing the value of isSourceLoaded in the console for every sourcedata event that fired and saw that the features were printed before true was finally returned. To correct this, I attached an event listener to sourcedata, ensuring the source loaded completely before allowing the rest of the code to execute. See it in action below:
This approach is especially useful when you need to use Mapbox GL JS functions that change the source in some way — like setFilter() and setData(). For more information on Mapbox GL JS events, check out the Mapbox GL JS documentation and examples.
Whether you’re just starting out with Mapbox, or are a seasoned user our team is here to help. Start by trying some of our tutorials or visit the Help Page to get in touch.
How Mapbox GL JS events work with runtime styling was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.