topic Re: How to change cluster colour in Webapp Builder in ArcGIS Web AppBuilder Questions

How to change cluster colour in Webapp Builder

MatthewHowe — Wed, 01 Nov 2017 15:02:09 GMT

I'd like to change the colour of the clusters created via the summary widget in Webapp Builder Develop edition. How do I do this?

Also how can one change the colour of the clusters so it is dynamically linked with the cluster count e.g. 0-10 red, 11-20 green?

Thanks

Re: How to change cluster colour in Webapp Builder

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:37:17 GMT

Matthew,

It is not something that is configurable so you will need WAB Dev and to add come logic to the code.

In the Summary Widget folder find the ClusterLayer.js and the _clusterFeatures function and make these additions:

(add lines 60 - 64)

      // cluster features
      _clusterFeatures: function() {

        this.clear();
        var features = this._features;
        if (features.length > 0) {

          var clusterSize = this.clusterSize;
          var clusterGraphics = [];

          var sr = this._map.spatialReference;
          var mapExt = this._map.extent;
          var exts = mapExt.normalize();
          if(exts.length > 1) {
            var newExt = geometryEngine.union(exts);
            mapExt = newExt.getExtent();
          }

          var o = new Point(mapExt.xmin, mapExt.ymax, sr);

          var rows = Math.ceil(this._map.height / clusterSize);
          var cols = Math.ceil(this._map.width / clusterSize);
          var distX = mapExt.getWidth() / this._map.width * clusterSize;
          var distY = mapExt.getHeight() / this._map.height * clusterSize;

          for (var r = 0; r < rows; r++) {
            for (var c = 0; c < cols; c++) {
              var x1 = o.x + (distX * c);
              var y2 = o.y - (distY * r);
              var x2 = x1 + distX;
              var y1 = y2 - distY;

              var ext = new Extent(x1, y1, x2, y2, sr);

              var cGraphics = [];
              for (var i in features) {
                var feature = features[i];
                if (ext.contains(feature.geometry)) {
                  cGraphics.push(feature);
                }
              }
              if (cGraphics.length > 0) {
                var cPt = this._getClusterCenter(cGraphics);
                clusterGraphics.push({
                  center: cPt,
                  graphics: cGraphics
                });
              }
            }
          }

          //add cluster to map
          for (var g in clusterGraphics) {
            var clusterGraphic = clusterGraphics[g];
            var count = this._getClusterCount(clusterGraphic);
            // count = clusterGraphic.graphics.length; // web map template version
            var data = clusterGraphic.graphics;
            var label = count.toString();
            var size = label.length * 19;
            if(count >= 10){
              this.color = '#00ff00';
            }else{
              this.color = '#ff00000';
            }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to change cluster colour in Webapp Builder

MatthewHowe — Sat, 11 Dec 2021 20:37:20 GMT

Thanks so much Robert. I've added the below code (9-19) but all of the clusters turn to the first color and don't honour the conditions.

//add cluster to map
          for (var g in clusterGraphics) {
            var clusterGraphic = clusterGraphics[g];
            var count = this._getClusterCount(clusterGraphic);
            // count = clusterGraphic.graphics.length; // web map template version
            var data = clusterGraphic.graphics;
            var label = count.toString();
            var size = label.length * 19;
               if (count = 1) {
                    this.color = '#ffbebe';
               } else if (count > 1 && count < 6) {
                    this.color = '#fcae60';
               } else if (count > 5 && count < 11) {
                    this.color = '#ffffbf';
               } else if (count > 10 && count < 16) {
                    this.color = '#a5d96a';
               } else {
                    this.color = '#1a9641';
               }
            var symColor = this._getSymbolColor();

            var cls = new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color(0, 0, 0, 0), 0);
            var csym = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,
              size * 1.6, cls, new Color([symColor[0], symColor[1], symColor[2], 0.4]));
            var csym2 = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,
              size, cls, new Color([symColor[0], symColor[1], symColor[2], 0.8]));
            var fnt = new Font();
            fnt.family = "Arial";
            fnt.size = "12px";
            var symText = new TextSymbol(label, fnt, "#ffffff");
            symText.setOffset(0, -4);

            var attr = {
              Count: count,
              Data: data
            };
            if (count > 1) {
              this.add(new Graphic(clusterGraphic.center, csym, attr));
              this.add(new Graphic(clusterGraphic.center, csym2, attr));
              this.add(new Graphic(clusterGraphic.center, symText, attr));
            } else {
              var pt = clusterGraphic.graphics[0].geometry;
              this.add(new Graphic(pt, csym2, attr));
              this.add(new Graphic(pt, symText, attr));
            }

          }

        }

      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to change cluster colour in Webapp Builder

MatthewHowe — Mon, 06 Nov 2017 12:27:05 GMT

All sorted, I changed it round a bit

if (count > 15 && count < 22) {
this.color = '#1a9641';
} else if (count > 1 && count < 6) {
this.color = '#fcae60';
} else if (count > 5 && count < 11) {
this.color = '#ffffbf';
} else if (count > 10 && count < 16) {
this.color = '#a5d96a';
} else {
this.color = '#ffbebe';
}

Re: How to change cluster colour in Webapp Builder

RobertScheitlin__GISP — Mon, 06 Nov 2017 13:36:16 GMT

Matthew,

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.