ArcGIS JS API – Failed to Load Feature Layer

arcgis-javascript-apiarcgis-javascript-api-4feature-layerpoint

I want to add test feature on my ArcGIS map using feature layer. I create layer using Graphic as a source. After a lot of googling I create my point the following way:

require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/geometry/SpatialReference",
"esri/renderers/SimpleRenderer",
"dojo/domReady!"
],
    function (Map, MapView, TileLayer, FeatureLayer, Graphic, Point, SimpleMarkerSymbol, SpatialReference, SimpleRenderer) {
        var map = new Map({
            layers: [
                new TileLayer({
                    url: "https://gis.ngdc.noaa.gov/arcgis/rest/services/arctic_ps/arctic_basemap/MapServer"
                })
            ]
        });

        var viewSpatialReference = 3995;

        var point = new Point({
            x: 1000000,
            y: -1000000,
            spatialReference: new SpatialReference({ wkid: viewSpatialReference })
        });

        var renderer = new SimpleRenderer({
            symbol: new SimpleMarkerSymbol({
                size: 100000,
                color: "#FF4000",
                outline: {
                    color: [255, 64, 0, 0.4],
                    width: 7
                }
            })
        });
        var graphic = new Graphic({
            geometry: point,
            attributes: {
                id: 0
            }
        });

        var fields = [
            {
                name: "id",
                alias: "id",
                type: "oid"
            }
        ];
        var featureLayer = new FeatureLayer({
                source: graphic,
                fields: fields,
                objectIdField: "id",
                renderer: renderer,
                spatialReference: {
                    wkid: viewSpatialReference
                },
                geometryType: "point"
        });

        //map.on("load", function () {
              console.log('load event called');
              map.layers.add(featureLayer);
        //});

        var centerPoint = {
            x: 1000000,
            y: -1000000,
            spatialReference: viewSpatialReference
        };

        var viewOptions = {
            container: "map",
            map: map,
            viewingMode: "local",
            spatialReference: viewSpatialReference,
            scale: 12000000,
            center: centerPoint
        };

        var view = new MapView(viewOptions);
    });

Map is loading fine, but test point isn't appear. If I use this code, I get two errors in console:

[esri.layers.FeatureLayer] #load() Failed to load layer (title: 'null', id: '16a2638ea4d-layer-1') TypeError: this.source.load is not a function
at Object.r.createGraphicsSource (dojo.js:2178)

[esri.views.LayerViewFactory] Failed to create view for layer 'null, id:16a2638ea4d-layer-1' of type 'feature'. {error: TypeError: this.source.load is not a function at Object.r.createGraphicsSource (https://js.arcgis.com/4.10/dojo/dojo.js:2178:377)}

I think cause of this errors is map is not yet loaded when I create try to create layer. I commented map.on("load", function (){}) call as if I use it there is no errors in console at all. I research script using browser debugger and find out that function body isn't executed for some reason.

Maybe I miss something in layer creating. I set huge size for marker to exclude possibility, that marker is just small. I also make example in Fiddle for your comfort.

Best Answer

First, your graphics should be wrapped in an array. Simply change

var featureLayer = new FeatureLayer({
                source: graphic,
                fields: fields,
                objectIdField: "id",
                renderer: renderer,
                spatialReference: {
                    wkid: viewSpatialReference
                },
                geometryType: "point"
        });

to

var featureLayer = new FeatureLayer({
                source: [graphic],
                fields: fields,
                objectIdField: "id",
                renderer: renderer,
                spatialReference: {
                    wkid: viewSpatialReference
                },
                geometryType: "point"
        });

Next, I'm not sure how familiar you were with the 3.x JS API, but in that map.on("load"... was a common workflow.

I haven't worked with 4.x for a while, but I think you want to apply the same idea, but use the view.when() syntax. Instead of map.on("load"... use view.when(... after you created the view at the bottom of the script.

working fiddle: https://jsfiddle.net/vgf5cryz

Related Question