<!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.
Solved! Go to Solution.
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>
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
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>