Convert Polyline Graphic to FeatureLayer

Question

Using version 4.7 of the JavaScript API:

I have a Polyline graphic which displays fine on a SceneView

var polylinePaths = [[-118.1, 34.1], [-118.1, 34.2], [-118.2, 34.2], [-118.2, 34.3], [-118.3, 34.3], [-118.3, 34.4], [-118.4, 34.4], [-118.4, 34.1], [-118.2, 34.1]];

var polyline = new Polyline({ hasZ: false, hasM: false, paths: polylinePaths });

var polylineSymbol = { type: "simple-line", color: "yellow", width: 2, style: "solid" };

var polylineGraphic = new Graphic(polyline, polylineSymbol);

view.graphics.add(polylineGraphic);

I need to add it to the map as a Polyline FeatureLayer sourced from a JSON file. Could someone help me create the JSON file (in the correct format) containing the above paths and the simplest possible code to add the Polyline code to the map?

I have tried various ways and also looked at Robert Scheitlin's answer to 'How to create a FeatureLayer containing polylines?' but still have not managed to get it working.

Any help would be much appreciated.

Thanks,

Shane

rscheitlin · Accepted Answer

Shane, Do get a Polyline geometry from a JSON String you have to follow the ArcGIS Rest API specification for a Polyline: polyline_geometry | ArcGIS for Developers Here is a sample using your coordinates: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Create FeatureLayer from JSON - 4.7</title> <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css"> <script src="https://js.arcgis.com/4.7"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .esri-legend { background-color: black; color: white; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Legend", "dojo/domReady!" ], function( Map, MapView, FeatureLayer, Legend ) { var otherSym = { type: "simple-line", // autocasts as new SimpleLineSymbol() color: "#EBEBEB", width: 3, style: "short-dot" }; var lineRenderer = { type: "simple", symbol: otherSym, }; var features = [{ "geometry": { type: "polyline", "paths": [ [-118.1, 34.1], [-118.1, 34.2], [-118.2, 34.2], [-118.2, 34.3], [-118.3, 34.3], [-118.3, 34.4], [-118.4, 34.4], [-118.4, 34.1], [-118.2, 34.1] ], "spatialReference": { "wkid": 4326 } } }] // Set the renderer on the layer var PolylineLyr = new FeatureLayer({ source: features, fields: [], objectIdField: "ObjectID", spatialReference: { wkid: 4326 }, geometryType: "polyline", renderer: lineRenderer }); // Add the layer to the map var map = new Map({ basemap: "dark-gray", layers: [PolylineLyr] }); var view = new MapView({ container: "viewDiv", map: map, center: [-118.3, 34.2], zoom: 11 }); var legend = new Legend({ view: view, layerInfos: [{ layer: PolylineLyr, title: "My PolyLine" }] }); view.ui.add(legend, "bottom-left"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍