highlight selected feature

[PhBrz]

Hello dear community.
I am using ShapeSource to render a list of features. So far it works fast and reliable.

<MapboxGL.ShapeSource id="earthquakes" cluster clusterRadius={25} clusterMaxZoom={12} shape={processedMarkers} ref={(shape) => (shapeRef.current = shape)}>
  <MapboxGL.SymbolLayer id="pointCount" style={layerStyles.clusterCount} />
    <MapboxGL.CircleLayer
    id="clusteredPoints" 
    belowLayerID="pointCount"
    filter={['has', 'point_count']}
    style={layerStyles.clusteredPoints} />
    <MapboxGL.SymbolLayer
    id="singlePoint"
    filter={['!', ['has', 'point_count']]}
    style={{
      backgroundColor: 'white',
      textField: ['get', 'label'],
      textSize: 14,
    }}
    />
</MapboxGL.ShapeSource>

to get the clicked on feature i use these code

const onPointClick = async (marker) => {
    try {
      let point = [marker.properties.screenPointX, marker.properties.screenPointY];

      const featureCollections = await mapView.current.queryRenderedFeaturesAtPoint(point, { layers: ['singlePoint'] });

      const filteredCluster = featureCollections.features.filter((x) => x.properties.cluster_id);
      const filteredMarkers = featureCollections.features.filter((x) => x.properties.isCustom);

      if (filteredCluster.length > 0) {
        var selectedCluster = filteredCluster[0];
        cameraRef.current.setCamera({
          centerCoordinate: selectedCluster.geometry.coordinates,
          zoomLevel: selectedCluster.properties.point_count > 10 ? 14 : 18,
          animationDuration: 1000,
        });
      }

      if (filteredMarkers.length > 0) onPointAnnotationSelected(filteredMarkers, null);
    } catch (x) {
      console.log(x);
    }
  };

The click event also works without problems.

However, I would like to update and highlight the feature. Unfortunately I didn't find the function "setFeatureState" in this lib. Do you have any suggestions how I could realize this?

Thanks and best regards

[rastapasta]

Aloha @hamburger1993,

this can easily be achieved by adding another CircleLayer with a filter for the selected cluster id.
Store the selectedCluster in a state and add

<MapboxGL.CircleLayer
    id="clusteredPointsSelected" 
    aboveLayerID="clusteredPoints"
    filter={['==', 'cluster_id', selectedCluster ? selectedCluster.properties.cluster_id : '']}
    style={layerStyles.clusteredPointsActive} />

and define the clusteredPointsActive style as desired.

If you wish to "highlight" multiple selected features, adapt the filter to using in and an array of corresponding values.

Enjoy and happy mapping :)

[PhBrz]

Thanks alot, that worked well :)!

[somasekharkakarla]

if we do this way, i need to save to a state and it re-render all features again it make a sec delay. which is not good for user experience. Need a way for adding or modifying feature without rendering.