Hide Table of Contents
View Label features using Arcade expressions sample in sandbox
Label features using Arcade expressions

Description

This sample demonstrates how to label features using an Arcade expression. Arcade is a simple, lightweight scripting language that can evaluate expressions at runtime. You can access feature attributes within Arcade using the $feature global variable. For example, to label cities with a CITY_NAME field, you can do so in the following manner: $feature.CITY_NAME. Arcade provides a series of built-in functions that allow you to perform mathematical calculations and logical operations within your expression. The final line of the expression must evaluate to a string or a number.

For example, this sample uses the When() function to reclassify wind direction values to either N, NE, E, SE, S, SW, W, or NW. The final line of the wind direction expression is what is returned as the label text. To read more details about Arcade and its syntax, see the Arcade guide page.

Code

<!DOCTYPE html>
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; 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/3.21/esri/css/esri.css">
<script src="https://js.arcgis.com/3.21/"></script>

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





<script type="text/plain" id="wind-direction">
  // WIND DIRECTION

  var DEG = $feature.WIND_DIRECT;
  var SPEED = $feature.WIND_SPEED;
  var DIR = When( SPEED == 0, null,
    (DEG < 22.5 && DEG >= 0) || DEG > 337.5, 'N',
     DEG >= 22.5 && DEG < 67.5, 'NE',
     DEG >= 67.5 && DEG < 112.5, 'E',
     DEG >= 112.5 && DEG < 157.5, 'SE',
     DEG >= 157.5 && DEG < 202.5, 'S',
     DEG >= 202.5 && DEG < 247.5, 'SW',
     DEG >= 247.5 && DEG < 292.5, 'W',
     DEG >= 292.5 && DEG < 337.5, 'NW', null );
  var WIND = SPEED + ' mph ' + DIR;
  return WIND;
</script>

<script>
  require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "esri/layers/LabelClass",
    "esri/renderers/SimpleRenderer",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/TextSymbol",
    "esri/Color",
    "dojo/domReady!"
  ], function(Map, FeatureLayer, LabelClass, SimpleRenderer,
    SimpleMarkerSymbol, SimpleLineSymbol, TextSymbol, Color
  ) {

    var map = new Map("viewDiv", {
      basemap: "satellite",
      center: [ -89.5554, 45.4840 ],
      zoom: 9,
      showLabels: true
    });

    /////////////////////////////////
    ////                         ////
    //// temperature label class ////
    ////                         ////
    /////////////////////////////////

    // Arcade expression that converts the temperature to a
    // string and concatenates it with the degree symbol and units

    var tempArcade = "Round($feature.TEMP) + ' F';";

    var tempClass = new LabelClass({
      labelExpressionInfo: {
        expression: tempArcade
      },
      labelPlacement: "above-left",
      minScale: 2500000
    });
    tempClass.symbol = createTextSymbol("#4792c1", 11, { x: -3, y: 3 });


    //////////////////////////
    ////                  ////
    //// wind label class ////
    ////                  ////
    //////////////////////////

    // Arcade expression that determines the compass direction wind
    // is blowing based on a field indicating the compass degrees
    // of the wind direction. This is appended to the wind speed

    var windArcade = document.getElementById("wind-direction").text;

    var windClass = new LabelClass({
      labelExpressionInfo: {
        expression: windArcade
      },
      labelPlacement: "above-right",
      minScale: 2500000
    });
    windClass.symbol = createTextSymbol("#3ba53f", 11, { x: 3, y: 3 });

    //////////////////////////////
    ////                      ////
    //// humidity label class ////
    ////                      ////
    //////////////////////////////

    // Arcade expression that converts the humidity value
    // to a string and appends it to a % symbol.

    var humidityArcade = "$feature.R_HUMIDITY + '% RH'";

    var humidityClass = new LabelClass({
      labelExpressionInfo: {
        expression: humidityArcade
      },
      labelPlacement: "below-left",
      minScale: 2500000
    });
    humidityClass.symbol = createTextSymbol("#c17c47", 11, { x: -3, y: -3 });


    //////////////////////////////////
    ////                          ////
    //// station name label class ////
    ////                          ////
    //////////////////////////////////

    // Arcade expression that outputs the name of the station
    // based on teh STATION_NAME field

    var nameArcade = "$feature.STATION_NAME";

    var nameClass = new LabelClass({
      labelExpressionInfo: {
        expression: nameArcade
      },
      labelPlacement: "below-right",
      minScale: 2500000
    });
    nameClass.symbol = createTextSymbol("black", 11, { x: 3, y: -3 });


    // Create the layer and add it to the map

    var serviceUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/weather_stations_010417/FeatureServer/0";
    var layer = new FeatureLayer(serviceUrl, {
      outFields: [ "WIND_SPEED", "WIND_DIRECT", "TEMP", "STATION_NAME", "R_HUMIDITY", "DEW_POINT", "SKY_CONDTN" ]
    });

    // Add the label classes to the layer

    var renderer = new SimpleRenderer(createSymbol([255,255,255,1]));
    layer.setRenderer(renderer);
    layer.setLabelingInfo([ nameClass, tempClass, windClass, humidityClass ]);

    map.addLayer(layer);

    // function for creating a symbol symbol for visualizing cities and towns

    function createSymbol (color){
      var outline = new SimpleLineSymbol()
        .setColor(new Color([ 0, 0, 0, 0.4 ]))
        .setWidth(.5);

      return new SimpleMarkerSymbol()
        .setColor(new Color(color))
        .setSize(8)
        .setOutline(outline);
    }

    // function for creating a text symbol to be used in a label class

    function createTextSymbol(color, size, offset){
      var textSize = size + "pt";
      var textSymbol = new TextSymbol().setColor(new Color("#fff"));
      textSymbol.font.setSize(textSize);
      textSymbol.setHaloColor(new Color(color)).setHaloSize(1);
      textSymbol.yoffset = offset ? offset.y : null;
      textSymbol.xoffset = offset ? offset.x : null;

      return textSymbol;
    }
  });

</script>

</head>

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

</html>