How to create a FeatureLayer containing polylines?

ChadSchwendiman · ‎10-17-2017

Using ArcGIS JavaScript 4.x can someone please point me to an example of creating a map with a FeatureLayer containing polylines?

I have a working sample of a FeatureLayer with PictureMarkerSymbol but I have so-far failed to create a FeatureLayer with polyline graphics.

Any help is greatly appreciated!

RobertScheitlin__GISP · ‎10-18-2017

Chad,

Here is a sample that shows polylines and specifying line symbology:

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=visualization-...

View solution in original post

RobertScheitlin__GISP · ‎10-18-2017

Chad,

Here is a sample that shows polylines and specifying line symbology:

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=visualization-...

ChadSchwendiman · ‎10-18-2017

Thanks Robert. I have seen this example and it doesn't match my needs but I will study it more closely and maybe ask a follow-up question.

I will try to modify this example to not retrieve its polyline data from a featureserver (which more closely matches my goal).

RobertScheitlin__GISP · ‎10-18-2017

Chad,

The FeatureLayer can easily be change to a MapServer url instead of a FeatureServer.

ChadSchwendiman · ‎10-18-2017

I made the edits I wanted to the highway example. My goal was to define the graphics in the client. In case anyone in the future wants a really simple example here is the example with the edits I made.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Visualize features by type - 4.5</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
  <script src="https://js.arcgis.com/4.5"></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
      ) {

        /******************************************************************
         *
         * Define symbols for each unique type. One each for freeways,
         * highways, and other major roads
         *
         ******************************************************************/
        ///////////////////////////////////////////////////////////////////////
        // EDIT:
        // I'm going to use a simple renderer so I only need one symbol type.
        // Comment out unused symbols.
        //////////////////////////////////////////////////////////////////////
        // Symbol for freeways
        // var fwySym = {
        //   type: "simple-line", // autocasts as new SimpleLineSymbol()
        //   color: "#FFAA00",
        //   width: 10,
        //   style: "solid"
        // };

        // // Symbol for U.S. Highways
        // var hwySym = {
        //   type: "simple-line", // autocasts as new SimpleLineSymbol()
        //   color: "#DF73FF",
        //   width: 7,
        //   style: "solid"
        // };

        // Symbol for other major highways
        var otherSym = {
          type: "simple-line", // autocasts as new SimpleLineSymbol()
          color: "#EBEBEB",
          width: 3,
          style: "short-dot"
        };

        /******************************************************************
         *
         * Set each unique value directly in the renderer's constructor.
         * At least one field must be used (in this case the "CLASS" field).
         * The label property of each unique value will be used to indicate
         * the field value and symbol in the legend.
         *
         ******************************************************************/

        ///////////////////////////////////////////////////////////////////////
        // EDIT:
        // I want this to be really basic so just use a SimpleRenderer and 
        // point it to the one type of symbol I'm using. Comment out the
        // unique-value stuff I'm not using.
        ///////////////////////////////////////////////////////////////////////
        var hwyRenderer = {
          //type: "unique-value", // autocasts as new UniqueValueRenderer()
          type: "simple",
          symbol: otherSym,
        //  defaultSymbol: otherSym,
        //   defaultLabel: "Other major roads",
        //   field: "CLASS",
        //   uniqueValueInfos: [{
        //     value: "I", // code for interstates/freeways
        //     symbol: fwySym,
        //     label: "Interstate"
        //   }, {
        //     value: "U", // code for U.S. highways
        //     symbol: hwySym,
        //     label: "US Highway"
        //   }]
        };

        ///////////////////////////////////////////////////////////////////////
        // EDIT:
        // Define a list of client side graphics to render on the feature 
        // layer. These are just polylines that make up two boxes.
        ///////////////////////////////////////////////////////////////////////
        var features = [
            {
                geometry: {
                    type: "polyline",
                    paths: [
                        [-118, 34],
                        [-118, 34.15],
                        [-118.35, 34.15],
                        [-118.35, 34],
                        [-118, 34]
                    ]
                }
            }, 
            {
                geometry: {
                    type: "polyline",
                    paths: [
                        [-118.1, 34.05],
                        [-118.1, 34.1],
                        [-118.25, 34.1],
                        [-118.25, 34.05],
                        [-118.1, 34.05]
                    ]
                }
            }
        ]

        ///////////////////////////////////////////////////////////////////////
        // EDIT:
        // I'm using client-side graphics so don't point to a feature server
        // and do populate the sources property with the features to render on
        // the layer. Because I'm using client-side graphics I also need to 
        // set:
        //  fields (as an empty array because I don't have any data associated
        //         with the features), objectIdField (it's value isn't important 
        //         because I'm not using popup)
        //  spatialReference - docs say it is required but works if commented out
        //  geometryType - I'm drawing polylines
        ///////////////////////////////////////////////////////////////////////
        // Set the renderer on the layer
        var hwyLyr = new FeatureLayer({
          //url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_Freeway_System/FeatureServer/2",
          source: features,
          fields: [],
          objectIdField: "ObjectID",
          spatialReference: { wkid: 4326 },
          geometryType: "polyline",
          renderer: hwyRenderer
        });

        // Add the layer to the map
        var map = new Map({
          basemap: "dark-gray",
          layers: [hwyLyr]
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-118.2438934, 34.058481],
          zoom: 12
        });

        /******************************************************************
         *
         * Add layers to layerInfos on the legend
         *
         ******************************************************************/

        var legend = new Legend({
          view: view,
          layerInfos: [
          {
            layer: hwyLyr,
            title: "Major Roads"
          }]
        });

        view.ui.add(legend, "bottom-left");
      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍