Custom Labels for Graphics ? (AMD)

MarkCunningham1 · ‎03-19-2014

I am trying to add custom labels to graphics points. Each graphic having its own unique label. Thanks for the help.
--------------------------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Basemap Toggle</title>
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }

</style>
<script src="//js.arcgis.com/3.8/"></script>
<script>
var map;
    require([
      "esri/map",
      "dojo/domReady!"
    ], function(
      Map
    ) {

    var map = new Map("map", {
        center: [-81.057, 34.005],
        zoom: 7,
        basemap: "national-geographic",
        fadeOnZoom: true,
        slider: false,
        nav: false,
   wrapAround180: true,
      });

        //------Add Point Graphic------------------------------

   require(["dojo/_base/Color","esri/lang","esri/graphic","esri/layers/GraphicsLayer","esri/renderers/SimpleRenderer",
        "esri/geometry/Point","esri/tasks/FeatureSet","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol", "dojo/domReady!" ],
    function( Color, esriLang, Graphic, GraphicsLayer, SimpleRenderer, Point, FeatureSet, SimpleMarkerSymbol, SimpleLineSymbol){

    var facilityPointSymbol = new SimpleMarkerSymbol(
      SimpleMarkerSymbol.STYLE_CIRCLE, 15, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([60,50,255]), 2 ),new Color([169,250,20,0.6]));

var facilitiesGraphicsLayer = new GraphicsLayer();
   var facilityRenderer = new SimpleRenderer(facilityPointSymbol);
   facilitiesGraphicsLayer.setRenderer(facilityRenderer);


map.addLayer(facilitiesGraphicsLayer);

facilitiesGraphicsLayer.add(new Graphic(new Point(-83.538,33.063,map.spatialReference)));
facilitiesGraphicsLayer.add(new Graphic(new Point(-82.959,34.025,map.spatialReference)));
facilitiesGraphicsLayer.add(new Graphic(new Point(-81.039,35.025,map.spatialReference)));
facilitiesGraphicsLayer.add(new Graphic(new Point(-81.099,36.001,map.spatialReference)));

   var facilities = new FeatureSet();
   facilities.features = facilitiesGraphicsLayer.graphics;

      });
   //---End Point Graphic--------


    });
</script>
</head>
<body>
<div id="map" class="map">

</div>
</body>
</html>

JakeSkinner · ‎03-19-2014

Hi Jamie,

Take a look at using the TextSymbol class. Here is an example.

View solution in original post

JakeSkinner · ‎03-19-2014

Hi Jamie,

Take a look at using the TextSymbol class. Here is an example.