How to change cluster colour in Webapp Builder

379
4
Jump to solution
11-01-2017 08:02 AM
MatthewHowe
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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';
            }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
...

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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';
            }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
...
MatthewHowe
New Contributor III

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));
            }

          }

        }

      },
0 Kudos
MatthewHowe
New Contributor III

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';
}

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Matthew,

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

0 Kudos