Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Label features using Arcade expressions
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
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.29/esri/css/esri.css">
<script src="https://js.arcgis.com/3.29/"></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>