FeatureLayer PolyLines labels in JS 4.X

785
2
Jump to solution
03-19-2019 01:29 PM
nita14
by
Occasional Contributor III

Hi All,

Does anybody know if labels for polylines are supported in 4.x? Any working example?

Here is the simple JS snippet trying to label polylines, but without success:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to FeatureLayer - 4.10</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer"
      ],
      function(
        Map, MapView,
        FeatureLayer
      ) {

        var map = new Map({
          basemap: "hybrid",
        });

        var view = new MapView({
          container: "viewDiv",
          map: map
          
          

        });

        /********************
         * Add feature layer
         ********************/
         
      const labelClass = { // autocasts as new LabelClass()
        symbol: {
          type: "text", // autocasts as new TextSymbol()
          color: "green",
          haloColor: "white",
          font: { // autocast as new Font()
            family: "playfair-display",
            size: 12,
            weight: "bold"
          }
        },
        labelExpressionInfo: {
          expression: "$feature.condition"
        }
      };

        // Carbon storage of trees in Warren Wilson College.
        var featureLayer = new FeatureLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/LocalGovernment/Recreation/FeatureServer/1",
          outFields: ["*"],
          labelingInfo: [labelClass],
          labelsVisibleBoolean: true
        });

        map.add(featureLayer);

      });
  </script>
</head>

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

</html>

Any ideas?

BR,

Adam

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Adam,

  Actually your sample is working fine there is a 0 or 1 or 2 small and green on the lines. I made some changes to the font size and color and basemap and this is what I see:

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Emeritus

Adam,

  Actually your sample is working fine there is a 0 or 1 or 2 small and green on the lines. I made some changes to the font size and color and basemap and this is what I see:

nita14
by
Occasional Contributor III

Thanks Robert!

0 Kudos