Convert Polyline Graphic to FeatureLayer

Shane_ · ‎06-12-2018

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

RobertScheitlin__GISP · ‎06-12-2018

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎06-12-2018

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Shane_ · ‎06-12-2018

Thanks Robert. Creating the Polyline FeatureLayer from the hardcoded values works perfectly. I haven't gotten the loading from JSON working but I've decided to store the paths in a database instead and load them from there instead so I'm marking this question as answered. Thanks again, Shane.