Cannot set iconImage style property on SymbolLayer based on Cluster , point_count and Interpolation

[frankyveras]

Hello I'm trying to implement a custom icon for clustering based on point_count property and using interpolation which i believe it's the correct way , but it's not working at all, my starting point is the example of https://github.com/mapbox/react-native-mapbox-gl/blob/master/example/src/components/EarthQuakes.js switching CircleLayer for a SymbolLayer, here's the code

Images Object:

const categoryIconImages = {
  'n25': require('../../assets/icons/cluster/cluster_icons_(00-25).png'),
  'n50': require('../../assets/icons/cluster/cluster_icons_(25-50).png'),
  'n75': require('../../assets/icons/cluster/cluster_icons_(50-75).png'),
  'n100': require('../../assets/icons/cluster/cluster_icons_(75-100).png'),
  'n300': require('../../assets/icons/cluster/cluster_icons_(100-300).png'),
  'n750': require('../../assets/icons/cluster/cluster_icons_(300-750+).png'),
};

Style Object:

  clusteredPoints: {
    iconPitchAlignment: 'map',
    iconImage: Mapbox.StyleSheet.source(
      [
        [25, categoryIconImages.n25],
        [50, categoryIconImages.n50],
        [75, categoryIconImages.n75],
        [100, categoryIconImages.n100],
        [300, categoryIconImages.n300],
        [750, categoryIconImages.n750],
      ],
      'point_count',
      Mapbox.InterpolationMode.Exponential,
    ),
    //iconImage: categoryIconImages.n25,
    iconOpacity: 0.84,
    iconAllowOverlap: true,
    iconSize: 0.5,
  },

Render Function:

  renderEventMarkers = (events, categories) => {
    // console.log("Event List", events)
    if (events.edges.length > 0) {
      const featureCollection = this.createFeatureCollection(events);
      return (
        <Mapbox.ShapeSource
          id="eventShapeSource"
          shape={featureCollection}
          images={categoryIconImages}
          cluster
          clusterRadius={50}
          clusterMaxZoom={17}
        >
          <Mapbox.SymbolLayer id="pointCount" style={layerStyles.clusterCount} />

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

          <Mapbox.SymbolLayer
            id="eventIconName"
            style={layerStyles.events}
            filter={['!has', 'point_count']}
          />
        </Mapbox.ShapeSource>
      );
    } else {
      return null;
    }
  };

The error

NOTE: I also tried to reference the image key on the categoryIconImages on the style interpolation but it didn't work : like this

  clusteredPoints: {
    iconPitchAlignment: 'map',
    iconImage: Mapbox.StyleSheet.source(
      [
        [25, 'n25'],
        [50, 'n50'],
        [75, 'n75'],
        [100, 'n100'],
        [300, 'n300'],
        [750, 'n750'],
      ],
      'point_count',
      Mapbox.InterpolationMode.Exponential,
    ),
    //iconImage: categoryIconImages.n25,
    iconOpacity: 0.84,
    iconAllowOverlap: true,
    iconSize: 0.5,
  },

Thanks in advanced for your help!

[EricPKerr]

Hi @frankyveras were you able to make any progress on this? Looking to implement something similar. Thanks!

[noway]

It's been fixed in master branch of new repo: https://github.com/react-native-mapbox-gl/maps/issues/140