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

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?

Find more posts tagged with

Accepted answers

All comments

BrendanMadden1

Thanks for pointing this out Robert. I'm glad it's officially supported now.

RobertScheitlin__GISP

FYI: JS API 3.15 now has halo support

ENH-000088309: Added support for TextSymbol halo.

AndyMorgan1

Brilliant. Thank you for sharing, Brendan! I replaced my code to use the LabelClass with halos. It now includes labels and a background when exporting to PDF using PrintTask, unlike LabelLayer class method (per my previous post above). Works for IE 10 and 11.0.96.

BrendanMadden1

I know this is an old thread, but I found a solution that doesn't require hacky workarounds and works in all browsers, and I thought I'd share for those interested. Just a note that as far as I can tell, this method only works with dynamic map service layers where the service has 'Supports dynamic layers' set to true.

Using Chrome's dev console, I looked at the response from an esriRequest on a layer that had the halo effect applied to its labels when published from ArcGIS Desktop. Those labels rendered correctly in my app, so I figured there had to be a way to accomplish it programatically as well.

Here was the relevant part of the returned response:

Notice the symbol 'type' is 'esriTS', not 'textsymbol', and there are properties for 'haloColor' and 'haloSize.' I ran with that in my code and rather than use the standard TextSymbol for my label's symbol, I created my own symbol instead and made the 'type' be 'esriTS', and added the properties for 'haloColor' and 'haloSize.'

var labelClass = new LabelClass({

labelExpression: '[CULVERTID]',

labelPlacement: 'above-along',

symbol: {

'type': 'esriTS',

'color': [0,0,0,255],

'haloColor': [255,255,255,255],

'haloSize': 2,

'font': {

'family': 'Arial',

'size': 12,

'weight': 'bold'

}

});

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

This worked for me. Before and after label change shown below.

Before: (default labelling from the map service)

After (programatically changed labels):

Here's a fiddle as well (this is a modified fork of an existing fiddle: Edit fiddle - JSFiddle )

AndyMorgan1

Similar to Rahul Metangale's post above, I found SVG rectangles to be the best approach. This works well to remove & re-create the label background each time the map is redrawn (after pan or zoom).

function turnOnLabels() {
 var labelLayerNode = labelLyr.getNode();
  
 if (!labelLayerNode || labelLayerNode === null) {
  return;
 }
 var textLabels = query("text", labelLayerNode);
 array.forEach(textLabels, function (label) {
  var txtContent = label.textContent;
  label.textContent = txtContent.replace("null", "");
  var lBox = label.getBBox();
  label.innerHTML = label.textContent
  var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  rect.setAttribute("x", lBox.x);
  rect.setAttribute("y", lBox.y);
  rect.setAttribute("width", lBox.width + 1);  //added a little margin
  rect.setAttribute("height", lBox.height - 2);  //trimmed down margin
  rect.setAttribute("fill", "rgba(255,255,255,0.9)");  //opacity of 0.9 can be adjusted
  labelLayerNode.insertBefore(rect, label);
 });
}

function turnOffLabels() {
 var labelLayerNode = labelLyr.getNode();
 if (!labelLayerNode) { return; }
 var elements = labelLayerNode.querySelectorAll("rect");
 for (var i = 0; i < elements.length; ++i) {
  var elem = elements;
  labelLayerNode.removeChild(elem);
 }
}

app.map.on('update-start', function () {
 turnOffLabels();
});

app.map.on('update-end', function () {
 turnOnLabels();
});

Edit: It works well enough for visual display on the screen, but I discovered these svg rectangles are lost when I export to PDF using PrintTask (esri/tasks/PrintTask). I am going to contact ESRI about this, but I would be interested in knowing if there is any workaround. Here is a JSFiddle example to illustrate the problem: http://jsfiddle.net/r2nnrL3t

Edit #2: I confirmed with ESRI support services this is a known issue:

The bug id is NIM090851 : Export Web Map Task cannot print a map using SVG symbol types in JavaScript API 3.4. The status of the bug is set to "Tech review Complete" which means that the bug has been reviewed by the Technical Leads and now it's being reviewed by the Product Engineers, and then it will be assigned to the development team for a fix.

Therefore, my solution is to use LabelClass with halo color and halo size properties (Brendan Madden's solution below). It is compatible with PrintTask and gets the job done to provide a background for contrast.

TracySchloss

Too bad, but at least you've verified there are still issues with text-shadows in IE 11. I wondered because I generated a text shadow on plain HTML text elements in my project, it just didn't work with text symbols.

khutchins

Based on a few google searches it seems like there are issues with text-shadow support on Svg for IE. Can't find anything definitive to link here. Tried a few workarounds but couldn't get anything to show the text shadow for IE11 but I'm not a css expert so perhaps someone else has struggled with this in IE and will have a solution.

TracySchloss

In the cited link for adding CSS compatible text shadows, the example for IE doesn't display a shadow in either IE or Chrome. It's from 2005 and mentions IE 5 and 6. At least it confirms that IE in general is picky about textshadows.

kenbuja

I'm seeing this also on IE 11.0.9600.18015

TracySchloss

This is how it looks for me:

khutchins

Text Shadow is only supported for IE10 and 11. Here's a chart that lists support:

http://caniuse.com/#feat=css-textshadow

Haven't tested this but for earlier versions of IE you may want to try the filter approach outlined in this article:

Creating Cross Browser Compatible CSS Text Shadows

TracySchloss

It doesn't work for me in IE, just Chrome. Unfortunately IE is our default browser.

khutchins

Tracy Schloss the code below works for me and adds a text shadow to the labels:

<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
    text[fill="rgb(127, 82, 83)"]{
      text-shadow: 1px 1px #DCE1E3;
    }
  </style>
  
  <script src="http://js.arcgis.com/3.14/"></script>
  <script>


    require([
      "esri/map", 
      "esri/layers/FeatureLayer",
      "esri/layers/LabelClass",
      "esri/symbols/TextSymbol",
      "dojo/domReady!"], function(
        Map, FeatureLayer,
        LabelClass, TextSymbol
      ) {
      var map = new Map("mapDiv", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "dark-gray",
        showLabels: true
      });


      var states = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",{
        outFields: ["*"]
      });
      map.addLayer(states);




      // Setup label properties (SUB_REGION)
      var statesLabels = new LabelClass({
        labelExpressionInfo: {"value": "{STATE_NAME}"},
        symbol: {
         "type": "esriTS",
         "color": [127,82,83,255],
         "font": {
          "family": "Arial",
          "size": "16px"
         }
        }
      });


      // Apply label info to the feature layer 
      states.setLabelingInfo([statesLabels]);


    });
  </script>


</head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>

TracySchloss

Did you ever have a resolution to this? I am using a LabelLayer and set a className and a style, but that doesn't work either.

var cityLabelLayer = new LabelLayer({

id: "cityLabels",

className:"cityLabel"

});

CSS:

.cityLabel {

text-shadow: 1px 1px 1px blue, 1px -1px 1px blue, -1px 1px 1px blue, -1px -1px 1px blue;

}

NathanaelVaughan

This is wonderful and elegant in Chrome, but does not work in IE - anyone have another suggestion for IE? I attmpted to set the "glow" attribute, but haven't had any luck so far.

BrandonFlessner

Thanks for the sample! It worked great when the map initially loads up, but produced some funky results once I started panning and zooming. Any ideas on how to remove or redraw the rectangles as the user pans and zooms?

(FYI, I had to change the '<script src="http://js.arcgis.com/3.13/"></script>' to include the 'http:' to get the sample running.)

DJurgella

I combined Rahul Metangale's and Oren Gal's ideas and came up with something that seems to be working well:

on(myLabelLayer, 'graphic-node-add', function (graphic) {

graphic.node.style.textShadow = "1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white";

});

This creates four offset and slightly blurred shadows around each text label and creates a nice halo effect.

RahulMetangale2

I was able to achieve this with following code. Working sample attached along with this post. Code need some enhancement to clear the background on pan and zoom.

//Import on and domConstruct modules
require([      
"dojo/on",                            
"dojo/dom-construct",
      ], function(on, domConstruct)

//Listen for 'graphic-node-add event on label layer or graphics layer
//Create a SVG rectangle and place it before the text node.
on(labels, 'graphic-node-add', function (graphic) {            
var SVGRect = graphic.node.getBBox();          
var rect = document.createElementNS("http://www.w3.org/2000/svg",
"rect");            
rect.setAttribute("x", SVGRect.x);            
rect.setAttribute("y", SVGRect.y);            
rect.setAttribute("width", SVGRect.width);  
rect.setAttribute("height",SVGRect.height);          
rect.setAttribute("fill", "yellow");            
domConstruct.place(rect, graphic.node, "before");        
});

LabelLayer.html.zip

2014-02-24_8-47-59.png

OrenGal

one line:$("#myLayerId_layer").find('text').css('text-shadow', 'black 0.1em 0.1em 0.2em');

OrenGal

Run on all texts in the graphic layer and add shadow css to them:

var texts = $("#myGraphicsLayerName text");

$.each(texts, function(index, text) {

$(text).css('text-shadow', 'black 0.1em 0.1em 0.2em');

}

});

Oren

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.

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.

DK5

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

DanNarsavage_IDWR

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
}

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

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

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.

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

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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