Associate a list of markers and filters in Mapbox/MapLibreGL

Question

This subject is related to Changing color of clusters based on feature value in MapBox or MapLibreGL.

Basically, I have an interactive map with:

• on the left a list of all the information of the markers present on the map.
• To the right are filters by region, with radio buttons.

The problem I notice:

If I click on a radio button, only the markers of the region concerned are displayed. It works.

If I click on an item in the list on the left, and which has a region other than the one that is currently filtered, the map moves, but the marker does not appear. This is normal since the radio button has remained checked for a given region and therefore only displays the markers of this targeted region.

On the other hand, if I click on the "ALL" radio button, which restores all my markers, and I click on a new list item on the left, the map zooms but the marker is not displayed either, which is not normal. In fact, it continues to display only the markers of the previously targeted region.

Here is my fiddle : https://jsfiddle.net/bwhtpLqg/

How do I ensure that the list and filter system are well coordinated?

If I click on "All", I should be able to click on any item in the list on the left and see the marker show up.

Answer 1

Thanks to Carry H, I understood the problem a little better. The suggestion to reuse the setAllMarkersVisible() function doesn't work I think, because it contains a flyTo function that then prevents zooming in on the marker. So inside the buildLocationList() function, I adapted the setAllMarkersVisible() code to show all markers :

   for (var regionId in regions) {
              map.setLayoutProperty('unclustered-point_' + regionId, 'visibility', 'visible');

          }

Here is the corrected fiddle.

I've redone several scenarios, and I have the impression that it works well now;) If anyone has a better way, I'm all for it:)