Convert Polyline Graphic to FeatureLayer

1195
2
Jump to solution
06-12-2018 03:11 AM
Shane_
by
New Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Emeritus

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
Shane_
by
New Contributor II

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.

0 Kudos