labs/jsapi/label_with_arcade/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Arcade Labels</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.11/"></script>

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

    <script type="text/plain" id="amenities">
      var i = 0;
      var features = [];
      
      if ($feature.TastingRoo != " ") {
          features[i++] = "-Tasting Room Onsite";
      }
      if ($feature.GroupTour != " ") {
          features[i++] = "-Tours Available";
      }
      if ($feature.PicnicArea != " ") {
          features[i++] = "-Picnic Area Onsite";
      }
      if ($feature.FoodAvaila != " ") {
          features[i++] = "-Food Available Onsite";
      }
      
      return Concatenate(features, TextFormatting.NewLine)
    </script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/geometry/Extent"
      ], function(Map, MapView, FeatureLayer, Extent) {
        
        var minScale = 100000;
        var map = new Map({
          basemap: "gray-vector",
          
        })
        var extent = new Extent ({
      	  xmin: -83.7,
      	  ymin: 36.4,
      	  xmax: -75.7,
      	  ymax: 39.6
        })
        var view = new MapView({
          container: "viewDiv",
          map: map,
          extent: extent
        });

        var nameClass = {
          labelPlacement: "above-right",
          labelExpressionInfo: {
            expression: "$feature.NAME"
          },
          minScale: minScale
        };
        nameClass.symbol = createTextSymbol("black");
        
        var amenitiesArcade = document.getElementById("amenities").text;
        var amenitiesClass = {
          labelExpressionInfo: {
            expression: amenitiesArcade
          },
          labelPlacement: "below-right",
          minScale: minScale
        };
        amenitiesClass.symbol = createTextSymbol("#3ba53f");

        var serviceUrl =
          "https://services5.arcgis.com/cMBqYE4wmbXNMvex/ArcGIS/rest/services/Virginia_Wineries/FeatureServer/1";
        var layer = new FeatureLayer({
          url: serviceUrl,
          renderer: {
            type: "simple",
            symbol: {
              type: "simple-marker",
              color: [128, 0, 128, 0.6],
              size: 10,
              outline: {
                color: [0, 0, 0, 0.4],
                width: 0.5
              }
            }
          },
          labelingInfo: [
            nameClass,
            amenitiesClass
          ]
        });

        view.map.add(layer);

        function createTextSymbol(color) {
          return {
            type: "text", // autocasts as new TextSymbol()
            font: {
              size: 12,
              weight: "bold"
            },
            color: "white",
            haloColor: color,
            haloSize: 1
          };
        }

      });
    </script>
  </head>

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