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

雯婷崔 · ‎03-13-2019

<!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.

RobertScheitlin__GISP · ‎03-14-2019

Your main issue is that you where creating your graphics with the X and Y reversed. You also have so watch out for commas after your last item in your object (i.e. line 31 and 61 had a comma but there was no other item following it in the array). Here is your code working.

<!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.11</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <script src="https://js.arcgis.com/4.11/"></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: [-143.492, 62.771],
        },
        {
          name: 'data2',
          value: 302,
          pnt: [-143.492, 62.771],
        },
        {
          name: 'data3',
          value: 459,
          pnt: [-143.492, 62.771],
        }
      ];
      const features = geodata.map((item, i) => new Graphic({
        geometry: {
          type: 'point',
          x: item.pnt[0],
          y: 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
        });
        map.add(layer);
      });
    });
  </script>
</head>

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

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

View solution in original post

Ellenvan_den_Berg · ‎03-14-2019

Hi,

Thank you for your question. I see you posted this question in the ArcGIS Content - Esri Nederland space. This space is focused on content related questions for users in the Netherlands. Therefore it's better to post this question in a space focused on ArcGIS API for Javascript: https://community.esri.com/community/developers/web-developers/arcgis-api-for-javascript GeoNet users might be able to help you better in that space.

Ellen

RobertScheitlin__GISP · ‎03-14-2019

Your main issue is that you where creating your graphics with the X and Y reversed. You also have so watch out for commas after your last item in your object (i.e. line 31 and 61 had a comma but there was no other item following it in the array). Here is your code working.

<!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.11</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <script src="https://js.arcgis.com/4.11/"></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: [-143.492, 62.771],
        },
        {
          name: 'data2',
          value: 302,
          pnt: [-143.492, 62.771],
        },
        {
          name: 'data3',
          value: 459,
          pnt: [-143.492, 62.771],
        }
      ];
      const features = geodata.map((item, i) => new Graphic({
        geometry: {
          type: 'point',
          x: item.pnt[0],
          y: 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
        });
        map.add(layer);
      });
    });
  </script>
</head>

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

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