Select to view content in your preferred language

Label Class Issues

1196
10
Jump to solution
12-01-2017 01:26 PM
jaykapalczynski
Frequent Contributor

I am using API 3.22

Trying this...It works but HaloColor, HaloSize, Vertical Alignment and Horizontal Alignment dont seem to be working..

Thoughts?

var labelClass = new LabelClass({  
   labelExpressionInfo: {"value": "{STREET_NAME}"},  
   symbol: {  
    "type": "esriTS",  
    "color": [225,225,0],  
    "font": {  
      "family": "Arial",
      "haloColor": "#FF0000",
      "haloSize": "3.25px",                 
      "size": "8px",
      "verticalAlignment": "middle",  
      "horizontalAlignment": "center"            
    }  
   }  
});      
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Jay,

The whole size vs halo size thing is just paying attention to the doc. The Font Class has size property and it expects <Number | String> size, where TextSymbol  haloSize expects <Number> haloSize. Ya it propably would be easier is they stuck to one way or the other.

Because you are attempting to do all the settings of your labelClass in JSON you need to use the REST API's expected values:

http://help.arcgis.com/en/arcgisserver/10.0/apis/rest/symbol.html#ts 

So wieght property in JSON would be "bolder":

            var lc = new LabelClass({
              labelExpressionInfo: {"value": "{TripID}"},
              symbol: {
                "type": "esriTS",
                "color": [225,225,0],
                "haloColor": [225,0,0],
                "haloSize": 3.25,
                "verticalAlignment": "middle",
                "horizontalAlignment": "center",
                "font": {
                  "family": "Arial",
                  "size": "10px",
                  "weight": "bolder"
                }
              }
            });

View solution in original post

0 Kudos
10 Replies
RobertScheitlin__GISP
MVP Emeritus

Jay,

   That is because those properties are NOT properties of font where you have them. They are properties of TextSymbol.

var labelClass = new LabelClass({
   labelExpressionInfo: {"value": "{STREET_NAME}"},
   symbol: {
    "type": "esriTS",
    "color": [225,225,0],
    "haloColor": "#FF0000",
    "haloSize": "3.25px",
    "verticalAlignment": "middle",
    "horizontalAlignment": "center",
    "font": {
      "family": "Arial",
      "size": "8px"
    }  
   }  
});      
0 Kudos
jaykapalczynski
Frequent Contributor

Still no Halo (should be Red) or alignment (should be middle on the vertical access)

Made the halo 20 and nothing changed.

0 Kudos
jaykapalczynski
Frequent Contributor

Looking here...LabelClass | API Reference | ArcGIS API for JavaScript 3.22 

But was somewhere else where It had info on Vertical and Horizontal properties.  The above location dosent mention these...

Where is a list of all the properties I can set?  Info seems to scattered all over the API website

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Jay,

   It is the TextSymbol that has those properties:

TextSymbol | API Reference | ArcGIS API for JavaScript 3.22 

0 Kudos
jaykapalczynski
Frequent Contributor

why doesnt the Halo work then?  Confused...you see my image above?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

NOTE: Known limitations when working with the text symbol halo:

  • IE 9 and below not supported.
  • Sub-pixel halo (i.e.
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Jay,

   This works fine for me:

            var lc = new LabelClass({
              labelExpressionInfo: {"value": "{STREET_NAME}"},
              symbol: {
                "type": "esriTS",
                "color": [225,225,0],
                "haloColor": [255,0,0],
                "haloSize": "3",
                "verticalAlignment": "middle",
                "horizontalAlignment": "center",
                "font": {
                  "family": "Arial",
                  "size": "8px"
                }
              }
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
jaykapalczynski
Frequent Contributor

Thanks guys for your input...just a note I am testing on Chrome

I see where I was incorrect on the Halo Size...I was using "3px"  not "3".

Was confused here because the Size uses "px" to denote the pixel size...thought the halo size was the same.  Very stupid if you ask me.  If talking size stick to one or the other, px or no px.

LAST QUESTION:  I added weight property and again nothing happened...this is a property of FONT as I see the documentation reading.

var labelClass = new LabelClass({
   labelExpressionInfo: {"value": "{STREET_NAME}"},
   symbol: {
    "type": "esriTS",
    "color": [0,0,0],
    "haloColor": [255,255,255],
    "haloSize": "1",
    "verticalAlignment": "middle",
    "horizontalAlignment": "center",
    "font": {
      "family": "Arial",
      "size": "10px",
      "weight": "WEIGHT_BOLDER"
    }  
   }  
});  
     ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Jay,

The whole size vs halo size thing is just paying attention to the doc. The Font Class has size property and it expects <Number | String> size, where TextSymbol  haloSize expects <Number> haloSize. Ya it propably would be easier is they stuck to one way or the other.

Because you are attempting to do all the settings of your labelClass in JSON you need to use the REST API's expected values:

http://help.arcgis.com/en/arcgisserver/10.0/apis/rest/symbol.html#ts 

So wieght property in JSON would be "bolder":

            var lc = new LabelClass({
              labelExpressionInfo: {"value": "{TripID}"},
              symbol: {
                "type": "esriTS",
                "color": [225,225,0],
                "haloColor": [225,0,0],
                "haloSize": 3.25,
                "verticalAlignment": "middle",
                "horizontalAlignment": "center",
                "font": {
                  "family": "Arial",
                  "size": "10px",
                  "weight": "bolder"
                }
              }
            });
0 Kudos