Clustering is not working with custom styles

I followed the earthquake example, clustering works well with default templates (in MapboxGL.StyleURL), but if i change styleURL to a custom style, all clusters disappear. My current application is built in native code (Swift) still works with this custom style.

default style

custom style

This is my code:

<View style={styles.mapContainer}>
      <MapboxGL.MapView
          // can try with https://openmaptiles.github.io/klokantech-basic-gl-style/style-cdn.json
          styleURL="https://my-domain-url/style.json" 
          style={styles.map}
      >
            <MapboxGL.Camera
              centerCoordinate={[146.092859151588556, -38.026307135266585]}
              zoomLevel={4}
              minZoomLevel={0}
              maxZoomLevel={14}
            />
            <MapboxGL.ShapeSource
              id="trackClustersSource"
              shape={trackCenters}
              cluster
              clusterRadius={50}
              clusterMaxZoom={14}
            >
                <MapboxGL.SymbolLayer
                  id="pointCount"
                  style={layerStyles.clusterCount}
                />
                <MapboxGL.CircleLayer
                  id="circleClustersLayer"
                  belowLayerID="pointCount"
                  filter={['has', 'point_count']}
                  style={layerStyles.clusteredPoints}
                />
            </MapboxGL.ShapeSource>
     </MapboxGL.MapView>
</View>

[mfazekas]

import React from 'react';
import {
  MapView,
  ShapeSource,
  SymbolLayer,
  CircleLayer,
  Camera,
} from '@react-native-mapbox-gl/maps';
import {featureCollection, point, feature, lineString} from '@turf/helpers';

const diff = 0.01;

const shape = featureCollection([
  point([146.092859151588556, -38.026307135266585], {}),
  point([146.092859151588556 + diff, -38.026307135266585], {}),
  point([146.092859151588556, -38.026307135266585 + diff], {}),
  point([146.092859151588556, -38.026307135266585 + 2 * diff], {}),
  point([146.092859151588556, -38.026307135266585 + 3 * diff], {}),
]);

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView
        style={{flex: 1}}
        styleURL={
          'https://newtracstileserver.azurewebsites.net/styles/newtracs-master/style.json'
        }>
        <Camera
          centerCoordinate={[146.092859151588556, -38.026307135266585]}
          zoomLevel={8}
        />
        <ShapeSource
          shape={shape}
          cluster
          clusterRadius={50}
          clusterMaxZoom={14}>
          {true && (
            <SymbolLayer
              id="pointCount"
              style={{
                textField: 'Foo',
                textSize: 12,
                textFont: ['Noto Sans Regular'],
              }}
            />
          )}
          <CircleLayer
            id="circles"
            style={{
              circleColor: 'red',
              circleRadius: 5,
            }}
          />
        </ShapeSource>
      </MapView>
    );
  }
}

This one seems to work for me, the issue in your example was that SymbolLayer uses fonts that not available in the custom style pls specify a font that’s in the style.

I’ll try to add some warnings for such cases. On iOS MGLLoggingConfiguration can be used like this:

    MGLLoggingConfiguration* config = [MGLLoggingConfiguration sharedConfiguration];
    config.loggingLevel = MGLLoggingLevelWarning;
    config.handler = ^(MGLLoggingLevel loggingLevel, NSString *filePath, NSUInteger line, NSString *message) {
        if ([message containsString:@"Failed to load glyph range"]) {
            RCTLogWarn(@"Mapbox missing glyph: %@", message);
        }
    };

com.mapbox.mapboxsdk.log.Logger.setVerbosity(Logger.LogLevel.WARN)
com.mapbox.mapboxsdk.log.Logger.setLoggerDefinition(new LoggerDefinition {
..
})

[ivansolobear-omni]

thanks so much for this thread , I just spent whole 2 days on this error, cuz I couldn’t even figure out how to search for this. Please add an error in case the font could not be imported as I could not find any indication about it.