Loading GeoJSON into map using JavaScript API in ESRI

Question

I'm new to ESRI Map. I'm working on latest version of JavaScript API.

I'm trying to load GeoJSON from this link into my Map. I'm able to load GeoJSON from ESRI Feature Service URL.

I wanted to load GeoJSON from an object. My code goes like this.

require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Legend",
      "dojo/domReady!"
    ], function(
      Map, MapView, FeatureLayer, Legend
    ) {

      var defaultSym = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        outline: { // autocasts as new SimpleLineSymbol()
          color: "lightgray",
          width: 0.5
        }
      };

      var renderer = {
        type: "simple", // autocasts as new SimpleRenderer()
        symbol: defaultSym
      };

      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-85.050200, 33.125524],
        zoom: 4
      });

      var usOutline = ...... A single feature from the feature collection in link.
      var featureLayer = new FeatureLayer({
        source: usOutline.geometry,
        title: 'Hello',
        geometryType: "Polygon",
        renderer: renderer
      });

      map.add(featureLayer);


    });

How can I load the GeoJSON?

Answer 1

Check out this code snippet/post:

Importing GeoJSON data in ArcGIS Javascript maps

function requestData() {
  var requestHandle = esriRequest({
    url: "data/sample.json",
    callbackParamName: "jsoncallback"
  });
  requestHandle.then(requestSucceeded, requestFailed);
}

function requestSucceeded(response, io) {
  //loop through the items and add to the feature layer
  var features = [];
  array.forEach(response.features, function(item) {
    var attr = {};
    //pull in any additional attributes if required
    attr["some_other_field"] = item.properties.<some_chosen_field>;

    var geometry = new Point(item.geometry.coordinates[0], item.geometry.coordinates[1]);

    var graphic = new Graphic(geometry);
    graphic.setAttributes(attr);
    features.push(graphic);
  });

  featureLayer.applyEdits(features, null, null);
}

function requestFailed(error) {
  console.log('failed');
}

Answer 2

Use GeoJSONLayer for this task:

Ex:

  var stuffLayer = new GeoJSONLayer({
        url: "https://eric.clst.org/assets/wiki/uploads/Stuff/gz_2010_us_040_00_500k.json"
  });

  var map = new Map({
    basemap: "streets",
    layers: [stuffLayer]
  });

Read more here: https://developers.arcgis.com/javascript/latest/sample-code/layers-geojson/index.html