Multi Line Text Symbol

on the ESRI JS API 3.14

by Alex Azuero

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.12/esri/css/esri.css">
<script src="https://js.arcgis.com/3.14/init.js"></script>
<script src="https://rawgit.com/Chaussette/esri.symbol.MultiLineTextSymbol/master/esri.symbol.MultiLineTextSymbol.js"></script>
<!-- SEE THE "EXTERNAL RESOURCES" PANEL ON THE LEFT TO SEE THE ADDED "MultiLineTextSymbol.js from -->
<!-- https://github.com/suytt/esri.symbol.MultiLineTextSymbol -->
<div id="map"></div>

CSS

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    height: 100%;
    width: 100%;
    margin: 0px;
}

JavaScript

require(['esri/arcgis/utils', "esri/symbols/TextSymbol", "esri/graphic", "esri/geometry/Point", "esri/Color"], function (arcgisUtils, TextSymbol, Graphic, Point, Color) {
    var createMapOptions = {
        mapOptions: {
            slider: true
        },
        usePopupManager: true, // since version 3.10

        geometryServiceURL: "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"

    };
    var webMapItemID = "cf58d9a115e84de9ac5613b8c9e0fe16";
    deferred = arcgisUtils.createMap(webMapItemID, "map", createMapOptions);

    deferred.then(function (response) {
        map = response.map;
        map.graphics.add(new Graphic(
            	new Point(-87.79, 41.98),
            	// MULTI LINE USING "\n":
                new TextSymbol("Multi-Line \n Text", null, new Color([255,0,0])),
                {}));

    }, function (error) {
        console.log("Error: ", error.code, " Message: ", error.message);
        deferred.cancel();
    });
});