Why is my SimpleFillSymbol not loading with proper fill or popupTemplate?

SebastianSchroh · ‎06-03-2020

I recently upgraded from ArcGIS Javascript 4.8 to 4.15, and it broke the generation of my client-side Feature Layers.

I was wondering what was causing this code to display the improper symbol. I want a solid grey polygon, but it gives me a polygon with no fill for some reason.

I also want the proper attributes being shown up in the popupTemplate but it says undefined for both fields.

Notes about my code. Before the update, I defined the symbol and popupTemplate for the graphic and defined the renderer as such:

renderer: {
   type: "simple"
}

But that didn't work so I've been tinkering trying to see where the issue is.

Debugging on both FireFox and Chrome.

Below is my code:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Testing Layer Issues</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>
  
  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/geometry/Polygon",
      "esri/Graphic"
    ], function(Map, MapView, FeatureLayer, Polygon, Graphic) {


      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-115, 54.5],
        zoom: 6
      });
      var rings = [[-12501210, 8357231],
                   [-12490077, 8357231],
                   [-12490077, 8367861],
                   [-12467811, 8367861],
                   [-12467811, 8389121],
                   [-12478944, 8389121],
                   [-12478944, 8378491],
                   [-12501210, 8378491],
                   [-12501210, 8357231]
                  ];
      
      var greyPolygonAtt = {
        Name: "No Road Infrastructure",
        Message: "This area has insufficient road infrastructure for transportation"
      };

      
      var greyPolygonGraphic = new Graphic({
                                geometry: new Polygon({
                                    hasZ: false,
                                    hasM: false,
                                    rings: rings,
                                    spatialReference: 102100
                                }),
                                attributes: greyPolygonAtt,




                            });
      
      var fields = [{
        name: "OBJECTID",
        alias: "OBJECTID",
        type: "oid"
      }];
      
       var greyGraphics = [ greyPolygonGraphics ];
      
       var greyLayer = new FeatureLayer({
                            source: greyGraphics, 
                            fields: fields, // required
                            objectIdField: "OBJECTID",
                             geometryType: "polygon",
                             popupTemplate: {  
                               title: "{Name}",
                               content: "{Message}"
                             },
                            renderer: {
                                type: "simple",
                                symbol: {
                                    type: "simple-fill",
                                    color: [150, 150, 150, 1],
                                    outline: {
                                        color: [150, 150, 150, 1],
                                        width: "1px"
                                    },
                                    style: "solid"
                                }
                            }
                        });
      map.add(greyLayer);
    });
      
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

RobertScheitlin__GISP · ‎06-04-2020

Sebastian,

You had several issues in your code.

Your polygons ring was in counterclockwise order. Polygon rings must be drawn in clockwise order unless they are holes.
Your fields array needed to include the Name and Message fields as type string when you created your FeatureLayer.
You had var greyGraphics = [greyPolygonGraphics]; when you needed var greyGraphics = [greyPolygonGraphic]; (notice var is singular not plural).

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Testing Layer Issues</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>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/geometry/Polygon",
      "esri/Graphic"
    ], function (Map, MapView, FeatureLayer, Polygon, Graphic) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-115, 54.5],
        zoom: 6
      });

      var rings = [
        [-12501210, 8357231],
        [-12490077, 8357231],
        [-12490077, 8367861],
        [-12467811, 8367861],
        [-12467811, 8389121],
        [-12478944, 8389121],
        [-12478944, 8378491],
        [-12501210, 8378491],
        [-12501210, 8357231]
      ];

      var greyPolygonAtt = {
        Name: "No Road Infrastructure",
        Message: "This area has insufficient road infrastructure for transportation"
      };

      var greyPolygonGraphic = new Graphic({
        geometry: new Polygon({
          rings: rings.reverse(),
          spatialReference: 102100
        }),
        attributes: greyPolygonAtt
      });

      var greyGraphics = [greyPolygonGraphic];

      var greyLayer = new FeatureLayer({
        source: greyGraphics,
        objectIdField: "OBJECTID",
        fields: [{
          name: "OBJECTID",
          type: "oid"
        }, {
          name: "Name",
          type: "string"
        }, {
          name: "Message",
          type: "string"
        }],
        geometryType: "polygon",
        popupTemplate: {
          title: "{Name}",
          content: "{Message}"
        },
        renderer: {
          type: "simple",
          symbol:
          {
            type: "simple-fill",
            color: [150, 150, 150, 1],
            outline: {
              color: [150, 150, 150, 1],
              width: "1px"
            },
            style: "solid"
          }
        }
      });
      map.add(greyLayer);
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍