Javascript label graphic points

3025
4
Jump to solution
09-29-2014 07:32 AM
deleted-user-yA_w_FC9FKe5
New Contributor III


I have successfully been able to query my results and put them in a table and show them as points on my map thanks to a lot of help from these forums.

Now what I would like to do is create another graphics layer that just has labeling for these points but I am struggling with this.  I've searched endlessly for a way to do this.  I've looked through the samples I've found something called a labellayer but I don't know how to apply that.  I would think I would be able to use something like what I did for the graphics below but instead of a symbol use text.  I created a StoresResultsLayer_Labels as you can see below.  I'm sure this is simple but it is not for me for some reason.  Any help is greatly appreciated.

//My layers loaded at the start of the application but blank

StoresResultsLayer = new GraphicsLayer();
StoresResultsLayer.id = 'StoresResults';  
map.addLayer(StoresResultsLayer,0);

StoresResultsLayer_Labels = new GraphicsLayer();
StoresResultsLayer_Labels.id = 'StoresResults_Labels';  
map.addLayer(StoresResultsLayer_Labels,0);

//Some of my code from my function

var symbol = new esri.symbol.SimpleMarkerSymbol({ 

"color": [255,255,0,255], 

"size": 11, 

"xoffset": 1, 

"yoffset": -2, 

"type": "esriSMS", 

"style": "esriSMSCircle", 

"outline": {   

"color": [0,0,0,255],   

"width": 3,   

"type": "esriSLS",   

"style": "esriSLSSolid"  }});


   var dataForGrid = [];
var temp = "";
    //remove all graphics on the maps graphics layer   
    StoresResultsLayer.clear();
     //Performance enhancer - assign featureSet array to a single variable.   
     var resultFeatures = featureSet.features;   
     //Loop through each feature returned   

        
     for (var i=0, il=resultFeatures.length; i<il; i++) {     
     //Get the current feature from the featureSet.     
     //Feature is a graphic     
     var graphic = resultFeatures;     
     resultFeatures.setSymbol(symbol);
    
    
  StoresResultsLayer.add(resultFeatures);
  StoresResultsLayer.show();

0 Kudos
1 Solution

Accepted Solutions
by Anonymous User
Not applicable

Hi Michael -

It should in fact be pretty simple for you since you already have dealt with adding the graphics. You need to do 3 things: create a label renderer, create a label layer, and then add the features to the label layer. A lot of the information is here: labellayer-amd | API Reference | ArcGIS API for JavaScript.

// Make sure you include all of the modules here in your JavaScript 'require' function (e.g. 'esri/layers/LabelLayer',

// 'esri/symbols/TextSymbols' etc)

// Create label renderer

var labelParams = new TextSymbol({

        "type" : "esriTS",

        "color" : [0, 0, 153, 255],

        "font" : {

            "size" : 12,

            "style" : "normal",

            "weight" : "normal"

        }

    });

var labelRenderer = new SimpleRenderer(labelParams);

// Create the empty label layer

graphicsLabelLayer = new LabelLayer({

        id : "graphicsLabels"

});

// Associate the label layer with the graphics you want to label

// Substitute in the field name you want to use to label your features

graphicsLabelLayer.addFeatureLayer(StoresResultsLayer , labelRenderer, '{field_name}');

View solution in original post

0 Kudos
4 Replies
by Anonymous User
Not applicable

Hi Michael -

It should in fact be pretty simple for you since you already have dealt with adding the graphics. You need to do 3 things: create a label renderer, create a label layer, and then add the features to the label layer. A lot of the information is here: labellayer-amd | API Reference | ArcGIS API for JavaScript.

// Make sure you include all of the modules here in your JavaScript 'require' function (e.g. 'esri/layers/LabelLayer',

// 'esri/symbols/TextSymbols' etc)

// Create label renderer

var labelParams = new TextSymbol({

        "type" : "esriTS",

        "color" : [0, 0, 153, 255],

        "font" : {

            "size" : 12,

            "style" : "normal",

            "weight" : "normal"

        }

    });

var labelRenderer = new SimpleRenderer(labelParams);

// Create the empty label layer

graphicsLabelLayer = new LabelLayer({

        id : "graphicsLabels"

});

// Associate the label layer with the graphics you want to label

// Substitute in the field name you want to use to label your features

graphicsLabelLayer.addFeatureLayer(StoresResultsLayer , labelRenderer, '{field_name}');

0 Kudos
deleted-user-yA_w_FC9FKe5
New Contributor III

Hi Sarah and thanks for the quick reply.  I've tried messing around with your code  and this example:

Label Layer | ArcGIS API for JavaScript but for the life of me I can't get it working.  I wonder if it is because I am using a graphics layer and not a feature layer?

Basically I am filtering out a layer and then presenting the results as graphics.  I would then like to have labels for each of the graphics so they know the points name.  (StoreName) in this case.

0 Kudos
deleted-user-yA_w_FC9FKe5
New Contributor III

This lead me in the right direction.  I just created another feature layer with opacity set to 00 and then used that to label.  Not the best of solutions but hey it works. 

0 Kudos
by Anonymous User
Not applicable

You know, in looking at the documentation it does seem to require a feature layer! I hadn't noticed that before, and I didn't test it, but I think you made the right call there.

0 Kudos