Leaflet MarkerCluster and Esri Leaflet Cluster - custom marker data from feature data not count of markers in the cluster

Question

Is it possible to sum the data from the feature data in a esri feature layour to display on a clustermarker. The default value is the count of the markers contained in the cluster, but I want it to display the sum of data from a featureLayer (feature.properties.somefeature) value instead? cluster.getAllChildMarkers(); gives you an array of each feature in each marker, but how do you get a sum of just one of the values from each marker and display that as the value of the cluster marker?

Here is the pertinent code.

map.createPane('circlesIIOM');  
////---- add Ill, Ind, Oh, Min ----////
  var covIIOM = L.esri.Cluster.featureLayer({
    url: 'https://services1.arcgis.com/0MSEUqKaxRlEPj5g/arcgis/rest/services/ncov_cases_US/FeatureServer/0',
    where: ("Province_State = 'Illinois' OR Province_State = 'Indiana' OR Province_State = 'Ohio' OR Province_State = 'Minnesota' OR Province_State = 'Iowa'"),

    onEachFeature: forEachIIOM,

    /////////////// CLUSTER ICONS

    spiderfyOnMaxZoom: false,
    removeOutsideVisibleBounds: true,
    disableClusteringAtZoom: 7,
    //// this function changes the icon acording to how many markers are in the cluster. this works ////
    iconCreateFunction: function (cluster) {
      var count = cluster.getChildCount(); 

///// I want to have the icons represent the sum of (feature.properties.Confirmed) from the feature layer for each marker ////
/// var theseMarkers = cluster.getAllChildMarkers(); //// -- this is the /// array of each marker in the cluster. If I console.log theseMarkers, it works. How to get the individual items out and sum them to display ?

/////////////////////////////////////////////////////////////////////////

     var digits = (count + '').length;

      return L.divIcon({
        html: count,
        className: 'cluster digits-' + digits,
        iconSize: null
              });
    },
/////////// end CLUSTER  //////////////////
    pointToLayer: function (feature, latlng) {  

      return L.circleMarker(latlng, {
            opacity: 1,
            color: getSColor(feature.properties.Confirmed),
            weight: getSwieght(feature.properties.Confirmed),
            fillColor: getColor(feature.properties.Confirmed),
            fillOpacity: .3,//getFOp(feature.properties.Confirmed),
            radius: getRad(feature.properties.Confirmed),
            pane: 'circlesIIOM'
          });

        },
  })

I then add the pane to the rest of the map using a layer control

Answer 1

You were on the right track. With

var theseMarkers = cluster.getAllChildMarkers();

you get all the marker data you need. Each marker object has feature value that is actually full feature object used for marker creation, so you can get desired feature property from it.

So your code to get the desired sum value could look something like this:

sumCount = 0;
for (var = 0; i < theseMarkers.length; i++) {
  sumCount += theseMarkers[i].feature.properties.Confirmed;
}

Answer 2

This is the code that will use the sum of the Confirmed feature in each marker to display the sum in the marker and size the marker icon according to how many digits make up the number.

iconCreateFunction: function (cluster) {
var theseMarkers = cluster.getAllChildMarkers(); //// -- this is the array of each marker in the cluster.  

sumCount = 0;
    for (var i = 0; i < theseMarkers.length; i++) {
    sumCount += theseMarkers[i].feature.properties.Confirmed;
    }

var digits = (sumCount + '').length;

return L.divIcon({
        html: sumCount,
        className: 'cluster digits-' + digits,
        iconSize: null
              });
    },

    pointToLayer: function (feature, latlng) {  

      return L.circleMarker(latlng, {
            opacity: 1,
            color: getSColor(feature.properties.Confirmed),
            weight: getSwieght(feature.properties.Confirmed),
            fillColor: getColor(feature.properties.Confirmed),
            fillOpacity: .3,
            radius: getRad(feature.properties.Confirmed),
            pane: 'circlesIIOM'
          });

        },

  }) // add to map using a layer control