1

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

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;
}
| improve this answer | |
  • This worked. I'll add an answer with the code that works. – beckersj May 26 at 14:25
0

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
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.