Have GraphicsLayer working but now need to put it in or convert to FeatureLayer (JavaScript)

Question

I have a GraphicsLayer working for "Regions" and the corresponding popup template information for the staff within each region (below).

        function fillRegionMarkers() {

            // Create a symbol for drawing the point
            var markerSymbol = {
              type: "picture-marker",  // autocasts as new SimpleMarkerSymbol()
              url: "https://SomeUrl/map-pin-16.png",
              height: "14pt",
              width: "14pt"
            };

            // Create Graphic Layer
            var gl = new GraphicsLayer({ id: "RegionPoints" }); 

            //outside loop: REGIONS
            $.each(arrRegions, function(idxRegion, elementRegion) {

                // First create a point geometry
                var point = {
                  type: "point",  // autocasts as new Point()
                  longitude: elementRegion.Longitude,
                  latitude: elementRegion.Latitude
                };  

                var DCODCEInfo = "";

                //inside loop: DCO/DCE STAFF
                $.each(arrDCODCE, function(idxDCODCE, elementDCODCE) {

                    if (elementRegion.Id == elementDCODCE.Region.Id) {
                        //Should never be null, so no need for... if (elementData.lat && elementData.lon)
                        //lat and long should never be both 0, so no need for... if (elementData.lat != 0 && elementData.lon != 0)
                        DCODCEInfo += "Position: " + elementDCODCE.Position + "<br/>" + "POC: " + elementDCODCE.StaffInfo + "<br/><br/>";
                    }
                })      

                var template = {
                    title: "<div style='font-size:12px;text-style:italic;font-weight:normal;'>(<a href='https://SomeUrl/FEMA_Regional_Map.jpg' target='_blank'>All Regions Map</a>)</div><br/>Region: " + elementRegion.FEMARegion + "<br/>Location: " + elementRegion.Location,
                    content: [{
                        type: "text",
                        text: DCODCEInfo
                    }]
                };

                // Create a graphic and add the geometry and symbol to it
                var pointGraphic = new Graphic({
                  geometry: point,
                  symbol: markerSymbol,
                  popupTemplate: template
                });

                //layer.add(pointGraphic);
                gl.graphics.add(pointGraphic);
            })

            //Add graphics layer to map
            map.add(gl);
        }

The problem is a URL feed with a FeatureLayer is now being used to show Regions (below).

    var featureLayer = new FeatureLayer({
      url:
        "https://SomeUrl/Regions/FeatureServer/0",
      title: "Regions",
      visible: true

    });

    map.add(featureLayer);  

This FeatureLayer does not have the DCO/DCE staff or pinned lat/long locations like the GraphicLayer has. So how do I add or convert this GraphicLayer to a FeatureLayer?

Answer 1

I think the main difference here is that instead of creating the graphic.PopupTemplate from scratch and building up that string, you can use popupTemplate instead, and the associated createPopupTemplate() function. Example here.