How to create a new FeatureLayer from a Graphic

JonM_ · ‎12-13-2019

I'm attempting to manually create a new FeatureLayer from client side Graphics. I cannot figure out where I am going wrong, but the FeatureLayer is not visible on the map. My code is below:

<!DOCTYPE html>
<html>
    <head>
        <title>CreateLayer</title>
        <style>
            html,
            body,
            #ViewMap_div {
                    margin: auto;
                    height: 95%;
                    width: 95%;
            }
        </style>
        
        <script src="https://js.arcgis.com/4.13/"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css"/>
        
        <script>
            require([
                "esri/Map",
                "esri/WebMap",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/layers/GraphicsLayer",
                "esri/layers/FeatureLayer",
                "esri/geometry/Point",
            ], function(Map, WebMap, MapView, Graphic, GraphicsLayer, FeatureLayer, Point){

                // create the map view
                var map = new WebMap({
                    basemap: 'hybrid'
                });

                var view = new MapView({
                    container: "ViewMap_div",
                    map: map,
                    center: [-76, 37],
                    zoom: 10,
                    extent: {
                        spatialReference: 4326
                    }
                });

                var pointGL = new Graphic({
                        geometry: {
                            type: "point",
                            longitude: -76,
                            latitude: 37
                        },
                        attributes: {
                            ObjectID: 1,
                            ProjectName: 'ProjA',
                            SiteName: 'SiteA'
                        }
                    });
                
                var fl = new FeatureLayer({
                    source: pointGL,
                    renderer: {
                        type: "simple",
                        symbol: {
                            type: "simple marker",
                            color: "green",
                            outline: {
                                color: "red",
                                width: 2
                            }
                        }
                    },
                    fields: [
                        {
                            name: "ObjectID",
                            alias: "ObjectID",
                            type: "oid"
                        },
                        {
                            name: "ProjectName",
                            alias: "ProjectName",
                            type: "string"
                        },
                        {
                            name: "SiteName",
                            alias: "SiteName",
                            type: "string"
                        }
                    ],
                    objectIDField: "ObjectID"
                });
                
                map.add(fl);
                
                /* create GraphicsLayer for the pointGL Graphic
                var gl = new GraphicsLayer({
                    graphics: pointGL
                });
                map.add(gl);
                */
            });
        </script>
        
    </head>

    <body>
        <div id = "ViewMap_div"></div>
    </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If you un-comment the section at the end creating a GraphicsLayer from the pointGL Graphic, it is clear that the Graphic is formed properly. For some reason, the new FeatureLayer is not being created, or is not displaying on the map.

The ultimate goal is to take user-defined lat/long coordinates, create a Graphic from them, then create a new FeatureLayer from that. If someone could point me in the right direction, I'd really appreciate it.

Thank you.

Noah-Sager · ‎12-13-2019

There are a couple issues with the code, but I think the main one is that the source property of FeatureLayer expects an array, not a single object.

FeatureLayer | ArcGIS API for JavaScript 4.13

I cleaned-up your code and got it working like this:

https://codepen.io/noash/pen/jOEMVqg

View solution in original post

Noah-Sager · ‎12-13-2019

There are a couple issues with the code, but I think the main one is that the source property of FeatureLayer expects an array, not a single object.

FeatureLayer | ArcGIS API for JavaScript 4.13

I cleaned-up your code and got it working like this:

https://codepen.io/noash/pen/jOEMVqg

JonM_ · ‎12-15-2019

That was it - it needed an array. Thank you very much for your help.

julienrobitaille · ‎11-16-2020

Hello,

I would like to know how you got to access the attribute values from each point of the Feature Layer created?

If I add what the code below to yours and I click on the point of the map, the only attributes of the point is the one set as the objectIDField.

view.on("click",
function(event) {
//console.log(event)
view.hitTest(event).then(getGraphics);

});

function getGraphics(response) {
console.log(response.results[0].graphic.attributes)
}

How can one access the attributes set when the graphic point is created?

Thank you!