Updating MapboxGL.ShapeSource clusterMaxZoomLevel not working

[andrei-tofan]

Describe the bug
Setting clusterMaxZoomLevel initially works, but if it needs to be updated after ShapeSource was added to the map, setting clusterMaxZoomLevel is not having any effect on the map layer.

To Reproduce

1. Create a ShapeSource with an initial clusterMaxZoomLevel stored in the state.
2. Use a setTimeout to change the clusterMaxZoomLevel in the state, this triggers a render with the new state.

Expected result The symbols to be rendered using a different clusterMaxZoomLevel

Actual result The symbols are rendered with the initial clusterMaxZoomLevel

Example:

import React from 'react';
import {View} from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';

const SF_OFFICE_COORDINATE = [-122.400021, 37.789085];

const styleMatchParent = {flex: 1};

const layerStyles = {
  singlePoint: {
    circleColor: 'green',
    circleOpacity: 0.84,
    circleStrokeWidth: 2,
    circleStrokeColor: 'white',
    circleRadius: 5,
    circlePitchAlignment: 'map',
  },

  clusteredPoints: {
    circlePitchAlignment: 'map',

    circleColor: [
      'step',
      ['get', 'point_count'],
      '#51bbd6',
      100,
      '#f1f075',
      750,
      '#f28cb1',
    ],

    circleRadius: ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],

    circleOpacity: 0.84,
    circleStrokeWidth: 2,
    circleStrokeColor: 'white',
  },

  clusterCount: {
    textField: '{point_count}',
    textSize: 12,
    textPitchAlignment: 'map',
  },
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      clusterMaxZoomLevel: 3,
    };
  }

  componentDidMount() {
    setTimeout(() => {
      console.log('Set clusterMaxZoomLevel to 13');
      this.setState({
        clusterMaxZoomLevel: 13,
      });
    }, 15000);
  }

  render() {
    const {clusterMaxZoomLevel} = this.state;
    return (
      <View style={styleMatchParent}>
        <MapboxGL.MapView
          style={styleMatchParent}
          styleURL={MapboxGL.StyleURL.Dark}>
          <MapboxGL.Camera
            zoomLevel={8}
            pitch={45}
            centerCoordinate={SF_OFFICE_COORDINATE}
          />

          <MapboxGL.ShapeSource
            id="earthquakes"
            cluster
            clusterRadius={50}
            clusterMaxZoomLevel={clusterMaxZoomLevel}
            url="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson">
            <MapboxGL.SymbolLayer
              id="pointCount"
              style={layerStyles.clusterCount}
            />

            <MapboxGL.CircleLayer
              id="clusteredPoints"
              belowLayerID="pointCount"
              filter={['has', 'point_count']}
              style={layerStyles.clusteredPoints}
            />

            <MapboxGL.CircleLayer
              id="singlePoint"
              filter={['!', ['has', 'point_count']]}
              style={layerStyles.singlePoint}
            />
          </MapboxGL.ShapeSource>
        </MapboxGL.MapView>
      </View>
    );
  }
}
export default App;

Additional context
In our use case, we are rendering on the map user-created points and the user has the option to change the clusterMaxZoomLevel from the app for the points and changing it after it is added to the map is not working.

[ferdicus]

I've looked into this way longer than I've liked to... What I could gather is, that updating the clusterMaxZoomLevel does in fact call this here: https://github.com/react-native-mapbox-gl/maps/blob/c048645fd770a393665d5535091a4fdd4d69b6bf/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLShapeSource.java#L108-L110

Unfortunately this doesn't seem to update the underlying GeoJsonSource though and I was unable to find a solution to this issue in the timebox I've given myself. :(

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jaltin]

This issue is still relevant, but unfortunately we haven't had time to look into it.

Is it possible that a maintainer can open it again so it doesn't get lost?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jaltin]

Issue is still relevant so please leave open.

[mfazekas]

On v10/iOS we cannot implement this because: #1641 also not supported on android.

[mfazekas]

Closing this as not supported upstream. I guess as a workaround you can remove and read the source with different param.

[jaltin]

Closing this as not supported upstream. I guess as a workaround you can remove and read the source with different param.

Yes that is an option for us I guess, we will give that a try. Thanks for digging into this (and all the other work you do in this repo)!