JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<script src="http://js.arcgis.com/3.13"></script>
<div id="mapDiv" class="map">
</div>
CSS
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
html, body, #mapDiv{
height: 100%;
margin: 0;
padding: 0;
}
JavaScript
var map;
require([
"dojo/on",
"esri/map",
"esri/layers/FeatureLayer",
"esri/layers/LabelLayer",
"esri/symbols/TextSymbol",
"esri/renderers/SimpleRenderer",
"esri/Color",
"esri/symbols/Font",
"dojo/domReady!"], function(on, Map, FeatureLayer, LabelLayer, TextSymbol, SimpleRenderer, Color, Font) {
map = new Map("mapDiv", {
basemap: "topo",
center: [-118.4, 34.08],
zoom: 14
});
treeLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0", {
outFields: ["*"]
});
var arialSmall = new Font("10pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Arial");
var symbolSmall = new TextSymbol();
var darkColor = new Color([0,38,115]);
symbolSmall.setFont(arialSmall);
symbolSmall.setColor(darkColor);
var rendererSmall = new SimpleRenderer(symbolSmall);
treeLabels = new LabelLayer();
treeLabels.addFeatureLayer(treeLayer, rendererSmall, "There are {Point_Count} trees within census block {BLOCKCE10}");
map.addLayers([treeLayer,treeLabels]);
on(treeLabels, 'graphic-node-add', function (addedGraphicNode) {
addedGraphicNode.node.style.textShadow = "1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white";
});
});