topic Re: Create polygon that holds a series of points in ArcGIS JavaScript Maps SDK Questions

Create polygon that holds a series of points

FrankLaFone — Fri, 05 Mar 2021 04:31:01 GMT

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)

Re: Create polygon that holds a series of points

UndralBatsukh — Fri, 05 Mar 2021 16:15:02 GMT

Hi there,

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

Re: Create polygon that holds a series of points

FrankLaFone — Fri, 05 Mar 2021 16:20:22 GMT

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
}};

Re: Create polygon that holds a series of points

UndralBatsukh — Fri, 05 Mar 2021 20:50:41 GMT

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,

Re: Create polygon that holds a series of points

FrankLaFone — Fri, 05 Mar 2021 22:41:27 GMT

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.

Re: Create polygon that holds a series of points

JohnGrayson — Fri, 05 Mar 2021 23:40:28 GMT

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?

Re: Create polygon that holds a series of points

FrankLaFone — Mon, 08 Mar 2021 17:14:03 GMT

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);

Re: Create polygon that holds a series of points

JohnGrayson — Mon, 08 Mar 2021 19:19:29 GMT

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

Re: Create polygon that holds a series of points

FrankLaFone — Mon, 08 Mar 2021 19:33:08 GMT

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

Hopefully that works...

Re: Create polygon that holds a series of points

JohnGrayson — Mon, 08 Mar 2021 20:23:13 GMT

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

Re: Create polygon that holds a series of points

FrankLaFone — Mon, 08 Mar 2021 20:51:45 GMT

That did it! Although... I now know "Convex Hull" isn't what I want. But at least graphics are showing up again. I don't know why it works with points but not polygons but... eh, I'm not going to lose too much sleep over it. Thanks for the help!