AnsweredAssumed Answered

Add an array of client-side features do not work with js4.10

Question asked by 353628974 on Mar 13, 2019
Latest reply on Mar 14, 2019 by rscheitlin

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Create a FeatureLayer with client side graphics - 4.10</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

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

<script>
require([
"esri/views/MapView",
"esri/Map",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"esri/widgets/Legend",
"esri/config",
"esri/request",
'esri/Graphic',
], function(MapView, Map, FeatureLayer, Point, Legend, esriConfig,
esriRequest,Graphic
) {
var map = new Map({
   basemap: "dark-gray"
});

// Create MapView
var view = new MapView({
   container: "viewDiv",
   map: map,
   center: [-144.492, 62.771],
    zoom: 5
});
const geodata = [
{
name: 'data1',
value: 109,
pnt: [-144.492, 62.771],
},
{
name: 'data2',
value: 302,
pnt: [-145.492, 62.771],
},
{
name: 'data3',
value: 459,
pnt: [-143.492, 62.771],
},
];
const features = geodata.map((item, i) => new Graphic({
    geometry: {
      type: 'point',
      y: item.pnt[0],
       x: item.pnt[1],
    },
   attributes: {
      ObjectID: i,
      name: item.name,
      value: item.value,
   },
}));

view.when(()=> {

const fields = [
{
name: 'ObjectID',
alias: 'ObjectID',
type: 'oid',
},
{
name: 'name',
alias: 'name',
type: 'string',
},
{
name: 'value',
alias: 'value',
type: 'integer',
},
];

const renderer = {
   type: 'heatmap',
   field: 'value',
   colorStops: [
    {
       color: 'rgba(63, 40, 102, 0)',
       ratio: 0,
    },
    {
      color: '#4e2d87',
       ratio: 0.166,
    },

    {
       color: '#5d32a8',
       ratio: 0.332,
    },   
   {
       color: '#7139d4',
       ratio: 0.498,
    },
    {
      color: '#853fff',
      ratio: 0.664,
    },

    {
       color: '#c29f80',
       ratio: 0.83,
    },
    {
       color: '#ffff00',
       ratio: 1,
    },
   ],
   maxPixelIntensity: 500,
   minPixelIntensity: 0,
   blurRadius: 10,
};

const layer = new FeatureLayer({
   source: features, // autocast as an array of esri/Graphic
   // create an instance of esri/layers/support/Field for each field object
   fields: fields, // This is required when creating a layer from Graphics
   objectIdField: 'ObjectID', // This must be defined when creating a layer from Graphics
   renderer: renderer, // set the visualization on the layer
   id: '324234234234',
   outFields: ['ObjectID', 'name', 'value']
});
map.add(layer);
});
});
</script>
</head>

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

follow sample ArcGIS API for JavaScript Sandbox 

I do not know where  this problem is wrong.

Outcomes