Label graphics added to graphics layer not displaying

2001
6
Jump to solution
03-16-2017 06:06 AM
KenGalluccio
New Contributor III

I have some code that will geocode a point and display it on the map.  I would like to label the point with the address.

I create a label graphic using the coordinates of the point and the address, add graphic to the graphics layer, but it does not display on the map.

Not sure what I am missing.  

Here is the section of code:

               fromlocator.on("location-to-address-complete", function(evt) {
                    //mapMain.graphics.remove(fGraphic);
                    var attr;
                    if (evt.address.address) {
                    var fromAddress = evt.address.address;
                    alert(fromAddress.Address + ", " + fromAddress.City + ", " + fromAddress.Region, ", " + fromAddress.Postal);
                         if (fromAddress){
                              document.getElementById("fromAddr").value = fromAddress.Address + ", " + fromAddress.City + ", " + fromAddress.Region, ", " + fromAddress.Postal;
                              fPoint = new Point(evt.address.location, new SpatialReference({ wkid: 4326 }));
                              attr = {
                                   "Address": fromAddress
                              };
                              
                              //Create point graphic from geocoded point, add to graphiclayer, add layer to map.
                              fGraphic = new Graphic(fPoint, fromGeocodeSymbol, attr);
                              graphicsLayer = new GraphicsLayer();
                              graphicsLayer.add(fGraphic);
                              mapMain.addLayer(graphicsLayer);
                              
                              // create a text symbol to define the style of labels
                              var textColor = new Color("#666");
                              var textLabel = new TextSymbol(fromAddress)
                              textLabel.setColor(textColor);
                              textLabel.font.setSize("14pt");
                              textLabel.font.setFamily("arial");
                              textLabelRenderer = new SimpleRenderer(textLabel);               
                              
                              //create label to add to graphic layer
                              var testlabel = new Graphic(fPoint, textLabel)
                              
                              //add label to graphics layer
                              mapMain.graphics.add(testlabel);
                              
                              zoomToAddresses();                    
                              getZone(fPoint, "from");            
                         }
                    }
               });
0 Kudos
1 Solution

Accepted Solutions
KenGalluccio
New Contributor III

Figured it out.  I was referencing an object when creating the textsymbol.

Needed to replace fromAddress with fromAddress.Address:

var textSymbol = new TextSymbol(fromAddress.Address, font, new Color([0, 0, 0]));

View solution in original post

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Emeritus

Ken,

   Does your map constructor have the showLabels property set to true?

https://developers.arcgis.com/javascript/3/jsapi/map-amd.html#map1-showlabels 

0 Kudos
KenGalluccio
New Contributor III

Yes it does:

// Create the map
mapMain = new Map("cpCenter", {
   basemap : "osm",
   extent : extentInitial,
   showLabels : true
});
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Ken,

   Can you try this bit of code for the actual label graphic portion:

var font = new Font("14pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL);
// create a text symbol
var textSymbol = new TextSymbol(fromAddress, font, new Color([0, 0, 0]));
var labelPointGraphic = new Graphic(fPoint, textSymbol);
// add the label point graphic to the map
mapMain.graphics.add(labelPointGraphic);
0 Kudos
KenGalluccio
New Contributor III

Same result, label is not displaying:

if (fromAddress){
     document.getElementById("fromAddr").value = fromAddress.Address + ", " + fromAddress.City + ", " + fromAddress.Region, ", " + fromAddress.Postal;
     fPoint = new Point(evt.address.location, new SpatialReference({ wkid: 4326 }));
     attr = {
          "Address": fromAddress
     };
     
     //Create point graphic from geocoded point, add to graphiclayer, add layer to map.
     fGraphic = new Graphic(fPoint, fromGeocodeSymbol, attr);
     //graphicsLayer = new GraphicsLayer();
     graphicsLayer.add(fGraphic);
     //mapMain.addLayer(graphicsLayer);

     var font = new Font("14pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL);
     // create a text symbol
     var textSymbol = new TextSymbol(fromAddress, font, new Color([0, 0, 0]));
     var labelPointGraphic = new Graphic(fPoint, textSymbol);
     // add the label point graphic to the map
     mapMain.graphics.add(labelPointGraphic);
     
     zoomToAddresses();                    
     getZone(fPoint, "from");            
}
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Ken,

   I am not seeing what you are missing then.

0 Kudos
KenGalluccio
New Contributor III

Figured it out.  I was referencing an object when creating the textsymbol.

Needed to replace fromAddress with fromAddress.Address:

var textSymbol = new TextSymbol(fromAddress.Address, font, new Color([0, 0, 0]));
0 Kudos