Change design of cluster when using geoJsonData

[BEibye]

Im having issues when designing cluster for my app, that shows chargepoints on a map. Im currently showing this, where the points are being rendered with data from geoJsonData. I would like to end up rendering circles, that displays the count of markers being hided in the cluster.

https://github.com/flutter-mapbox-gl/maps/assets/118850912/58950c94-2368-45b0-aa5b-85eba1e5c3f1

await _controller.addSource(
      'SPOTS',
      GeojsonSourceProperties(
          data: jsonDecode(geoJsonData),
          cluster: true,
          clusterMaxZoom: 14,
          clusterRadius: 20,
          clusterProperties: {
            "sum": [
              "+",
              ["get", "scalerank"]
            ]

          }),
    );

    await _controller.addSymbolLayer(
      'SPOTS',
      'SPOTS',
      const SymbolLayerProperties(
        iconImage: 'assets/icons/cp_marker_dark.png',
        iconSize: 0.04,
        iconAllowOverlap: true,
        textAllowOverlap: true,
        // iconAnchor: 'bottom',
      ),
      enableInteraction: true,
    );

[fatihmerickoc]

i also have the same issue, someone help us

[hamsadev]

Im having issues when designing cluster for my app, that shows chargepoints on a map. Im currently showing this, where the points are being rendered with data from geoJsonData. I would like to end up rendering circles, that displays the count of markers being hided in the cluster.

RPReplay_Final1689684604.mp4

await _controller.addSource(
      'SPOTS',
      GeojsonSourceProperties(
          data: jsonDecode(geoJsonData),
          cluster: true,
          clusterMaxZoom: 14,
          clusterRadius: 20,
          clusterProperties: {
            "sum": [
              "+",
              ["get", "scalerank"]
            ]

          }),
    );

    await _controller.addSymbolLayer(
      'SPOTS',
      'SPOTS',
      const SymbolLayerProperties(
        iconImage: 'assets/icons/cp_marker_dark.png',
        iconSize: 0.04,
        iconAllowOverlap: true,
        textAllowOverlap: true,
        // iconAnchor: 'bottom',
      ),
      enableInteraction: true,
    );

You must define a layer that defines how to display the cluster inside it

await _controller?.addCircleLayer(
      'SPOTS',
      'CLUSTER_CIRCLE',
      const CircleLayerProperties(
        circleColor: [
          Expressions.step,
          [Expressions.get, 'point_count'],
          '#51bbd6', 
          5,
          '#f1f075',
          10,
          '#f28cb1',
        ],
        circleRadius: [
          Expressions.step,
          [Expressions.get, 'point_count'],
          25, // Radius is equal to 25 for numbers below 5
          5,
          35, // Radius is equal to 35 for numbers below 10
          10,
          45
        ],
      ),
    );

Also, a layer that displays the number inside the cluster circles.

_controller?.addSymbolLayer(
      'SPOTS',
      'CLUSTER_COUNT',
      const SymbolLayerProperties(
        textField: [Expressions.get, 'point_count_abbreviated'],
        textFont: ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
        textSize: 15,
        iconAllowOverlap: true,
        textAllowOverlap: true,
      ),
    );

[BEibye]

Thanks for the response @hamsadev - I worked it out after i switched to the officiel mapbox SDK. Here i used the LayerSource with JSONGeo Data.

I will close the issue