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){
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);
});
</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.