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

Question

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

index.html.zip

CubaTest.geojson.zip

AmandaBrioche1 · Answer

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.

ThomasSolow · Answer

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.