Hey there,
I'm trying to get a simple map up displaying a few city locations built from coordinate sets. The map seems to be working fine, and when looking at console logs it looks like all Point and Graphic objects are being created successfully, but when I give .applyEdits a list of graphics objects, nothing gets added. I'm using code modified from this example: ArcGIS API for JavaScript Sandbox. As far as I can tell, the reason I'm not seeing any features on the map is because the featureLayer._graphicsVal property is not getting populated. Here is a screen shot from the example site showing console.log(featureLayer) output:
And this is what I get with my code:
Does anyone have an idea of where I'm making an error?
The .js file for my page:
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/geometry/Point",
"esri/graphic",
"dojo/_base/array",
"dojo/domReady!"
], function(
Map,
FeatureLayer,
Point,
Graphic,
array) {
let map = new Map(document.getElementById("map"), {
center: [-85.56, 38.22],
zoom: 8,
basemap: "topo"
});
let featureCollection = {
"layerDefinition" : null,
"featureSet": {
"features": [],
"geometryType" : "esriGeometryPoint"
}
};
featureCollection.layerDefinition = {
"geometryType" : "esriGeometryPoint",
"objectIdField" : "ObjectID",
"drawingInfo" : {
"renderer" : {
"type": "simple",
"symbol" : {
"type" : "esriSMS", //Simple Marker Symbol
"style" : "esriSMSDiamond",
"color" : [212, 113, 21], //RGB
"size" : 20,
"angle" : 0,
"xoffset" : 0,
"yoffset" : 0,
}
},
"fields" : [{
"name" : "ObjectID",
"alias" : "ObjectID",
"type" : "esriFieldTypeOID"
}, {
"name" : "City",
"alias" : "City",
"type" : "esriFieldTypeString"
}]
}
};
featureLayer = new FeatureLayer(featureCollection, {
"id": 'cityLayer'
});
map.addLayers([featureLayer]);
let cities =
[{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-87.53, 37.98]
},
"properties": {
"name": "Evansville"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-85.74, 38.23]
},
"properties": {
"name": "Louisville"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-84.87, 38.2]
},
"properties": {
"name": "Frankfort"
}
}];
let features = [];
array.forEach(cities, function(city){
let attr = {};
attr.name = city.properties.name;
let geometry = new Point(city.geometry.coordinates);
let graphic = new Graphic(geometry);
graphic.setAttributes(attr);
console.log(graphic);
features.push(graphic);
});
featureLayer.applyEdits(features);
console.log(featureLayer);
});
Solved! Go to Solution.
This is usually an async issue, where the object is not populating before you console.log
These may be the key lines from the sample you are working from
map.on("layers-add-result", function(results) {
requestPhotos();
});
If that's not it look for some other watcher to handle the event for when the layer adds/loads
This is usually an async issue, where the object is not populating before you console.log
These may be the key lines from the sample you are working from
map.on("layers-add-result", function(results) {
requestPhotos();
});
If that's not it look for some other watcher to handle the event for when the layer adds/loads
That was exactly the issue, thank you!