How to create a new FeatureLayer from a Graphic

JonM_ — Sat, 11 Dec 2021 13:41:35 GMT

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.

Re: How to create a new FeatureLayer from a Graphic

Noah-Sager — Sat, 14 Dec 2019 00:14:09 GMT

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

Re: How to create a new FeatureLayer from a Graphic

JonM_ — Mon, 16 Dec 2019 00:16:48 GMT

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

Re: How to create a new FeatureLayer from a Graphic

julienrobitaille — Mon, 16 Nov 2020 18:30:47 GMT

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!

topic How to create a new FeatureLayer from a Graphic in ArcGIS JavaScript Maps SDK Questions

How to create a new FeatureLayer from a Graphic

Re: How to create a new FeatureLayer from a Graphic

Re: How to create a new FeatureLayer from a Graphic

Re: How to create a new FeatureLayer from a Graphic