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: 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 > 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.

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to create a new FeatureLayer from a Graphic

JonM_

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:

<SPAN class="doctype token"><!DOCTYPE html></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
        <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>CreateLayer<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
        <SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
            <SPAN class="selector token">html,
            body,
            #ViewMap_div</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> auto<SPAN class="punctuation token">;</SPAN>
                    <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 95%<SPAN class="punctuation token">;</SPAN>
                    <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 95%<SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
        <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
        
        <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.13/<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
        <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.13/esri/themes/light/main.css<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">/></SPAN></SPAN>
        
        <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
            <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
                <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
                <SPAN class="string token">"esri/WebMap"</SPAN><SPAN class="punctuation token">,</SPAN>
                <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
                <SPAN class="string token">"esri/Graphic"</SPAN><SPAN class="punctuation token">,</SPAN>
                <SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
                <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
                <SPAN class="string token">"esri/geometry/Point"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> WebMap<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> GraphicsLayer<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> Point<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>

                <SPAN class="comment token">// create the map view</SPAN>
                <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                    basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'hybrid'</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                    container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ViewMap_div"</SPAN><SPAN class="punctuation token">,</SPAN>
                    map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
                    center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">76</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">37</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
                    zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">,</SPAN>
                    extent<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        spatialReference<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4326</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

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

    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
        <div id = "ViewMap_div"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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.

Find more posts tagged with

Accepted answers

Noah Sager

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

All comments

julienrobitaille

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!

JonM_

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

Noah Sager

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.