Create polygon that holds a series of points

[FrankLaFone]

I'm trying to create a polygon that shows the extent of a series of points.  I have a series of addresses and can get back the centroids for the points.  All I really want is a polygon that represents the area of those points (technically plus a small buffer).  Then I want to add that polygon to the view, but not add the points.  I can add the points ok and the constructed polygon looks ok as far as it's object properties, but it just won't show up on the view.  Anyone have any ideas what I'm doing wrong here? (code below)

var points = [];
for(let i=0;i<results.features.length;i++){
points.push(results.features[i].geometry.centroid);
}

var polylineSymbol = {
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [226, 119, 40],
width: 4
};
var areaPolygon = new Polygon();
areaPolygon.addRing(points);

var polylineGraphic = new Graphic({
geometry: areaPolygon,
symbol: polylineSymbol,
});
App.policyView.graphics.add(polylineGraphic);

[UndralBatsukh]

Hi there,

Looks like you are assigning SimpleLineSymbol to a polygon graphic. You should assign SimpleFillSymbol to your polygon graphic.

[FrankLaFone]

Good catch but unfortunately that doesn't solve my problem.  It still isnt' showing the polygon when I change it to:

var polySymbol = {
type: "simple-fill",
color: [ 255, 99, 71, 0.85 ],
outline: {
color: "white",
width: .5
}};

[UndralBatsukh]

Try setting the polygon geometry's spatialReference. By default, the Graphic's spatialReference is WGS84. You may also have to check if your polygon is a simple polygon. If it is not then you have to simplify it. Here is a simple test app that add polygon from points.

https://codepen.io/U_B_U/pen/JjbaoqR?editors=100

Hope this helps,

[FrankLaFone]

Any other ideas?  It looks like the graphic is being constructed and is adding to my view, but it doesn't show up.  I can put the points in there without any issues so I know the graphics layer is working, just not this polygon.

[JohnGrayson]

Sounds like you might be looking to create the convex hull around a set of points?  Maybe something similar to this might work for your needs: https://codepen.io/john-grayson/pen/NWbLGaR If not, maybe you could provide a CodePen using your data so we can see what might be going on?

[FrankLaFone]

That didn't work either.  The hullGraphic seems to be getting populated but the graphic never shows itself on the view.  I can't seem to get a Codepen working correctly because the application currently uses a localized CSV file for an important step before this graphic gets generated.  However, here is the relevant function:

Note that below the code, errr... below, I have copied the code that just puts the points on the map.  It works fine.  But if I swap it out for the convex hull it does not.  Ideally I'd like to have both.  

makePolicyExtentMap: function(LandUseCodes, countyCode){
console.log("Land Use Codes: "+LandUseCodes);

var queryTask = new QueryTask({
url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Planning_Cadastre/WV_Parcels/MapServer/11"
});
var query = new Query();
query.returnGeometry = true;
query.outFields = ["*"];
query.where = "LandUseCode="+ LandUseCodes + " AND CountyCode="+ countyCode;

queryTask.execute(query).then(function(results){
//console.log(results.features);

var parcelIDResults = [];
for(let i=0;i<results.features.length;i++){
parcelIDResults.push(results.features[i].attributes["CleanParcelID"]);
}

console.log(parcelIDResults.length);

var parcelIDS = "";
for(let j=0;j<results.features.length;j++){
parcelIDS += "'"+parcelIDResults[j]+"',";
}

parcelIDS = parcelIDS.substring(0, parcelIDS.length - 1);

var queryTask = new QueryTask({
url: "https://services.wvgis.wvu.edu/arcgis/rest/services/Planning_Cadastre/WV_Parcels/MapServer/0"
});

var parcelsQuery = new Query();
parcelsQuery.returnGeometry = true;
parcelsQuery.outFields = ["*"];
parcelsQuery.where = "CleanParcelID IN ("+parcelIDS+")";

queryTask.execute(parcelsQuery).then(function(results){

const points = new Multipoint({
spatialReference: App.policyView.spatialReference,
points: results.features.map(feature => {
return [
feature.geometry.centroid.x,
feature.geometry.centroid.y
];
})
});

// CONVEXHULL //
const hullPolygon = geometryEngine.convexHull(points);
const hullGraphic = new Graphic({
geometry: hullPolygon,
symbol: {
type: 'simple-fill',
color: 'transparent',
outline: { color: 'red', width: 1.8 }
}
});
console.log(hullGraphic);
App.policyView.graphics.add(hullGraphic);

});
});

},

THIS IS THE WORKING POINT ONE

const simpleMarkerSymbol = {
type: "simple-marker",
//color: [ 20, 130, 200, 0.5 ],
color: [ 255, 99, 71, 0.85 ],
outline: {
color: "white",
width: 1
},
};
results.features.map((feature) => {
feature.symbol = simpleMarkerSymbol;
return feature;
});
App.policyView.graphics.removeAll();

// Add features to graphics layer
App.policyView.graphics.addMany(results.features);

[JohnGrayson]

Could you maybe create a CodePen where a few of the locations from the csv are created manually?

[FrankLaFone]

https://codepen.io/flafone/pen/ExNdQEy

Hopefully that works...

[JohnGrayson · Accepted solution]

You need to make sure you're returning the geometries from your query in the correct spatial reference or you'll subsequently be creating geometries with a defined spatial reference different than the coordinates themselves.

parcelsQuery.outSpatialReference = App.policyView.spatialReference;       

https://codepen.io/john-grayson/pen/eYBPMgv

I hope this helps...