gubser/text-symbol-halo.html

## text-symbol-halo.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>TextSymbol with Halo - 4.9</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/layers/GraphicsLayer"
    ], function(Map, MapView, Graphic, Point, SimpleMarkerSymbol, GraphicsLayer) {

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

      var simpleMarkerGraphic = new Graphic({
        geometry: new Point({
          x: 15,
          y: 65
        }),
        symbol: {
          type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
          style: "square",
          color: "blue",
          size: "8px",  // pixels
          outline: {  // autocasts as new SimpleLineSymbol()
            color: [ 255, 255, 0 ],
            width: 3  // points
          }
        }
      });

      var textGraphic = new Graphic({
        geometry: new Point({
          x: 15.1,
          y: 65.1
        }),
        symbol: {
          type: "text", // autocasts as new TextSymbol()
          text: "Hello World",
          color: "black",
          haloSize: "3px",
          haloColor: "red",
          font: {
            size: 12,
            family: "sans-serif",
            weight: "bold"
          }
        }
      });

      var layer = new GraphicsLayer({
        graphics: [simpleMarkerGraphic, textGraphic]
      });
      map.layers.add(layer);

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65] // longitude, latitude
      });

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<title>TextSymbol with Halo - 4.9</title>
	<style>
	html,
	body,
	#viewDiv {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	}
	</style>

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

	<script>
	require([
	"esri/Map",
	"esri/views/MapView",
	"esri/Graphic",
	"esri/geometry/Point",
	"esri/symbols/SimpleMarkerSymbol",
	"esri/layers/GraphicsLayer"
	], function(Map, MapView, Graphic, Point, SimpleMarkerSymbol, GraphicsLayer) {

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

	var simpleMarkerGraphic = new Graphic({
	geometry: new Point({
	x: 15,
	y: 65
	}),
	symbol: {
	type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
	style: "square",
	color: "blue",
	size: "8px", // pixels
	outline: { // autocasts as new SimpleLineSymbol()
	color: [ 255, 255, 0 ],
	width: 3 // points
	}
	}
	});

	var textGraphic = new Graphic({
	geometry: new Point({
	x: 15.1,
	y: 65.1
	}),
	symbol: {
	type: "text", // autocasts as new TextSymbol()
	text: "Hello World",
	color: "black",
	haloSize: "3px",
	haloColor: "red",
	font: {
	size: 12,
	family: "sans-serif",
	weight: "bold"
	}
	}
	});

	var layer = new GraphicsLayer({
	graphics: [simpleMarkerGraphic, textGraphic]
	});
	map.layers.add(layer);

	var view = new MapView({
	container: "viewDiv",
	map: map,
	zoom: 4,
	center: [15, 65] // longitude, latitude
	});

	});
	</script>
	</head>

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