Feature layer created from feature set in ArcGIS JS API 4.10 does not display

RahulMetangale2 · ‎01-03-2019

Hi All,

I am trying to display feature layer created from featureset on map. and i am seeing following issues:

If "type" key is missing in gemoetry object i get following error "[esri.core.Accessor] Accessor#set Invalid property value, value needs to be one of 'esri.geometry.Extent', 'esri.geometry.Multipoint', 'esri.geometry.Point', 'esri.geometry.Polyline', 'esri.geometry.Polygon', 'esri.geometry.Mesh', or a plain object that can autocast (having .type = 'extent', 'multipoint', 'point', 'polyline', 'polygon', 'mesh')" I added type attribute like following and then this error goes away

"geometry": {
"x": -13042767.827649597,
"y": 3857692.3854717212,
"type": "point"
}

I know that without type key this used to work in 3.x version of API.

Even if i add type layer does not display on map

Here is the sample code for reference. Can someone point me to right direction.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to FeatureLayer - 4.10</title>

) {

var map = new Map({
basemap: "streets"
});

var view = new MapView({
container: "viewDiv",
map: map
});

/********************
* Add feature layer
********************/
var citiesRenderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
size: 25,
color: "black",
outline: { // autocasts as new SimpleLineSymbol()
width: 0.5,
color: "white"
}
}
};
var data = {
"features": [{
"geometry": {
"x": -13042767.827649597,
"y": 3857692.3854717212,
"type": "point"
},
"attributes": {
"CT_RowNo": "377",
"provider_guid": "FEE94918-9913-49FC-BABE-DB5B17111CE1",
"provider_id": 123,
"agency_name": "Agency 1",
"tenant_id": "",
"email": "First.Middle@abc.com",
"phone_no": "3044004205",
"phone_extension": "",
"license_no": 1005052

}
}, {
"geometry": {
"x": 5251931.8199335933,
"y": 3678761.2973740068,
"type": "point"
},
"attributes": {
"CT_RowNo": "378",
"provider_guid": "FEF675B1-5C09-46ED-BE06-82F053B8B953",
"provider_id": 356,
"agency_name": "New Age",
"tenant_id": "",
"email": "First.Middle@abc.com",
"phone_no": "3044004167",
"phone_extension": "",
"license_no": 1005014

}
}],
"spatialReference": {
"wkid": 102100
},
"GeometryTypeEnum": 2,
"geometryType": "esriGeometryPoint",
"fieldAliases": {},
"fields": [{
"name": "CT_RowNo",
"type": "esriFieldTypeOID",
"alias": "CT_RowNo",
"length": 0
}, {
"name": "provider_guid",
"type": "esriFieldTypeString",
"alias": "provider_guid",
"length": 0
}, {
"name": "provider_id",
"type": "esriFieldTypeInteger",
"alias": "provider_id",
"length": 0
}, {
"name": "agency_name",
"type": "esriFieldTypeString",
"alias": "agency_name",
"length": 0
}, {
"name": "tenant_id",
"type": "esriFieldTypeString",
"alias": "tenant_id",
"length": 0
}, {
"name": "email",
"type": "esriFieldTypeString",
"alias": "email",
"length": 0
}, {
"name": "phone_no",
"type": "esriFieldTypeString",
"alias": "phone_no",
"length": 0
}, {
"name": "phone_extension",
"type": "esriFieldTypeString",
"alias": "phone_extension",
"length": 0
}, {
"name": "license_no",
"type": "esriFieldTypeInteger",
"alias": "license_no",
"length": 0
}],
"displayFieldName": "CT_RowNo",
"exceededTransferLimit": false
};
var featureLayer = new FeatureLayer({
fields: data.fields,
objectIdField: "CT_RowNo",
geometryType: "point",
spatialReference: {
wkid: 102100
},
source: data.features,
renderer: citiesRenderer
});

map.add(featureLayer);

});
</script>
</head>

</html>

RobertScheitlin__GISP · ‎01-03-2019

Rahul,

You had an couple of issue in your code.

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to FeatureLayer - 4.10</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

        var map = new Map({
          basemap: "streets"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map
        });

        /********************
         * Add feature layer
         ********************/
        var citiesRenderer = {
          type: "simple", // autocasts as new SimpleRenderer()
          symbol: {
            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
            size: 8,
            color: "black",
            outline: { // autocasts as new SimpleLineSymbol()
              width: 0.5,
              color: "white"
            }
          }
        };
        var data = {
          "features": [{
            "geometry": {
              "x": -13042767.827649597,
              "y": 3857692.3854717212,
              "type": "point",
              "spatialReference": {wkid: 102100}
            },
            "attributes": {
              "CT_RowNo": 377,
              "provider_guid": "FEE94918-9913-49FC-BABE-DB5B17111CE1",
              "provider_id": 123,
              "agency_name": "Agency 1",
              "tenant_id": "",
              "email": "First.Middle@abc.com",
              "phone_no": "3044004205",
              "phone_extension": "",
              "license_no": 1005052

            }
          }, {
            "geometry": {
              "x": 5251931.8199335933,
              "y": 3678761.2973740068,
              "type": "point",
              "spatialReference": {wkid: 102100}
            },
            "attributes": {
              "CT_RowNo": 378,
              "provider_guid": "FEF675B1-5C09-46ED-BE06-82F053B8B953",
              "provider_id": 356,
              "agency_name": "New Age",
              "tenant_id": "",
              "email": "First.Middle@abc.com",
              "phone_no": "3044004167",
              "phone_extension": "",
              "license_no": 1005014

            }
          }],
          "spatialReference": {
            "wkid": 102100
          },
          "GeometryTypeEnum": 2,
          "geometryType": "esriGeometryPoint",
          "fieldAliases": {},
          "fields": [{
            "name": "CT_RowNo",
            "type": "esriFieldTypeOID",
            "alias": "CT_RowNo",
          }, {
            "name": "provider_guid",
            "type": "esriFieldTypeString",
            "alias": "provider_guid"
          }, {
            "name": "provider_id",
            "type": "esriFieldTypeInteger",
            "alias": "provider_id"
          }, {
            "name": "agency_name",
            "type": "esriFieldTypeString",
            "alias": "agency_name"
          }, {
            "name": "tenant_id",
            "type": "esriFieldTypeString",
            "alias": "tenant_id"
          }, {
            "name": "email",
            "type": "esriFieldTypeString",
            "alias": "email"
          }, {
            "name": "phone_no",
            "type": "esriFieldTypeString",
            "alias": "phone_no"
          }, {
            "name": "phone_extension",
            "type": "esriFieldTypeString",
            "alias": "phone_extension"
          }, {
            "name": "license_no",
            "type": "esriFieldTypeInteger",
            "alias": "license_no"
          }],
          "displayFieldName": "CT_RowNo",
          "exceededTransferLimit": false
        };
        var featureLayer = new FeatureLayer({
          fields: data.fields,
          objectIdField: "CT_RowNo",
          geometryType: "point",
          spatialReference: {
            wkid: 102100
          },
          source: data.features,
          renderer: citiesRenderer
        });

        map.add(featureLayer);

      });
  </script>
</head>

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

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

1. You need to specify the spatialReference of the geometry you are creating in the json

2. Your CT_RowNo field values were a string instead of a number.

View solution in original post

RobertScheitlin__GISP · ‎01-03-2019

Rahul,

You had an couple of issue in your code.

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to FeatureLayer - 4.10</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

        var map = new Map({
          basemap: "streets"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map
        });

        /********************
         * Add feature layer
         ********************/
        var citiesRenderer = {
          type: "simple", // autocasts as new SimpleRenderer()
          symbol: {
            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
            size: 8,
            color: "black",
            outline: { // autocasts as new SimpleLineSymbol()
              width: 0.5,
              color: "white"
            }
          }
        };
        var data = {
          "features": [{
            "geometry": {
              "x": -13042767.827649597,
              "y": 3857692.3854717212,
              "type": "point",
              "spatialReference": {wkid: 102100}
            },
            "attributes": {
              "CT_RowNo": 377,
              "provider_guid": "FEE94918-9913-49FC-BABE-DB5B17111CE1",
              "provider_id": 123,
              "agency_name": "Agency 1",
              "tenant_id": "",
              "email": "First.Middle@abc.com",
              "phone_no": "3044004205",
              "phone_extension": "",
              "license_no": 1005052

            }
          }, {
            "geometry": {
              "x": 5251931.8199335933,
              "y": 3678761.2973740068,
              "type": "point",
              "spatialReference": {wkid: 102100}
            },
            "attributes": {
              "CT_RowNo": 378,
              "provider_guid": "FEF675B1-5C09-46ED-BE06-82F053B8B953",
              "provider_id": 356,
              "agency_name": "New Age",
              "tenant_id": "",
              "email": "First.Middle@abc.com",
              "phone_no": "3044004167",
              "phone_extension": "",
              "license_no": 1005014

            }
          }],
          "spatialReference": {
            "wkid": 102100
          },
          "GeometryTypeEnum": 2,
          "geometryType": "esriGeometryPoint",
          "fieldAliases": {},
          "fields": [{
            "name": "CT_RowNo",
            "type": "esriFieldTypeOID",
            "alias": "CT_RowNo",
          }, {
            "name": "provider_guid",
            "type": "esriFieldTypeString",
            "alias": "provider_guid"
          }, {
            "name": "provider_id",
            "type": "esriFieldTypeInteger",
            "alias": "provider_id"
          }, {
            "name": "agency_name",
            "type": "esriFieldTypeString",
            "alias": "agency_name"
          }, {
            "name": "tenant_id",
            "type": "esriFieldTypeString",
            "alias": "tenant_id"
          }, {
            "name": "email",
            "type": "esriFieldTypeString",
            "alias": "email"
          }, {
            "name": "phone_no",
            "type": "esriFieldTypeString",
            "alias": "phone_no"
          }, {
            "name": "phone_extension",
            "type": "esriFieldTypeString",
            "alias": "phone_extension"
          }, {
            "name": "license_no",
            "type": "esriFieldTypeInteger",
            "alias": "license_no"
          }],
          "displayFieldName": "CT_RowNo",
          "exceededTransferLimit": false
        };
        var featureLayer = new FeatureLayer({
          fields: data.fields,
          objectIdField: "CT_RowNo",
          geometryType: "point",
          spatialReference: {
            wkid: 102100
          },
          source: data.features,
          renderer: citiesRenderer
        });

        map.add(featureLayer);

      });
  </script>
</head>

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

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

1. You need to specify the spatialReference of the geometry you are creating in the json

2. Your CT_RowNo field values were a string instead of a number.

RahulMetangale2 · ‎01-04-2019

Thank you Robert!