React Native Mapbox custom cluster pie chart

Question

I'm using the package react-native-mapbox-gl/maps to generate a map with clustering. I need to be able to analyze each cluster and based on its contents generate a pie chart representing the different types of points within the cluster. Either it isn't possible or I can't figure it out given the different types of Layers and Sources. I'm honestly not even sure where to begin. Any help or pointing in the right direction is much appreciated!

I've been able to create my map using the react-native-maps package (Google Maps) and have custom clusters, but I find the memory usage of the Mapbox package to be so much better.

There is nothing special about how I'm generating my map but here is the code:

const mapStyles = {
  icon: {
    iconImage: ['get', 'icon'],

    iconSize: [
      'match',
      ['get', 'icon'],
      'park', 0.9,
      'parkLarge', 1.6,
      'school', 0.9,
      'schoolLarge', 1.6,
      1, /* default */
    ],

    iconAllowOverlap: true
  },
  clusteredPoints: {
    circlePitchAlignment: 'map',

    circleColor: [
      'step',
      ['get', 'point_count'],
      '#2A2E43',
      100,
      '#2A2E43',
      750,
      '#2A2E43',
    ],

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

    circleOpacity: 1,
    circleStrokeWidth: 4,
    circleStrokeColor: 'white',
  },

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

<MapboxGL.MapView
          ref={ref => (this.map = ref)}
          style={{ flex: 1, zIndex: 100 }}
          styleURL="mapbox://[hidden]"
          onPress={() => this.props.onPressMap()}
          onRegionDidChange={(region) => this.onRegionDidChange(region)}
          onRegionWillChange={() => this.props.onRegionWillChange()}
          pitchEnabled={false}
          rotateEnabled={false}
          localizeLabels={true}
        >
          <MapboxGL.UserLocation visible={true} />
          <MapboxGL.Camera
            ref={(c) => this.camera = c}
            zoomLevel={this.props.zoomLevel}
            centerCoordinate={this.props.location}
            animationMode={'flyTo'}
            animationDuration={200}
            style={{ paddingBottom: 300 }}
          />
          <MapboxGL.Images images={{ park: parkIcon, parkLarge: parkIcon, school: schoolIcon, schoolLarge: schoolIcon }} />

          {
            this.props.featureCollection && this.props.featureCollection.features && this.props.featureCollection.features.length > 0 ? (
              <View>
                <MapboxGL.ShapeSource
                  id="pointsSource"
                  shape={this.props.featureCollection}
                  onPress={(event) => this.props.onPressMarker(event)}
                  cluster
                  clusterRadius={80}
                  clusterMaxZoomLevel={14}
                >
                  <MapboxGL.SymbolLayer
                    id="pointCount"
                    style={mapStyles.clusterCount}
                  />

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

                  <MapboxGL.SymbolLayer
                    id="favoritesIcons"
                    filter={['!', ['has', 'point_count']]}
                    // filter={['==', 'point_count', 1]}
                    style={mapStyles.icon}
                  />
                </MapboxGL.ShapeSource>
              </View>
            ) : null
          }

        </MapboxGL.MapView>

Mapbox Developer Support Mapbox Developer Support · Accepted Answer · 2020-05-16T01:31:09

Though the relevant example in our documentation is built with Mapbox GL JS rather than React Native, you might find this display HTML clusters with custom properties example to be a good starting point. It demonstrates how to make use of expressions to create pie chart-like SVGs for each cluster, depending on the properties of the data in the particular cluster.

A similar approach (manually synchronizing the clustered source with a pool of marker objects that updates continuously while the map view changes, rather than using a Mapbox GL layer to display the clusters) will likely be necessary in a React Native implementation as well.

React Native Mapbox custom cluster pie chart

1 Answers