Background or highlight on textSymbol

[JasonMiller1]

I have a map set up puts dots on the map, and draws lines connecting the dots to create a route.  Each dot has a textSymbol next to it that I'm using to label each dot for the user.  The problem is that with all the stuff in the background, it can be hard to read those labels sometimes. 

I'm wondering if there's any way to put a background behind the textSymbol to help it stand out.  I know about infoWindows, but I'm already using those when you click on the dot to give you more information. 

Here's a snippet from my code that runs when it's looping through the route and putting the dots on the map.  This is the portion that adds the labels.

...
font = new esri.symbol.Font("10pt", esri.symbol.Font.STYLE_NORMAL,
    esri.symbol.Font.VARIANT_NORMAL,esri.symbol.Font.WEIGHT_NORMAL,"Verdana");
...
var textSymbol =  new esri.symbol.TextSymbol(feature.attributes["LABEL"]).setColor(new dojo.Color([255, 0, 0])).
 setOffset(30, 0).setFont(font).setKerning(true);

var point = new esri.geometry.Point(feature.attributes["NNLL_LONG_DEC"], feature.attributes["NNLL_LAT_DEC"], map.spatialReference);

map.graphics.add(new esri.Graphic(point, textSymbol));
...

Any ideas?

[HemingZhu]

I have a map set up puts dots on the map, and draws lines connecting the dots to create a route.  Each dot has a textSymbol next to it that I'm using to label each dot for the user.  The problem is that with all the stuff in the background, it can be hard to read those labels sometimes. 

I'm wondering if there's any way to put a background behind the textSymbol to help it stand out.  I know about infoWindows, but I'm already using those when you click on the dot to give you more information. 

Here's a snippet from my code that runs when it's looping through the route and putting the dots on the map.  This is the portion that adds the labels.

...
font = new esri.symbol.Font("10pt", esri.symbol.Font.STYLE_NORMAL,
    esri.symbol.Font.VARIANT_NORMAL,esri.symbol.Font.WEIGHT_NORMAL,"Verdana");
...
var textSymbol =  new esri.symbol.TextSymbol(feature.attributes["LABEL"]).setColor(new dojo.Color([255, 0, 0])).
 setOffset(30, 0).setFont(font).setKerning(true);

var point = new esri.geometry.Point(feature.attributes["NNLL_LONG_DEC"], feature.attributes["NNLL_LAT_DEC"], map.spatialReference);

map.graphics.add(new esri.Graphic(point, textSymbol));
...

Any ideas?

I am not sure that you could add backgroud to textSymbol. However, you can make it standing out by setting up highlight font, certain angle or decoration (overline or underline). Note: decoration might not work on certain browsers.

[JasonMiller1]

Any idea how to set up the highlight font? I've seen that effect on an esri map that was written using the web ADF version, but not the Javascript version. I've checked out the API for font and for a textSymbol and neither one mentions a highlight property.

[HemingZhu]

Any idea how to set up the highlight font? I've seen that effect on an esri map that was written using the web ADF version, but not the Javascript version. I've checked out the API for   font and for a   textSymbol and neither one mentions a highlight property.

Simulate a highlight property by setting font color to (0, 255, 255) similar to selected feature in ArcMap.

[MarkHoover]

That wasn't what he was after, hzhu.  He wants something like the 'Halo Mask' found in ArcDesktop.  I can't figure out a way to cheat this either, would be a nice feature to have.

[HemingZhu]

That wasn't what he was after, hzhu.  He wants something like the 'Halo Mask' found in ArcDesktop.  I can't figure out a way to cheat this either, would be a nice feature to have.

How about add a rectangle polygon graphic behind the text symbol to simulate the background (caculate the width and length).

[DanNarsavage]

Been a long time since this thread was spawned & maybe there's a better way to deal with this by now, but I couldn't find it so I hacked a resolution by adding THREE text graphics for every label I wanted to place in the map: two of them act as a highlight/mask...

First to create the three slightly different symbols:

var TextSymbolJson = {  // This is the main readable label
    "type": "esriTS",
    "color": [0, 0, 0, 255],
    "verticalAlignment": "middle",
    "horizontalAlignment": "center",
    "font": {
        "family": "Arial",
        "size": 16,
        "style": "normal",
        "weight": "bold",
        "decoration": "none"
    }
};

// This one is white, partially transparent, a bit bigger & bolder, and offset south 1 pixel from the main label (1st part of the mask)
var TextHighlightJson1 = Object.create(TextSymbolJson);
TextHighlightJson1.color = [255, 255, 255, 245];
TextHighlightJson1.yoffset = -1;
TextHighlightJson1.font.size = 18;
TextHighlightJson1.font.weight = "bolder";

// This one is just like the one above except offset north 1 pixel (2nd part of the mask)
var TextHighlightJson2 = Object.create(TextHighlightJson1);
TextHighlightJson2.yoffset = 1;

Then to use those symbols ...

for (feature in ListOfFeaturesToLabel) {
      AddNumText = feature.attributes.PROPADDNUM;
      AddNumPoint = feature.geometry.getExtent().getCenter();
      var TS = new esri.symbol.TextSymbol(TextSymbolJson);
      TS.setColor(layerTextColor);
      TS.setText(AddNumText);
      var labelPointGraphic = new esri.Graphic(AddNumPoint, TS);
      var highlightSymbol1 = new esri.symbol.TextSymbol(TextHighlightJson1);
      highlightSymbol1.setText(AddNumText);
      var highlightGraphic1 = new esri.Graphic(AddNumPoint, highlightSymbol1);
      var highlightSymbol2 = new esri.symbol.TextSymbol(TextHighlightJson2);
      highlightSymbol2.setText(AddNumText);
      var highlightGraphic2 = new esri.Graphic(AddNumPoint, highlightSymbol2);
      map.graphics.add(highlightGraphic1);
      map.graphics.add(highlightGraphic2);
      map.graphics.add(labelPointGraphic);      // Make sure to add the main label to the map last so it's on top of its mask
}

[DK5]

Anyone implement the rectangle polygon graphic behind the textsymbol?  Wondering how to go about sizing that correctly.  Any suggestions?

[JohnGrayson]

It's been a while since I tried this, but if you have a Graphic that uses a TextSymbol:

1) call map.toScreen() to get x,y screen coordinates of graphic; you might have to make adjustments based on the symbol.xoffset and symbol.yoffset.

2) call graphic.getDojoShape().getTextWidth() for the width, and graphic.symbol.font.size for the height (you might have to make additional adjustments if size is not pixel based).  Then add the desired padding.  Finally you might have to make additional offset adjustments if any of the coordinates are outside of the map extent.

3) create screen extent based on x, y, width, height, then call map.toMap() to get back real-world coordinates of bounding box.

I believe there were a few other minor tweaks that were specific to what I was doing in the app, but this is the overall concept.

[MarkusRuottinen]

We also have this same problem. Graphic text is difficult to read on top of background map.  This is often needed when showing geocoded address on top of map.

Feature request for JavaScript API . Add halo, backgound and highlight options to textSymbol.