nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Using a LabelLayer on map.graphics?

DuncanNisbett

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);

Vind meer berichten getagd met

Accepted answers

jskinner

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>

All comments

DuncanNisbett

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.

jskinner

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>

BhavinSanghani

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

jskinner

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.