topic Re: How do I Create a Polygon FeatureLayer with client side graphics? in ArcGIS JavaScript Maps SDK Questions

How do I Create a Polygon FeatureLayer with client side graphics?

AmandaBrioche1 — Fri, 05 May 2017 14:39:21 GMT

I've found this ArcGIS API example which has been extremely helpful, but I can't seem to figure out how to format it to produce polygon geometry. I think that my main problem is formatting the polygon features to get the coordinates from my json file. This is the section of my code I believe is giving me a problem:

     /**************************************************
       * Create graphics with returned geojson data
       **************************************************/

      function createGraphics(response) {
        // raw GeoJSON data
        var geoJson = response.data;

        // Create an array of Graphics from each GeoJSON feature
        return arrayUtils.map(geoJson.features, function(features, i) {
          return {
            geometry: new Polygon({
               "rings":[
                   [features.geometry.coordinates[0],
                   features.geometry.coordinates[1]],
                   [features.geometry.coordinates[0],
                   features.geometry.coordinates[1]],
                   [features.geometry.coordinates[0],
                   features.geometry.coordinates[1]],
                   [features.geometry.coordinates[0],
                   features.geometry.coordinates[1]],
                   [features.geometry.coordinates[0],
                   features.geometry.coordinates[1]],
                ]
            }),
            // select only the attributes you care about
            attributes: {
              ObjectId: i,
              name: features.attributes.Name
            }
          };
        });
      }

Re: How do I Create a Polygon FeatureLayer with client side graphics?

ThomasSolow — Sat, 11 Dec 2021 18:46:52 GMT

It looks to me like the issue is the polygon rings. Polygon rings should follow this format:

rings:[ // array of rings
   [ // first ring
     [<vertex1X>, <vertex1Y>], //coords
     [<vertex2X>, <vertex2Y>],
     [<vertex3X>, <vertex3Y>],
     [<...>, <...>], // for however many vertices you have
     [<vertex1X>, <vertex1Y>]   
   ]
]‍‍‍‍‍‍‍‍‍

You could try changing your code to something like this:

function createGraphics(response) {
  // raw GeoJSON data
  var geoJson = response.data;
 
  // Create an array of Graphics from each GeoJSON feature
  // changed feature in callback to feature to be more accurate
  return arrayUtils.map(geoJson.features, function(feature, i) {
    return {
      geometry: new Polygon({
        rings: feature.geometry.coordinates
      }),
      // select only the attributes you care about
      attributes: {
        ObjectId: i,
        name: feature.attributes.Name
      }
    };
  });
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I changed the callback so it takes an argument of "feature" and I'm just passing in the coordinates in the geoJSON because it looks to me like the geoJSON polygon ring format is the same as Esri's format.

Re: How do I Create a Polygon FeatureLayer with client side graphics?

AmandaBrioche1 — Fri, 05 May 2017 16:09:39 GMT

Thank you! I've attached an updated version of my code. It still doesn't quite work yet, but I have other mistakes I need to fix up. I'm going to work on fixing some of my other errors and incorporate your help.