How to create a new FeatureLayer from a Graphic

2897
3
Jump to solution
12-13-2019 01:35 PM
JonM_
by
New Contributor II

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.

0 Kudos
1 Solution

Accepted Solutions
Noah-Sager
Esri Regular Contributor

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

0 Kudos
3 Replies
Noah-Sager
Esri Regular Contributor

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 

0 Kudos
JonM_
by
New Contributor II

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

julienrobitaille
New Contributor III

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!

0 Kudos