Using a LabelLayer on map.graphics?

DuncanNisbett · ‎05-29-2014

All examples I've seen when using the LabelLayer shows using a feature layer. I'm trying to figure out in my app is can I use the map.graphics layer as the layer set for the Label layer? When I try it now it fails and I'm wondering if there's a way to make it work. I was hoping to use this as I've used it in the past with a featurelayer for users adding graphics and it was great to show titles on the screen. When a graphic was added, boom, the label was shown. When a graphic removed, boom, the correlating label was also removed.

I know I can go old school and manually add text symbols to the map.graphics layer. But I was hoping for a more elegant solution if possible.

var symbol = new TextSymbol(); var renderer = new SimperRenderer(symbol); var labelLayer = new LabelLayer(); labelLayer.addFeatureLayer(map.graphics, renderer, "${TITLE}"); map.addLayer(labelLayer);

JakeSkinner · ‎05-30-2014

Here is the 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></title>     <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.9/js/esri/css/esri.css">     <style>       html, body, #map {         height: 100%; width: 100%; margin: 0; padding: 0;        }     </style>      <script src="//js.arcgis.com/3.9/"></script>     <script>       var map;            require([         "esri/map",          "esri/geometry/Extent",         "esri/layers/FeatureLayer",         "esri/layers/GraphicsLayer",          "esri/symbols/SimpleLineSymbol",         "esri/symbols/SimpleFillSymbol",         "esri/symbols/TextSymbol",         "esri/renderers/SimpleRenderer",          "esri/layers/LabelLayer",         "esri/geometry/Polygon",         "esri/InfoTemplate",         "esri/graphic",                  "dojo/on",          "esri/Color",         "dojo/domReady!"       ], function(         Map, Extent, FeatureLayer, GraphicsLayer,         SimpleLineSymbol, SimpleFillSymbol, TextSymbol, SimpleRenderer,         LabelLayer, Polygon, InfoTemplate, Graphic,         on,         Color       ) {          map = new Map("map", {           center: [-75.249, 38.485],           zoom: 9,           basemap: "gray"       });                          var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,           new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,           new Color([255,0,0]), 2),new Color([255,255,0,0.25])         )                            var singleRingPolygon = new Polygon([[-75.77, 38.45], [-75.77, 38.7], [-75.11, 38.7], [-75.11, 38.45], [-75.77, 38.45]])         var attr = {"Area":"Southern Delaware"};         var infoTemplate = new InfoTemplate("Location","Area: ${Area}");         var gra = new Graphic(singleRingPolygon, sfs, attr, infoTemplate);                 graphicsLayer = new GraphicsLayer();         graphicsLayer.add(gra);         map.addLayer(graphicsLayer);          // create a text symbol to define the style of labels         var textColor = new Color("#666");         var textLabel = new TextSymbol().setColor(textColor);         textLabel.font.setSize("14pt");         textLabel.font.setFamily("arial");         textLabelRenderer = new SimpleRenderer(textLabel);         var labels = new LabelLayer({ id: "labels" });                  labels.addFeatureLayer(graphicsLayer, textLabelRenderer, "${Area}");                  map.addLayer(labels);       });     </script>   </head>   <body>     <div id="map"></div>   </body> </html>

View solution in original post

JakeSkinner · ‎05-30-2014

Hi Duncan,

Not sure if this is a valid solution for you, but I was able to get this to work by adding the graphics to a GraphicsLayer. You can see an example here.

BhavinSanghani · ‎05-30-2014

The link you gave is not working for me. Can you paste your code here? It seems it's JSFiddle issues in their code.

JakeSkinner · ‎05-30-2014

Here is the 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></title>     <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.9/js/esri/css/esri.css">     <style>       html, body, #map {         height: 100%; width: 100%; margin: 0; padding: 0;        }     </style>      <script src="//js.arcgis.com/3.9/"></script>     <script>       var map;            require([         "esri/map",          "esri/geometry/Extent",         "esri/layers/FeatureLayer",         "esri/layers/GraphicsLayer",          "esri/symbols/SimpleLineSymbol",         "esri/symbols/SimpleFillSymbol",         "esri/symbols/TextSymbol",         "esri/renderers/SimpleRenderer",          "esri/layers/LabelLayer",         "esri/geometry/Polygon",         "esri/InfoTemplate",         "esri/graphic",                  "dojo/on",          "esri/Color",         "dojo/domReady!"       ], function(         Map, Extent, FeatureLayer, GraphicsLayer,         SimpleLineSymbol, SimpleFillSymbol, TextSymbol, SimpleRenderer,         LabelLayer, Polygon, InfoTemplate, Graphic,         on,         Color       ) {          map = new Map("map", {           center: [-75.249, 38.485],           zoom: 9,           basemap: "gray"       });                          var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,           new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,           new Color([255,0,0]), 2),new Color([255,255,0,0.25])         )                            var singleRingPolygon = new Polygon([[-75.77, 38.45], [-75.77, 38.7], [-75.11, 38.7], [-75.11, 38.45], [-75.77, 38.45]])         var attr = {"Area":"Southern Delaware"};         var infoTemplate = new InfoTemplate("Location","Area: ${Area}");         var gra = new Graphic(singleRingPolygon, sfs, attr, infoTemplate);                 graphicsLayer = new GraphicsLayer();         graphicsLayer.add(gra);         map.addLayer(graphicsLayer);          // create a text symbol to define the style of labels         var textColor = new Color("#666");         var textLabel = new TextSymbol().setColor(textColor);         textLabel.font.setSize("14pt");         textLabel.font.setFamily("arial");         textLabelRenderer = new SimpleRenderer(textLabel);         var labels = new LabelLayer({ id: "labels" });                  labels.addFeatureLayer(graphicsLayer, textLabelRenderer, "${Area}");                  map.addLayer(labels);       });     </script>   </head>   <body>     <div id="map"></div>   </body> </html>

DuncanNisbett · ‎05-30-2014

Here is the code:

Brilliant! I have no idea why I never noticed that within the API documentation. But that code snippet was perfect. I'd buy you a beer if I could.