I am trying to Display polygon around sickestZIP in my following code, but it is not happening. please help me.

VishalRaiyani · ‎05-29-2020

gray<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Add layers to a map</title>
<style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
</style>
       <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
       <script src="https://js.arcgis.com/4.15/"></script>

       var view = new MapView({
           container: "viewDiv",
           map: map,
           center: [-100.000000,31.000000],
           zoom: 13
          });
       var basemapToggle = new BasemapToggle({
           view: view,
           nextBasemap: "topo-vector"
           });
       view.ui.add(basemapToggle, "bottom-right");

       var featureLayer = new FeatureLayer({
           url: "https://services6.arcgis.com/cmKWjJDTp7lPppjM/arcgis/rest/services/Zip/FeatureServer/0"
          });

        map.add(featureLayer);

           featureLayer.when(function(){
               view.extent=featureLayer.fullExtent;
           });

       var medianAgeLayer = new MapImageLayer({
           url: "https://demographics9.arcgis.com/arcgis/rest/services/USA_Demographics_and_Boundaries_2019/MapServer"
       });

       var cbrenderer = new ClassBreaksRenderer({
           field: "Age"
           });

           cbrenderer.addClassBreakInfo({
               minValue: 19,
               maxValue: 40,
               symbol: new SimpleMarkerSymbol({
               style: "diamond",
               color: "#9ACD32",
               size: 10
               })
           });

           cbrenderer.addClassBreakInfo({
               minValue: 41,
               maxValue: 52,
               symbol: new SimpleMarkerSymbol({
               style: "diamond",
               color: [0,0,255,0.2],
               size: 15
               })
           });
           featureLayer.renderer = cbrenderer;

       var graphicsLayer = new GraphicsLayer({
           graphics: []
       });
       map.add(graphicsLayer);

       var gCriteria01Geometry;
       var gCriteria02Geometry;

       function countPerZIPCode(inputLayer){
           var q = featureLayer.createQuery();
           q.outFields = ["ZIP"];
           return inputLayer.queryFeatures(q).then(function(response){
               var dict = {};
               var zip;
               response.features.forEach(function (item) {
                   zip = item.attributes.ZIP;
                   if (dict[zip] == undefined) {
                       dict[zip]= 1;
                   }
                   else
                   {
                       dict[zip] = dict[zip] + 1;
                   }
               });

               return Object.keys(dict).reduce(function(key1,key2){
                   return dict[key1] > dict[key2] ? key1 : key2;
               });
           });

       }

       function bufferByDistance(sickestZIP){
           var q = new Query();
           q.where = "ID = '" + sickestZIP + "'";
           q.returnGeometry = true;
           var medianAgeQueryTask = new QueryTask({
               url: "https://demographics9.arcgis.com/arcgis/rest/services/USA_Demographics_and_Boundaries_2019/MapServer"
           });

           return medianAgeQueryTask.execute(q).then(function(response){

               return response.features[0].geometry;

           }).then(function(sickestZIPGeometry){

               gCriteria01Geometry = geometryEngine.buffer(
                   sickestZIPGeometry,
                   2,
                   "miles"
               );
               displayMyPolygon(gCriteria01Geometry, "red");
               displayMyPolygon(sickestZIPGeometry, "green");

           });
       }


       view.when(featureLayer.when()
                   .then(countPerZIPCode)
                   .then(bufferByDistance)


             );


});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>